GJ_CSS_知识点

热爱编程的大冤种

已于 2024-06-27 17:20:30 修改

阅读量388

点赞数 6

分类专栏：前端 CSS 文章标签： css 前端

于 2024-06-27 16:43:13 首次发布

本文链接：https://blog.csdn.net/2401_85521761/article/details/140017189

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

CSS (Cascading Style Sheets)

本章主要探讨HTML5 中CSS（层叠样式表），它是用来对HTML 文档外观的表现形式进行排版和格式化。

一. 使用CSS

CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

<p style="color:red;font-size:50px;">这是一段文本</p>

解释：style 是行内样式属性。color 是颜色属性，red 是颜色属性值；font-size是字体大小属性，50px 是字体大小属性值。

二. 三种CSS引入方式

创建CSS 样式表有三种方式：1.元素内嵌样式；2.文档内嵌样式；3.外部引入样式。

元素内嵌样式

<p style="color:red;font-size:50px;">这是一段文本</p>

解释：即在当前元素使用style 属性的声明方式。
2. 文档内嵌样式

<style type="text/css">
p {
color: blue;
font-size: 40px;
}
</style>
<p>这是一段文本</p>

解释：在<head>元素之间创建<style>元素，通过选择器的方式调用指定的元素并设置相关CSS。
3. 外部引用样式

<link rel="stylesheet" type="text/css" href="style.css">
//style.css
@charset "utf-8";
p {
color: green;
font-size: 30px;
}

解释：很多时候，大量的HTML 页面使用了同一个组CSS。那么就可以将这些CSS 样式保存在一个单独的.css 文件中，然后通过<link>元素去引入它即可。@charset "utf-8" 表明设置CSS 的字符编码，如果不写默认就是utf-8。如果有多个.css 文件，可以使用

三. 层叠和继承

所谓的样式表层叠：指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式表继承：指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式，是这个元素在这个浏览器运行时默认附加的样式。

浏览器样式

<b>这个元素隐含加粗样式</b>
<span style="font-weight:bold;">这个元素通过style 加粗</span>

解释： <b>元素就是具有加粗的隐含样式，而<span>元素没有任何隐含样式，通过style 属性设置样式。
2. 样式表层叠
样式表层叠通过五种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的
优先级顺序就显的比较重要。以下优先级从低到高：
(1).浏览器样式（元素自身携带的样式）
(2).外部引入样式（使用<link>引入的样式）
(3).文档内嵌样式（使用<style>元素设置）
(4).元素内嵌样式（使用style 属性设置）

//元素内嵌
<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>
//文档内嵌
<style type="text/css">
p {
	color:blue;
	font-weight: bold;
}
</style>
//外部引入
@charset "utf-8";
p {
	color: green;
	font-style: italic;
}

如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案
标记成重要样式（important）。

//强行设置最高优先级
color: green !important;

样式继承
如果某一个元素并没有设置父元素相关的样式，那么就会使用继承机制将父元素的样式
集成下来。

//<b>元素继承了<p>元素的样式
<p style="color:red;">这是<b>HTML5</b></p>

样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则
不会被继承。如果继承这种样式，就必须使用强制继承：inherit。

//强制继承布局样式
<p>这是<b>HTML5</b></p>
<style type="text/css">
p {
	border: 1px solid red;
}
b {
	border : inherit;
}
</style>

四. 选择器汇总

在这里插入图片描述

五. 基本选择器详解

通用选择器

*{
	margin: 0;
	padding: 0;
	border: 1px solid red;
}

解释：解释：“*”号选择器是通用选择器，功能是匹配所有html 元素的选择器包括<html>和<body>标签。
2. 元素选择器

p {
	color: red;
}
<p>段落</p>

解释：直接使用元素名称作为选择器名即可。
3. ID 选择器

#box{
	text-algin: center;
}

解释：通过对元素设置全局属性id，然后使用#id 值来选择页面唯一元素。
4. 类选择器

.abc {
	border: 1px solid red;
}
<b class="abc">加粗</b>
<span class="abc">无</span>

解释：通过对元素设置全局属性class，然后使用.class 值选择页面一个或多个元素。

b.abc {
	/*作用在b标签身上的*/ 	
	border: 1px solid red;
}

解释：也可以使用“元素.class 值”的形式，限定某种类型的元素。

<span class="abc edf">无</span>

解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。
5. 属性选择器
//所需CSS2 版本

[href] {
	color: orange;
}

解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的
属性选择器。

//所需CSS2 版本
[type="password"] {
	border: 1px solid red;
}

解释：匹配属性值的属性选择器。

//所需版本CSS3
[href^="http"] {
	color: orange;
}

解释：属性值开头匹配的属性选择器。

//所需版本CSS3
[href$=".com"] {
	color: orange;
}

解释：属性值结尾匹配的属性选择器。

//所需版本CSS3
[href*="baidu"] {
	color: orange;
}

解释：属性值包含指定字符的属性选择器。

//所需版本CSS2
[class~="edf"] {
	font-size: 50px;
}

解释：属性值具有多个值时，匹配其中一个值的属性选择器。

//所需版本CSS2
[lang|="en"] {
	color: red;
}

解释：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

<i lang="en-us">HTML5</i>。

六.复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。
1.分组选择器

p,b,i,span {
	color: red;
}

解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择
器，还可以使用ID 选择器、类选择器、属性选择器混合使用。

2.后代选择器

p b {
	color: red;
}

解释：选择p元素内部所有b元素。不在乎b的层次深度。当然，后代选择器也可以混合使用ID 选择器、类选择器、属性选择器。

3.子选择器

ul > li {
	border: 1px solid red;
}
<ul>
<li>我是儿子
<ol>
<li>我是孙子</li>
<li>我是孙子</li>
</ol>
</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>

解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。

4.相邻兄弟选择器

p + b {
	color: red;
}

解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

5.普通兄弟选择器

p ~ b {
	color: red;
}

解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

七．动态伪类选择器

动态伪类选择器根据条件的改变匹配元素。

:link 和visited

a:link {
	color: red;
}
a:visited {
	color: orange;
}

解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。

:hover

a:hover {
	color: blue;
}

解释：表示鼠标悬停在超链接上。

:active

a:active {
	color: green;
}

解释：表示鼠标按下激活超链接时。