前端学习（三）: CSS选择器

最新推荐文章于 2023-12-04 10:22:14 发布
最新推荐文章于 2023-12-04 10:22:14 发布
阅读量240 收藏
点赞数 1
分类专栏： html 基础 文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45020131/article/details/105079801
版权
基础 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
html
10 篇文章 0 订阅
订阅专栏

    为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，css由此思想而诞生，css是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表，有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

css基本语法及页面结构

css基本语法
css的定义方法是：
选择器 {属性：值； 属性：值；}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性有一个或多个值。代码示例

 /*
    css注释 ctrl+shift+"/"
 */

 div{
    width: 100px;
    height:100px;
    color:red;
 }

css页面引入方法：
1.外联式：通过link标签，外链到外部样式表到页面中

 <link rel="stylesheet" type="text/css" href="path">
  1. 嵌入式：通过style标签，在网页上创建嵌入的样式表
 <sytle>
 h1{
    font-size:20px;
    color: pink;
 }
 </style>
  1. 行内样式，在标签内部通过style属性编写样式
 <a href="http://www.baidu.com" style="font-size:20px; color:blue;">百度一下</a>

css页面引入方法：

1.外联式：通过link标签，外链到外部样式表到页面中
 <link rel="stylesheet" type="text/css" href="path">

 2. 嵌入式：通过style标签，在网页上创建嵌入的样式表
 <sytle>
 h1{
    font-size:20px;
    color: pink;
 }
 </style>

 3. 行内样式，在标签内部通过style属性编写样式

 <a href="http://www.baidu.com" style="font-size:20px; color:blue;">百度一下</a>

举例：

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

    <!--  外链式样式表  -->
    <link rel="stylesheet" type="text/css" href="css/index.css">


<!--  嵌入式样式  -->
    <style>
        h2{
            font-size: 30px;
            color: chartreuse;
        }

        a{
            font-size: 20px;
            color: blue;
        }

    </style>
</head>
<body>
    <h2>引入引入CSS标题</h2>

    <div>this is a div </div>
    <a href="http://python.org" target="_blank">python官网</a>

    <!-- 行内样式 -->
    <a href="http://www.baidu.com" style="font-size: 30px; color: gold;">百度一下</a>
</body>
</html>

css文本设置

常用的应用文本的css样式：

  • color 设置文字的颜色，如 color:red;

  • font-size 设置文字大小，如font-size: 20px;

  • font-family 设置文字字体 如 font-family:‘微软雅黑’;

  • font-style 设置文字是否倾斜，如font-style:‘normal’; 设置不倾斜: font-style:‘italic’;

  • font-weight 设置文字是否加粗 如 font-weight:bold; 设置加粗, font-weight:normal 设置不加粗

  • line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;、

  • font 可以同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
    font: 是否加粗 文字大小/文字间距 文字字体 如：font: normal 20px/40px “Microsoft YaHei”;

  • text-decoration 设置文字的下划线， 如增加下划线：text-decoration:underline; 删除下划线：text-decoration:none;

  • text-indent 设置文字的首行缩进, 如text-indent: 40px; 设置文字首行缩进40像素

  • text-align: 设置文字水平对齐方式，默认为：text-align: left; 将文字居中 text-align:center;
    在代码中的操作：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css文本设置</title>
	<!-- 使用style标签写css样式表 -->
	<style type="text/css">
		
		/*设置div标签的字体的大小和颜色*/
		div{
			
			color: green;  /*设置字体颜色为红色*/
			/*font-family: '仿宋';  /*设置文字字体
			font-size: 20px;  设置字体大小为20像素
			line-height: 60px;  设置字体的间距
			font-weight: bold;  加粗文字

			以上四句可以用一句来表达,但要注意顺序*/
			font: bold 20px/60px '仿宋';

			text-indent: 40px;  /*首行缩进40px*/

			text-decoration: underline;  /*为文本内容增加下划线*/
		}

		h1{
			font-weight: normal;  /*将h1标签中的文字不加粗显示*/
			font-style: normal;  /*将字体设置为不倾斜*/
			color: red;
		}

		em{
			font-style: normal; /*将em标签中的内容设置为不倾斜*/
			color: gold;
		}

		/*增加span标签中的样式*/
		span{

			font-weight: bold;  /*加粗文字*/
			font-style: italic;  /*将文字倾斜*/
			font-size: 25px;  /*设置字体大小*/
			color: blue;  /*设置字体颜色*/

		}

		a{
			text-decoration: none;  /*去除a标签的下划线*/
		}

		p{
			font: normal 20px/40px  "Microsoft YaHei";
			text-align: center;  /*将p标签居中对齐*/
		}

	</style>
