CSS 总结

一、CSS 的简介
二、CSS 的引入
三、CSS 语法
四、选择器
五、CSS 权重
- （一）CSS 引入优先级
- （二）CSS 权重
六、文字属性
七、字体属性
八、其他属性
历史回顾

一、CSS 的简介

1、在前端开发中，css（层叠样式表）所起到的作用是对网页的修饰。

2、css可以定义HTML的展示形式，让我们的HTML变得更加的生动。有的小伙伴肯定要问了，css的部分样式，也可以直接使用HTML中的标签解决呀，对！没错，确实可以使用标签来解决，但是，现在倡导的是行为（JavaScript）、样式（CSS）、结构（HTML）相分离，这样做在后期可以进行很好的维护，同时，也提高了我们代码的优雅性。

二、CSS 的引入

（一）行内样式

直接在标签中引入CSS代码（行内样式不推荐使用）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式</title>
</head>
<body>
	<div style="color: red;">行内样式</div>
</body>
</html>

（二）内联样式

在 head 标签中写 style 标签（内联样式不推荐使用）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>内联样式</title>
	<style>
		/* <!-- 内联样式 --> */
		p {
			color: green;
		}
	</style>
</head>
<body>
	<p>内联样式</p>
</body>
</html>

（三）外联文件

需要单独创建 .CSS 文件；
在 head 标签中引入 link 标签；
<link rel="stylesheet" href="../CSS/style.css">

/* style.css */
* {
	margin: 0;
	padding: 0;
}

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>内联样式</title>
	<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
</body>
</html>

三、CSS 语法

CSS 规则由两个主要的部分构成：选择器，一条或多条声明。每条声明由一个属性和一个值组成。

选择器 {
CSS 属性：属性值；
CSS 属性：属性值；
CSS 属性：属性值；
…
}

四、选择器

（一）选择器命名规范

1、必须以字母开头，全部采用小写；
2、选择器中，只能由字母、数字、下划线 '_' 、连字符 '-' 、组成，并用一个花括号把所有的声明样式包围起来；
3、为了增强代码的可读性，建议书写 CSS 代码时，每行只写一个属性和值；

p {
	color: green;
	background-color: orangered;
}

（二）基本选择器

1. 元素选择器

会选中指定元素名称的所有元素；
如下，会选中所有的 p 元素标签。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>内联样式</title>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>我是红色</p>
	<div>我是黑色</div>
	<p>猜猜我是什么颜色？</p>
</body>
</html>

2. `id` 选择器

id 选择器的命名在文档中，必须是唯一的，不可重复的；

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>内联样式</title>
	<style>
		#p-id {
			color: red;
		}
	</style>
</head>
<body>
	<p id="p-id">我是红色</p>
</body>
</html>

3. `class` 类选择器

