CSS（1）基础/选择器/性质

最新推荐文章于 2021-12-14 21:46:47 发布

冲呀web

最新推荐文章于 2021-12-14 21:46:47 发布

阅读量149

点赞数

分类专栏：前端三剑客文章标签： css

本文链接：https://blog.csdn.net/weixin_44698566/article/details/105079924

版权

前端三剑客专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、css基础知识

1.1 概述
css(cascading style sheet)层叠式样式表（关键字：层叠式样式）
前端三层：
结构层：从html角度描述页面（标签）
样式层：从美化角度书写样式（css）
行为层：从用户交互角度书写行为（js）

1.2 css组成
css分为两部分：
第一部分：选择器（给谁设置样式属性）
第二部分：样式属性（给选择器添加样式）
1.3 css作用
css作用设置元素样式属性（盒子样式，文字样式）
书写css要求：
有什么样式书写什么属性。
每一条属性，逐条书写，每条属性结尾书写分号;

盒子属性：
width: 盒子宽度，单位是px（像素）
height: 盒子高度，单位是px（像素）
background-color:背景颜色
短横连接的都是单一属性
background复合属性
border: 也是复合属性（边框）
复合写法属性值用空格隔开

border: 1px(边框线宽度)     solid（线的类型：实线）     #000（线的颜色）;

文字属性：
color: 文字颜色
font-size: 单一属性，文字大小（字号），单位也是px
font-family: 字体
可以同时设置多个字体（用逗号隔开），会从第一个字体开始匹配,字体名称用双引号包裹
先书写英文字体（Arial）
再书写中文，Microsoft Yahei(微软雅黑) 宋体（SimSun）

1	font-family: "Arial","微软雅黑","宋体";

如果要求网页加载更快，书写英文单词

1	font-family: "Arial","Microsoft Yahei","SimSun";

1.4 css书写位置
内嵌式（内部样式表）：所有样式属性书写在head标签中一对style标签里。（练习使用）
type:类型
属性值：text/css，纯文本css文件

1	<head>
2		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
3		<title>Document</title>
4		<style type="text/css">
5			/*所有的样式属性  内嵌式*/
6		</style>
7	</head>

行内式（内联样式）：前端不使用，书写在标签一个style属性中，属性值包含了所有的css样式属性

1	<div style="font-size: 100px;font-family: 'SimSun';">盒子</div>

外链式（外部样式表）：通过Link标签引入一个css文件
css文件扩展名.css，样式属性直接书写在css文件中.
link是单标签，书写在head标签中
属性：
rel: 表示html和css关系，样式表
type: 表示类型（可以省略）
href: 路径

1	<link rel="stylesheet" type="text/css" href="css/01.css">

1.5 css杂项
css键值对： k: v
每一条属性结束必须添加分号;
每一条属性独占一行。
css对空格，缩进，换行不敏感。

1	div {
2		/*盒子属性*/
3		width: 300px;
4		height: 300px;
5		background-color: lightblue;
6		border: 10px solid red;
7		/*文字属性*/
8		color: white;
9		font-size: 30px;
10		font-family: "Arial","Microsoft Yahei","SimSun";11	}

二、css基础选择器

2.1 标签选择器
通过标签名选中元素。
语法：标签名 {}
不管标签嵌套多深，都可以通过标签名查找到。

1	p {
2		color: red;
3	}
4	<div>
5		<div>
6			<div>
7				<div>
8					<div>
9						<p>内部深层的p</p>
10					</div>
11				</div>
12			</div>
13		</div>
14	</div>

用途：清除，重置默认样式

1	/*用途：重置，清除默认样式*/
2	a {
3		text-decoration: none;
4		color: #333;
5	}
6	ul {
7		/*去掉小圆点*/
8		list-style: none;9	}

2.2 id选择器
通过id名选中元素
语法：#id名（#和id名紧紧书写）
id名命名规则：html严格区分大小写，必须以字母开头，后面可以有数字，下划线，短横。
id名是唯一的，不管是不是相同的标签只有出现一次该id名

1	#para-_1 {
2		font-size: 100px;3	}

一般情况我们不使用id设置样式。
2.3 类选择器
通过类名选中元素。
给元素添加class属性
.类名 {}
类名命名规则和id名一样。

同一个元素可以被不同选择器选中（id选择器设置字号，类选择器设置文字颜色）设置不同的样式属性，这些属性都会加载在元素身上。
层叠性体现（叠加）：同一个元素被不同选择器选中，设置不同的样式，会同时加载。

同一个元素可以设置多个类名，类名之间用空格隔开。
多个元素可以同时有相同类名。

1	<p class="para box wenzi">段落</p>

类名特殊应用：原子类（我们可以将一些常用属性，设置为原子类，一般原子类只一个属性，便于样式设置）

1	<div class="f20 w800">1</div>

用途：相同样式的元素，添加同一个类名（类名上样式）

2.4 通配符

* {}

通配符可以选中页面上所有的标签（包括body）。
用途：练习阶段使用通配符快速清除默认样式。

1	* {
2		padding: 0px;
3		margin: 0px;4	}

三、高级选择器

高级选择器是在基础选择器上延伸
3.1 后代选择器
通过嵌套关系进行选择，一般通过标签或者类选择器确定大范围，在大范围内再次选择。
语法：每一层选择器用空格隔开

1	div p {
2		/*选中div后代中的p*/
3		color: red;	}

后代选择器不但可以选中儿子，还可以选中孙子等所有的后代元素。

1	.box h3 {
2		font-size: 50px;
3	}
4	<div class="box">
5		<div>
6			<div>
7				<div>
8					<h3>我是多层嵌套的h3</h3>
9				</div>
10			</div>
11		</div>
12	</div>