</head>
<body>

	<h1>CSS文本设置</h1>

	<div>
		<span>为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开</span>，css由此思想而诞生，css是 
		<em>Cascading Style Sheets</em> 的首字母缩写，意思是层叠样式表，有了CSS，html中大部分
		表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
		
	</div>

	<p>这是一个p标签</p>

	<a href="http://www.baidu.com" target="_brink">百度一下</a>

</body>
</html>

在浏览器中打开
在这里插入图片描述

css颜色表示法

css颜色主要有三种表示方法：
1.颜色名表示， 比如：red红色， gold金色
2.rgb表示，比如：rgb(255,0,0) 表示红色
3.16进制表示，比如：#ff0000表示红色，这种可以简写为f00

CSS选择器

常用的选择器有如下几种：
1.标签选择器

  • 标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
    举例:
*{color:red;}  /*表示任意标签的文本都为红色*/
 div{color:red}
<div>.....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div>  <!-- 对应以上两种样式 -->

2.id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置只能对应于页面上的一个元素
不能重复用，id一般给程序使用，所以不推荐使用id作为选择器

3.类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，
可复用，是css中应用最多的一种选择器。

举例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS选择器</title>

	<style type="text/css">
		/*id选择器使用#来表示*/
		#div{
			font-style: italic;
			color: rgb(255,0,0);
		}

		/*类选择器，使用.来表示*/
		.big{
			font-weight: bold;
			font-size: 40px
		}

		.green{
			color: green;
		}

	</style>
</head>
<body>

	<div id="div">这是第一个div标签</div>  <!-- 当标签中的id值对应id选择器值时，对应id选择器中的样式 -->
	<div class="big">这是第二个div标签</div>
	<div class="green">这是第三个div标签</div>
	<div class="big green">这是第四个div标签</div>  <!-- 我全都要 -->


</body>
</html>

结果如下
在这里插入图片描述

4.层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突

举例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>层级选择器</title>

	<style type="text/css">

		/*标签选择器*/
		div{
			font-size: 20px;
			text-indent: 40px;
			color: green;
			line-height: 40px;
		}
		/*层级选择器 表示选中class="div1"下的span标签*/
		.div1 span{
			font-size: 25px;
			color: red;
			text-decoration: underline;
			font-weight: bold;
		}


		.div1 em{
			font-style: "仿宋";

		}


		/*表示选中div标签下class="em1"的标签*/
		div .em1{
			font-style: normal;
			font-weight: bold;
			color: blue;
		}

	</style>
</head>
<body>
	<div class="div1">主要应用在选择父元素下的子元素，<span>或者子元素下面的子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，<em>防止命名冲突主要应用在选择父元素下的子元素</em>，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突</div>

	<div>主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，<em class="em1">防止命名冲突主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用</em>，减少命名，同时也可以通过层级，防止命名冲突主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突</div>


</body>
</html>

结果
在这里插入图片描述

5.组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器
举例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css组选择器</title>

	<style type="text/css">
		/*组选择器，将相同的元素放到一起，可以简化代码*/
		/*.div1{
			font-size: 20px;
			font-weight: bold;
			color: red;
		}

		.div2{
			font-size: 20px;
			font-weight: bold;
			color: pink;
		}

		.div3{
			font-size: 20px;
			font-weight: bold;
			color: yellow;
		}

		.div4{
			font-size: 20px;
			font-weight: bold;
			color: blue;
		}*/

		/*组选择器，同上方代码实现的功能一样，但可以简化代码*/
		.div1, .div2, .div3, .div4{
			font-size: 20px;
			font-weight: bold;
		}

		.div1{
			color: red;
		}

		.div2{
			color: pink;
		}

		.div3{
			color: yellow;
		}

		.div4{
			color: blue;
		}
	</style>
</head>
<body>
	<div class="div1"> 这是第一个div标签</div>
	<div class="div2"> 这是第二个div标签</div>
	<div class="div3"> 这是第三个div标签</div>
	<div class="div4"> 这是第四个div标签</div>


</body>
</html>

结果如下：
在这里插入图片描述

