CSS 相关注意点

1、伪类选择器（单个冒号）

eg  p : first-child/last-child/nth-child(n)（n表示第几个,可以用2n表示偶数(even)，也可以2n+1表示奇数(odd）)

特别的：nth-last-child：表示顺序从最后一个算起的。

2、target 目标伪类

 target｛ 
    color:blue;    //表示调到该目标的时候，会变成蓝色。
｝

3、text-indent：首行缩进

text-indent：2em； //表示首行空出两个字的空格。

4、颜色半透明：rgba（r,g,b,a） a的取值在（0~1之间）

5、文字阴影

text-shadow：1px（水平距离），2px（垂直距离），3px（模糊距离），rgba（R,G,B,A）（颜色）

6、文字的凸起或凹下

效果：

原理是借助文字阴影。

凸起的效果：
text-shadow: 2px 2px 1px black,-2px -2px 1px white;  //凸起的原理是上移(Y轴的负半轴是上)的部分是白色，下移（Y轴的正半轴是下）的部分是黑色

凹下的效果和凸起效果反过来即可。

7、display转换

block（块）元素的特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

inline元素的特点（内联标签）：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变

④内联元素只能容纳文本或者其他内联元素

 display：inline；（块转行标签）

display：block（行标签转换块标签）

display：inline-block（行内块元素）有行和块元素的特点。

8、属性选择器

用“[ ] ”来表示

<a title = "a">
a[title] { }            //直接引用title这个属性
a[title = a]{ }         //表示title = a这个属性
a[title^ = a]{ }        //表示title = 的内容中a在开头位置即可 eg abc、afg
a[title$ = a]{ }        //表示“a”应该在结尾位置
a[title* = a]{ }        //表示“a”有包含在里面都可以

9、元素选择器

p：：first-letter｛ ｝ 表示p里面的一个字/单词

p：：first-line｛｝ 表示p中的第一行

p：：selection｛｝ 表示被左键选中的内容

10、块内元素的选择器

<div>今年</div>

div：：before｛
    content："你"；    //表示在今年这个块内元素里面的前面部分添加内容“你”，div块里面变成“你今年”
｝

div：：after  //这个功能也和上面一样只是换成后面。

11、有关background的属性

background-position：10px  10px/right bottom / center 

background-image：url（1.jpg）引入背景图片引入多张直接加，然后继续写url（）引入

background-size: cover(图片进行等比例缩放，溢出部分隐藏，应该同时满足盒子的长宽)/content（保证图片的完整）

background-attachment：fixed（固定的）/scroll（滚动的）

简写：

background： 背景颜色   背景图片地址   背景平铺   背景滚动   背景的位置