CSS复习笔记引入和语法

Posted 2021-09-14 江寒

~~### 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        元素      

顺序