选中指定类名的元素或标签，一个元素或标签可以有多个类名；
如下所示 p 标签拥有 2 个类名。（此处便于演示，使用的是内联样式，在实际开发中，尽量使用外部文件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        #p1 {
            color: red;
            color: rgb(248, 0, 0);
        }
        .text {
       		background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1 text">demo</p>
    </div>
</body>
</html>

4. `*` 通配符选择器

选中所有的标签，通常将通配符选择器写在css文件头部，重置浏览器的默认 CSS 样式

* {
	margin: 0px;
	padding: 0px;
}

（三）组合选择器

1. 后代选择器

选择器之间通过空格隔开，E F { ··· } 会选中 E 中的所有 F 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>组合选择器-后代选择器</title> 
<style>
	div p {
		background-color:yellow;
	}
</style>
</head>
<body>
<div>
	<p>p1</p>
	<p>p2</p>
	<div>
		<p>2</p>
	</div>
</div>
	<p>p3</p>
	<p>p4</p>
</body>
</html>

2. 子代选择器

选择器之间通过 '>' 隔开，E > F { ··· } 只会选中 E 的子集元素中的所有 F 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>组合选择器-子代选择器</title> 
<style>
	div > p {
		background-color:yellow;
	}
</style>
</head>

<body>
	<div>
		<h2>你好呀！</h2>
		<p>我很好！哈哈哈哈，我会变颜色</p>
	</div>
	<div>
		<span>
			<p>我变不了颜色</p>
		</span>
	</div>
	<p>我和你们不一样！</p>
</body>
</html>

3. 兄弟选择器

选择器之间通过 '~' 隔开，E ~ F { ··· } 只会选中 E 的同级元素中的且自身后的 F 元素（只能选中自己的弟弟级元素）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>组合选择器-子代选择器</title> 
<style>
	h2 ~ p {
	background-color:yellow;
	}
</style>
</head>

<body>
	<div>
		<h2>你好呀！</h2>
		<p>我很好！哈哈哈哈，我和你是一样的肤色</p>
	</div>
	<div>
		<span>
			<p>我变不了颜色</p>
		</span>
	</div>
	<p>我和呢们不一样！</p>
</body>
</html>

4. 下一个兄弟选择器

选择器之间通过 '+' 隔开，E + F { ··· } 只会选中 E 的同级元素中，且只在自身后的第一位 F 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>组合选择器-子代选择器</title> 
<style>
	h2 + p {
	background-color:yellow;
	}
</style>
</head>

<body>
	<div>
		<h2>你好呀！</h2>
		<p>我很好！哈哈哈哈，我和你是一样的肤色</p>
		<p>我很好！哈哈哈哈，我和你们不一样</p>
	</div>
	<div>
		<span>
			<p>我变不了颜色</p>
		</span>
	</div>
	<p>我和呢们不一样！</p>
</body>
</html>

5. 分组选择器

选择器之间通过 ',' 隔开，E , F { ··· } 同时选中 E 元素以及 F 元素，主要用于使用共同代码，减少代码量（代码量的减少，代码量大,文件体积增加，流量增加，导致网页打开速度变慢；）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>组合选择器-子代选择器</title> 
<style>
	h2 , span {
	background-color:yellow;
	}
</style>
</head>

<body>
	<div>
		<h2>你好呀！</h2>
		<p>我很好！哈哈哈哈，我和你是一样的肤色</p>
		<p>我很好！哈哈哈哈，我和你们不一样</p>
	</div>
	<div>
		<span>
			<p>我的背景是黄色</p>
		</span>
	</div>
	<p>我和呢们不一样！</p>
</body>
</html>

（四）伪类选择器

选择器	示例	示例说明
: link	E : link	选择所有未访问链接
: visited	E : visited	选择所有访问过的链接
: hover	E : hover	鼠标在链接上面时
: active	E : active	选择活动链接,鼠标点击的瞬间
: focus	input : focus	选择具有焦点的输入元素
: focus	input : focus	选择具有焦点的输入元素
：nth-child（）	p：nth-child（n）	指定每个 p 元素匹配的父元素中第 n 个子元素的背景色
：nth-of-chid()	p：nth-of-chid(n)	指定每个p元素匹配同类型中的第 n 个同级兄弟元素的背景色

（五）属性选择器

选择器	示例说明
p[ 属性名 ]	选择有这个属性的 p 标签
p [ 属性名 = 值 ]	选择所有使用 “ 属性名 = 值 ” 的元素
：checked	选中被选中的表单元素
: disabled	选中被禁用的表单元素
：empty	选中没有子元素的标签
: not（p）	选中除了p以外的所有标签
：noly-child	选中只有一个子元素的标签
：root	选中根标签

（六）伪元素

:: before 出现在标签前面
必须设置 content 属性；
特性与内联元素相同；
也可以使用一个单引号；

:: after 出现在标签后面
必须设置 content 属性；
特性与内联元素相同；
也可以使用一个单引号；

<span class="txt" >文字</span>
        .txt::before {
            content: '我是';
        }
        .txt::after {
            content: '。';
        }

呈现结果：我是文字。

（七）伪类与伪元素的区别

注意：
伪类和伪元素都可以使用单冒号 ‘:hover’, ‘:before’，但是为了区分开来，伪元素通过双冒号表示 ‘::before’ ，伪类通过单冒号表示‘:hover’

五、CSS 权重

（一）CSS 引入优先级

行内样式 > 内联样式 || 外链样式

之所以内联样式会比外链样式优先级高，是因为代码的执行顺序是从上往下执行。

（二）CSS 权重

!important > 行内样式（1000）> id 选择器（100）> class 选择器（10）> 元素选择器（1）

!important 的权重最高。

权重可以相加；

权重相同时，看先后顺序执行；

权重值不同时，看权重占比。

六、文字属性

color: 颜色值：
颜色单词：red、blue…；
十六进制：#000000、#aa8800
rgb: rgb(255,255,0)
rgba: rgba(255,255,255,0.1) 0.1 代表不透明度

text-decoration:

none (默认文本样式) | underline（下划线） | line-throuth(删除线) | overline(上划线) | blink（定义闪烁的文本）;

text-align:

left | right | top | center;
文本对齐(文字、内联元素生效)；

text-indent: 数值

设置缩进，值可以时百分比，也可以是像素；
两个字符guj 32px

text-transform:

none | uppercase（大写） | lowercase（小写） | capitalize（首字母大写）;
文本大小写的控制

word-spacing: 大小；

改变单词之间的间隔（只针对英文）。

word-wrap：

normal | break-word;
是否允许长单词或者 url 地址换行(长文本自动换行)。

letter-spacing: 数值；

修改字符间隔（文本）。

direction :

ltr | rtl；
文本方向

text-shadow:

x轴偏移 y轴偏移模糊值颜色
设置文本阴影。

七、字体属性

font-size: 数值（px）；

设置字体大小

font-style:

noemal | italic；
字体样式（斜体）

font-weight: 400;

加粗，值为 100 到 900 之间的整数 bold或者bolder 或者 lighter。

font-family: 字体

使用安全字体。
多个单词和中文字体要打引号，多个字体通过逗号分开。

font: 是以上几个属性的简写。

font: font-style font-weight font-size/line-height font-family
line-height: 数值；
行高。

应用：当当前块级元素只有一行文字的时候，设置块级元素的行高 = 块级元素的高度，可以实现内部文字在垂直方向上剧中。

八、其他属性

width: 大小（px，%）
元素宽度。

height: 大小（%，px）
元素高度。
注意：只能给块级元素设置宽高。

background: 设置背景
background-color: 颜色代码；
background-image: url(图片地址)；
background-repeat: no-repeat; 背景图不重复出现
background-size:
background-size: contain；其中一边与盒子一样大 ,另一边等比缩放；
background-size: cover；等比放大图片，直到最短边与盒子一样大，必然会导致场边会被剪掉。
background-position: center; 将图片进行剧中处理
缩写：
background: url() no-repeat center;

overflow ：当内容超出确定宽高的父级盒子内容的处理；

visible 默认超出后依然显示

hidden 超出部分隐藏

scroll 无论是否超出，都会显示滚动条，超出内容通过滚动条查看；

auto：根据内容多少自动调整；

tips：overflow: auto | hidden 可以用于清除浮动后对父级所照成的影响

历史回顾

在这里插入图片描述

前端自学 - CSS总结篇（一）

CSS 总结

一、CSS 的简介

二、CSS 的引入

（一）行内样式

（二）内联样式

（三）外联文件

三、CSS 语法

四、选择器

（一）选择器命名规范

（二）基本选择器

1. 元素选择器

2. `id` 选择器

3. `class` 类选择器

4. `*` 通配符选择器

（三）组合选择器

1. 后代选择器

2. 子代选择器

3. 兄弟选择器

4. 下一个兄弟选择器

5. 分组选择器

（四）伪类选择器

（五）属性选择器

（六）伪元素

（七）伪类与伪元素的区别

五、CSS 权重

（一）CSS 引入优先级

（二）CSS 权重

六、文字属性

七、字体属性

八、其他属性

历史回顾

网站公告

今日签到

热门文章

最新发布

前端自学 - CSS总结篇（一）

CSS 总结

一、CSS 的简介

二、CSS 的引入

（一）行内样式

（二）内联样式

（三）外联文件

三、CSS 语法

四、选择器

（一）选择器命名规范

（二）基本选择器

1. 元素选择器

2. id 选择器

3. class 类选择器

4. * 通配符选择器

（三）组合选择器

1. 后代选择器

2. 子代选择器

3. 兄弟选择器

4. 下一个兄弟选择器

5. 分组选择器

（四）伪类选择器

（五）属性选择器

（六）伪元素

（七）伪类与伪元素的区别

五、CSS 权重

（一）CSS 引入优先级

（二）CSS 权重

六、文字属性

七、字体属性

八、其他属性

历史回顾

网站公告

今日签到

热门文章

最新发布

2. `id` 选择器

3. `class` 类选择器

4. `*` 通配符选择器