css属性-CSDN博客

本文链接：https://blog.csdn.net/xiaoma_666/article/details/100146611

1、css属性
1）每个css样式都必须由两部分组成：选择符（Selector）和声明（Decleration）
注：声明又包括属性（Properyt）和属性值（Value）
2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性；
3）css属性值：属性值包括法定属性值和常规的数值加单位或颜色值(colorValue)；如（25px）。

2、关于文本的css声明补充

文字大小：{font-size:value;}
说明：
a、属性值为数值型时，必须给属性值加单位 (px)，属性值为0时除外；
b、单位还可以是pt; 9pt=12px;
c、为了减小系统的字体显示差异，IE、Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小，默认值即1em,默认情况下，1em=16px, 0.75em=12px;
d、使用绝对大小关键字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
文本颜色：{color：#colorValue;}
十进制：0,1,2,3,4,5,6,7，8，9
二进制：0,1
八进制：0,1,2,3,4,5,6,7
十六进制：0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
R G B
00 00 00
Fa FF FF #faffff
CC CC CC
F0 F0 F0
0F 0F 0F #0f0f0f
ff 00 00
ff ff 00 #ff0
说明：用十六进制表示颜色值时前面要加#号；
每表示三原色的三组数字同时相同时，可以缩写为3位。
文本字体：{font-family:字体；}
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
说明：
当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
设置多个字体的语法：{font-family:字体1，字体2，字体3；}
注：当同时设置中英文字体的时候，中文字体要写在英文字体之后；
说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
加粗：{font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;}
说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，
一般400=normal，700=bold。
100-500 常规显示
600-900 加粗显示
倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;
设置小型的大写字母 {font-variant:normal/ small-caps ;}
取值为：normal(正常的字体)
small-caps(小型的大写字母字体)
说明：对小写英文内容起作用。
首行缩进：{text-indent：Value;}
说明：
（1）text-indent可以取负值；
（2）text-indent属性只对第一行起作用。
水平对齐方式{text-align:left / right / center / justify;}
左对齐右对齐居中对齐两端对齐
垂直对齐方式{vertical-align:top/bottom/middle/baseline;}
上下居中基线
行高{line-height：normal/value;}
说明：
（1）当单行文本行高等于容器高时，可实现单行文本在容器中垂直中齐效果；
（2）当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置定位;
（3）当单行文本的行高大于容器高时，可实现单行文本在容器中垂直以下任意位置定位。
倍行高：{line-height:2;} 2倍，{line-height:1.5em;}1.5倍；注：当使用倍行高时，单位不加PX
复合式写法：{font：style variant weight size/ line-height family；}
倾斜小型大写字母加粗字号 / 行高字体
说明：按以上顺序;size 、line-height和family固定不可和其他属性位置互换；
注：当字号大小，字体和行高缩写时，字号和行高要用斜杠合并成一个属性值，且同时有字号大小和字体时，才能缩写。
控制英文大小写 {text-transform:none(默认值)/capitalize(每个单词首字母大写)/uppercase (都为大写字母) /lowercase ( 都为小写字母 ) }
文本修饰：
{text-decoration:none:没有修饰(取消修饰)/underline:添加下划线/overline:添加上划线/line-through:添加删除线/blink：闪烁}
说明：
blink：闪烁(高版本浏览器不支持blink属性);}
underline overline line-through这三个属性值是可以同时存在的,用空格分隔；
字间距{letter-spacing：Value;}控制字间距；
词间距{word-spacing:Value;}控制英文单词词间距
文本流控制{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器）
说明：
（1）horizontal 自左向右；
（2）vertical-ideographic;自上而下；

3、关于列表的css声明

定义列表符号样式：
list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
使用图片作为列表符号：
list-style-image：url(所使用图片的路径及全称)；
定义列表符号的位置：
list-style-position:outside(外边)/inside(里边)；

关于列表的属性语法（缩写）list-style：属性值1 属性值2 属性值3；

例：{list-style:url(images/aa.jpg) inside;}
list-style:none; 取消列表符号

4、关于背景的css声明

背景颜色
background-color:#colorValue;
背景图片的设置
语法：background-image：url(背景图片的路径及全称)；
说明：
（1）网页上有两种图片形式：插入图片、背景图；插入图片为网页内容，背景图为网页的表现;默认情况下，背景图上面可以显示其他内容和图片，而插入图片上面是不能显示
其他内容和图片的。
（2）背景图片的显示方式
a、背景图片大小小于元素大小，默认平铺；
b、背景图片大小等于元素大小，完全显示；
c、背景图片大小大于元素大小，只显示元素范围大小的背景图；
背景图平铺设置
语法：background-repeat：no-repeat（不平铺）/repeat(平铺)/repeat-x（横向平铺）/repeat-y（纵向平铺）;
背景图片的位置
语法：background-position:left/right/center(水平方向上的对齐方式) top/center/bottom(垂直方向上的对齐方式) 或数值
背景属性的缩写语法：background:属性值1 属性值2 属性值3；
例：background:url(背景图片的路径及全称) no-repeat center top；
背景图的固定
语法：background-attachment：scroll(滚动)/fixed(固定)；
网页上常用的图片格式（压缩图片）
（1）jpg：有损压缩格式，靠损失图片本身的质量来减小图片体积，适用于颜色丰富的图像；
（2）gif:有损压缩格式，靠损失图片的色彩来减小图片体积，支持透明，支持动画，适用于颜色数量少的图像；
（3）png:有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，是fireworks的源文件格式，适用于颜色数值少的图像（一般用于透明图）