CSS初识
概念:CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表)。
作用:
1、主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
2、CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
引入CSS样式表(书写位置)
1、行内式(内联式)
(1)概念:称行内样式、行间样式。是通过标签style
属性来设置元素的样式。
(2)语法:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
实际上任何HTML标签都拥有style属性,用来设置行内式。
(3)注意:
- style其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用;隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
- 缺点:
- 没有实现样式和结构相分离
内部样式表(内嵌样式表)
(1)概念:
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
(2)语法
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
(3)注意:
-
- style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
- 缺点:
没有彻底分离
外部样式表(外链式)
1、概念:
称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,
通过link标签将外部样式表文件链接到HTML文档中
2、语法:
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注意:
- link 是个单标签
- link标签需要放在head头部标签中,并且指定link标签的三个属性
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。 |
type | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 |
type | 定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略 |
三种样式表总结(位置)
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
CSS选择器
CSS选择器作用
找到特定的HTML页面元素
CSS基础选择器
标签选择器
概念:
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 作用:
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签 - 优点:
是能快速为页面中同类型的标签统一样式 - 缺点:
不能设计差异化样式。
类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名.
语法:
- 类名选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
- 标签
<p class='类名'></p>
- 优点:
- 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
- 注意
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名, 尽量使用英文字母来表示。
类选择器特殊用法- 多类名
我们可以给标签指定多个类名,从而达到更多的选择目的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
注意:
- 各个类名中间用空格隔开。
- 多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
id选择器
使用#进行标识,后面紧跟id名
语法格式
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签
<p id="id名"></p>
- 元素的id值是唯一的,只能对应于文档中某一个具体的元素。
- 用法基本和类选择器相同。
通配符选择器
-
概念
-
通配符选择器用*号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
语法格式
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
注意:
会匹配页面所有的元素,降低页面响应速度,不建议随便使用
基础选择器总结
选择器 | 作用 | 缺点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p { color:red;} |
类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 | * {color: red;} |
- 尽量少用通用选择器 *
- 尽量少用 ID 选择器
- 不使用无具体语义定义的标签选择器 div span