本篇内容:
- 1,字体属性:(font)
- 2,文本属性: (text)
- 3,背景属性:(background)
- 4,超链接属性:(a:)
- 5,列表属性:(list)
- 6,轮廓属性:(Outline)
- 7,表格属性:(table)
1,字体属性:(font)
1.1,font-style:(字体风格)
inherit; (继承);
oblique;(偏斜体)
italic;(斜体)
normal;(正常)
1.2, font-weight:(文字粗细)
100-900; (整百数值)
bold; (加粗)
bolder; (比加粗还要粗)
lighter; (细文字)
normal; (正常)
1.3,font-size:(字体大小)
20px; (数值)
inherit;
medium;
large;
larger;
x-large;
xx-large;
small;
smaller;
x-small;
xx-small;
1.4, font-family:(字体类型)
font-family:“字体1”, "字体2"; 如果后面有多个参数以逗号隔开,则后面的选项是前面的备选方案,即第一个字体不存在的时候选择第二个,如果第二个也不存在,依次选择后面的字体"宋体";
常用字体: (font-family):Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana
1.5, font-variant: (大写字体或者正常字体)
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
合写:font
合写font的时候的顺序参考:
/*1,size必须放在family前面,并且必须放在style和weight两个属性后面*/
/*2,style和weight可以省略,且这两个属性位置可以换*/
/*3,如果其他什么不对,可以看错误提示*/
font:900 italic 20px "Athelas";
2,文本属性: (text)
2.1,color:(字体颜色)
color_name 规定颜色值为颜色名称的颜色(比如 red)。
hex_number 规定颜色值为十六进制值的颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
inherit 规定应该从父元素继承颜色。
2.2,direction: (方向)
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
inherit 规定应该从父元素继承 direction 属性的值。
2.3,line-height: (行高)
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
2.4,letter-spacing: (字符间距,指每个字母之间的间距,后面的word-spacing是指单词之间的间距)
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间(允许使用负值)。
inherit 规定应该从父元素继承 letter-spacing 属性的值。
2.5, text-align: (字符对齐)
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
2.6,text-decoration:(字符装饰)
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
2.7,text-indent:(字符缩进)
length 定义固定的缩进。默认值:0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。
2.8,text-transform:(字符变形,用于控制元素中的字母大小写)
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
2.9, unicode-bidi: (设置文本方向)
2.10,white-space:(空白空间:设置元素中空白的处理方式)
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
2.11, word-spacing: (字间隔,属性增加或减少单词间的空白,前面的letter-spacing是指每个字母之间的间距)
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。
3,背景属性:(background)
3.1, background-attachment: (北京粘附:设置背景图像是否固定或者随着页面的其余部分滚动)
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
3.2, background-color: (背景颜色)
color_name 规定颜色值为颜色名称的背景颜色(比如 red)。
hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
transparent 默认。背景颜色为透明。
inherit 规定应该从父元素继承 background-color 属性的设置。
3.3,background-image:(背景图片)
url('URL') 指向图像的路径。
none 默认值。不显示背景图像。
inherit 规定应该从父元素继承 background-image 属性的设置。
3.4,background-position:(背景位置)
- 3.5,background-repeat:(背景重复)
- repeat 默认。背景图像将在垂直方向和水平方向重复。
- repeat-x 背景图像将在水平方向重复。
- repeat-y 背景图像将在垂直方向重复。
- no-repeat 背景图像将仅显示一次。
- inherit 规定应该从父元素继承 background-repeat 属性的设置。
4,超链接属性:(a:)
设置链接的样式
能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)
链接的特殊性在于能够根据它们所处的状态来设置它们的样式
-
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
实例
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
5,列表属性:(list)
5.1, list-style-image:(列表图片样式)
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。
5.2, list-style-position:(列表位置样式)
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。
5.3,list-style-type:(列表类型样式)
6,轮廓属性:(Outline)
6.1,outline-color:(轮廓颜色)
color_name 规定颜色值为颜色名称的轮廓颜色(比如 red)。
hex_number 规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的轮廓颜色(比如 rgb(255,0,0))。
invert 默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。
inherit 规定应该从父元素继承轮廓颜色的设置。
6.2,outline-style:(轮廓样式)
- 6.3,outline-width:(轮廓宽度)
- thin 规定细轮廓。
- medium 默认。规定中等的轮廓。
- thick 规定粗的轮廓。
- length数值 允许您规定轮廓粗细的值。
- inherit 规定应该从父元素继承轮廓宽度的设置。
7,表格属性:(table)
- 7.1, border-collapse: (边框塌陷,设置表格的边框是否被合并为一个单一的边框)
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。
7.2,border-spacing:(表格边框间距:设置分隔单元格边框的距离)
length length
规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
如果定义一个 length 参数,那么定义的是水平和垂直间距。
如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。inherit 规定应该从父元素继承 border-spacing 属性的值。
7.3,caption-side:(标题位置)
top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit 规定应该从父元素继承 caption-side 属性的值。
7.4,empty-cells:(空白单元格是否显示)
hide 不在空单元格周围绘制边框。
show 在空单元格周围绘制边框。默认。
inherit 规定应该从父元素继承 empty-cells 属性的值。
7.5,table-layout:(表格布局算法)
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。