一、CSS概述
CSS：层叠样式表；
二、代码规范
- 放置规范：
在<style>标签内容体中书写CSS样式代码，<style>标签放置在<head>标签之中； - 格式规范：
选择器名称 { 属性名：属性值；属性名：属性值; ...... }
<html>
<head>
<title>标题</title>
<style>
span{
font-size:100px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111111111111</span>
<span>222222222222</span>
</body>
</html>
- 代码规范：
选择器名称 { 属性名：属性值；属性名：属性值; … }
一个属性名有多个属性值，多个值之间用“空格”隔开；
注释：/* 注释内容 */
三、元素选择器
- 元素选择器：以HTML标签名作为选择器名称；
- 适用范围：将相同样式 作用在多个同名标签；
标签名 {
/* CSS样式代码 */
}
四、类选择器
- 类选择器：类名作为选择器名称；
- 适用范围：将样式 一次作用在相同类名的标签上；
.类名 {
/* CSS样式代码 */
}
五、ID选择器
- id选择器：id值作为选择器名称；
- id值，在本页面是唯一的；
- 适用范围：将样式 作用在某个标签上；
#id值 {
/* CSS样式代码 */
}
六、组合方式
- 层级关系
选择器1 选择器2 ......{
/* CSS样式代码 */
}
注意：它表示 选择器1 下的 选择器2；
七、边框属性
注意：所有的HTML标签都有边框，默认边框不可见；
- border：设置边框样式，格式：宽度 样式 颜色；
- width：设置标签宽度；
- height：设置标签高度；
- background-color：设置标签背景颜色；
八、布局
- float：
选择器 {float:属性值;}
常用属性值： none:元素不浮动
left:元素向左浮动
right:元素向右浮动
- 注意：元素设置浮动属性后，会脱离原有文档流（脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整。
九、转换
- display
可以使元素 在行内元素和块元素之间相互转换； - 注：
块元素：<h1>,<p>,<div>,<ul>等；（会自动换行）
行内元素：<span>,<a>等；（不会自动换行）
选择器{display:属性值}
常见属性值： block:块元素；
inline:行内元素；
none:隐藏，不显示，也不占用页面空间；
十、字体
- font-size：字体大小；
- color：颜色；
十一、盒子模型
1. 什么是盒子模型
- 所有的 HTML 元素都可以看成一个四边形，即一个盒子；
- 用 CSS 来设置元素盒子的 内边距、边框、外边距 的样式的方式；
- 相当于设置盒子的样式，我们称之为 盒子模型；
2. 边框（border）
注：可直接用 通用性设置，例如：border:1px solid red;
（后面内边距、外边距 同理）
3. 内边距
4. 外边距
扫描二维码关注公众号，回复：
12344795 查看本文章
十二、CSS和HTML的结合方式
1. 内部样式
（1）行内样式
- 通过标签的 style 属性来设置元素的样式；
- 适用环境：更加针对性的修改某个标签的样式；
<html 标签 style="CSS样式代码"/>
（2）<style></style>样式
- 适用环境：适合在页面中进行样式复用；
2. 外部样式
（1）<link/>标签方式
<link/>又称为 链入式，试将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中，通过<link/>标签将样式连接到 HTML 文档中；- 适用范围：适合不同页面进行样式的复用；
<link rel="stylesheet" type="text/css" herf="css文件路径"/>
- rel="stylesheet": 固定值，表示 样式表；
- type="text/css": 固定值，表示 css 类型；
- herf="css文件路径": 表示 css 文件位置；
css文件如下：
HTML 文件如下：
