CSS3学习笔记

卖栗子的小松鼠

已于 2023-11-24 18:52:21 修改

阅读量347

点赞数

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

于 2023-10-08 01:19:55 首次发布

本文链接：https://blog.csdn.net/weixin_48239221/article/details/133663586

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS知识学习笔记记录。

在这里插入图片描述

1.选择器

1.基础选择器

1.标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称。以标签名作为样式应用的依据。

2.类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器。
以标签的class属性作为样式应用的依据。

注意事项：

调用时不能添加 . 号。
同时调用多个类选择器时,以空格分隔。
类选择器名称不能以数字开头。

3.ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配。

以标签的id属性作为样式应用的依据，一对一的关系。

4.使用举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			font-size:20px;
		}
		h2{
			color:yellow;
		}
		.hello{
			background: #cccccc;
		}
		.world{
			font-weight:bold;
		}
		#haha{
			color:blue;
		}
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<p>hello world!</p>
	<hr>
	<p class="hello">welcome to css!</p>
	<p>hello world!</p>
	<h2>前端开发</h2>
	<h3>后端开发</h3>
	<div class="hello">张三</div>
	<div class="world">李四</div>
	<hr>
	<h1 id="haha">哈哈</h1>
</body>
</html>

运行结果：

在这里插入图片描述

2.复杂选择器

1.复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用。

必须同时满足两个条件才能应用样式。

2.组合选择器

也称为集体声明。
将多个具有相同样式的选择器放在一起声明，使用逗号隔开。

3.嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开。

只有满足层次关系最里层的选择器所对应的标签才会应用样式。

注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行。

4.使用举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.标签选择器和类选择器合起来使用----复合选择器 */
		h1.aaa{
			color:red;
		}
		/* 1.标签选择器和ID选择器合起来使用----复合选择器 */
		p#bbb{
			color:blue;
		}
		/* 2.组合选择器 */
		h1,p,div,span,.ccc{
			font-size:30px;
		}
		div{
			background:violet;
		}
		.ccc{
			font-weight:bold;
		}
		/* 3.嵌套选择器 */
		/* div p{
			color:green;
			text-decoration:underline;
		} */
		div>p{
			color:green;
			text-decoration:underline;
		}
		div h3.ddd{
			color:red;
		}
	</style>
</head>
<body>
	<!-- 需求：只想修饰class属性为aaa的h1标签 -->
	<h1 class="aaa">welcome</h1>
	<h4 class="aaa">css</h4>
	<h1>hello</h1>
	<hr>
	<!-- 我要修饰ID属性为bbb的p标签 -->
	<p id="bbb">world</p >
	<p>html</p>
	<hr>
	<!-- 给h1、p、div、span标签中的内容设置字号为30px -->
	<h1>hello</h1>
	<p>CSS</p>
	<div>WEB开发</div>
	<span class="ccc">JAVA开发</span>
	<hr>
	<!-- 需求：修饰div内部的p标签 -->
	<div>
		<p>div内部的p标签</p>
		<h3>div内部的h3标签</h3>
	</div>
	<hr>
	<div>
		<h3>
			<p>div内部的h3内部的p标签</p>
		</h3>
	</div>
	<hr>
	<!-- 需求：修饰div内部的class为ddd的标签 -->
	<div>
		<p>div内部的p</p>
		<h3 class="ddd">div内部的h3</h3>
		<p class="ddd">PPPP</p>
	</div>
	<h3 class="ddd">h3h3h3</h3>
</body>
</html>

运行结果：

在这里插入图片描述

5.伪类选择器

根据不同的状态显示不同的样式，一般多用于标签。

四种状态：

:link 未访问的链接。
:visited 已访问的链接。
:hover 鼠标悬浮到连接上，即移动在连接上。
:active 选定的链接，被激活。

