CSS层叠样式表

介是阿姐
107 阅读5分钟

前言

简单理解：CSS可以美化html，让html更漂亮 核心思想：HTML搭建结构，CSS添加样式，实现了结构与样式分离

2.编写位置：

① style：html标签的属性名，对应的有属性值，属性名与属性值之间使用=号连接，内部css使用:连接,并使用;号结束

<h1 style='color: red;'></h1>

行内样式(内联样式)，不推荐

②内部样式：

可以写在文档中的任何位置head body中都可以,浏览器会自动把style移动到head中

缺点：没有将结构和样式分离出来，多个html没有办法复用

③ 外部样式 语法：引入写在head中

rel当前页面和rel的关系，复用 ，结构和样式完全分离，触发浏览器缓存

3.样式表的优先级 行内样式>内部样式=外部样式(后来者居上)

行内样式和内部样式或外部样式有冲突的时候，按照优先级渲染。 内部样式和外部样式优先级别一样，后来者居上 声明块也是后来者居上

  1. css语法规范 MDN

选择器：找到要添加样式的元素 声明块：一个个的声明，一个声明就是一个样式 html中注释ctrl + / css中注释ctrl + /

  1. css代码风格 展开风格： 紧凑风格：写在一行 webpack将展开风格转化成紧凑风格，体积会变小

  2. css选择器 ①通配选择器:选中所有的html元素，常用于清除样式

* {
    color: red
}

②元素选择器:为页面中 某种元素 统一设置样式，不能进行差异化设置

h2 {
    color: blue
}

③类选择器: 根据类名选中某些元素， 注：不同的标签也可以设置相同的类名；class设置多个类名用空格分开

.speakClass {
    color: orange
}

④id选择器:根据id名，选中某个元素 注：元素可以同时有class 和 id两个属性

#speak-id {
    color: green
}
  1. 复合选择器
  2. 交集选择器：仅仅连接在一起，即...又...
// p标签且类名为speakClass元素
p.speakClass {
}

02.并集选择器： ,分割 或者的含义，要么...要么... 注： 一般竖着写，通常用于集体声明，可以缩小样式表的体积

.rich,
.beauty,
.dog,
.pig,
#suxi {
    font-size: 40px;
    background-color: red;
}

8.元素之间的关系 父元素：直接包裹某个元素的元素 子元素：被父元素直接包裹的元素 祖先元素：父亲的父亲...，一直往外找，都是祖先。 后代元素：儿子的儿子...，一直往里找，都是后代。 兄弟元素：具有相同父元素的元素

  1. 后代选择器，指定元素中，符合要求的后代元素 注:使用空格来表示
ul li {
    color: red
}
  1. 子代选择器：指定元素中， 符合要求的子元素 >
  2. 兄弟选择器: 相邻兄弟选择器+ : 仅仅相邻的兄弟元素，睡在我下铺的那个兄弟 通用兄弟选择器~ : 选中指定元素后所有的兄弟元素，谁在我下铺的所有兄弟
  3. 属性选择器：[] 属性值服药一定要求的元素
// 1. 具有title属性的元素
[title] {
    color: red
}

// 2. 具有title属性且属性值为guigu
[title=“guigu”] {
    color: red
}

// 3. 具有title属性，且属性值以g开头
[title^=“g”] {
    color: red
}

// 4. 具有title属性，且属性值以u结尾
[title$=“u”] {
    color: red
}

// 5. 具有title属性，属性值有u就可以
[title*=“u”] {
    color: red
}
  1. 伪类选择器：很像类，但不是类，是元素特殊状态下的一种描述
// 只有a标签有的伪类
// :link没有访问过的元素
a:link {
}

// :visited 访问过的元素
a:visited {
}
  1. 动态伪类：所有元素都具备这两个伪类
//所有元素都具备这两个伪类
// 悬浮
a:hover {
}

// 激活的,按下去的
a:active {
}
 a标签是有属性的lvha, link, visited, hover, activated


// 获取输入焦点
input:focus {
    background-color:wehite
}

15.结构伪类 ① first-child 按照所有兄弟元素计算的

div>p:first-child  {
    
}

div p:first-child  {
    
}

② last-child

div>p:last-child  {
    
}

// 内部公式就是2n + b
div>p:nth-child(an + b)  {
    1,2,3...10
    n,
    2n + 1 , odd
    2n,even
    -n + 5
    
}

注：nth-of-type() 同类型的类型 通俗点讲：一个家庭里有7个孩子 nth-child：不分男女，老大，老二，老三 nth-of-type: 大儿子，二儿子，大闺女

div>p:first-of-type 和 div>p:first-child 的区别
div>p:last-of-type 和 div>p:last-child 的区别
div>p:nth-of-type 和 div>p:nth-child 的区别
  1. 否定伪类
div>p:not(.fial) {
}

div>p:not([title^='你要加油啊']) {
}

div>p:not(:first-child) {

}

17.UI 伪类 复选框，单选按钮 并不是所有的属性可以调，比如color,如果非要修改可以使用图片

input:focus {眼神落在你身上，悬浮}
input:checked {确定就是你，勾选上}
input:disabled{ 禁用伪类 }
input:enabled{ 选中的可用的元素 }
  1. 目标伪类：选中锚点指向的伪类
div:target {
    background-color: red
}

<a href='#one'>去看第一个
<div id='one'></one>

19.语言伪类

div:lang(en) {
    font-family:
}
  1. 伪元素选择器,像元素不是元素，选中元素中的一些特殊位置
// 第一个字符
div::first-letter {}

// 选中第一行
div::first-line {}

// 鼠标选中的文字
div::selection-color {}

// 输入框中的占位符
div::placeoler {}

// 价格1999 => ￥1999.00, 选中p元素的最开始(结尾)的位置，随后创建一个子元素
p::before { content: "￥" }
p::after { content: ".00" }
  1. 选择器的优先级

行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配选择器

  1. 权重

① id选择器

② 类选择器，伪类选择器，属性选择器

③ 元素选择器，伪元素选择器

④ 通用选择器

avatar
文章
阅读
粉丝