div+css之CSS 文本设置 CSS 字体设置 CSS 列表设置 CSS 表格设置 css outline轮廓

本文主要是介绍div+css之CSS 文本设置 CSS 字体设置 CSS 列表设置 CSS 表格设置 css outline轮廓，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、CSS 文本设置：
CSS 文本属性
属性描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

2、CSS 字体设置：
CSS 字体属性
属性描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

3、CSS 列表设置：
CSS 列表属性(list)
属性描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset

列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。

4、CSS 表格设置：

表格边框： border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框：
table, th, td{border: 1px solid blue;}
折叠边框：border-collapse 属性设置将表格边框折叠为单一边框：
table{border-collapse:collapse;}
表格宽度和高度：通过 width 和 height 属性定义表格的宽度和高度。
table{width:100%;}
th{height:50px;}
表格文本对齐：text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td{text-align:right;}
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
td{height:50px;vertical-align:bottom;}
表格内边距：控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td{padding:15px;}
表格颜色：
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
table, td, th{border:1px solid green;}
th{background-color:green;color:white;}

5、css outline轮廓线设置：

ooutline：在一个声明中设置所有的轮廓的属性。

outline-color：设置轮廓的颜色。

outline-style：设置轮廓的样式。包括以下选项：
none：默认。定义无轮廓。
dotted：定义点状的轮廓。
dashed：定义虚线轮廓。
solid：定义实线轮廓。
double：定义双线轮廓。双线的宽度等于outline-width的值。
groove：定义3D凹槽轮廓。此效果取决于outline-color的值。
ridge：定义3D凹槽轮廓。此效果取决于outline-color的值。
inset：定义3D凹槽轮廓。此效果取决于outline-color的值。
outset：定义3D凹槽轮廓。此效果取决于outline-color的值。
inherit：规定应该从父元素继承轮廓样式的设置。
outline-width：设置轮廓的宽度。

thin：规定细轮廓。
medium：默认。规定中等的轮廓。
thick：规定粗轮廓。
length：数值。规定轮廓粗细的值。
inherit：规定应该从父元素继承轮廓样式的设置。

例：p {
border:red solid thin;
outline:#00ff00 dotted thick;

}

示例：

<html>
<head><link rel="stylesheet" type="text/css" href="css文件.css" />
<title></title>
</head>
<body>
<b>1、css文本设置:</b><br>
<p>dhsfbhegfbeyhwdfgghrt</p>
<h1>样式一</h1><br>
<h2>hello word</h2><br>
<h3>样式三 hello word</h3><br>
<h4>hello wordepwgrjsegjjdklgndsoglnuiotjreiolsfmdsl</h4><br>
<a href="http://www.baidu.com">hello word</a><br><br><br><b>2、css字体设置:</b><br>
<p>dhsfbhegfbeyhwdfgghrt</p>
<ul >
<li>qweersgtresrtgeswreswrf</li>
<li>asresfrserfesfresrfsefsfd</li>
</ul><h1>样式一</h1><br>
<h2>hello word</h2><br>
<h3>样式三 hello word</h3><br>
<h4>hello wordepwgrjsegjjdklgndsoglnuiotjreiolsfmdsl</h4><br>
<a href="http://www.baidu.com">hello word</a><br></body><html>

</pre><span style="font-size:14px;"><strong>css文件.css：</strong></span></p><p><span style="font-size:14px;"><strong></strong></span><pre name="code" class="css">p {text-indent: 5em;} /* 使所有段落的首行缩进 5 em */
h1{ text-align:center; }/* 水平对齐 */
h2{word-spacing:30px;} /* 改变字（单词）之间的标准间隔 */
h3 {letter-spacing: 20px}/* 字母间隔：修改的是字符或字母之间的间隔 */
h4 {text-transform: uppercase}/* 文本的大小写转换uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。 */
a {text-decoration:overline underline blink;}/* 文本装饰：underline 会对元素加下划线，overline 的作用在文本的顶端画一个上划线,line-through 在文本中间画一个贯穿线，blink 会让文本闪烁。 */
p {font-size:5em;}/* 使用 em 来设置字体大小：1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。 */
ul li {list-style-image : url(1.jpg)}/* 列表项图像:对各标志使用一个图像 */p {
border:red solid thin;
outline:#00ff00 dotted 10px;   /*  css outline轮廓线设置： */
}