6.伪类及伪元素选择器
常用的伪类选择器有hover，表示当鼠标悬浮在元素上时的状态，伪元素选择器有
before和after，它们可以通过在元素中插入内容。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>伪类及伪元素选择器</title>
	<style type="text/css">
		
		/*伪元素选择器一般都是使用在a标签上的，当鼠标放在链接上时，可以改变状态*/
		.link{
			text-decoration: none; /* 去掉下划线*/
			font-size: 20px;
			color: red;
		}

		/*当鼠标悬停在a标签上时出现的样式*/
		.link:hover{
			font-weight: bold;
			color: blue;
		}


		/*向样式中插入内容，注意插入的内容在浏览器中不能被选中, 插入文字时一般与content连用*/
		.insert_b:before{
			content: "在前面所插入的文字";
			font-size: 20px;
			color: pink;
		}

		.insert_a:after{
			content: "在后面插入的文字";
			font-size: 20px;
			color: gold;
		}


	</style>

</head>
<body>
	<a class="link" href="http://www.baidu.com" title="baidu" target="_brink">百度一下</a>

	<div class="insert_b">这是第一个div标签</div>
	<div class="insert_a">这是第二个div标签</div>

</body>
</html>

当鼠标放到连接上时，可以发现更改了字体样式
在这里插入图片描述
在这里插入图片描述
并且使用伪类选择器添加到的内容也无法被选中。

盒子模型

盒子模型解释
元素在页面中显示成一个小方块，类似一个盒子，CSS盒子模型就是使用现实
中盒子来做比喻，帮我们设置元素对应的样式。把元素叫做盒子，设置对应的样式分别为**：盒子的宽度(width)盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)**，由于在下面的实例中都会写入注释，所以我也不在过多赘述了。

举例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>

	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: gold;

			/*设置边框*/
			/*border-top-color: black;*/
			/*设置边框的线条 实线：solid 虚线: dashed 点线:dotted*/
			/*border-top-style: solid;
			border-top-width:10px;*/

			/*边框设置可以简写一次性设置多个值，没有顺序要求*/

			/*设置边框顶部*/
			/*border-top: 10px blue solid;*/
			/*设置边框左边*/
			/*border-left: 10px blue dotted;*/

			/*设置边框右边*/
			/*border-right: 10px black dashed;*/

			/*设置边框底部*/
			/*border-bottom: red 10px solid;*/


			/*一次性设置边框*/
			border:10px blue solid;

			/*使用padding调整页面内容与边框的间距*/
			/*顶部间距*/
			/*padding-top:20px;*/

			/*左部间距*/
			/*padding-left: 50px;*/

			/*右部间距*/
			/*padding-right:30px;*/

			/*底部间距*/
			/*padding-bottom: 40px;*/


			/*也可以一次性输入4个方向的值，顺序是：顶部、右部、底部、左部*/
			/*padding: 20px 30px 40px 50px;*/

			/*输入一个值，内容间距与这个值相等*/
			padding: 30px;

			/*设置盒子与盒子之间的间隙， 与padding的使用方法相同*/
			margin: 50px 0 0 100px;

		}

	</style>
</head>
<body>
	<div class="box">元素在页面中显示成一个小方块，类似一个盒子，CSS盒子模型就是使用现实
中盒子来做比喻，帮我们设置元素对应的样式。元素在页面中显示成一个小方块，类似一个盒子，CSS盒子模型就是使用现实
中盒子来做比喻，帮我们设置元素对应的样式。</div>
</body>
</html>

运行程序：
在这里插入图片描述

盒子实例模型

下面做两个个盒子的实例模型来巩固一下今天所学的内容。
源代码如下
第一个实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子实例</title>
	<style type="text/css">
		
		.box{

			height: 160px;
			width: 140px;
			background-color: gold;

			/*设置边框*/
			border:10px #000 solid;

			/*设置内容与边框的距离*/
			padding: 20px 20px 0;

			margin: 100px;
		}

	</style>
</head>
<body>

	<div class="box">盒子里面的文字内容，距离边框有一定距离</div>

</body>
</html>

运行程序
在这里插入图片描述

第二个实例：源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子练习</title>
    <style rel="stylesheet" type="text/css">
        .box{
            font-size: 20px;
            color: #333;
            font-family: '微软雅黑';
            font-weight: bold;

            height: 40px;
            width: 390px;

            /*设置边框*/
            border-top: 1px solid #f00;
            border-bottom: 3px solid #666;

            /*设置间距*/
            padding: 10px 0 0 10px;

        }

    </style>

</head>
<body>
    <div class="box">新闻列表</div>
</body>
</html>

运行程序，结果如下：
在这里插入图片描述

