目录
1.CSS的引入方式
1.1 内部样式
<head>
<style>
/* 内部样式 */
div {
/* CSS 注释 */
color:red;
font-size: 50px;
}
</style>
</head>
<body>
<div>hello word</div>
</body>
1.2 外部样式
<head>
<!-- 外部样式 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>hello word</div>
</body>
style.css 文件
div {
color: green;
font-size: 70px;
}
1.3 内联样式
<body>
<div>hello word</div>
<!-- 内联样式 -->
<div style="color:blue; font-size: 60px">你好</div>
</body>
三种方式的优先级:
🍃1.内部样式和外部样式,谁写在后面,就显示谁的效果,符合层叠样式的规则。
🍃2.默认情况下:内联样式的优先级大于内部样式和外部样式。
样式空格规范:
- 冒号后面带空格。
- 选择器和 { 之间也有空格。
2.选择器
2.1 基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
2.1.1 标签选择器
<head>
<style>
/* 标签选择器 */
div {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>hello</div>
<div>world</div>
<div>nihao</div>
</body>
2.1.2 类选择器
<head>
<style>
/* 类选择器 */
.one {
color: green;
}
.two {
font-size: 70px;
}
</style>
</head>
<body>
<!-- 一个类选择器可以被多个标签来引用,一个标签也可以引用多个类选择器 -->
<div class="one">hello</div>
<div>world</div>
<div class="one two">nihao</div>
</body>
2.1.3 id选择器
<head>
<style>
/* id选择器 */
#world {
color:rgb(225, 0, 255);
font-size: 70px;
}
</style>
</head>
<body>
<div>hello</div>
<div id="world">world</div>
<div>nihao</div>
</body>
2.1.4 通配符选择器
<style>
/* 通配符选择器 */
* {
color: red;
}
</style>
基础选择器的优先级:
id 选择器 > 类选择器 > 标签选择器
作用
| 特点 | |
标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
类选择器 | 能选出一个或多个标签 | 根据需求选择, 最灵活, 最常用. |
id 选择器 | 能选出一个标签 | 同一个 id 在一个 HTML 中只能出现一次 |
通配符选择器 | 选择所有标签 | 特殊情况下使用 |
2.2 复合选择器
2.2.1 后代选择器
元素1 元素2 {样式声明}
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
<head>
<style>
/* 后代选择器,每个部分,都可以是任意的基础选择器 */
ul li {
color: red;
}
.one li {
color: green;
}
#two-ol {
color: blue;
}
ol .two {
color: orange;
}
/* 后代选择器,还可以选孙子 */
ul a {
color: blueviolet;
}
</style>
</head>
<body>
<ol class="one">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<ol id="two-ol">
<li class="two">张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<ul>
<li><a href="#">张三</a></li>
<li>李四</li>
<li>王五</li>
</ol>
</body>
🍃1.后代选择器,元素2不一定是儿子,还可以是孙子
🍃2.后代选择器可以是任意基础选择器的组合. (包括类选择器, id 选择器)
2.2.2 子选择器
元素1>元素2 { 样式声明 }
-
使用大于号分割
-
只选儿子 , 不选孙子元素
<head>
<style>
/* 子选择器 对孙子不生效*/
ol>a {
color: green;
}
</style>
</head>
<body>
<ol>
<li><a href="#">张三</a></li>
<li>李四</li>
<li>王五</li>
</ol>
</body>
2.2.3 并集选择器
元素1, 元素2 { 样式声明 }
<head>
<style>
/* 并集选择器 */
ol li,ul li {
color:red
}
</style>
</head>
<body>
<ul>
<li>张三</li>
</ul>
<ol>
<li><a href="#">张三</a></li>
<li>李四</li>
</ol>
</body>
2.2.4 伪类选择器
此处只演示 hover、active
<head>
<style>
/* 伪类选择器 - 鼠标悬停的效果 */
div:hover {
color: green;
}
/* 伪类选择器 - 鼠标按下的效果 */
div:active {
color:blue
}
</style>
</head>
<body>
<div>
hello world
</div>
</body>
选择器
| 作用 | 注意事项 |
后代选择器 | 选择后代元素 | 可以是孙子元素 |
子选择器 | 选择子元素 | 只能选儿子, 不能选孙子 |
并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
伪类选择器 | 选择不同状态的链接 | 重点掌握 hover、active |
3. 常见元素属性
3.1 字体属性
<head>
<style>
div {
/* 字体大小 */
font-size: 100px;
/* 字体颜色 */
color: red;
/* 字体粗细 */
font-weight: lighter;
font-weight: normal;
font-weight: bold;
font-weight: bolder;
/* 字体属性 */
font-family: 宋体;
}
</style>
</head>
<body>
<div>
hello world
</div>
</body>
3.1.1 文字样式
<style>
/* 取消倾斜 */
div {
font-style: normal;
}
/* 设置倾斜 */
div {
font-style: italic;
}
</style>
3.2 文本属性
3.2.1 设置文本颜色
<head>
<style>
div {
color: red;
color: #00ff00;
color: rgb(0, 0, 255);
}
</style>
</head>
<body>
<div>
hello world
</div>
</body>
- 预定义的颜色值 (单词)
-
[ 最常用 ] 十六进制形式
- RGB 方式
认识 RGB:
我们使用 R (red), G (green), B (blue) 的方式表示颜色 ( 色光三原色 ). 三种颜色按照不同的比例搭配 , 就能混合出各种五彩斑斓的效果.计算机中针对 R, G, B 三个分量 , 分别使用一个字节表示 (8 个比特位 , 表示的范围是 0-255, 十六进制表示为 00-FF).数值越大 , 表示该分量的颜色就越浓 . 255, 255, 255 就表示白色 ; 0, 0, 0 就表示黑色
3.2.2 文本对齐
<style>
div {
/* 居中对齐、左对齐、右对齐 */
text-align: center;
text-align: left;
text-align: right;
}
</style>
3.2.3 文本装饰
<style>
div {
text-decoration: underline;
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
}
</style>
四个取值的效果:
-
underline 下划线 . [ 常用 ]
-
none 啥都没有 . 可以给 a 标签去掉下划线
-
overline 上划线 . [ 不常用 ]
-
line-through 删除线 [ 不常用 ]
3.2.4 文本缩进
text-indent: [值];
单位可以使用 px 或者 em,一个文字大小就是 1em。
<style>
div {
/* 首行缩进两个字 */
text-indent: 2em;
}
</style>
3.2.5 行高
line-height: [值];
行高 = 文字高度 + 行间距
也可以是两行文字的顶线之间的距离、中线之间的距离、基线之间的距离或者底线之间距离。
<style>
div {
line-height: 50px;
/* 行高也可以取 normal 等值.这个取决于浏览器的实现. chrome 上 normal 为 21 px */
line-height: normal;
}
</style>
4. 背景属性
<style>
div {
/* 背景颜色 可设置的值和文本颜色差不多*/
background-color: grey;
/* 背景图片 */
background-image: url(image/female.png);
/* 背景平铺 */
background-repeat: no-repeat;
/* 背景位置 */
background-position: center top;
/* 背景尺寸 */
background-size: contain;
}
</style>
🍃1.背景颜色:可设置的值和文本颜色差不多,默认情况下是 transparent(透明)的
🍃2.背景图片:比 image 更方便控制位置,url 里可以放相对路径、绝对路径,网络路径
🍃3.背景平铺:重要的四个取值,repeat(平铺),no-repeat(不平铺),repeat-x(水平平铺),repeat-y(垂直平铺)。默认情况下是 repeat。
🍃4.背景位置 - 参数有三种风格:
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
🍃5.背景尺寸:可以填具体数值,例如:50px,还可以是使用 cover(把背景图像扩展至足够大,以使背景图像完全覆盖背景区域)和 contain(把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域. )
5.圆角矩形
通过 border-radius 使边框带圆角效果.
基本用法:border-radius: length;
<style>
div {
width: 200px;
height: 200px;
background-color: grey;
border: 2px solid green;
/* 圆角矩形 */
border-radius: 10px;
/* 将 border-radius 的值设为正方形边长的一半就可以变为圆形 */
}
</style>
6.元素的显示模式
1.常见的块级元素: h1 - h6、 p、 div、 ul、 ol、li.......特点:
- 独占一行
- 高度, 宽度, 内外边距, 行高都可以控制
宽度默认是父级元素宽度的 100% ( 和父元素一样宽 ) 是一个容器 ( 盒子 ), 里面可以放行内和块级元素 .注意:
- 文字类的元素内不能使用块级元素
p 标签主要用于存放文字 , 内部不能放块级元素 , 尤其是 div2.常见的行内元素: a、 strong、 b、 em、 i、 del、 s、 ins、 u、 span特点:
- 不独占一行, 一行可以显示多个
设置高度 , 宽度 , 行高无效 左右外边距有效( 上下无效 ). 内边距有效 . 默认宽度就是本身的内容 行内元素只能容纳文本和其他行内元素, 不能放块级元素
6.1 行内元素和块级元素的两个主要区别
🍃1.块级元素独占一行 , 行内元素不独占一行🍃2.块级元素,高度、宽度、内外边距、行高,都是可以控制的,行内元素,设置高度、宽度、行高,都是无效的,设置内边距有效,设置外边距,左右外边距有效,上下外边距无效。
6.2 改变显示模式
使用 display 属性可以使 div 变成行内元素,也可以使 a,sapn 等元素变成块级元素。
-
display: block 改成块级元素 [常用]
-
display: inline 改成行内元素 [很少用]
-
display: inline-block 改成行内块元素 (又能设置行高,又不独占一行)
<style>
span {
width: 80px;
height: 90px;
display: block;
}
</style>
<span>
哇哈哈
</span>
<span>
helloworld
</span>
7.盒模型
HTML 中元素的最基本的排列规则:
1.每个 HTML 元素,,都是一个 "矩形" 的盒子。
2.每个这样的盒子,都由这几个部分构成:
7.1 边框
-
粗细 : border-width
-
样式: border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框
-
颜色: border-color
div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}
div {
/* 支持简写 */
border: 1px solid red;
}
还可以改四个方向的任意边框:
border-top/bottom/left/rig
边框会撑大盒子
可以通过设置 box-sizing: border-box,使边框不再撑大盒子,默认情况是 content-box.
box-sizing: border-box;
7.2 内边距
-
padding-top
-
padding-bottom
-
padding-left
-
padding-right
div {
height: 200px;
width: 300px;
padding-top: 5px;
padding-left: 10px;
/* 先设置上下,,再设置左右 */
padding: 20px,40px;
/* 顺时针设置,上、右、下、左 */
padding: 20px,40px,20px,40px;
/* 设置四个方向相同的px */
padding: 20px;
}
7.3 外边距
div {
height: 50px;
width: 50px;
margin-top: 5px;
margin-left: 10px;
/* 先设置上下,,再设置左右 */
margin: 20px,40px;
/* 顺时针设置,上、右、下、左 */
margin: 20px,40px,20px,40px;
}
外边距要注意的细节:
-
指定宽度 ( 如果不指定宽度 , 默认和父元素一致 )
-
把水平 margin 设为 auto
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意:
🍃1. 这个水平居中的方式和 text-align 不一样.🍃2.margin: auto 是给块级元素用得到.🍃3.text-align: center 是让行内元素或者行内块元素居中的.🍃4.对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.
8. 弹性布局
未使用弹性布局时的效果:
<style>
div {
height: 150px;
background-color: red;
}
span {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
使用弹性布局后的效果:加上 display:flex
此时给 span 设置高度、宽度就都会生效,不再是行内元素了。
flex 布局基本概念
flex 是 flexible box 的缩写 . 意思为 " 弹性盒子 ".任何一个 html 元素 , 都可以指定为 display:flex 完成弹性布局 .flex 布局的本质是给父盒子添加 display:flex 属性 , 来控制子盒子的位置和排列方式 .基本概念:
被设置为 display:flex 属性的元素 , 称为 flex container 它的所有子元素立刻称为了该容器的成员, 称为 flex item flex item 可以纵向排列 , 也可以横向排列 , 称为 flex direction ( 主轴 )
弹性布局常用的属性:🍃1.display: flex 开启弹性布局🍃2.justify-content 描述主轴上的排列方式(默认水平方向)🍃3.align-items 描述侧轴上的排列方式(侧轴是和主轴垂直的方向)
当给一个元素设为 display: flex 此时子元素就不再遵守原来的 "块级元素"、"行内元素" 的规则了,变成了弹性元素,这些元素就会按照弹性布局的规则来排列,但是并不影响孙子元素。
值 | 描述 |
flex-start | 默认值。项目位于容器的开头 - 默认就是靠左排列 |
flex-end | 项目位于容器的结尾 - 默认就是靠右排列 |
center | 项目位于容器中央 - 居中 |
sapce-between | 项目在行与行之间留有间隔 |
space-around | 项目在行之前、行之间、和行之后留有间隔 |
<style>
div {
height: 150px;
background-color: red;
display: flex;
justify-content: space-between;
justify-content: space-around;
justify-content: flex-end;
justify-content: flex-start;
justify-content: center;
}
span {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
未指定 justify-content 时,默认按照从左到右的方向布局:
设置 justify-content: flex-end 时:
设置 jutify-content: center 时:
设置 justify-content: space-around 时:
设置 justify-content: space-between 时:
值 | 描述 |
stretch | 默认值,行拉伸以占据剩余空间 |
center | 朝着弹性容器的中央对行打包 |
flex-start | 朝着弹性容器的开头对行打包 |
flex-end | 朝着弹性容器的结尾对行打包 |
space-between | 行均匀分布在弹性容器中 |
sapce-around | 行均匀分布在弹性容器中,两端各占一半 |
<style>
div {
height: 150px;
background-color: red;
display: flex;
justify-content: space-between;
align-items: stretch;
/* align-items:: center; */
}
span {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
align-items: stretch
![](https://i-blog.csdnimg.cn/blog_migrate/bd15fb6fcb8cc7f55888811900beca85.png)
align-items: center:
实现垂直居中.
注意:align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents