CSS 概述
产生背景
- 为了解决HTML页面臃肿的问题，CSS应运而生。
发展过程
CSS版本更新迭代
CSS概念
- css——层叠样式表，一种用来表现HTML的文件样式的计算机语言
- 作用：静态地修改修饰网页，可以配合各种脚本语言（比如js）动态地对网页各元素进行格式化
意义：CSS的出现，实现了网页结构和样式分离，拯救了混乱的HTML。CSS就是网页的美容师，让网页更加美观。
无CSS样式的网页
有CSS样式的网页
CSS组成
层叠式
CSS中贯穿始终的加载特性
- 层叠性
- 继承性
样式
定义如何显示HTML元素
- 文本文字
- 背景
- 盒模型
- 浮动
- 定位
- 其他
CSS语法
CSS规则
-
CSS规则由两个主要的部分构成：选择器，一条或者多条声明
例子
书写位置
CSS的代码根据书写位置不同分为四种书写方式：内联式，内嵌式，外联式，导入式
内联式
- 内联式，也被习惯叫做行内样式
- 书写位置：在HTML标签之上的style属性中书写css样式。
- 所有的CSS样式属性总体组成标签的style属性的属性值。
<p style="font-size: large; color: brown;">测试文字</p>
效果
内联式缺点
- 必须写在标签上，没有完全脱离HTML标签
- CSS样式代码让标签结构繁重，不利于HTML结构的解读
- 一个内联式的CSS代码，只能给一个标签用，如果有很多标签有相同样式就会增加代码量
实际工作中不会使用内联式（行内式）编写CSS代码
内嵌式
- 书写位置：在HTML文件中，<head>标签内部有一个<style>标签。
<style>标签书写在<title>后面，所有css代码写在<style>内部 - <style>标签有一个type属性，属性值为“text/css”
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p{
font-size: large;
color: brown;
}
</style>
</head>
<body>
<p>测试文字</p>
</body>
</html>
效果与上面的测试文字一致
优点：
1.实现了结构与样式的初步分离，css只管负责样式，html只管负责结构
2.多个标签可以利用一段代码设置相同的样式，节省代码量
缺点：
1.结构与样式并没有完全分离，代码依旧写在了HTML文件的<style>标签内部。
2.css样式只能给一个HTML文件使用，不能够被多个HTML文件同时使用。
3.在HTML文件里如果css代码够多，会造成头重脚轻的问题。
外联式
- 外联式CSS，也叫做外链式CSS，外部CSS
- 书写位置：在一个单独的拓展名.css的文件里
- 语法：内部代码与内嵌式样式表中<style>标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。
-
在.css文件中书写时，不需要添加<style>标签了。
新建一个css文件：
添加css文件，对p标签进行样式设计
外联式引用
- 外联式样式表必须引入到HTML文件中，才能正常进行加载
- 引入方式：在<head>标签内部使用<link>标签进行引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css01.css" type="text/css">
</head>
<body>
<p>测试文字</p>
</body>
</html>
<link>标签属性：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rel | "stylesheet" | 表示引入的外部文件与HTML之间的关系，样式表 |
| href | css文件路径 | hypertext reference，超文本引用 |
| type | "text/css" | 表示加载时代码按照纯文本形式的css代码加载，HTML5中可以省略type属性不变 |
外联式优点
1.实现了HTML与CSS的完全分离
2.多个HTML文件可以共用一个css文件，便于提取公共css，减少了代码量
3.可以实现一个css变化，多个HTML页面可以同时变化，减少工作量
4.一个HTML文件可以引入多个css，可以实现同一个页面中css代码分层
导入式
- 书写位置：在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其他的外部的.css文件
- 导入方式：语句：@import url(路径)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用外联式 -->
<link rel="stylesheet" href="css01.css" type="text/css">
<style>
/* 使用导入式 */
@import url(css02.css);
</style>
</head>
<body>
<!-- 标签p和标签div的样式通过外联式和导入式后的综合表现 -->
<p>测试文字</p>
<div>
<h2>这是div区域的标题</h2>
<p>这是一块区域</p>
</div>
</body>
</html>
css02文件的设置
css01文件的设置
上述代码的效果
导入式的问题
- 导入式样式表的作用与外联式样式表基本相同
- 网速较慢的话会出现css没有效果的问题，因为是HTML结构加载之后才进行编译
- 工作中多数使用外联式，很少使用导入式
实际使用
- 小型案例：内嵌式CSS
- 实际工作、大型网站项目：推荐使用内联CSS
网友评论