乐趣区

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

jiezi

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

程序

退出移动版