CSS
概念:全称Cascading Style Sheets,层叠样式表。
- 层叠:多个样式可以作用在同一个html的元素上,同时生效
作用:页面美化和布局控制。
好处:
-
功能强大
-
将内容展示和样式控制分离
将内容展示和样式控制分离的目的为:
-
降低耦合度,便于解耦
-
让分工协作更容易
-
提高开发效率
CSS是与HTML结合使用的
使用样式有三种:
(1)内联样式
- 在标签内使用style属性指定css代码
<div style="color:red">Hello World</div>
(2)内部样式
- 在head标签内,定义style标签,style标签的标签体内容就是css代码
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
(3)外部样式
-
定义css资源文件
-
在head标签内,定义link标签,引入外部的资源文件
引入外部资源文件的标签
<link>
:定义文档与外部资源的关系。
<link> 相应的属性 | 说明 |
---|---|
rel | 必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写 |
href | 定义被链接文档的位置 |
rel的值 | 说明 |
---|---|
stylesheet | 要导入的样式表的 URL |
css资源文件
div{
color:red;
}
HTML文件
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="CSS.css">
</head>
<body>
<div>Hello World</div>
</body>
</html>
-
第一二三种方式,css作用范围越来越大
-
第一种方式(内联样式)不常用,后期常用第二,第三种样式
第三种样式中引入资源(link)部分还可以写为:
<style>@import "CSS.css";</style>
CSS语法:
- 格式:
选择器 {
属性名1: 属性值1;
属性名2:属性值2;
…
}
- 选择器:筛选具有相似特征的元素
注意: 每一对属性需要使用;
隔开,最后一对属性可以不加;
选择器
作用:筛选具有相似特征的元素。
选择器的分类:
(1)基础选择器
- id选择器:选择具体的id属性值的元素(建议在一个html页面中id值唯一)
- 语法:#id属性值{}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#css{
color:red;
}
</style>
</head>
<body>
<div id="css">Hello World</div>
</body>
</html>
- 元素选择器:选择具有相同标签名称的元素
- 语法: 标签名称{}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
- 类选择器:选择具有相同的class属性值的元素。
- 语法:.class属性值{}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.css{
color:red;
}
</style>
</head>
<body>
<div class="css">Hello World</div>
</body>
</html>
注意:id选择器优先级高于元素选择器,类选择器选择器优先级高于元素选择器。
(2)扩展选择器:
- 选择所有元素:
- 语法: *{}
<style>
*{
color:red;
}
</style>
2.并集选择器:
- 语法:选择器1,选择器2{}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div,span{
color:red;
}
</style>
</head>
<body>
<div>Hello World</div>
<span>Hello World</span>
</body>
</html>
- 后代选择器:选择祖宗元素内的所有符合要求的元素
- 语法: 选择器1 选择器2{}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div p{
color:red;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
<span>
<p>Hello World</p>
</span>
</div>
</body>
</html>
<!-- div标签下的p标签中的内容都变红,后代只要有就符合-->
- 子选择器:筛选父选择器1下的子选择器2
- 语法: 选择器1 > 选择器2{}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div>p{
color:red;
}
</style>
</head>
<body>
<div>
<!--此处变红-->
<p>Hello World</p>
<span>
<!--此处不变红-->
<p>Hello World</p>
</span>
</div>
</body>
</html>
- 属性选择器:选择元素名称,属性名=属性值的元素
- 语法:元素名称[属性名=“属性值”]{}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
span[id='css']{
color:red;
}
</style>
</head>
<body>
<span id="css">Hello World</span>
</body>
</html>
- 伪类选择器:选择一些元素具有的状态
- 语法: 元素:状态{}
适用于超链接:<a>
我们点击超链接时有四种状态
状态 | 说明 |
---|---|
link | 初始化的状态 |
hover | 鼠标悬浮状态 |
active | 正在访问状态 |
visited | 被访问过的状态 |
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
a:link{
color:red;
}
a:hover{
color:green;
}
a:active{
color:yellow;
}
a:visited{
color:grey;
}
</style>
</head>
<body>
<a href="#">你好</a>
</body>
</html>
属性
字体、文本 | 说明 |
---|---|
font-size | 字体大小 |
color | 文本颜色 |
text-align | 对其方式 |
line-height | 行高 |
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
font-size: 30px;
color:red;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
背景 | 说明 |
---|---|
background | 背景 |
<style>
div{
background: red;
}
</style>
边框 | 说明 |
---|---|
border | 设置边框,复合属性 |
边框尺寸 | 说明 |
---|---|
width | 宽度 |
height | 高度 |
<style>
div{
border:5px solid red;
width: 500px;
height: 500px;
}
</style>
<!--solid是实线的意思 -->
盒子模型:控制布局 | 说明 |
---|---|
margin | 外边距 |
padding | 内边距,默认情况下内边距会影响整个盒子的大小 |
box-sizing | 允许您为了适应区域以某种方式定义某些元素 |
float | 浮动 |
设置box-sizing: border-box;
让width和height就是最终盒子的大小
float的值 | 说明 |
---|---|
left | 向左浮动 |
right | 向右浮动 |