mr.ocean
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS（层叠样式表）知识
m0_71769770的博客
08-27 1259
2.浏览器解析行内块或行内标签，如果标签换行，标签间会出现间距，所以使用浮动，可以让两块标签更好在一行排列；两个标签都左浮动，不会有间距，但是一个标签左浮，一个右浮，两标签间会有空隙。(在文本、span标签、a标签、input标签、img标签实现水平对齐效果，只需给其标签的父元素设置text-align即可)2.额外标签法：有些不适合加高度的，可以在父元素内容最后添加一个块级元素，再给添加的块级元素设置clear:both。（互相嵌套的块级元素，子元素的margin会作用在父元素上，导致子父级一起移动）..
css 设置层级关系,css层级关系怎么设置
热门推荐
weixin_30623181的博客
08-04 1万+
在css中，可以利用z-index属性来设置层级，该属性可以设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；语法格式“z-index:数值;”，允许使用负值。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在css中，可以利用z-index属性来设置层级。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素...
【JavaWeb】前端开发三剑客之CSS(下)
冲击大厂之路!!!
01-22 3441
CSS的后序学习，CSS代码细节解读！
块元素居中方式
gklcsdn的博客
12-10 792
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS层级问题以及CSS透明效果
qq_45902025的博客
03-13 805
CSS层级问题以及CSS透明效果
前端技术栈: css和ES6
最新发布
06-19
1. **选择器与层叠**：CSS选择器用于选取要应用样式的元素。基础选择器包括标签选择器、类选择器、ID选择器和通配符选择器。层叠规则决定了当多个样式冲突时如何决定最终样式，按照优先级从低到高为：继承样式、内联...
前端css选择器练习diner.zip
04-22
"前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包，名为"css-diner"。 在"css-diner"这个练习中，你可以深入理解并掌握各种CSS选择器的用法，从而提升你的前端开发技能。以下是一些关于CSS选择...
Web前端开发基础：CSS控制图文混排.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...
前端必须掌握的css选择器方法
08-29
下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
css选择器.xmind
07-28
脑图形式的css选择器和层叠规则整理，包括css选择器的类型以及css层叠规则的影响因素（重要性、来源、特殊性、顺序等等），属于前端基础技术的资源
前端学习之CSS---层级、属性、伪类选择器
weixin_45258154的博客
05-31 675
层级选择器、属性选择器、伪类选择器
css：四种定位（position)以及z-index层级
YangLu888
10-08 1801
css的四种定位以及z-index层级调整
css中的z-index层级问题
weixin_45709829的博客
03-25 2262
css中z-index层级问题 一、css盒子模型的布局提供三种不同的定位方案 ①正常文档流 ②浮动 ③定位 第三种定位会将元素从正常文档流中完全移走，前端开发人员通过设置top、bottom、left、right在二维空间进行定位。 Z-index允许开发人员在三维空间进行定位 二、z-index基础 x轴代码水平方向，y轴代表垂直方向，z轴代表目光平视的方向，看进去屏幕里面这个方向。 开发的页面是二维空间，z轴是透视的。 规定：两个元素共享同一个二维开发空间块，z-index值大的会覆盖小的。想象一下，
CSS层叠上下文、层叠顺序和层叠等级
syzdev的博客
03-19 2865
0 前言 在讨论层叠上下文和层叠顺序之前先举个例子，创建两个box，其中红色box长200px宽400px，蓝色box长400px宽200px： <div class="box"> <div class="blue-box"></div> </div> <div class="box"> <div class="red-box"></div> </div> .box { po
CSS定位之元素的层级
靡不有初鲜克有终
07-22 4530
定位练习1 .box1{ width: 100px; height: 100px; background-color: red; position: relative; } .box2{ width: 100px; height: 100px; background-color: yellow; positio
CSS 中的层叠,层级关系
gooodi的博客
10-11 3149
CSS 中的层叠和块级格式化上下文 1. 层叠上下文 (Stacking Context) 2. 层叠等级 (Stacking Level) 3. z-index 4. 层叠顺序 (Stacking Order) 5. 文档流 (Document Flow) 5.1 常规流 (Normal flow) 5.2 浮动 (Floats) 5.3 绝对定位 (A...
前端CSS（层叠样式表）总结
sinat_31583645的博客
12-04 675
CSS 的全称为：层叠样式表 ( Cascading Style Sheets ) 。 CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。
CSS层级总结
IT晓可程序员之路
06-05 1213
css层级总结
CSS-层级
魂断楼兰的博客
11-29 2478
CSS 基础知识点1. 小知识1.1 font : 加粗 字号/行高 格式； 行高如果不写，默认为父盒子行高； u ins 下划线 i em 倾斜 s del 删除线 font-weight: normal; 加粗变正常 font-style: normal; 倾斜变正常 text-decoration: n
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值