一、简介
CSS
css：页面美化和布局空值
1.概念
css：Cascading Style sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处
1.功能强大
2.将内容的展示和样式控制分离
降低耦合度，解耦
让分工协作更容易
提高开发效率
二、CSS的使用
1、css：CSS与html结合方式
1.1行内样式：
在标签内使用style属性指定css样式代码
<div style="color: red; font-size: 20px; background-color: yellow;">hello world</div>1.2内联样式：
在head标签内，定义style标签，style标签的标签体内容就是css代码
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<style type="text/css">
div{
color: green;
font-size: 22px;
}
</style>
</head>
<body>
<div>hello css</div>
<div>hello world</div>
</body>1.3外联样式：
1.将css样式写在后缀是.css的文件中
2.在head标签内，定义link标签进行引入 或者在head中定义style标签，用@import url("")
a.css
div{
color: red;
}
<head>
<meta charset="UTF-8">
<title>外联样式</title>
<!--<link rel="stylesheet" type="text/css" href="css/a.css"/>-->
<style>
@import url("css/a.css");
</style>
</head>
<body>
<div>hello css</div>
</body>2、css语法
格式：
选择器{
属性名: 属性值；
属性名: 属性值；
...
}
注意：每一对属性需要使用；隔开，最后一对可以不加
3、选择器
选择器：筛选具有相似特征的元素
3.1基础选择器
1.标签选择器：选择具有相同标签名称的元素
语法：标签名称{}
2.id选择器：选择具体id属性值的元素
语法：#id属性值{}
建议在一个html中id值唯一
3.类选择器：选择具有相同的class属性值的元素
语法：.class属性值{}
优先级：!important > 行内 > id >类 > 标签
3.2扩展选择器
1.通配符选择器：选择所有元素，一般会用于去除内外边距
语法：*{}
2.并集选择器：多个选择器放在一起
语法：选择器1,选择器2{}
3.后代选择器：筛选选择器1元素下选择器2元素
语法：选择器1 选择器2{}
4.子代选择器：当前元素里，第一既满足条件的选择器
语法：选择器1>选择器2{}
5.相邻选择器：选择器1元素下第一个满足条件的选择器2元素，如果下方不是选择器2元素，则没有样式
语法：选择器1+选择器2{}
6.兄弟选择器：当前元素下的所有满足条件的选择器
语法：选择器1~选择器2{}
7.属性选择器：选择元素名，属性名 = 属性值的元素
语法：元素名称[属性名 = "属性值"]{}
8.伪类选择器：选择一些元素具有的状态
语法：元素:状态{}
如：a标签
状态：
- link：初始状态
- hover：鼠标悬浮状态
- active：正在访问状态
- visited：被访问过的状态
- focus：获得焦点
- first-child
- last-child
- nth-child
- checked 被选中的
- disabled 被禁用的
4、元素分类
行内元素：一行可以设置多个，不能设置宽高 如a，span
块级元素：一行只能设置一个，行独占，可以设置宽高 如：div p pre
行内块元素：一行可以设置多个，可以设置宽高 如：img
5、属性
5.1字体、文本
- font-size：字体大小，默认16px
- font-family：字体
- font-weight：粗细 bold加粗 lighter变细
- font-style：字体风格 italic斜体
最低0.47元/天 解锁文章
9141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
