CSS让我们的网页更加丰富多彩, 布局更加灵活自如。
CSS最大贡献就是: 让HTML从样式中脱离, 实现了HTML专注于去做结构呈现, 样式交给CSS
理想情况下: 结构(html)与样式(css)相分离
CSS初识
- 概念
CSS(Cascading Style Sheets), 通常称为CSS样式表或层叠样式表(级联样式表)
- 作用
- 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的部件和外观显示样式。
- CSS以HTML为标准, 提供了丰富的功能, 如字体、颜色、背景的控制以及整体排版等, 而且还可以针对不同的浏览器设置不同的样式
引入CSS样式表
行内式(内联样式)
- 概念
称行内样式、行间样式。是通过标签的style属性来设置元素的样式
- 其基本语法格式如下
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3"> 内容 </标签名>
实际上任何HTML标签都拥有style属性, 用来设置行内式
- 案例
<div style="color:red; font-size:12px;"> 我们一起爬山吧! </div>
注意:
1. style其实就是标签的属性
2. 属性和值中间是:
3. 多组属性之间用;隔开
- 缺点
没有实现结构和样式相分离
内部样式表(内嵌样式表)
- 概念
称为内嵌式, 是将CSS代码集中写在HTML文档的head头部标签中, 并且用style标签定义
- 其基本语法格式如下
<head> <style type="text/CSS"> 选择器{ 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> </head>
<style> div { color: red; font-size: 12px; } </style>
注意:
2. type="text/css" 在html5中可以省略。
- 缺点
没有彻底分离
外部样式表(外链式)
- 概念
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，
<head> <link rel="stylesheet" type="text/css" href="css文件路径"> </head>
注意:
| 属性 | 作用 |
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
团队规定--代码风格
样式书写一般有两种：
一种是紧凑格式 (Compact)
h3 { color: deeppink;font-size: 20px;}
h3 { color: deeppink; font-size: 20px; }团队约定-代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */ h3{ color: pink; } /* 不推荐 */ H3{ COLOR: PINK; }
CSS选择器
CSS选择器的作用
找到特定的HTML页面元素
h3 {
color: red;
}
这段代码就是2件事， 把 h3选出来， 然后 把它变成了 红色。
CSS基础选择器
1. 标签选择器
- 概念
- 语法
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 作用
- 优点
是能快速为页面中同类型的标签统一样式
- 缺点
不能设计差异化样式。
2. 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名.
- 语法
- 类名选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
-
- 标签
<p class='类名'></p>
- 优点
注意:
2. 长名称或词组可以使用中横线来为选择器命名。
3. 类选择器特殊用法 - 多类名
我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：
1. 各个类名中间用空格隔开。
2. 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蝉</div>
4. id选择器
id选择器使用#进行标识，后面紧跟id名
- 其基本语法格式如下
- id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
- 标签
<p id="id名"></p>
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
总结:
- 概念
通配符选择器用*
- 其基本语法格式如下
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面代码, 使用通配符选择器定义CSS样式, 清除所有HTML标记的默认边距
* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/ }
注意:
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
团队约定:
/* 推荐 */ .jdc {} li {} p{} /* 不推荐 */ *{} #jdc {} div{} 因为div 没有语义，我们尽量少用