初识CSS样式表 基本选择器 组合选择符 属性选择器 定位

day03【stage01】

1章节目录

1.1目标

• 初识CSS样式表
• 基本选择器
• 组合选择符
• 属性选择器
• 定位

1.2重点

• 基本选择器
• 属性选择器
• 定位

1.3难点

• 组合选择符
• 定位

2初识CSS样式表

CSS是一种描述HTML文档样式的语言。CSS描述应该如何显示HTML元素。

2.1什么是CSS?

• CSS指的是层叠样式表(Cascading style Sheets) ，也称级联样式表
• CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
• CSS节省了大量工作，它可以同时控制多张网页的布局
• 外部样式表存储在CSS文件中

2.2 CSS演示

下面是同一个HTML页面分别应用三个不同样式表后显示的不同效果:

2.3为何使用CSS?

CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

实例:

p {
background-color: 7ightb1ue;
}
h1 {
co1or : red;
text-align : center;}
h2 {i
font-fami1y{'Microsoft YaHei ';
68%
font-size: 20px;
}

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OrsgoyEM-1670488015674)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208092404026.png)]

2.4 CSS解决的问题

HTML 设计之初从未打算包含用于格式化网页的标签。创建HTML的目的是描述网页的内容，例如:

<h1>这是一个标题</h1>
<p>这是一个段落</p>

将之类的标签和color属性添加到HTML3.2规范后，Web开发人员的噩梦开始了。大型网站的开发将字体和颜色信息添加到每个页面中，这演变为—个漫长而昂贵的过程。

<font face="verdana" size="3" co1or="red"></font>

为了解决这个问题，万维网联盟(W3C)创建了CSs。CSS 从 HTML页面中删除了样式格式。

2.5 cSS节省了大量工作

样式定义通常保存在外部.css文件中。

通过使用外部样式表文件，你只需更改一个文件即可更改整个网站的外观!工

2.6 CSS语法

CSS 规则集由选择器和声明块组成:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ItaMEl2j-1670488015675)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208093252476.png)]

选择器指向你需要设置样式的HTML元素。

声明块包含—条或多条用分号分隔的声明。

每条声明都包含一个CSS属性名称和一个值，以冒号分隔。

多条CSS声明用分号分隔，声明块用花括号括起来。

p {
color : red;
text-align : center ;}

3基本选择器

3.1元素选择器

元素选择器根据元素名称来选择HTML元素。

实例:

p {
text-align : center;
color : red ;
}

¹∶在这里，页面上的所有

元素都将居中对齐，并带有红色文本颜色。

3.2 id选择器

id选择器根据元素的id属性来选择特定的HTML元素。

元素的id在页面中是唯一的，因此 id选择器用于选择一个唯一的元素!

要选择具有特定id的元素，请写一个井号(#)，后跟该元素的id 。

实例:

#striking {
text-align : center ;
color : red;
}

¹∶这条CSS规则将应用于id="striking"的 HTML元素。

注意:id名称不能以数字开头。

3.3类选择器

类选择器选择有特定Class属性的HTML元素。

如需选择拥有特定class的元素，请写一个句点(.)字符，后面跟类名。

实例:

.center {
text-align : center;
color : red;
}

¹∶在这个例子中，所有带有class="center"的HTML元素文本将为红色且居中对齐。你还可以指定只有特定的HTML元素会受类的影响。

实例:

p.center {

text-align : center ;color : red;

}

实例:

<p c1ass="center 1arge ">这个段落引用两个类。</p>

3.4通用选择器

通用选择器（*）选择页面上的所有的HTML元素。

实例:

*{
	text-align : center ;color: blue;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWMpsxv9-1670488015676)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208095708805.png)]

3.5分组选择器

分组选择器选取所有具有相同样式定义的HTML元素。

请看下面的CSS代码(h1、h2和p元素具有相同的样式定义)∶

h1 {
text-align : center;
color : red;
}
h2 {
text-align : center;
color : red;}
p {
text-align : center;
co1or : red;
}

最好对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。

实例：

h1，h2，p {
text-align : center;
color : red;
}

4组合选择符

CSS组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。|在CSS3中包含了四种组合方式:

• 后代选择器(以空格 分隔)
• 子元素选择器(以大于号>分隔)
• 相邻兄弟选择器(以加号＋分隔)
• 普通兄弟选择器(以波浪号~分隔)

4.1后代选择器

