CSS3 基础选择器

最新推荐文章于 2024-07-08 17:02:45 发布

玄子Share

最新推荐文章于 2024-07-08 17:02:45 发布

阅读量161

点赞数

分类专栏： # HTML+ CSS Java微服务后端开发文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_62283694/article/details/128437589

版权

Java微服务后端开发同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

HTML+ CSS

12 篇文章 0 订阅

订阅专栏

三、CSS3 基础

3.1 CSS 简介

CSS 的主要使用场景就是布局网页，美化页面的

概念

Cascading Style Sheet：级联样式表
表现 HTML 或 XML 等文档样式的计算机语言

作用

提供了字体、文本、超链接、列表以及背景等网页元素的样式
网页内容排版

3.2CSS发展史

3.2.1 CSS1.0

包含了字体、颜色、背景、文本等相关属性

3.2.2 CSS2.0

基于 CSS1.0，融入了 DIV+CSS 的概念，提出了 HTML 结构与 CSS 样式表的分离

3.2.3 CSS2.1

融入了更多高级的用法，如浮动，定位等

3.2.4 CSS3.0

它包括了 CSS2.1 下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持

3.3 CSS 语法结构

CSS 语言样式规则由选择器和声明两部分组成

选择器 { 属性1:属性值1;  属性2:属性值2; }
<!--选择器   声明1     声明2 -->

选择器用于指定被 CSS 样式处理的 HTML 对象

大括号中的内容是 CSS 样式声明，由属性和属性值组成

声明可以是一组或多组，属性和属性值之间用英文:连接，每组声明语句之间用英文;结尾

3.4 引入 CSS 的三种方式

h2 {
    color: green;
   /*样式名称*/ /*值*/
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>

<style>
    h1 {
        color: red;
    }
</style>
<!--    style：内部样式，只对当前页面生效-->

<link rel="stylesheet" href="../css/01_Style.css">
<!--    link：链接式外部导入CSS样式-->
</head>
<body>
<!--样式的生效顺序：就近原则-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3 style="color:yellow;">三级标签</h3>
<!--直接写在标签内：只对当前标签生效-->
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eP0XbZaS-1671968598856)(./assets/3.4.png)]

3.4.1 行内样式

通过标签的 style 属性设置元素的 CSS 样式，也称为内联样式

<h3 style="color:yellow;">三级标签</h3>
<!--直接写在标签内：只对当前标签生效-->

这种方式不能起到内容与表现相分离，本质上没有体现出 CSS 的优势，因此不推荐使用

3.4.2 内部样式表

将 CSS 代码集中写在页面的<head>标签的<style>子标签中

优点

同一页面中，一处定义，多处使用
代码简洁，便于修改

缺点

HTML 代码与 CSS 代码处于同一文档中，内容混乱
不利于多页面之间的代码共享
不利于代码维护

<head>
	<style>
		h1{
            color: blue;
        }
	</style>
    <!--    style：内部样式，只对当前页面生效-->
</head>
<body>
	<h1>一级标题</h1>
</body>

3.4.3 外部样式表

将 CSS 代码保存在扩展名为.css的样式表中，CSS 代码与 HTML 文档分离

HTML 文件引用外部样式表的两种方式

链接式

<head>
    <link  rel="stylesheet"  href="css文件路径" type="text/css">
    <!-- rel：使用外部样式表  href：css文件路径   type：文件类型-->
</head>
<body>
	<h2>二级标题</h2>
</body>

在HTML文件中使用<link/>标签引入style.css样式表文件

导入式

<head>
	<style>
		@import url("style.css");
        		/*css文件路径*/
	</style>
</head>
<body>
	<h2>二级标题</h2>
</body>

在HTML文件中使用@import关键字引入style.css样式表文件

3.4.5 链接式与导入式的区别

区别	链接式	导入式
关键语法	`<link/>`	@import
提供者	HTML语言提供	CSS语言提供
兼容问题	不存在浏览器兼容问题	IE 5以上的浏览器中才能识别
加载顺序	与页面同时加载	页面加载完成后再加载
样式权重	高	低

