HTML的css知识点总结

css属性

文本

1.text-align:文本的水平对齐方式；取值：left、right、center、justify(两边对齐)

2.font-family:设置字体；常用字体：宋体、微软雅黑、黑体

3.font-size:设置字号；网页正文的一般大小12px左右

4.font-weight：定义字体的粗细；属性值：normal、bold(粗体)

5.font-style:定义字体风格；属性值：normal、italic(斜体)、oblique（倾斜）

6.@font-face:定义服务器字体

7.text-decoration:设置文本的下划线、上划线、删除线；属性值：none(没有装饰）、underline、overline、line-through(删除线))

8.color:定义文本的颜色

9.text-indent:设置文本的首行缩进；属性值：1em(等于一个中文字符的宽度)、2em

10.lline-height:段落中两行文字之间的垂直距离（行高）；属性值:一般以px为单位

11.text-shadow:设置文本的阴影效果；语法格式：选择器{text-shadow：水平位置，垂直阴影距离，模糊半径，阴影颜色；}；阴影距离可以是正值，也可以是负值，正负值表示阴影方向不同

12.text-overflow:设置文内元素溢出时处理；语法格式：选择器{text-overflow：cilp|ellipsis}；属性值：hidden(文本隐藏)、clip:修剪元素溢出的文本，使溢出文本不显示，也不显示省略标记；ellipsis:在文本末尾用省略标记“...”标示修剪的文本

13.white-space:强制文本不能换行；属性值：nowrap

CSS设置背景

14.background-color:设置要使用的背景颜色

15.background-image:设置背景图像；语法格式:background-image:url(images/bodybg.jpg);URL(图片来源)

16.background-repeat:设置文本背景图像平铺；格式：background-repeat：repeat(横向和纵向平铺)|no-repeat(不平铺)|repeat-x(横向上平铺)|repeay-y(纵向上平铺)|space(背景图像以相同的间距平铺)|round(背景图像自动缩放直到合适)

17.background-position:设置背景图像位置；属性值：center、left、top、bottom

18.background-size:设置背景图像的大小；属性值:长度|百分比|auto(背景图像的真实大小，默认值)|cover(将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器)|contain(将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内)

19.background-clip:设置背景图像的裁剪区域；格式：background-clip:border-box(不会发生裁剪、默认值)|padding-box(超出padding区域也就是border区域的背景将会被裁剪)|content-box(从content区域开始向外裁剪背景，即border和padding区域内的背景将会被裁剪)

20.background-origin：设置背景图像参考原点；格式：padding(从padding区域开始显示背景图像)|border-box(从border区域开始显示背景图像)|content-box(从content区域开始显示背景图像)

21.opacity:设置不透明；属性值：0(完全透明)、1(完全不透明)、0.5(半透明)

22.background:linear-gradient:（设置背景图像渐变效果,线性渐变）渐变角度，颜色值，颜色值，...

23.background:radial-gradient:(镜像渐变)circle，颜色值，颜色值，...

24.background-attachment:设置背景图像固定；格式:background-attachment：scroll|fixed|local;scroll:背景图像相对于元素固定也就是说当元素内容滚动时，背景图像不会跟着滚动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素或窗体一起滚动。

默认值为scroll;fixed:背景图像相对于窗体固定; local:背景图像相对于元素内容固定，也就是说当元素随元素滚动时，背景图像也会跟着滚动，因为背景图像总是要跟者内容。

盒子的相关属性

25.width: 盒子的宽度；取值：200px、300px...

26.height:盒子的高度；取值：200px、300px...

27.border:盒子的边框；属性值：大小（例5px）、边框类型[solid(单实线)、dasnhed(虚线)、dotted(点线)、double(双实线)]

28.padding:内边距；取值：[10px(上)、20px(右左)、30px(下),顺时针]；

padding- top:上内边距大小； pading-right:右内边距大小； padding-bottom:下内边距大小； padding-left:左内边距大小

29.margin:外边距；取值[10px(上)、20px(右左)、30px(下),顺时针];

margin-top: 上外边距大小margin- right:右外边距大小;margin-bottom: 下外边距大小; margin-left:左外边距大小

30.border:边框属性；border-top:上边框宽度、 样式、颜色;border-right:右边框宽度、样式、颜色;border-bottom:下边框宽度、 样式、颜色;border-left:左边框宽度、样式、颜色。

属性选择器:
   

 E[att^=val]:选择以val为前缀的字符串
 E[att$=val]:选择以val为后缀的字符串
    E[att*=val]:选择包含val的字符串
  

    关系选择器:
   

    子代(>):用于选择某一元素的第一级子元素(必须是第一级) 例:p>strong{font-size:30px;}
    相邻兄弟:连接两个元素,有相同的父元素,并且第二个紧跟第一个. 例:h3+p{background-color:yellow;}
   普通兄弟:连接两个元素,有相同的父元素,并且第二个不必紧跟第一个. 例:h3~p{background-color:yellow;}
   

    结构化伪类选择器:
    

 :root:用于选取文档的根元素
 :not:又称为否定选择器,选择除了某个元素之外的所有元素
 :empty:用于选取空元素
 :target:用于选取当前活动的目标元素
 :only-chlid:用于匹配父元素中的唯一子元素的元素
 :first-child/:last-child:用于选择父元素中的第一个子元素和倒数第一个子元素
 :nth-child(n)/:nth-last-child(n):用于选择较多元素中的第几个或倒数第几个子元素
 :nth-of-type(n)/:nth-last-of-type(n):用于选择父元素特定类型的第n个或倒数第n个子元素
   

    伪元素选择器:

   :before:在元素内部所有的子元素前添加内容  取值:content(文本/图像/空) (例::before{content:属性值;})
   :after:在元素内部所有的子元素后添加内容  取值:content(文本/图像/空) (例::after{content:属性值;})