【WEB学习】Day06 - CSS进阶

最新推荐文章于 2024-07-25 09:24:40 发布

Clown Piece

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量39

点赞数

分类专栏： WEB学习笔记文章标签：前端学习 css

本文链接：https://blog.csdn.net/oo00Z00oo/article/details/132066430

版权

WEB学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

【WEB学习】Day06 - CSS进阶

一、Emmet语言

Emmet可以简化写代码的操作。

1.快速生成HTML结构语法

在这里插入图片描述

2.快速生成CSS样式语法

可以采取简写形式即可。
在这里插入图片描述

3.快速格式化代码

利用开发环境自带的排版快捷键，可以快速将所有行的缩进调成规范的格式，方便阅读。

二、CSS 的复合选择器

在CSS里，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

复合选择器可以更准确、高效选择目标元素。
复合选择器由两个或多个基础选择器，通过不同的方式组合而成的。
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

1.后代选择器

后代选择器又称包含选择器，可以选择父元素里面的子元素。写法就是把外层标签写在前面，内层标签写在后面，中间用空格分离。当标签发生嵌套时，内层标签就成为外层标签的后代。

<body>
	<ol>
		<li>我是ol的孩子</li>
	</ol>
	<ul>
		<li>我是ul的孩子</li>
	</ul>
</body>

如果想要ol内部的li，就这样写：

<style>
	ol li {
		color: red;
	}
</style>

语法：

元素1 元素2 { 样式声明 }

表示选择元素1里面的所有元素2（后代元素）。
元素1和元素2之间一定要用“空格”隔开。
元素2可以是儿子，也可以是孙子等等写孙子就会自动把孙子的选中。
可以写多层嵌套。

<body>
	<ol>
		<li>我是ol的孩子</li>
		<li><a href="#">我是孙子</a></li>
	</ol>
</body>

<style>
	ol li a {
		color: red;
	}
</style>

你还可以和类选择器组合。

<body>
	<ol>
		<li>我是ol的孩子</li>
	</ol>
	<ol class="nav">
		<li>我也是个ol的孩子，但是不是刚才那个ol</li>
	</ol>
</body>

要选取第二个ol里的li：

<style>
	.nav li {
		color: blue;
	}
</style>

2.子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是亲儿子元素。

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。
例如：

div > p { 样式声明 }

元素1 和元素2 中间用大于号隔开。
元素1是父级，元素2是子集，最终选择的是元素2。
元素2必须是亲儿子，孙子、重孙之类都不归他管。

以下面这个例子，比较子选择器和后代选择器。

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

原版：
在这里插入图片描述
后代选择器：

<style>
        .nav a {
            color: peru;
        }
</style>

结果：
在这里插入图片描述
可以看到儿子和孙子都改变了颜色。

子选择器：

<style>
	.nav > a {
		color: peru;
	}
</style>

结果：
在这里插入图片描述
可以看到，子选择器只有亲儿子元素变色了。

3.并集选择器

可以同时选择多个并列的元素。
要求：把熊大和熊二改成粉色。

<style>
	div,
	p {
		color: pink;
	}
</style>

<body>
	<div>熊大</div>
	<p>熊二</p>
	<span>光头强</span>
	<ul class="pig">
		<li>佩奇</li>
		<li>乔治</li>
		<li>她爸</li>
		<li>他妈</li>
	</ul>
</body>

在这里插入图片描述

上述例子我们用了并集选择器：

元素1,元素2 { 样式声明 }

上述语法表示选择元素1 和元素2。中间必须用英文逗号分隔。
注意：任何形式的选择器都可以作为并集选择器的一部分。比如：把熊大和熊二以及猪一家都改为粉色。

<style>
	div,
	p,
	.pig {
		color: pink;
	}
</style>

在这里插入图片描述
上述例子我们把基础选择器和类选择器并在了一起。

4.伪类选择器

（1）链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号：表示，比如：

:hover

伪类选择器有很多，接下来介绍常用的链接伪类选择器。

a:link    		/* 选择所有未被访问的链接 */
a:visited		/* 选择所有已被访问的链接 */
a:hover			/* 选择鼠标指针位于其上的链接 */
a:active		/* 选择活动链接（鼠标按下未弹起的链接）*/

让未访问的链接呈黑色且取消下划线：

<style>
	a:link {
		color: #333;
		text-decoration: none;
	}
</style>

让访问过的链接呈黄色且取消下划线：

<style>
	a:visited {
		color: orange;
		text-decoration: none;
	}
</style>

让鼠标经过的链接呈天蓝色且取消下划线：

<style>
        a:hover {
            color: skyblue;
            text-decoration: none;
        }
</style>

让鼠标按下的链接呈绿色且加上下划线：

