CSS层叠样式表

最新推荐文章于 2023-08-02 16:48:42 发布

THER1881

最新推荐文章于 2023-08-02 16:48:42 发布

阅读量1.5k

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/thwr1881/article/details/124193037

版权

1、什么是结构和表现分离？

在页面中，使用html搭建页面的结构(页面的内容),不使用标签的属性设置样式，标签的样式全部在CSS中设置。

2、什么是CSS?

CSS是层叠样式表(Cascading Style Sheet)的简称
目前CSS3是新版本的CSS，与老版本(CSS2.1)相比在性能和成本上有大的提升。

3、如何使用CSS？

3.1、页面嵌入式：

页面嵌入式就是使用<style></style>标签嵌入CSS规则

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

代码展示

<!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>Document</title>
</head>
<style>
    p{
        color: red;
        font-size: 30px;
    }
</style>
<body>
    <p>你好</p>
</body>
</html>

效果展示
在这里插入图片描述

3.2、行内嵌入式

给标签添加style属性，此效果只对嵌入标签有效。如：<p style="color:red;">你好</p>

3.3、链接式

先建立独立的CSS文件。然后在页面中使用<link>标签链接外部的CSS文件，通常建议使用这种嵌入方式。

代码展示

p{
    color: blue;
    font-size: 30px;
}

<!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>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <p>你好</p>
</body>
</html>

效果展示
在这里插入图片描述

4、CSS的选择器

4.1、标签名选择器

  标签名{
			   
			   属性名：值;
			 }

4.2、id选择器

给标签设置id属性，通过id属性值选择标签。标签的id属性值和之前提到的一样不能重复。

#id{
   属性名：值；
   }

4.3、类选择器

给标签设置class属性，通过class属性选择标签，class属性名可以重复。

.class属性值{
			    属性名：值;
				
			 }

4.4、通配符选择器

通配符(*)，可以匹配页面中的任何元素

*{
  属性名：值；
}

5、文本样式属性

5.1、字体样式：

字体样式	作用
font-size	设置字号（文字的大小）
font-family	设置字体（前提是本地装有相应字体
font-style	字体的样式
font-weight	字体的粗细（数值从100-900，数值越大字体越粗）
@font-face	当本地并无相应字体时，可设置服务端字型（该属性是CSS3新增的样式属性）

5.2、文本样式

文本样式	作用
color	定义文本颜色（颜色表示方式和之前博客提到一样）
letter-spacing	设置字符之间的间距
word-spacing	该属性用于英文单词之间的间距，对中文无效
line-height	设置行高
text-algin	设置内容的对齐方式
text-transform	控制英文大小写
text-decoration	设置文本的下划线、上划线、删除线
text-indent	设置首行文本的缩进
text-shadow	设置文本的阴影效果
text-overflow	文本的溢出效果(结合overflow属性使用)
word-wrap	设置长单词和URL地址的自动换行

6、属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

属性选择器	作用
E[att]	选择具有att属性的元素
E[att=“val”]	选择具有att属性,并且att属性值等于val的元素
E[att~=“val”]	选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val
E[att^=“val”]	选择具有att属性,并且att属性值是以val开头的字符串
E[att$=“val”]	选择具有att属性,并且att属性值是以val结尾的字符串
E[att*=“val”]	选择具有att属性,并且att属性值中包含val的字符串

代码演示

7、关系选择器

关系选择器	作用
包含选择器(E F)	选择所有被E包含的F元素
子元素选择器(E>F)	选择所有作为E元素的子元素F
相邻元素选择器(E+F)	选择紧贴在E元素之后F元素
兄弟选择器(E~F)	选择E元素后面的所有兄弟元素F

代码演示

<!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>
</head>
<style>
    ul li{
        color: crimson;
        font-size: 30px;
    }
    nav>p{
     color: blue;
     font-size: 30px;
    }
    nav+p{
        color: cadetblue;
        font-size: 30px;
    }
    p~span{
        color: gold;
        font-size: 30px;
    }
</style>
<body>
    <ul>
        <li>西游记</li>
        <li>水浒传</li>
        <li>红楼梦</li>
        <li>三国演义</li>
    </ul>
    <nav>
        <p>金融学</p>
        <p>财务管理</p>
        <p>经济学</p>
        <span>会计学</span>
    </nav>
    <p>统计学</p>
</body>
</html>

效果展示
在这里插入图片描述

8、结构化的伪类选择器(伪类选择器带冒号)

结构化的伪类选择器	作用
html:root	根元素选择器。html文档中的根只有一个。样式应用于页面的每个元素
E:not(选择器)	不包含给定选择器的元素
E:only-child	匹配父元素仅有的一个子元素E
E:first-child	匹配父元素的第一个子元素E
E:last-child	匹配父元素的最后一个子元素E
E:nth-child(n)	匹配父元素中第(n)个子元素E
E:nth-last-child(n)	匹配父元素中倒数第(n)个子元素E
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E
E:empty	匹配没有任何子元素的元素E
E:checked	匹配用户界面上处于选中状态的元素E
E:enabled	匹配用户界面上处于可用状态的元素E
E:disabled	匹配用户界面上处于禁用状态的元素E

代码演示

9、伪对象选择器

伪对象选择器	作用
E::before(CSS3)	设置在对象前（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用
E::after(CSS3)	设置在对象后（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用

代码演示

<!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>
</head>
<style>
    p::before{
        color:cyan;
        content: 'Manchester';
    }
    span::after{
        color: cyan;
        content: 'City';
    }
</style>
<body>
    <p>
        City
    </p>
    <span>
        Manchester
    </span>
</body>
</html>

效果展示
在这里插入图片描述

10、超链接的伪类选择器

超链接的伪类选择器	作用
E:link	设置超链接a在未被访问前的样式。
E:visited	设置超链接a在被访问后的样式
E:hover	设置元素在其鼠标悬停时的样式
E:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

代码演示

<!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>
</head>
<style>
    a:link{
        color: red;
    }
    a:visited{
        color: blue;
    }
    a:hover{
        font-family: '楷体';
        font-size: 40px;
    }
    a:active{
        color: black;
    }
</style>
<body>
    <a href="#">百度</a>
</body>
</html>

效果展示

在这里插入图片描述

鼠标悬停时的样式

在这里插入图片描述

鼠标在点击的一瞬间的样式

在这里插入图片描述

链接访问后的样式

THER1881

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表

1、什么是结构和表现分离？在页面中，使用html搭建页面的结构(页面的内容),不使用标签的属性设置样式，标签的样式全部在CSS中设置。2、什么是CSS?CSS是层叠样式表(Cascading Style Sheet)的简称目前CSS3是新版本的CSS，与老版本(CSS2.1)相比在性能和成本上有大的提升。3、如何使用CSS？3.1、页面嵌入式：页面嵌入式就是使用<style></style>标签嵌入CSS规则<style> p{ colo
复制链接

扫一扫