CSS整理1

CSS

分为两大部分, 一个是CSS的属性, 另一个是CSS选择器

常见的

文字属性   

font-style    样式

normal ：普通

italic : 倾斜

font-weight     粗细

lighter 细线， 默认 

bold: 加粗

bolder: 更粗

数字取值：100-900之间

font-size     文字大小

取值: px(像素 pixel)

font-family     文字字体

font-family:"楷体";

默认宋体

设置备选

:font-family:"字体1", "备选方案1"   中文字体包括英文  ，英文不包括中文   英文字体放在前面 （中文字体也有自己的英文名）

企业开发中最常见的字体

中文: 宋体/黑体/微软雅黑  ，英文: "Times New Roman"/Arial

宋体 SimSun  黑体 SimHei  微软雅黑 Microsoft YaHei

文字缩写

font: style weight size family;

style 、weight可以省略

文本属性

text-decoration    文本添加装饰 

nong: 取消线

underline: 加下划线

line-through: 加删除线

overline: 加上划线

text-align   水平对齐

取值:   left  right  center

text-indent 文本缩进

取值: em   （2em表示两个汉字）

颜色属性
rgb代表三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)

rgb(0,0,0)  每个数字由三个光原件组成

取值是0-255之前, 0代表不发光, 255代表发光

红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
灰色: rgb(200,200,200);
只要让红色/绿色/蓝色的值都一样就是灰色

rgba  a代表透明度， 取值是0-1，越小越透明

十六进制 本质就是RGB   取值0-F, 逢十六进一

 #FFEE00 FF表示R EE表示G 00表示B。   两位一样可简写#FE0 

CSS选择器

#标签     （id选择器）

.biao'qi      (类选择器)

标签       (标签选择器)

选择器1  选择器2      (后代选择器 )

选择器1>选择器2      (子元素选择器)

选择器1选择器2      （后代选择器 ）

选择器1+选择器2     相邻兄弟选择器)

选择器1~选择器2   （通用兄弟选择器）

*           （通配符选择器）

序选择器

:first-child                 同级别第一个标签    

:last-child                 同级别最后一个标签

:nth-child(n)             同级别第n个标签

:nth-last-child(n)       同级别倒数第n个标签

:only-child                 父元素唯一的标签

:first-of-type             同级别第一个类型标签  

:last-of-type             同级别最后一个类型标签

:nth-of-type(n)          同级别第n个类型标签

:nth-last-of-type       同级别倒数第n个类型标签

:only-of-type            父元素唯一的类型标签

:nth-child()                odd 同级别所有奇数       even同级别中的所有偶数     xn+y  x和y是自定义的, n是计数器, 从0开始递增

:nth-of-type()                

属性选择器

[attribute]         

[attribute=value]     属性值的匹配

[attribute^=value]   属性值以value开头

[attribute$=value]   属性值以value结尾

[attribute*=value]   属性值包含value

CSS三大特性

继承性 、层叠性、 优先级

继承性

父元素设置的属性 被子元素获得

只有以color/font-/text-/line-开头的属性才可以继承，后代都可以继承

a标签的文字颜色和下划线是不能继承的  ，h标签的文字大小是不能继承的

应用场景： body一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

层叠性

多个选择器选中"同一个标签", 又设置了"相同的属性

优先级

解决层叠性的属性设置，排列优先级。

三种方式

通过继承性设置：    谁离目标标签比较近就听谁的

相同选择器(直接选中) ：  同类型的选择器,  谁写在后面就听谁的

不同选择器(直接选中)：   id>类>标签>通配符>继承>浏览器默认 

注意点:   通配符选择器也是直接选中

优先级权重

数选择器的类型 ,大的 优先级最高  , 一样大数个数， 数量多的优先级高

注意点: 直接选中标签的才需要计算权重, 否则一定会听直接选中的

!important

写在要提升属性的后面，将被指定的属性的优先级为最高 

Div标签

配合CSS网页布局

会单独的占领一行

span标签

配合css设置局部信息

不会单独占领一行

HTML将所有的标签分为两类, 容器级和文本级

容器级可以嵌套所有的标签，文本级只能嵌套文字/图片/超链接

容器级 div h ul ol dl li dt dd ..

文本级：span p buis strong em ins del ...

CSS将所有的标签分为两类, 块级元素和行内元素(其实还有一类, 行内块级)

常见块级元素: p div h ul ol dl li dt dd     会独占一行

 可以设置宽高， 如果没设置, 跟父元素一样宽   

常见行内元素: span buis strong em ins del   不会独占一行

 不可以设置宽高， 如果没设置, 跟内容一样宽

行内块级元素：img  不独占一行 又可以设置宽度和高度

display属性  模块转换

display: block   转成块级

display: inline   转成行内

display: nline-block  转成行内块级

本内容收集与网络，部分转载极客江南，并将内容提炼整理。