<style>
        a:active {
            color: green;
            text-decoration: underline;
        }
</style>

注意：

为了确保生效，请按照 LVHA 的顺序声明：link、visited、hover、active。
因为 a 链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式。

（2）:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况＜input＞类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {
	background-color: yellow;
}

三、CSS 的元素显示模式

1.什么是元素显示模式

元素的显示模式就是元素（标签）以什么方式进行显示，比如＜div＞自己占一行，比如一行可以放多个＜span＞。

HTML元素一般分为**块元素**和**行内元素**两种类型。

2.块元素

常见的块元素有：＜h1＞~＜h6＞、＜p＞、＜div＞、＜ul＞、＜ol＞、＜li＞等。其中，＜div＞标签是最典型的块元素。
块元素的特点：

比较霸道，自己独占一行。
高度、宽度、外边距、内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：
文字类的元素内不能用块级元素，比如：

＜p＞标签主要用来存放文字，里面不能放块级元素，特别是不能放＜div＞。

同理，＜h1＞~＜h6＞内不能放块级元素。

3.行内元素

常见的行内元素有：＜a＞、＜strong＞、＜b＞、＜em＞、＜i＞、＜del＞、＜s＞、＜ins＞、＜u＞、＜span＞等。其中，＜span＞标签是最典型的行内元素，有时也称为内联元素。
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接
特殊情况链接＜a＞里面可以放块级元素，但是给＜a＞转换一下块级模式最安全。

4.行内块元素

在行内元素中有几个特殊的标签——＜img /＞、＜input /＞、＜td＞，它们同时具有块元素和行内元素的特点，有时将它们分类为行内块元素。
它们的特点是：

和相邻行内元素（或行内块元素）在一行上，但是它们之间会有空白缝隙，一行可以显示多个。
默认宽度就是它本身内容的宽度。
高度、行高、外边距、内边距都可以控制。

5.元素显示模式的转换

特殊情况下，我们要转换元素模式，比如想要增加链接＜a＞的触发范围。还可以把块元素转换为行内元素。
转换为块元素语法：

display: block;

转换为行内元素语法：

转换链接为块元素并设置大小：

<style>
	a {
		width: 150px;
		height: 50px;
		background-color: pink;
		/* 把行内元素a 转换为 块级元素*/
		display: block;
	}
</style>

转换＜div＞为行内元素并设置大小：

<style>
	div {
		width: 300px;
		height: 100px;
		background-color: purple;
		display: inline;
	}
</style>

结果发现，width 和 height 未生效，因为行内元素是不可以设置高度和宽度的，其大小直接等于内容的大小。

还有一种转换，则是转换为行内块元素：

display: inline-block;

行内元素 span 转换为行内块元素：

<style>
	span {
		width: 300px;
		height: 100px;
		background-color: skyblue;
		display: inline-block;
	}
</style>

由于行内元素不能设置宽高，但转换为行内块元素就可以，因此宽高设置生效。

技巧：

想让一个文字垂直居中，可以让文字的行高（line-height）等于盒子的高度，就可以让文字在当前盒子内垂直居中。
原理：
在这里插入图片描述
当设置行高为盒子高度时，上空隙+下空隙+文字本身高度等于行高，这样文字就会垂直居中。
根据以上原理我们可以分析出：
如果行高小于盒子高度，文字会偏上；
如果行高等于盒子高度，文字会居中；
如果行高大于盒子高度，文字会偏下。

四、CSS的背景

通过 CSS 背景属性，可以给页面元素添加背景样式，包括：
背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1.背景颜色

background-color: 颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

2.背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或是超大的背景图片，优点是便于控制位置。

background-image: none | url (url)

注意 url 后面要加括号，里面写上图片路径。
举例：

<style>
	div {
		background-image: url(images/logo.png);
	}
</style>

3.背景平铺

如果在HTML页面上对背景图像进行平铺，可以用 background-repeat 属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

分别表示：
背景图片在横纵两个方向平铺；
背景图片不平铺；
背景图片在横向平铺；
背景图片在纵向平铺。
默认的情况下，背景是平铺的。

4.背景图片位置

如果没有设置平铺，那么利用 background-position 属性可以改边图片在背景中的位置。

background-position: x y;

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

background-position: left center;

参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标。

background-position: 50px 20px;

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中。

3.参数是混合单位

第一个是 x 坐标，第二个是 y 坐标。

background-position: 20px center;

5.背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。

background-attachment: scroll | fixed

scroll 表示背景图像随对象内容滚动。
fixed 表示背景图像固定。

6.背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，从而节约代码量。
背景里的属性虽然没有顺序，但是有一般的约定习惯顺序：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: black url(images/bg.jpg) no-repeat fixed top;

