Web前端开发 CSS常用样式大全

Web前端开发 CSS常用样式大全

---

1 CSS简介

层叠样式表（Cascading Style Sheets，CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。属性名和属性值成对出现（键值对）。

引入方式：

• 内部样式表：学习使用
  • CSS代码写在<style>标签中

  <title>CSS 初体验</title>
  <style>
  	/* 选择器 { } */
  	p {
         
  		/* CSS 属性 */
  		color: red;
  	}
  </style>
  
  <p>体验CSS</p>
  

• 外部样式表：开发使用
  • CSS代码写在单独的.css文件中
  • 在HTML中使用<link>标签引入

  <link rel="stylesheet" href="./my.css">
  

• 行内样式：配合JavaScript使用
  • CSS写在标签的style属性里

  <div style="color: red; font-size: 20px;">这是 div 标签</div>
  

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

• HTML标签
  
• CSS：大多数简写方式为属性单词的首字母
  

---

2 选择器

作用：查找标签，设置样式。

2.1 标签选择器

使用标签名作为选择器，选中同名标签设置相同的样式。

例：p、h1、div、a、img…

<style>
    p {
     
        color: red;
    }
</style>

通配符选择器（*）：查找页面所有标签，设置相同样式。无需手动调用，浏览器会自动查找页面所有标签设置相同的样式。

* {
   
	color: red;
}

通配符选择器可用于清除标签的默认样式，如标签默认的外边距、内边距。

2.2 类选择器

查找标签，差异化设置标签的显示效果。

1. 定义类选择器：.类名
2. 使用类选择器：标签添加属性值 class="类名"

<style>
    /* 定义类选择器 */
    .red {
     
        color: red;
    }
</style>

<!-- 使用类选择器 -->
<div class="red">这是div标签</div>
<div class="red size">div标签</div>

• 一个类选择器可供多个标签使用
• 一个标签可以使用多个类，类名之间用空格隔开

多个单词可以用-连接

2.3 id选择器

查找标签，差异化设置标签的显示效果。一般配合JavaScript使用，很少用于设置CSS样式。

1. 定义id选择器：#id名
2. 使用id选择器：标签添加属性值 id="id名"

<style>
    /* 定义id选择器 */
    #red {
     
        color: red;
    }
</style>

<!-- 使用id选择器 -->
<div id="red">这是div标签</div>

同一个id选择器在一个页面只能使用一次。

2.4 复合选择器

由两个或多个基础选择器通过不同的方式组合而成，能够更准确、更高效的选择目标元素（标签）。

2.4.1 后代选择器

选中某元素的后代元素（该标签内的所有指定标签）。

写法：父选择器 子选择器 { CSS属性 }，父子选择器之间用空格隔开。

<style>
    div span {
     
        color: red;
    }
</style>

<span>span标签</span>
<div>
	<span>这是div的儿子span</span >
</div>

2.4.2 子代选择器

选中某元素的子代元素（最近的子级）。

写法：父选择器 > 子选择器 { CSS属性 }，父子选择器之间用>隔开。

<style>
    div > span {
     
        color: red;
    }
</style>

<div>
    <span>这是div里面的span</span>
    <p>
        <span>这是div里面的p里面的span</span>
    </p>
</div>

2.4.3 并集选择器

选中多组标签设置相同的样式。

写法：选择器1, 选择器2, ... , 选择器N { CSS属性 }，选择器之间用,隔开。

<style>
    div, p, span {
     
        color: red;
    }
</style>

<div>div标签</div>
<p>p标签</p>
<span>span标签</span>

2.4.4 交集选择器

选中同时满足多个条件的元素。

写法：选择器1选择器2 { CSS属性 }，选择器之间连写，没有任何符号。

如果交集选择器中有标签选择器，标签选择器必须写在最前面。

<style>
    p.box {
     
        color: red;
    }
</style>

<p class="box">p标签，使用了类选择器box</p>
<p>p标签</p>
<div class="box">div标签，使用了类选择器box</div>

2.4.5 伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式。

写法：选择器:伪类 { CSS 属性 }

<style>
    a:hover {
     	/* 鼠标悬停 */
        color: red;
    }
    .box:hover {
     
        color: green;
    }
</style>

<a href="#">a标签</a>
<div class="box">div标签</div>

超链接伪类：

• :link：访问前
• :visited：访问后
• :hover：鼠标悬停
• :active：点击时（激活）

如果要给超链接设置以上四个状态，需按LVHA的顺序书写。

a {
   
  color: red;
}
a:hover {
   
  color: green;
}

2.5 结构伪类选择器

根据元素的结构关系查找元素。

• E:first-child：查找第一个E元素
• E:last-child：查找最后一个E元素
• E:nth-child(N)：查找第N个E元素（第一个元素的N值为1）

nth-child公式

功能	公式
偶数标签	2n
奇数标签	2n+1、2n-1
找到5的倍数的标签	5n
找到第5个以后的标签	n+5
找到第5个以前的标签	-n+5

li:first-child {
   
	background-color: green;
}

2.6 伪元素选择器

创建虚拟元素/伪元素，用来摆放装饰性的内容。

• E::before：在E元素里面最前面添加一个伪元素
• E::after：在E元素里面最后面添加一个伪元素

必须设置content属性来设置伪元素的内容，如果没有内容则引号留空即可。

div::before {
   
	content: "before伪元素";
}
div::after {