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 ;
}
1∶在这里,页面上的所有
元素都将居中对齐,并带有红色文本颜色。
3.2 id选择器
id选择器根据元素的id属性来选择特定的HTML元素。
元素的id在页面中是唯一的,因此 id选择器用于选择一个唯一的元素!
要选择具有特定id的元素,请写一个井号(#),后跟该元素的id 。
实例:
#striking {
text-align : center ;
color : red;
}
1∶这条CSS规则将应用于id="striking"的 HTML元素。
注意:id名称不能以数字开头。
3.3类选择器
类选择器选择有特定Class属性的HTML元素。
如需选择拥有特定class的元素,请写一个句点(.)字符,后面跟类名。
实例:
.center {
text-align : center;
color : red;
}
1∶在这个例子中,所有带有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;
}
1∶在这个实例中,选择器选取所有包含在
元素。
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样式表
- 基本选择器
- 组合选择符