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轮廓线设置: */
}


你可能感兴趣的:(div+css之CSS 文本设置 CSS 字体设置 CSS 列表设置 CSS 表格设置 css outline轮廓)