CSS第一天
2018-04-06 本文已影响73人
痴人会说梦
CSS
- 什么是CSS
- 为什么要学习CSS
- CSS基础语法
- CSS使用方法
- CSS选择器
- CSS继承和层叠
- CSS优先级
- CSS命名规范
什么是CSS
CSS层叠样式表(Cascading Style Sheets)
用于定义HTML内容在浏览器内的显示样式
为什么要学习CSS
CSS简化HTML相关标签,定义了如何显示HTML元素,网页体积小,下载快
解决内容与表现分离的问题
更好的维护网页,提高工作效率
主要目的:可以让相同的一个页面在不同的浏览器当中呈现相同的样式
CSS基础语法
CSS规则有两部分构成:选择器,声明
CSS规则
- 选择器:用于定位页面中的元素,可以是一个,也可以是多个
- {}声明块:声明块包含了多个CSS的声明
- 属性值使用分号隔开,不要忘记
- 使用英文标点符号
CSS引用
写在<head></head>标签内:<style type="text/css">
......css样式
</style>
CSS注释
HTML注释<!--注释语句-->
CSS注释/*注释语句*/
CSS使用方法
如何引用CSS
- 行内样式(内嵌样式)
- 内部样式表(嵌入样式)
- 外部样式表
- 导入式
行内样式(内嵌样式)
在开始标签内添加style样式属性
<p style="color:red;font-size:20px;">内容 </p>
内部样式表(嵌入样式)
<style type="text/css">
......css样式
</style>
<style>标签要放在<head>标签之间
外部样式表
把CSS样式代码写在独立的一个文件中(.css)
引入外部文件:
<link href= "XXX.css" rel="stylesheet" type="text/css" />
CSS导入式
@import "xxx.css"
@import url(xxx.css)
放在style标签内,第一行
使用方式对比
综上:一般使用外部样式表
- CSS和HTML分离
- 多个文件可以使用同一个样式文件
- 多文件引用同一个css文件,css只需要下载一次
CSS使用方法的优先级
行内样式>内部样式>外部样式
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
- 最后定义的优先级最高(就近原则)
CSS选择器
- 标签选择器
- 类选择器
- ID选择器
- 全局选择器
- 群组选择器
- 后代选择器
- 伪类选择器
标签选择器
以HTML标签作为选择器,通过标签选择器设置样式,那使用该标签额内容都引用该样式
p{font-size:20px;color:blue;}
类选择器
为HTML标签添加class属性,通过类选择器为具有此class属性的元素设置CSS样式,只要通过class属性引用类选择器设置的样式,那该标签引用相应样式.
<h1 class="red">内容1</h2>
<p class="red">bb</p>
.red{color:red;}
可对不同类型元素的同一个名称的类选择器设置不同的样式规则,只有class相同类型的标签才可以引用该样式
p.red{font-size:20px;}
h1.red{font-size:40px;}
同一个元素可以设置多个类,之间用空格隔开(同一个标签不能使用多个属性声明 class="123" class="xxx")
<p class="red special">@@@</p>
ID选择器
为HTML标签添加id属性
<p id="p1">xxx</p>
通过id(唯一)选择器来为具有此ID的元素设置CSS规则,使用#
#p1{color:red;}
群组选择器
集体统一设置样式,使用逗号隔开,id,类选择器,标签选择器都可以
p,h1,p2,h3{color:red;}
class,id区分大小写
全局选择器
通配符* 所有标签设置样式
*{color:red;}
后代选择器
使用后代选择器,之间用空格隔开
p em{font-size:20px;}
伪类选择器
- 伪类选择器定义特殊状态下的样式
- 无法用标签,id,class及其它属性实现
链接伪类四种状态:激活状态,已访问状态,未访问状态和鼠标悬停状态
| 伪类 | 说明 |
|---|---|
| :link | 未访问的链接 |
| :visited | 已访问的链接 |
| :hover | 鼠标悬停状态 |
| :active | 激活的链接 |
伪类:hover和:active的兼容
- IE6及更早版本,支持<a>元素的4种状态
- IE6浏览器不支持其他元素的:hover和:active
链接伪类的顺序
:link > :visited > :hover > :active
- a:hover必须置于a:link和a:visited之后,才有效
- a:active必须置于a:hover之后,才有效
- 伪类名称对大小写不敏感
- :hover用于访问的鼠标经过某个元素时,:active用于一个元素被激活时(即按下鼠标之后放开鼠标之间的时间)
