2.1 什么是CSS
-
作用：美化页面和布局。（Cascading Style Sheets 层叠样式表）
层叠：层层叠加，多个样式可以同时作用在同一个html元素上，同时生效。如果没有冲突的部分就共同作用，有冲突的部分以优先级高的为主。
样式表：多个样式的集合。 -
css不能单独使用，要和html结合使用。
2.2 css和html结合的3种方式
2.2.1 内嵌样式
-
语法：在标签中通过style属性引入css样式。
-
特点：只对当前的元素有效果，不方便复用，属于结构和表现耦合，不方便后期的维护
例：
<p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p><p>锄禾日当午</p><p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p><p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p><p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p><p style="background-color: green;font-size: 30px;color: red;">锄禾日当午</p>
2.2.2 内部样式
-
语法：在head标签的内部通过style标签来引入css样式。
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
.....
} -
特点：可以同时为多个元素设置样式,可以实现了样式的复用。表现和结构进一步分离
-
作用范围：仅仅在当前页面中有效
例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">p{background-color:pink;color:darkorange;font-size: 20px;}</style></head><body><p>一行白鹭上青天</p><p>一行白鹭上青天</p><p>一行白鹭上青天</p><p>一行白鹭上青天</p><p>一行白鹭上青天</p><b>哈哈哈</b></body>
</html>
2.2.3 外部样式
单独创建一个css文件，在这个文件中编写 css样式。然后在需要样式的文件中引入该css文件
- 通过link标签引入
- rel:引入文件和当前文件的关系
- type:告知浏览器引入文件的类型
- href:引入文件的路径
特点：完全使表现和结构分离，可以使得样式可以复用。使用link引入，可以利用浏览器的缓存，加快了用户访问的速度，提高了用户体验。
作用范围：引入的文件
例：a.css
p{color: red;font-size: 50px;
}
html：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入外部的a.css--><link rel="stylesheet" type="text/css" href="../css/a.css">
</head>
<body><p>英雄不问出处 电缆不问来处</p>
</body>
</html>
2.3 CSS的语法
选择器{
css样式；
}
选择器：选择具有相同或者相似特征的一类元素。
css的样式；
属性1：属性值1;
属性2：属性值2;
属性2：属性值2;
css的注释： /*注释的内容*/
2.4 块元素和内联元素
块元素：
独占一行的元素，无论内容有多少 他们都会独占一行。 p h1 h2 h3 div
(div没有任何的效果，不会为元素设置样式，一般是用于布局)
内联元素：
只占本身大小的元素a img span b i
span标签也没有任何效果，一般用于选中文字 给文字添加样式。
div块元素主要是用于布局。span内联元素主要是用于选中文字，给文字设置样式。
使用时：
1.块元素可以包含内联元素 内联元素不能包含块元素。
2.a元素可以包含任意元素。【任何内容都可以作为超链接使用】 但是除了本身。
3.p元素不可以包含其他的块元素。
2.5 css中的选择器
2.5.1基础选择器
2.5.1.1 元素选择器
标签选择器：选择具有相同标签名的元素
语法：标签名{css样式}
例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">p{background-color:pink;}h4{background-color:green;}</style>
</head>
<body><p>锄禾日当午</p><p>锄禾日当午</p><p>锄禾日当午</p><h4>汗滴禾下土</h4><h4>汗滴禾下土</h4><h4>汗滴禾下土</h4>
</body>
</html>
2.5.1.2 id选择器
id选择器：根据id的值选择到对应的元素
语法：#id属性值{css样式}
在同一个页面中 id属性值需要保证唯一。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">#d1{color:red;}#d2{font-size: 50px;}</style>
</head>
<body><p>锄禾日当午</p><p>锄禾日当午</p><p id="d1">锄禾日当午3</p><p>锄禾日当午</p><p>锄禾日当午</p><p>锄禾日当午</p><p>锄禾日当午</p><h4>汗滴禾下土</h4><h4 id="d2">汗滴禾下土2</h4><h4>汗滴禾下土</h4><h4>汗滴禾下土</h4><h4>汗滴禾下土</h4>
</body>
</html>
2.5.1.3 类选择器
类选择器：选择具有相同class属性值的一类元素【class属性值可以重复】
语法：.class属性值{css样式}
例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.c1{color: yellow;font-size: 60px;}</style>
</head>
<body><p>锄禾日当午</p><p>锄禾日当午</p><p id="d1">锄禾日当午3</p><p>锄禾日当午4</p><p>锄禾日当午</p><p class="c1">锄禾日当午AAA</p><p>锄禾日当午</p><h4>汗滴禾下土</h4><h4 id="d2">汗滴禾下土2</h4><h4>汗滴禾下土</h4><h4>汗滴禾下土</h4><h4 class="c1">汗滴禾下土AAA</h4>
</body>
</html>
注意：
优先级：id选择器 > 类选择器 > 标签选择器
2.5.2 扩展选择器
2.5.2.1 选择所有元素
*号表示通配符,能选择到页面中的所有元素
*{css样式
}
2.5.2.2 并集选择器
语法:选择器1,选择器2....{css样式}
多个选择器之间使用逗号隔开
2.5.2.3 子选择器[后代选择器]
祖先元素 后代元素{css样式
}
2.5.2.4 父选择器
选择器1(父)> 选择器2(子){css样式;
}
2.5.2.5 属性选择器
元素名称[属性="属性值"]{css样式;
}
2.6 css的属性
2.6.1 文字属性
- color:文字颜色 red green #00ff00 rgb(0,255,0);
- font-size:文字大小
- font-family：字体
- text-align:文字的对齐方式：left center right
- text-decoration：文字的下划线属性:none没有下划线 underline表示有下划线
- line-height:行高
2.6.2 背景属性
- background-color:设置背景颜色
- background-image:设置背景图片
- background-repeat：设置背景图片的平铺方式
- no-repeat：不平铺
- repeat-x:横向平铺
- repeat-y:纵向平铺
- repeat:平铺
2.6.3 尺寸属性
width:设置元素的宽度
height:设置元素的高度
2.6.4 列表属性;
list-style-type 设置列表项前面的标识
list-style-image:设置列表项前面的图片:url:指定图片的路径
2.6.5 显示属性
display:设置内容隐藏或者显示
- none:表示隐藏
- inline:表示显示,行级显示
- block:表示显示,换行显示
2.6.6 浮动属性
float:浮动属性 left right
clear:清除浮动 left right both
2.6.7 边框属性
- border-width:边框粗细
- border-color:边框颜色
- border-style:边框线型：solid(实线) dotted(点线) dashed(虚线)
- border:同时设置 粗细 颜色 线型
边框是一个复合属性,可以单独设置某一个条边框