关于css:CSS复习笔记一引入和语法

~~### CSS

一、介绍

CSS是层叠样式表，用于体现HTML或XML文件款式的语言。

构造（html）+装璜（css）+外延（js）

二、语法

语法组成

选择器{
    规定
    属性：值；
    属性：值；
}

html如何引入css

1.【内联样式表】将css规定间接填写在style属性中—适度耦合，但优先级高
2.【外部样式表】将款式写在style标签内–构造清晰，做到解耦，款式独立，但款式和构造依然混合
3.【内部样式表】将款式卸载.css文件中，通过link将文件引入html

选择器

1.外围选择器

标签选择器（范畴大，优先级小）

div{}
ul{}
dl{}

类选择器

.nav{}

id选择器（优先级高于类

#id{}

组合选择器

body , ul{}

并且选择器

ul.nav{}

广泛选择器

*{}

2.档次选择器

父子选择器

父>子{}
.nav>li{}    nav下的li
#wrapper>*{}  wrapper下的所有子元素

后辈选择器

父 后{}
.right_nav li{}

下一个兄弟选择器

selector + selector{}

之后所有兄弟选择器

selector ~ selector{}

3.伪类选择器【过滤器】

:first-child{ 第一个
}
:last-child{ 最初一个
}
:nth-child(n){ 第n个
}

:nth-child(2n+1){}
:nth-child(odd){}

：hover{} 光标

4.伪元素选择器【过滤器】

::after 在元素内容之后插入一些内容

ul.nav::after{
    display:"block";
}
<ul class="nav">
    <li></li>
    <li></li>
    <li></li>
</ul>

::before —-元素之前插入内容
::first-letter —-抉择元素的首字母。
::first-line—-抉择元素的首行。
::selection—-抉择用户抉择的元素局部

5.属性选择器【过滤器】

[name] 抉择具备name属性的元素
[name=username] 抉择具备name属性，值为nameuser的元素
[name^=u] 抉择具备name属性，u结尾的元素
[name$=u] 抉择具备name属性,u
结尾的元素
[name*=u] 抉择具备name属性，蕴含u的元素

优先级

特权
!important
权值

  1000     style属性 
  100      #id      
  10       .class 伪类   
  1        元素      

程序