注：默认超链接为：蓝色、下划线。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style>
		/*a:link{
			font-size: 12px;
			color:black;
			text-decoration: none;
		}
		a:visited{
			font-size: 15px;
			color:;
		}
		a:hover{
			font-size: 20px;
			color:blue;
		}
		a:active{
			font-size: 40px;
			color:green;
		}*/
		a:link,a:visited{
			color:#666666;
			font-size: 13px;
			text-decoration: none;
		}
		a:hover,a:active{
			color:#ff7300;
			text-decoration: underline;
		}
		/*普通的标签也可以使用伪类选择器*/
		p:hover{
			color:red;
		}
		p:active{
			color:blue;
		}
	</style>
</head>
<body>
	<a href="复杂选择器.html">复杂选择器.html</a>
	<p>CSS从入门到精通！</p>
</body>
</html>

6.伪元素选择器

:first-letter 为第一个字符的样式。
:first-line 为第一行添加样式。
:before 在元素内容的最前面添加的内容，需要配合content属性使用。
:after 在元素内容的最后面添加的内容，需要配合content属性使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p:first-letter{
			color:red;
			font-size:30px;
		}
		p:first-line{
			background:pink;
		}
		p:before{
			content:"嘿嘿";
		}
		p:after{
			content:"哈哈";
		}
	</style>
</head>
<body>
	<p>hello world!</p>
	<hr>
	<p>
		hello world! <br>
		welcome to css!
	</p>
</body>
</html>

运行结果：

在这里插入图片描述

2.display和visibility的区别

display隐藏时不再占据页面中的空间，后面的元素会占用其位置。

visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示。

3.outline和border的区别

border可以应用于所有html元素，而outline主要用于表单元素、超链接元素。
当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为。
outline不影响元素的尺寸和位置，而border会影响。

代码举例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Documnet</title>
        <style>
            span{
                border: 2px solid red;
                outline: 4px dashed green;
            }
            .userName{
                border: 1px solid red;
                outline: none;
                padding-left: 3px;
                width: 80px;
            }
            .email{
                border: 0;
                outline: 0;
                border-bottom: 1px solid #000;
            }
            .btnsubmit{
                border: 0;
                padding: 5px;
                width: 100px;
            }
            .mydiv{
                width: 100px;
                background: #ccc;
                border: 2px solid red;
            }
        </style>
    </head>
<body>
	<span>welcome to CSS</span>
	<hr>
	用户名：<input type="text" class="username">
	<a href="#">CSS</a>
	<hr>
	邮箱：<input type="text" class="email">
	<input type="submit" value="提交" class="btnsubmit">
	<hr>
	<div class="mydiv">div</div>
</body>
</html>

运行结果：

在这里插入图片描述

4.px、em、rem、%、vw、vh、vm、rpx 区别

px：像素，绝对长度单位，相对于显示器屏幕分辨率(推荐使用)。
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

在css单位中，可以分为长度单位、绝对单位，如下表所指示：

CSS单位
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%

5.nth-child(n)

nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。注释：n从1开始。

比如，下面代码就是给left-menu中的第3个元素设置字体大小：

/** 导航栏 */
.left-menu>div:nth-child(3) {
    font-size: 1.4rem;
}

6.@media用法

举例：

设备屏幕宽度小于等于960px时应用css样式：

@media screen and (max-device-width:960px){
    body{background:red;}
}

浏览器宽度大于等于960px且小于等于1200px时使用样式:

@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

7.display: inline-block

display: inline-block是一种 CSS 属性，用于设置元素的显示方式。

当你将一个元素的 display 属性设置为 inline-block 时，它将以内联块级元素的方式显示。这意味着元素会在一行上显示，并且可以设置宽度、高度、内外边距等属性，同时仍保留内联元素的特性，可以与其他元素在同一行内显示。

与普通的块级元素相比，inline-block 元素不会独占一行，而是根据其内容的宽度来决定自身的宽度，可以在一行内与其他元素并排显示。

display: inline-block; 常用于以下场景：

创建水平排列的元素：通过将多个元素的显示方式设置为 inline-block，可以在一行内创建水平排列的元素，类似于菜单、按钮组等。

设置宽度和高度：与普通的内联元素相比，inline-block 元素可以设置宽度、高度以及内外边距等属性，使其具备块级元素的特性。

