CSS层叠样式表:用于设置网页的静态样式
CSS 概述
CSS的作用
. 查看如下代码
<body bgcolor="silver" text="blue">
<font color="red"></font>
<h2>h2 text</h2>
Some text here.
</body>
//各元素对于样式的属性定义各不相同！
CSS的作用
<html>
<head>
<style type="text/css">
body{
background-color:silver;
color:blue;
}
h2{
background-color:orange;
color:red;
}
</style>
</head>
<body>
<h2>
h2 text
</h2>
Some text here.
</body>
</html>
//各元素使用统一的样式声明！
什么是CSS
. CSS(Cascading Style Sheets) : 层叠样式表，又叫级联样式表，简称样式表
. 用于 HTML 文档中元素的样式定义
. 实现了将内容与表现分离
. 提高代码的可重用性和可维护性
CSS 的 基础语法
. 样式表由多个样式规则组成
. 每个样式规则有两个部分:选择器和声明
-- 选择器:决定哪些元素使用这些规则
-- 声明 : 由一个或者多个属性/值对组成，用于设置元素的外观表现
例如: 选择器 声明
属性 值 ...
H1{text-align:center;corlor:red;}
使用 CSS 样式表
. 内联样式
-- 样式定义在单个的HTML元素中
. 内部样式表
-- 样式定义在 HTML 也的头元素中
. 外部样式表
-- 将样式定义的一个外部的 CSS 文库中(.css 文件)
-- 由HTML 页面引用样式表文件
使用 CSS 样式表
1、 创建标准结构的HTM文档
2、 分别使用内联样式、内部样式表和外部样式表为页面元素设置样式
内联样式
. 样式定义在 HTML 元素的标准属性 style 里
-- 不需要定义选择器
-- 也不需要大括号
-- 只需要将分号隔开的一个
例如:
<h1 style="background-color:silver;color:blue;">
文本
</h1>
内部样式表:
. 样式表规则位于文档头元素中的<style> 元素内
-- 在文档的<head> 元素内添加 <style> 元素
-- 在<style> 元素中添加样式规则
<head>
<style type="text/css">
h1{color:green;}
</style>
</head>
<body>
<h1>
文本1
</h1>
<h1>
文本2
<h1>
</body>
// 可以实现内容与表现分离样式仅限于当前页面重用
外部样式表
. 首先需要创建一个单独的样式表文件用来保存样式规则
-- 一个纯文本文件
-- 该文件中只能包含样式规则
-- 文件后缀为.css
. 然后在需要使用该样式表文件的页面上，使用<link> 元素链接需要的外部
样式表文件。
外部样式表:
. myStyle.css 文件
h1{color:green;}
p {background-color:silver;color:blue;}
. html 文件的<head> 元素
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
// 可以实现内容与表现分离
// 可以被站点中的所有页面重用
练习:
使用 CSS 样式表
1、 创建标准结构的 HTM 文档
2、 使用内联样式为 <p> 元素设置样式
3、 使用内部样式表为<h1> 元素设置样式
4、 使用内部样式表为<h2> 元素设置样式
CSS 样式表特征
. 继承性
-- 大多数 CSS 的样式规则可以被继承
. 层叠性
-- 可以定义多个样式表
-- 不冲突时，多个样式表中的样式可层叠为一个
. 优先级
-- 样式定义冲突时，按照不同样式规则的优先级来应用样式
样式优先级 （依次往下，优先级越高）
. 浏览器缺省设置
. 外部样式表或者内部样式表
-- 就近优先
. 内联样式
// 相同的样式，如果重复定义，以最后一次的定义为准
项目案例：
样式优先级
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
