本文介绍了CSS的基本概念，包括层叠样式表的作用、基本语法，以及三种样式表引入方式：外部样式表、内部样式表和内联样式表。详细阐述了CSS的颜色表示法，并探讨了样式表的优先级规则，包括就近原则和不同样式的层叠效果。此外，还讨论了CSS中的冲突、层叠和继承现象。
一、CSS基本语法
1、什么是CSS
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
2、CSS基本语法
格式：
选择器{属性1：值1；属性2：值2；…}
h1 {color:red;font-size:14px}
html
<font color="red">
二、css引入方式
1.外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。
标签在（文档的）头部：<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<style>
@import "css/style.css";
</style>
注意：@import引入不建议使用
2、内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。
你可以使用
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
3、内联样式表
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
三、css基本样式
文档流的顺序：上左下右
行级标签：按照文档流的顺序依次排列
块级标签：独占一行
1、基本样式：
宽、高、背景颜色、（针对块及标签）
2、CSS 中的颜色表示法：
单词表示: red、green、blue…
十六进制表示:取值范围 (0～9 && a～f)
RGB三原色表示:取值范围 (0～255)
CSS3 新增颜色：
RGBA：在rgb基础上增加了Alpha透明度
alpha取值介于0.0完全透明与1.0不透明
HSL：分别代表色相、饱和度、亮度
H:0/360 红色 120 绿色 240 蓝色 (0～360)
HSLA：hsl基础上加了透明度
3、CSS注释：
CSS注释以 /* 开始, 以 */ 结束
四、css样式表优先级
就近原则
相同样式优先级：
当设置相同样式时，后面的优先级较高。
但不建议重复设置样式的情况。
内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置相同样式
那么后写的样式优先级更高
单一样式优先级：
style行间 > id > class >tag > * > 继承
注： ！important 强制优先
五、css中的冲突、层叠、继承
冲突：两个对同一标签属性进行设置不同样式时，就产生了冲突
层叠：设计几种不同样式在最终显示时，会将几种效果叠加显示
继承：文字相关的样式可以被继承
布局相关的样式不能被继承
扫一扫
4514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