一般我们在使用后代选择器是，将每一层祖先补全，精确选择。

1	/*一般要求补全每一层祖先*/
2	.box div p {
3		font-size: 50px;
4	}
5	<div class="box">
6		<div>
7			<p>我是p标签</p>
8		</div>
9	</div>

.box p {}一样会选中下面的结构

1	<div class="box">
2		<div>
3			<p>我是p标签</p>
4		</div>
5	</div>
6	<div>
7		<div class="box">
8			<p>我是p标签</p>
9		</div>
10	</div>

不管怎么，一定在书写选择器时有对应的结构。

1	<div>
2		<div class="box">
3			<p>我是p标签</p>
4		</div>
5	</div>
6	.box div p {不能选中下面的结构}
7	<div>
8		<div class="box">
9			<p>我是p标签</p>
10		</div>
11</div>

3.2 交集选择器
同时选中两个选择器都具有的元素。
语法：连续书写选择器，不要添加任何空格（和后代选择器进行区分）

1	p.para {
2		font-size: 50px;
3	}
4	<p class="para">p</p>
5	<p>
6		我是p  <span class="para">特殊</span>	
7	</p>

交集选择器可以连续交集（选择器可以书写多个）

1	/*可以连续交集*/
2	p.para.fs {
3		/*
4		选中元素特点同时具有下面3个选择器：
5		p标签
6		.para
7		.fs
8		*/
9		color: red;}

交集选择器可以不是标签选择器开头

1	.para.fs {}  //合法
2	#para.fs {}  //不合法，id选择器可以唯一选中元素

3.3 并集选择器
同时设置多个选择器相同的样式。
语法：逗号隔开每一个选择器

1	div, h3, p {
2		font-size: 50px;
3		color: red; }

类选择器也可以使用并集

1	.box, .para, .fs {
2		width: 200px;
3		height: 200px;
4		background-color: lightblue;
5		margin-bottom: 20px; }

四、css性质

4.1 继承性
css继承性：元素可以从祖先继承文字属性，不能继承盒子属性
祖先设置文字属性后代元素都将继承这些文字属性。
1 文字属性：color, font系列,line系列，text系列等
2 盒子属性（不能继承）：width,height,background系列，border,浮动，等

css一个比较好性质，可以将一些文字属性给祖先设置，他的后代都将继承这些文字属性，简化代码。

1	body {
2		color: #333;
3		font-family: "Arial","Microsoft Yahei","SimSun";
4		font-size: 14px; }

层叠性体现：继承性

1	div {
2		width: 300px;
3		height: 300px;
4		background-color: lightblue; }

4.2 css层叠性
同一个元素被不同选择器选中，设置相同样式，会如何显示？
层叠性：同一个元素被不同选择器选中，设置相同样式，权重大的会层叠掉权重小的。

1	div class="box" id="box">盒子</div>
2	/*同一个元素被不同选择器选中 div .box   #box 同时设置文字颜色，会如何渲染*/
3	div {
4		font-size: 50px;
5		color: red;
6	}
7	#box {
8		color: blue;
9	}
10	.box {
11		color: green;12	}

权重：元素选择器针对性越强，权重就越大。
内嵌》id选择器》类选择器》标签选择器
1id = 255类
1类 = 255标签

①选中元素，计算该元素的权重。
选中元素，计算权重，只需要看id数量，类的数量，标签数量。先比较id选择器的数量，id数量多的权重最大；如果id数量相同，比较类的数量，类的数量多的权重就大；如果类的数量还相同就比较标签的数量，标签数量多的权重最大；如果标签数量还相同，直接看书写顺序，谁的样式在最后就显示谁的样式。

1	.box1 .box2 #box3 p {
2		color: blue;
3		/*(1,2,1)*/
4	}
5	/*选择器数量都相同，后面的样式层叠掉前面的*/
6	#box1 .box2 .box3 p {
7		color: green;
8		/*(1,2,1)*/	}

②元素没有被选中，该元素权重是0.
样式看继承性（html结构距离近的优先渲染）就近原则

1	body {
2		font-size: 50px;
3		color: red;
4	}
5	#box1 {
6		color: blue;
7	}
8	.box3 {
9		color: green;	}

如果距离相同，看选择器权重（依次比较该选择器id,类，标签选择器数量）

如果距离相同，选择器数量还相同，看css书写顺序

1	.box1 #box2 {
2		color: orange;
3	}
4	/*数量相同，看css顺序*/
5	#box1 .box2 {
6		color: green;
7		/*（1,1,0）*/	}

4.3 important
语法：
书写在属性值后面添加空格 !important分号结束

作用：可以提高选中元素单个属性的权重最大。而不是提高整个选择器的权重

important不影响就近原则，该就近原则渲染就用就近渲染。

1	/*元素没有被选中*/
2	body {
3		font-size: 50px;
4		color: red !important;
5	}
6	.box {
7		color: green;	}
/*
		书写imporant只能提高color: red权重最大;
		而不是提高p选择器权重最大


		颜色：红色
		字号：50px
		*/

冲呀web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（1）基础/选择器/性质

一、css基础知识1.1 概述css(cascading style sheet)层叠式样式表（关键字：层叠式样式）前端三层：结构层：从html角度描述页面（标签）样式层：从美化角度书写样式（css）行为层：从用户交互角度书写行为（js）1.2 css组成css分为两部分：第一部分：选择器（给谁设置样式属性）第二部分：样式属性（给选择器添加样式）1.3 css作用css作...
复制链接

扫一扫