欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端学习笔记: CSS选择器

程序员文章站 2022-04-29 11:27:51
...

    为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，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颜色表示法

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>

结果如下
前端学习笔记: CSS选择器

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>

结果
前端学习笔记: CSS选择器

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>

结果如下：
前端学习笔记: CSS选择器

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选择器
前端学习笔记: CSS选择器
并且使用伪类选择器添加到的内容也无法被选中。

盒子模型

盒子模型解释
元素在页面中显示成一个小方块，类似一个盒子，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>

运行程序：
前端学习笔记: CSS选择器

盒子实例模型

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

<!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>

运行程序
前端学习笔记: CSS选择器

第二个实例：源代码如下

<!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>

运行程序，结果如下：
前端学习笔记: CSS选择器

相关标签： 基础 html

上一篇： 2.HTML解剖标签、标签

下一篇： Hive——执行Hive的查询：执行SQL（HQL）（12）

推荐阅读