3.5 基础选择器

/*标签选择器*/
/*
    语法：
            直接写想要生效的标签名称
            就会对页面中所有的对应标签生效
*/
h1 {
    color: red;
}
/*类选择器*/
/*
    语法：
            以英文字符 .  点开头后面写名称可以自定义
*/
.xz{
color:green;
}
/*ID选择器*/
/*
    语法：
            以  #  符号开头，后面写名称可以自定义
*/
#yz{
color:yellow;
}
/*---------------------------------------------*/
h3{
    color:pink;
}
#zz{
    color:blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <link rel="stylesheet" href="../css/02_Style.css">
</head>
<body>
<h1>一级标签</h1>
<h1>一级标签</h1>
<!--
       标签选择器：
                只要是对应的标签就会生效
-->
<h2 id="yz">二级标签</h2>
<!--
        ID选择器:
                只要使用了ID选择器就会生效
                ID选择器一个页面只能使用一次
-->
<h2 class="xz">二级标签</h2>
<!--
        类选择器：
                只要使用了类选择器就会生效
                类选择器一个页面可以无限使用
-->
<h2>二级标签</h2>
<hr>
<h3>三级标签</h3>
<h3 class="xz">三级标签</h3>
<h3 id="zz" class="xz">三级标签</h3>
<!--优先级：ID选择器 > 类选择器 > 标签选择器-->
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VbJT10zS-1671968598858)(./assets/3.5.png)]

3.5.1 标签选择器

标签名 { 属性1:属性值1; 属性2:属性值2; }

<head>
    <style>
        h1 {
            color: red;
            /*只有h1标签才生效*/
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h1>一级标题</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQu0c40Y-1671968598859)(./assets/3.5.1.png)]

3.5.2 类选择器

.类名 { 属性1:属性值1; 属性2:属性值2; }

<head>
    <style>
        h1 {
            color: red;
            /*只有h1标签才生效*/
        }

        .er {
            color: blue;
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
<h2 class="er">二级标题</h2>
<!--在标签中使用 class 引入样式-->
<h1>一级标题</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o4fQE111-1671968598859)(./assets/3.5.2.png)]

3.5.3 ID 选择器

#id名 { 属性1:属性值1; 属性2:属性值2; }

<head>
    <style>
        h1 {
            color: red;
            /*只有h1标签才生效*/
        }

        .er {
            color: blue;
        }

        #id {
            color: green;
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
<h2 class="er">二级标题</h2>
<!--在标签中使用 class 引入样式-->
<h1>一级标题</h1>
<h2 id="id">二级标题</h2>
<!--在标签中使用 id 引入样式-->
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-66sy3sdb-1671968598859)(./assets/3.5.3.png)]

id 选择器具有唯一性，一个页面只可使用一次

3.5.4 通配符选择器

在 CSS 中，通配符选择器使用*定义，它表示选取页面中所有元素

* {属性1: 属性值1;}

通配符选择器不需要调用，自动就给所有的元素使用样式

3.5.5 基础选择器对照表

选择器	语法	描述
标签选择器	标签名{}	以标签名称开头，页面中所有对应标签均会生效
类选择器	.class{}	以`.`开头跟自定义名称，在标签中使用`class`引用
ID选择器	#id{}	以`#`开头跟自定义名称，在标签中使用`id`引用
通配符	*{}	以`*`命名，选取页面中的所有元素

3.5.6 基础选择器优先级

<head>
    <style>
        h3 {
            color: red;
        }

        .xz {
            color: blue;
        }

        #zz {
            color: green;
        }
    </style>
</head>
<body>
<h3>三级标签</h3>
<h3 class="xz">三级标签</h3>
<h3 class="xz" id="zz">三级标签</h3>
<!--优先级：ID选择器 > 类选择器 > 标签选择器-->
</body>