web前端小白笔记4

CSS总结1

一、CSS常见属性
1、文字属性
font-style 规定文字样式
font-weight 规定文字粗细
font-size 规定文字大小
font-family 规定文字字体（如果字体取值是中文的话，要用单引号或者是双引号括起来才行）
规定的文字字体如果不存在的话，会使用系统默认的系统来显示，如果不想用系统默认的字体来显示的话，可以这么设置：

font-family："字体1"，"备选字体1"......

文字属性可以被缩写来提高效率，格式：

font: style weight size family;

例:font:normal bold 60px "宋体";
2.文本属性
1)text-decoration 文本添加装饰
格式：

text-decoration:overline

有四种取值：underline（下划线），line-through（删除线）,overline （上划线），none（什么都没有）。
2) text-align设置文本对齐格式
格式：

 text-align:center

有三种取值：left,center,right.
3)text-indent 设置文本缩进
格式：

text-indent:2em

取值：2em，em是单位，一个em代表缩进一个文字的宽度
3、颜色属性
在css中通过设置color的属性来修改文字颜色
格式：

color：值

取值：
1）英文单词，常见的颜色有对应的英文单词，所以可以用英文单词来表达我们所需要的颜色。但是能表达的颜色有限。
例：red 红 blue 蓝 green 绿
2）rgb，rgb就是三原色，其中r（red红色），g（green绿色），b（blue蓝色）；
格式：rgb（0,0,0)；
每个数字的取值范围是0~255,0的话机表示不发光，255表示发光，随着值的增大而发光的程度也会增加。
3）rgba，和rgb大概一样，多了一个a的取值，表示透明程度，a的取值范围是0~1;取值越小月透明；
例：rgb（255,255,0,0.2);
4)十六进制
其本质就是rgb，每两位表达一个颜色，十六进制逢十六进一；
1.5十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
例如: #BBEE00 == #BE0
注意:
1.如果当前颜色对应的两位数字不一样, 那么就不能简写

#123676;

2.如果两位相同的数字不是属于同一个颜色的, 也不能简写

#133664；

二、常见控制器
1.id选择器 就是指定的id值来找到对应的标签，然后设置属性
格式：

#id名称{
属性：值
}

注意：id前面必须要加上前缀“#”；不能数字开头，名称只能有英文或者数字或者下划线；
2.class选择器 就是通过指定的类来找到标签并且设置属性
格式：

.类名{
    属性:值;
}

注意：每个标签都可以设置类名，class的名称是可以重复的，编写选择器的时候一定要在class的名称前加上点（英文符号的点），命名规范和id选择器的命名几乎一样。
3.后代选择器 就是制定标签的后代标签，设置属性
格式：

标签名称1 标签名称2{
    属性:值;
}

注意：后代选择器必须通过空格隔开，可以通过空格一直延续下去，不仅可以使用标签名称，还可以选择其他的选择器。
4.子选择选择器 就是找到指定标签的直接自元素，然后设置属性
格式：

标签名称1>标签名称2{
    属性:值;
}

注意：
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签，需要用>符号连接, 并且不能有空格，不仅仅可以使用标签名称, 还可以使用其它选择器，可以通过>符号一直延续下去。
区别：后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中，而子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签。
5.通配符选择器 就是给当前界面上所有的标签设置属性
格式:

*{
    属性:值;
}

注意:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器