初识CSS_01
学习目标
- 理解使用CSS的目的,及其作用。
- 理解CSS的三种引入方式。
1、CSS初识
-
概念
CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表) -
作用
1、主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局外观显示样式。2、CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背静的控制及整体的排版等,而且还可以针对不同的浏览器设置不同的样式。
2、使用CSS的原因及其作用
-
HTML的不足
-
1、HTML不能满足设计者的需求。
-
2、操作HTML属性很不方便。
-
3、HTML里面添加样式,带来的是无尽的臃肿与繁杂。
-
CSS的作用
-
CSS使网页更加丰富多彩,布局更加灵活多变。
-
CSS使HTML从样式中脱离,使HTML专于做结构呈现,样式交给了CSS。
3、引入层叠样式表(书写位置)
- 行内式(内联样式)
- 内部样式表(内嵌样式表)
- 外部样式表(外链式)
3.1、行内式(内联样式)
- 概念
称为行内样式、行间样式。
通过标签的style属性来设置元素的样式。 - 语法
<!-- 行内式 -->
<body>
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3 ... ">内容
</标签名>
</body>
- 案例
<div style="color: pink; font-size: 18px;" >内容</div>
- 缺点
没能实现结构与样式相分离。
3.2、内部样式表(内嵌样式表)
- 概念
将CSS代码集中写在HTML文档的head标签中,并且用style标签定义。 - 语法
<head>
<style type="text/css">
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
... ...
}
</style>
</head>
- 案例
<!-- 内部样式表 -->
<style type="text/css">
span {
color: brown;
font-size: 20px;
}
</style>
<span>文字内容</span>
- 缺点
只能实现结构与样式部分分离。
3.3、外部样式表(外链式)
- 概念
将所有的样式存放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中。 - 语法
<head>
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
</head>
属性 | 作用 |
---|---|
rel | 定义当前文档与链接文档之间的关系,这里指定"stylesheet",表示链接文档是一个样式表文件。 |
type | 定义所链接文档的类型,这里指定"text/css",表示链接外部文件为CSS样式表。(可以省略) |
href | 定义外部样式表的URL,可以是相对路径也可以是绝对路径。 |
案例
/* CSS文件 */
h2 {
color: pink;
}
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<h2>标题2</h2>
- 优点
实现了格式与样式相分离,因此一个CSS文件可以被多个HTML文档调用。
总结
4、CSS基础选择器
目标
- 能说出选择器的作用,并能使用基础选择器添加样式。
- 理解id选择器与类选择器的区别。
选择器的作用就是找到特定的HTML页面元素。
4.1、标签选择器(元素选择器)
- 概念
标签选择器(元素选择器)是指以HTML标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。 - 语法
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
... ...
}
- 优点
能快速为页面中同类型的标签统一样式。 - 缺点
不能设计差异化样式。
4.2、类选择器
- 概念
类选择器使用".类名"进行标识 - 语法
/* 类选择器 */
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
... ...
}
- 案例
.one {
font-size: 18px;
color: #FFC0CB;
}
<p class="one">类选择器测试</p>
- 优点
可以为元素标签定义单独的样式,可以选择一个或多个标签。 - 实践
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
.blue {
color: blue;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
4.3、类选择器特殊用法-多类名
- 实例
.font100 {
font-size: 100px;
}
.blue {
color: blue;
}
.green {
color: green;
}
.orange {
color: orange;
}
.red {
color: red;
}
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 多类选择器 -->
<span class="blue font100">G</span>
<span class="red font100">o</span>
<span class="orange font100">o</span>
<span class="blue font100">g</span>
<span class="green font100">l</span>
<span class="red font100">e</span>
4.4、id选择器
- 概念
id选择器使用#id名进行标识。 - 语法
/* id选择器 */
#id名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
... ...
}
注意:用法与类选择器用法一致,但id具有唯一性。(原则上只能调用一次,用于特定唯一标签与JS配合使用)
- 案例
#one {
color: #A52A2A;
font-size: 24px;
}
<!-- id选择器 -->
<span id="one">id选择器测试</span>
4.5、通配符选择器
- 概念
通配符选择器用 * 表示,* 就是选择页面中所有标签。 - 语法
/* 通配符选择器 */
* {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
... ...
}
- 案例
* {
margin: 0;
padding: 0;
}
- 注意
通配符会匹配页面所有元素,降低页面响应速度,不建议随便使用。
选择器总结
注意: 无具体语义的 div和span不推荐使用标签选择器。