本章内容
- 简介
- 使用方法
- 选择器
- 伪类
一、简介
css在一个网页中的主要作用：
- HTML是网页内容的载体
- css样式是表现（外观控制）
- JaveScript是行为，用来实现网页特效效果
二、使用方法
A、方法有四种
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*导入样式*/
@import url(../css/index.css)
/*嵌入样式*/
h3{color: yellow;font-size: 40px}
</style>
<!-- 链入样式 -->
<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
<p>变红</p>
<!-- 行内样式 -->
<h3 style="color:red;font-size:30px">我是什么颜色</h3>
</body>
</html>
- 行内样式：在标签内部直接声明样式
- 嵌入样式：在<head>中<style>内 声明样式
- 链入样式：<head>中 用<link />链入
- 导入样式：在<head>中<style>内 @import
B、优先级
就近原则
C、四者的区别
| 类别 | 引入方式 | 位置 | 加载 |
| 行内样式 | 开始标签style | html文件内 | 同时 |
| 嵌入样式 | <head><style>内 | html文件内 | 同时 |
| 链入外部样式 | <head><link>引用 | *css样式文件与html文件分离 | 页面加载时，同时加载css样式 |
| 导入式@import | 在样式代码最开始处 | css样式文件与html文件分离 | 读取完html文件后加载 |
三、选择器
A、标签选择器（tagname）
div{color:red;}
B、类选择器（.classname）
.xx{color:red;}
C、全局选择器（*）
*{color:red;}
D、群组选择器（，分隔）
a,b,c,d{color:red;}
E、后代选择器（sapace分隔）
a b c{color:red;}
F、优先级
浏览器从上往下解释 采取就近原则
四、伪类
A、使用方法
- link 未访问时
- visited 访问过
- hover 鼠标经过
- active 点击时
<style type="text/css">
/*补充代码*/
a:link{color:orange;}
a:visited{color:green;}
a:hover{color:green;}
a:active{color:yellow;}
</style>
B、注意先后顺序
link → visited → hover → active
五、CSS的继承与层叠
A、继承
- css的继承：父元素设置了样式，子元素可以继承父元素部分样式
- 优点：减少代码量
- 子元素不能继承的样式：边框线
- 可以继承的样式：字体颜色和大小
- 注意：元素的继承性是微弱的，当子元素与父元素样式冲突时，优先子元素。
B、层叠
b.1、css的层叠：1、可以对同一个元素定义多个样式；2、不冲突时，一个元素可应用多个样式；3、冲突时按权值规则；
b.2、选择器的权值：
- 行内样式：权值为1000
- ID选择器：权值为100；
- 类和伪类选择器：权值为10；
- 标签选择器：权值为1；
- 通配符选择器：权值为0；
b.3、权值计算规则
- 同级不同选择器的个数
- 每类选择器的个数乘以相应的权值
- 把所有的值相加得出选择器的权值
b.4、优先权提升 ！important :
- 一旦属性值后面加上！impotant 表明 优先使用这个样式
- 使用方法：p{color:red！important;}
b.5、优先顺序： ！important→权值 → 就近原则
六、CSS的命名
A、CSS颜色供hi命名规则
- 采用英文字母、数字以及 '_' 和 '-' 命名；
- 命名形式：单字，连字符，下划线和驼峰
- 使用有意义命名
B、常用的CSS样式命名
b.1、页面结构
| 页头：header | 导航：nav |
| 页面主体：main | 侧栏：sidebar |
| 页尾：footer | 栏目：column |
|
内容：content/container |
页面外围控制：wrapper |
| 容器：container | 左右中：left right center |
b.2、导航
| 导航：nav | 左导航：leftsidebar |
| 主导航：mainnav | 右导航：leftsidebar |
| 子导航：subnav | 菜单：menu |
| 顶导航：topnav | 子菜单：submenu |
| 边导航：sidebar |
摘要：summary |
b.3、功能
| 标志：logo | 注册：register |
| 广告：banner | 搜索：search |
| 登录：login | 功能区：shop |
| 登陆条：loginbar | 标题：title |