保留行内元素的特性：与块级元素相比，inline-block元素可以在一行内显示，并且可以与其他元素共享一行，适用于需要结合文本或其他内联元素进行布局的情况。

8. css style上的lang和scoped

less：设置使用的预编译语言。
scoped：指定当前样式，只能在当前组件使用。

9.块元素和行内元素

1.块元素

块元素在页面中以区域块的形式出现，每个块元素通常都会独自占据一整行或多个整行、可以对其设置宽度、高度、对齐等属性。
常见:元素有< h1>~< h6>、< p>、< div>、 < ul>、< ol>、< li>等，其中< div>标记是最典型的块元素。

2.行内元素

行内元素也称为内联元素或内嵌元素，一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、 < u>、 < a>、< span>等，其中< span>标记是最典型的行内元素。

3.代码举例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>	</title>
	<style type="text/css">
		p{
			background-color: pink;
		}
		ol{
			background-color: red;
		}
		span{
			background-color: yellow;
		}
		i{
			background-color: #cff;
		}
		div{
			background-color: #ffc;
		}
	</style>
</head>
<body>
<p>p--标记 ------------块元素</p>
<ol>ol--标记----------块元素</ol>
<span>span标记---------行内元素</span>
<i>i标记---------行内元素</i>
<div>div标记--------块元素</div>
</body>
</html>

效果：

10.CSS3响应式布局

1.什么是响应式布局

所谓响应式页面，是指一套页面，能够适配多种终端可以让网站同时适配不同分辨率的屏幕，让客户有更好的体验设计，页面会根据屏幕尺寸缩小或扩展，让用户以便从任何设备访问信息。顾名思义，响应式设计响应浏览器大小的变化并调整布局元素以适应可用的屏幕空间。

2.常用实现方案

1.flex布局

flex布局：能解决大多数情况下的响应式布局问题，尤其是全屏布局、两列布局、内容居中之类的场景。
flex布局的副作用：如果子元素设置了浮动，会引起父元素的塌陷/不能动态实现自适应布局/之前的元素浮动了，后面的元素可能异位，所以页面越来越复杂，不利于管理。

2.媒体查询

使用@media查询，可以针对不同的屏幕类型定义不同的样式。
@media可以针对性不同的屏幕尺寸定义不同的样式。
当你重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。
目前针对很多苹果手机、Android手机，破平板设备都用得到媒体查询。

响应式开发屏幕尺寸划分，一般需要相应几个尺寸：

设备划分	尺寸区间
超小屏幕(手机)	<768px
小屏设备(平板)	>=768px~992px
中等屏幕(桌面显示器)	>=992px~1200px
宽屏设备(大桌面显示器)	>=1200px

3.rem/em

em和re m都是相对单位，区别在于：
em是根据字体大小计算，而rem是根据根节点html的字体大小计算(root em)，默认是16px。

REM是css3新增的单位，并且移动端的支持度很高。rem单位都是对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么rem为固定单位的元素的大小也会发生响应式变化。因此，如果通过rem来实现响应式的布局，只需要根据试图容器的大小，动态地改变font-size即可(而em是相对于父元素的)。

4.vw/vh

vw/vh是视口单位，即根据浏览器的窗口大小进行适配。
相对于视口的尺寸计算结果：

vw：相对于视口的宽度，1vw等于视口宽度的1%(总视口宽度为100vw)。
vh：相对于视口的宽度，1vh等于视口高度的1%(总视口宽度为100vh)。
注意：和百分比是有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于视口来说的。

卖栗子的小松鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记

目录1.CSS简介1.什么是CSS2.为什么使用CSS3.CSS作用2.基本用法1.CSS语法2.CSS应用方式1. 内部样式2.行内样式3.外部样式1.使用 link标签链接外部样式文件2.@import 指令导入外部样式文件3.使用举例3.选择器1.基础选择器1.标签选择器2.类选择器3.ID选择器4.使用举例2.复杂选择器1.复合选择器2.组合选择器3.嵌套选择器4.使用举例5.伪类选择器6.伪元素选择器3.选择器优先级1.优先级2.可以使用!important使某个样式有最高的优先级4.常用CS
复制链接

扫一扫