CSS
CSS：页面美化和布局控制
1.概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处：
- 1.功能强大
- 2.将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
CSS的使用：CSS与html结合方式
1.内联样式
- 在标签内使用style属性指定css代码
- 如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="color: red;">hello css</div>
</body>
</html>
2.内部样式
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
- 如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color: aqua;
size: a5;
}
</style>
</head>
<body>
<div>啦啦啦啦</div>
</body>
</html>
3.外部样式
- 1.定义css资源文件
- 2.在head标签内，定义link标签，引入外部的资源文件
- 如：
css:
div{
color: blue;
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/a.css"/>
</head>
<body>
<div>hello css</div>
</body>
</html>
展示效果：
- 注意：
- 1，2，3种方式，css作用范围越来越大
- 1方式不常用，后期常用2，3
CSS语法：
-
格式：
选择器 {
属性名1：属性值1；
属性名2：属性值2；
...
} -
选择器：筛选具有相似特征的元素
-
注意：
- 每一对属性需要使用；隔开，最后一对属性可以不加；
选择器：筛选具有相似特征的元素
- 分类：
- 1.基础选择器
- 1.id选择器：选择器具体的id属性值的元素，建议在一个html页面种id值唯一
- 语法：#id属性值{}
- 2.元素选择器：选择具有相同标签名称的元素
- 语法：标签名称{}
- 注意：id选择器优先级高于元素选择器
- 3.类选择器：选择具有相同的class属性值的元素。
- 语法：.class属性值{}
- 类选择器优先级高于元素选择器
- 1.id选择器：选择器具体的id属性值的元素，建议在一个html页面种id值唯一
- 2.扩展选择器
- 1.选择所有元素：
- 语法：*{}
- 2.并集选择器：
- 选择器1，选择器2{}
- 3.子选择器：筛选选择器1元素下的选择器2元素
- 语法：选择器1 选择器2{}
- 4.父选择器：筛选选择器2的父元素下的选择器1
- 语法：选择器1 > 选择器2{}
- 5.属性选择器：选择元素名称，属性名==属性值的元素
- 1.元素名称[属性名="属性值"]{}
- 6.伪类选择器：选择一些元素具有的状态
- 语法：元素：状态{}
- 如：a
- 状态：
- link：初始化的状态
- visited：被访问过的状态
- active：正在访问的状态
- hover：鼠标悬浮状态
- 状态：
- 1.选择所有元素：
- 1.基础选择器
属性：
1.字体，文本
- font-size：字体大小
- color：文本颜色
- text-align：对其方式
- line-height：行高
2.背景
- background：复合属性。设置对象的背景特性
3.边框 - border：设置边框，符合属性
4.尺寸 - wigth：宽度
- height：高度
5.盒子模型 - margin:外编剧
- padding：内边框
- 默认情况下内边距会影响整个盒子的大小
- box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
- left
- right
