css层叠样式表

----行内样式 内联样式

<p style="属性1:属性值;属性2:属性值"></p>

style为标签的属性

----内部样式

<style></style>

样式写在<style>标签内部，<style></style>放置在html文档中

----外部样式

单独将样式写在一个.css文件中 然后通过<link>引入

<link href="test.css" rel="stylesheet"> 

href为样式文件的路径  rel为stylesheet 表示被链接的文档是一个样式表文件

CSS三大特性

----css层叠性

多种css样式可叠加 如果出现样式冲突 采用就近原则 如果样式不冲突 不会层叠

----css继承性

子标签会继承父标签的某些样式 例如文本颜色、字号等

----css优先级

1.继承样式权重为0

2.行内样式优先

3.权重相同时，遵循就近原则，即靠近元素的样式具有最大的优先级

4.css定义了!important命令，!important都具有最大优先级

----css权重计算

每个元素标签权重 0,0,0,1

每个类、伪类权重 0,0,1,0

每个id权重 0,1,0,0

每个行内样式权重 1,0,0,0

每个!important权重 无限大

权重可进行叠加 例如 div>p 权重为0,0,0,2  |  .red p 权重为 0,0,1,1  | #test .red 权重为 0,1,1,0

权重是优先级的算法 层叠式优先级的表现

选择器

----基础选择器

--标签选择器

标签 { 属性1:属性值; 属性2:属性值;...}  p { color: red; }

--类选择器 多类名选择器

.类名 { 属性1:属性值; 属性2:属性值;...}  .red { color: red; }

<p class="red"></p>

可以给标签指定多个类名

--id选择器

#id名 { 属性1:属性值; 属性2:属性值;...}  #test { color: red; }

<p id="test"></p>

id是唯一的

--通配符选择器

* { 属性1:属性值; 属性2:属性值;...}  * { margin: 0; padding: 0; }

----复合选择器

--交集选择器

由标签选择器和类选择器构成  p.red 选择类名为red的p标签

--并集选择器

各个选择器通过逗号","连接  p, .red, #test { color: red; } p标签 类名为red的标签 id为test的标签都会设置color为red

--后代选择器

<div><p>段落</p></div>

外层标签在前 内层标签在后 div p { color: red; } div里面的p标签设置color为red

--子代选择器

父级标签在前 子级标签在后 用>连接  div > p { color: red; } div里面的直接子元素p标签设置color为red

----伪类选择器

用于向某些选择器添加特殊效果

--链接伪类选择器

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标移动到链接上

:active 选定的链接

书写链接伪类选择器尽量保持以上顺序依次书写

例如 a:hover { color: red; } 鼠标移至a标签 a标签显示红色

----非常用复合选择器

元素1+元素2  紧跟着元素1后面的元素2 例如 p+a 表示紧跟着p标签后面的a标签

 元素1~元素2 出现在元素1后面的元素2 例如 .desc~p 表示出现在.desc同父级之后的所有p 不需要紧跟

----结构(位置)伪类选择器 css3

:first-child 选取父元素的第一个子元素

:last-child 选取父元素的最后一个子元素

:nth-child(n) 选择父元素的第n个子元素

:nth-of-type(n) 选择同类型中的第n个同级兄弟元素

:first-of-type 选择同类型中的第一个同级兄弟元素

:last-of-type 选择同类型中的最后一个同级兄弟元素

:only-of-type 选择同类型中唯一一个指定类型元素

:not(s) 选择每个不是指定元素/选择器的元素  p:not(.red)

以上 n 可以表示一个具体的数、关键字或者公式 例如 3n+1等

----属性选择器

选取标签带有某些特殊属性的选择器

例如 div[class^='desc'] 表示选择class为以desc开头的div元素

div[class$='desc'] 表示选择class为以desc结尾的div元素

div[class*='desc'] 表示选择class包含字符串desc的div元素

----伪元素选择器 CSS3

element::first-letter 选择文本的第一个单词或字  p::first-letter { font-size: 24px; }

element::first-line 选择文本第一行

element::selection 选择选中文本

element::before 在元素开始位置创建一个行内元素

element::after 在元素结束位置创建一个行内元素

::before和::after的content必须设置 可以为空

例如 div::before { content: "开始";}  div::after { content: "结束" }

注意：

1.CSS3的规范中":"用来表示伪类 "::"用来表示伪元素

2.IE9以下不支持:: 为保证兼容可写:  高版本浏览器下element:after和element:before会被自动识别为element::after和element::before

3.伪元素不是真正的页面元素

4.伪元素:before和:after添加的内容默认式行内元素 伪元素的content属性必须设置 否则伪元素不起作用

----字体样式属性

font-size 字号大小  px像素 em字体尺寸(通常用于移动端)

font-family 字体

font-weight 字体粗细 400=normal 700=bold

font-style 字体风格 normal默认 italic斜体 oblique倾斜

font: font-style font-weight font-size/line-height font-family 综和设置字体样式 按顺序 不需要设置的属性可省略 但必须保留font-size和font-family

----外观属性

color 文本颜色 英文颜色red等 十六进制#fff  rgb(255,0,0) rgba(255,0,0,0)rgba中最后一位代表设置透明度 0-1

line-height 行间距 line-height设置与height一致可垂直居中

text-align 水平对齐方式 left左对齐 right右对齐 center居中对齐

text-indent 首行缩进 1em为一个汉字的宽度

text-decoration 文本修饰  none默认  underline下划线  overline文本上一条线  line-through穿过文本一条线

----行高

line-height 可用来设置垂直居中对齐 通过设置 line-height=height

----vertical-align 垂直对齐模式

针对行内元素或者行内块元素 通常用来控制图片/表单与文字的对齐

默认的图片会和文字基线对齐，会造成图片底侧会有一个空白缝隙 解决(1.设置居中或其他对齐方式  2.将图片转为块级元素)

vertical-algin: baseline底线对齐 | top顶部对齐 | middle居中对齐 | bottom底部对齐 | sub

----溢出文本隐藏

overflow: hidden; 

text-overflow: ellipsis; 文字溢出 ellipsis显示省略符号

white-space: nowrap; 自动换行设置nowrap表示不换行

多行文本超出隐藏

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3; 控制在第几行的结尾进行省略号...显示

overflow: hidden;

----透明度

opacity 设置元素的透明度 0-1  value | inherit(从父元素继承)

IE8及以下浏览器需要写为 filter: Alpha(opacity=50); 设置的值0-100之间