后代选择器用于选取某元素的后代元素。

实例:

div p {
	background-co1or : ye1low;
}

¹∶在这个实例中，选择器选取所有包含在

元素中的

元素。

4.2子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

实例:

div > p {
	background-color : red;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7hid0vi-1670488015676)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208105931314.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCpbhhcW-1670488015676)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208111133952.png)]

4.3相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

实例:

div + p {
background-co1or: green ;
}

4.4后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

实例:

div ~ p{
background-color:orange;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-15ufsuTu-1670488015677)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208113701470.png)]

5属性选择器

我们可以设置带有特定属性或属性值的HTML元素的样式。

5.1[attribute]选择器

[attribute]选择器用于选取带有指定属性的元素。

实例:

a [target] {
background-color : ye1low;
}

5.2 [attribute=“value”]选择器

[attribute=“value”]选择器用于选取带有指定属性和值的元素。实例:

a [target"_b1ank"] 
{background-co1or: red;
}

5.3设置表单样式

若需为不带class 或id的表单设置样式，属性选择器会很有用:

input[name="nickname "] {
width: 150px;
margin-bottom: 10px;
background-color : yellow;
}
input[type="button"] 
{width : 120px;
margin-1eft: 48px;
disp1ay: b1ock ;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pO54YuXm-1670488015677)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208143427231.png)]

6定位

position属性规定应用于元素的定位方法的类型。

有五个不同的位置值:

• static
• relative
• fixed
• absolute
• sticky

元素其实是使用top、bottom、left和right属性定位的。但是，除非首先没置了position属性，否则这些属性将不起作用。根据不同的position值，它们的工作方式也不同。

6.2 position: static;

HTML元素默认情况下的定位方式为static(静态)。

静态定位的元素不受top.bottom、left和right属性的影响。

position: static;的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位。

实例:

div.static {
position : static;
border: 3px solid darkred;
}

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I9zVc8PI-1670488015677)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208144749290.png)]

6.3 position: relative;

position: relative;的元素相对于其正常位置进行定位。

设置相对定位的元素的top、 right、bottom和left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

实例:

div.relative{
	position:relative;
left:-20px;
border:3px solid darkred;
}

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B06F7OQh-1670488015678)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208145702214.png)]

6.4 position: fixed ;

position: fixed;的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、right.

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

实例:

div.fixed {
position: fixed;
bottom: 10px;
right: 30px;
width : 300px;
border:3px soild darkred;
}

6.5 position: absolute;

position: absolute;的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位)。然而，如果绝对定位的元素没有祖先，它将使用文档主体(body)，并随页面滚动一起移动。

实例:

div.re1ative-box {
position : re1ative;
width : 400px;
height: 200px;
border: 3px solid darkb1ue;
}
div.absolute {
position : absolute;
top : 80px;
right: 0;
width : 200px;
height: 100px;
border: 3px solid darkred;
}

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGQ9idih-1670488015678)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208150549500.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sv8Ehkyf-1670488015678)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208151332159.png)]

6.6 position: sticky ;

position: sticky;的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对(relative)和固定（fixed)之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其"粘贴"在适当的位置。

实例:

div.sticky {
position : -webkit-sticky;
position : sticky;
top: 0;
background-color : green ;
border : 3px solid darkred;
}

6.7重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。

元素可以设置正或负的堆叠顺序。

示例代码:

img {
position : absolute;
1eft: 0px;
top : 0px;
z-index : -1;
}

示例效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GiREHdr-1670488015679)(C:\Users\kirito\AppData\Roaming\Typora\typora-user-images\image-20221208161437853.png)]具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

7章节总结

• 初识CSS样式表
• 基本选择器
• 组合选择符

置。

实例:

div.sticky {
position : -webkit-sticky;
position : sticky;
top: 0;
background-color : green ;
border : 3px solid darkred;
}

6.7重叠元素

在对元素进行定位时，它们可以与其他元素重叠。

z-index属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。

元素可以设置正或负的堆叠顺序。

示例代码:

img {
position : absolute;
1eft: 0px;
top : 0px;
z-index : -1;
}

示例效果：

[外链图片转存中…(img-8GiREHdr-1670488015679)]具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

7章节总结

• 初识CSS样式表
• 基本选择器
• 组合选择符

---

1. 在这个实例中，选择器选取所有带有target="_blank”属性的元素。 ↩︎ ↩︎ ↩︎ ↩︎