7.背景颜色半透明

CSS3提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度，取值范围在 0~1 之间。
0.3的0可以省略，直接写成：.3 。
只是让盒子的背景色半透明，盒子里的内容不受影响。

五、CSS 的三大特性

CSS 的三大特性是：层叠性、继承性、优先级。

1.1 层叠性

相同选择器给设置相同的样式，一个样式就会（覆盖）另一个冲突的样式。

如果样式冲突，遵循就近原则，哪个样式离代码结构近，就执行哪个样式。
样式不冲突，不会层叠。

<style>
	div {
		color: red;
		font-size: 12px;
	}
	div {
		color: pink;
	}
</style>

结果：文字颜色是粉色（下面的覆盖了上面的），文字大小12px（样式不冲突，不覆盖）。

1.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

<style>
	div {
		color: pink;
		font-size: 14px;
	}
</style>
<body>
	<div>
		<p> 我是粉色字 </p>
	</div>
</body>

子标签会继承父标签的文本颜色和字号。由此可以降低代码复杂性。比如，直接给 body 赋予字号和颜色，这样内部的标签也会继承。
子元素可以继承父元素的样式主要有：text-，font-，line-这些元素开头的可以继承，以及color属性。
行高的继承：
行高在继承的时候，可以让子元素中文字的大小是父元素中文字大小的1.5倍。只需要在父元素的font那里设置行高的倍数。

<style>
	body {
		color: pink;
		font: 12px/1.5 'Miscrosoft YaHei';
	}
	div {
		font-size: 14px;
	}
</style>
<body>
	<div> 我的文字行高是 14px * 1.5 = 21px </div>
</body>

这个意思就是 <div> 里的文字行高是其文字 size 的 1.5 倍，所以是 14px * 1.5 = 21 px。这个 1.5 是在它的父元素里声明的。
如果父元素里没有手动指定行高倍数，那么子元素就会自动继承父元素行高。
这样写的优势就是可以让子元素根据自身文字大小自动调整行高。

1.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性（就近原则）。
选择器不同，则根据选择器权重执行。
不同选择器的权重如下：

从上往下依次权重提高。style是行内样式，如：< div class=“test” style=“color: purple” >，其优先级会很高。
!important 写在属性值后面，表示这条非常重要，其权重会变为无穷大，无视一切优先级规则。

<style>
	div {
		color: pink!important;
	}
</style>

优先级的一些注意事项：

权重是由4组数字组成，但是不会有进位。
类选择器永远大于元素选择器，id选择器永远大于类选择器。
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单理解为：通配符和继承权重为0，标签选择器为1，类选择器为10，id选择器为100，行内样式表为1000，!important为无穷大。
继承的权重是0，如果该元素没有直接选中，不论父元素权重多高，子元素得到的权重都是0。例子：

<style>
	#father {
		color: blue!important;
	}
	p {
		color: pink;
	}
</style>
<body>
	<div id="father">
		<p>我是什么颜色</p>
	</div>
</body>

这里的 p 标签，其字体颜色虽然继承了父标签——id选择器，其父标签的优先级很高，甚至加上了!important，权重变成无穷大，但是由于继承的权重是 0，所以父标签的 blue 颜色不管用，而下面的 p 标签选择器的颜色 pink 生效。
所以，以后看标签到底执行哪个样式，就看这个标签有没有被直接选出来。
这个原理也解释了为什么链接标签不能直接继承父标签的元素样式，因为HTML默认给所有的链接提供了一种样式，也就是蓝色有下划线 a { color: blue;}，直接继承父标签（body）是无效的：

<style>
	body {
		color: red;
	}
</style>
<body>
	<a href="#"> 我不是红色 </a>
</body>

想要修改 a 的样式，就要单独选择它，指定样式：

<style>
	/* 这个body样式改不了a */
	body {
		color: red;
	}
	/* 单独指定能改 */
	a {
	   color: red;
	}
</style>

复合选择器的权重叠加：
如果是复合选择器，则会有权重叠加，需要计算权重。

<style>
	/* 复合选择器权重会叠加 */
	/* ul li 的权重是 0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
	ul li {
		color: green;
	}
	/* li 的权重是 0，0，0，1 */
	li {
		color: red;
	}
</style>

因此：

<ul class="nav">
	<li>鸡蛋</li>
	<li>青菜</li>
	<li>西红柿</li>
</ul>

这些字呈现绿色。倘若再加一条选择器：

<style>
	/* 复合选择器权重会叠加 */
	/* ul li 的权重是 0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
	ul li {
		color: green;
	}
	/* li 的权重是 0，0，0，1 */
	li {
		color: red;
	}
	/* .nav li 的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
	.nav li {
		color: pink;
	}
</style>