幕客前端基础入门-css选择的艺术
1. CSS简介
CSS：Cascading Style Sheets层叠样式表，用来定义html内容在浏览器内的显示样式。
为什么学习css？
在html中通过标签属性也可以设置背景颜色、文字样式，但这样会导致网页的容量会很大，所以css为我们带来了以下的优势
1.css简化html相关标签，网页体积小，下载快
2.解决内容与表现分离的问题
3.更好地维护网页，提高工作效率
学习内容
- css基础语法
- css使用方法
- css选择器
- css继承和层叠
- css优先级
- css命名规范
2. css基础语法
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*选择器{属性:值;属性:值;} 其中一对属性值就是一个声明*/
h1{color:red;font-size:20px;}
/* 多个标签使用同一个样式，用英文' , '分隔 */
h1,h2,p{
font-size: 20px;
}
p{color: red;font-family: "DFKai-SB";}
h2{color:blue;}
/*css注释*/
</style>
</head>
<body></body>
</html>
3 CSS使用方法
CSS引用有4种方式：行内样式（内联样式）、内部样式表（嵌入样式）、外部样式表、导入式
3.1.行内样式
<h1 style="color: red;font-size: 15px">行内样式</h1>
3.2.内部样式表
<head>
<style type="text/css">
<!--
.spical{
color: red;
text-decoration: underline;
}
-->
</style>
</head>
对于一些浏览器不识别style标签的时候，可以使用html注释标签把样式包括起来。浏览器有自己的版本，例如IE6、7、8，Chrome等。在style使用html注视标签包含样式表的目的是针对这些低版本的浏览器。
对于一些低版本的浏览器，它不识别style标签。这时候它就会把样式表的内容先是在页面上，为了避免这个现象，就需要在style标签添加html注释包含我们的样式。这样低版本的浏览器不识别style标签，也不会把样式表的内容限制在页面上。对于高版本的浏览器来说，他识别style标签，就会忽略html注释标签，去解析样式表。
3.3. CSS外部样式
把CSS样式代码写在独立的一个文件中，然后引入
<head>
<link rel="stylesheet" type="text/css" href="muke.css">
</head>
3.4. CSS导入式
<head>
<style type="text/css">
@import "muke.css";
或@import url(muke.css);
</style>
</head>
3.5. CSS使用方法的区别
| 类别 | 引入方法 | 位置 | 加载 |
|---|---|---|---|
| 行内样式 | 标签内style | html文件内 | 同时 |
| 内部样式 | <head>中<style>内 | ||
| 链入外部样式 | <head>中<link>引用 | css样式文件与html文件分离 | 页面加载时，同时加载css样式 |
| 导入式@import | 在<head>中<style>最开始处 | 在读取完html文件之后加载 |
使用链入外部样式的好处
- 1.css和html分开管理
- 2.多个文件可以使用同一个样式文件
- 3.多文件引用同一个CSS文件，CSS只需要下载一次。
3.6 CSS使用方法优先级
问题：对于同一个元素，同时使用这些方法来设置CSS样式，那种犯法才能真正的起作用呢？
- 行内样式优先于内部样式
- 内部样式优先于导入式样式
- 内部样式和外部链接优先级取决于前后位置
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@import "muke.css";
p1{
color: blue;font-size: 30px;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="muke2.css"> -->
</head>
<body>
<p style="color:red;font-size: 10px">行内优先</p>
<p>离谁近，就是谁</p>
</body>
</html>
muke.css
p{color:orange;font-size: 50px}
muke2.css
p{color:green;font-size: 100px;}
总结
- 行内样式优先
- 其他样式取决于距离标签远近，越近越优先。
4. CSS选择器
css规则有两部分构成：选择器、声明
<!-- 选择器{声明(属性：值);}-->
4.1 标签选择器
p1{color: blue;font-size: 30px;}
以html标签作为选择器。通过标签选择器设置样式，那使用该标签的内容都是用该样式。
4.2 类选择器
.tip{color: blue;font-size: 30px;}
为html标签添加class属性，通过类选择器来为具有词class属性的元素设置css样式。可对不同类型元设置同一个样式规则。同一个标签可以设置多个类，类之间用空格隔开。
注意：ID和类选择器区分大小写
4.3 ID选择器
#desc{color: blue;font-size: 30px;}
html标签添加ID属性，通过ID选择器来对具有此ID的元素设置CSS样式。
ID选择器不能象class选择器一样定义多个标签，ID是唯一的，相当于身份证。同一个元素也不能同时引用多个ID。
4.4 全局选择器
*{color:blue;...}
所有标签设置样式，使用通配符选择器。
使用通配符会影响整个页面中所有元素的效果。所以在使用的时候，一定要谨慎。以往在开发的过程中，使用全局选择器在最开始现将所有元素的边距等样式去掉。
4.5 群组选择器
p,h1,h2{color:red};
从一个元素到另一个元素，跨越了一层或多层的元素，就是祖先与后代的关系。body部分是浏览器展现的内容。html是所有元素的祖先，html成为根元素，具有相同父元素之间的元素，我们成为兄弟元素。
4.6 后代选择器
<style>
/*p标签下面的em标签，使用空格分隔 */
p em{font-size:40px;}
</style>
后代选择器虽然提高了效率，但是由于后代选择器权重和优先级的问题，它会影响我们样式的冲突，所以在使用后代选择器的时候，一定要注意这个问题（样式的冲突和权重优先级）。
4.7 伪类选择器
在不同状态下显示不同样式的方法，用id，class是无法设置的，需要使用伪类来设置。
| :link | 未访问的链接 | 仅限于链接 |
| :visited | 已访问的链接 | 仅限于链接 |
| :hover | 鼠标悬停状态 | 可用于其他元素 |
| :active | 激活状态，即按下元素之后放开鼠标之前的时间 | 可用于其他元素 |
链接伪类的顺序 :link>:visited>:hover>:active
- 1.a:hover必须至于a:link和a:visited之后，才有效
- 2.a:active必须置于a:hover之后，才有效
- 3.伪类名称对大小不敏感
针对不同链接设置不同样式，只需加上类或id即可
a:link{color:red;}
a:visited{color:green;}
a.one:hover{font-size:30px;font-weight: bold;}
a:active{color:orange;}
a{text-decoration: none}
5.CSS继承、层叠和优先级
5.1 CSS继承
CSS继承：从父元素继承部分CSS属性
继承的好处：
- 1.父元素设置样式，自元素可以继承部分属性
- 2.减少CSS代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{color: red}
div{font-size: 10px}
</style>
</head>
<body>
<div>
<p>CSS<span>继承</span></p><!-- span标签继承p标签的样式 -->
<div>CSS层叠</div>
</div>
<p>疑是地上霜</p>
</body>
</html>
5.2 CSS层叠
- 可以定义多个样式
- 不冲突时，多个样式可层叠为一个
- 冲突时，按不同样式规则的优先级来应用样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{color: red}
.one{font-size: 20px}
span{color: blue}
</style>
</head>
<body>
<p class="one">床前明月光，<span>疑是地上霜</span></p>
</body>
</html>
6 CSS选择器优先级
- ID选择器>class选择器>标签选择器
- 同类样式多次引用，样式表中后定义的优先级高，就近原则
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{color: red;}
#idgreen{color: green;}
.classyellow{color:yellow;}
.classblue{color:blue;}
div{color:gray;}
</style>
</head>
<body>
<p>单独使用</p>
<div>使用标签选择器样式</div>
<div id="idgreen">使用ID样式“绿色”</div>
<div class="classblue">使用class样式“蓝色”</div>
<!-- 优先级结果：ID选择器>标签选择器；class选择器>标签选择器 -->
<p>同一个元素引用标签、ID、class定义的样式</p>
<div id="idgreen" class="classblue">CSS优先级，同时引用标签、ID、class定义的样式</div>
<div class="classblue" id="idgreen">CSS优先级，同时引用标签、ID、class定义的样式</div>
<!-- 优先级结果：ID选择器>class选择器>标签选择器 -->
<p>同一个元素引用多个class定义的样式</p>
<div class="classblue classyellow">CSS优先级，蓝色在前，黄色在后</div>
<div class="classyellow classblue">CSS优先级，黄色在前，蓝色在后</div>>
<p>同一个元素引用多个标签样式</p>
<div>CSS优先级</div>
<!-- 优先级结果：同类样式多次引用，样式表中后定义的优先级高，就近原则 -->
</body>
</html>
选择器优先级规则
同一样式表中：
- 权值相同，就近原则（离备设置元素越近，优先级越高）
- 权值不同，根据权值来判断样式，哪种CSS样式权值高，就采用哪种。
| 选择器 | 权值 |
| 通配符选择器 | 0 |
| 标签选择器 | 1 |
| 类选择器和伪类选择器 | 10 |
| ID选择器 | 100 |
| 行内选择器 | 1000 |
权值计算规则：
- 统计不同选择器的个数
- 每类选择器的个数乘以相应权值
- 把所有的值相加得出选择器的权值
#main div.warning h2{...}
id: 1 * 100 = 100
class: 1 * 10 = 10
标签：2 * 1 = 2
权值：100+10+2=112
计算前面示例中样式权值
div{color: red;} /* 1 */
#idgreen{color: green;} /* 100 */
.classyellow{color:yellow;} /* 10 */
.classblue{color:blue;} /* 10 */
div{color:gray;} /* 1 */
通过!important规则可以设置最高优先级
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS优先级</title>
<style type="text/css">
/*补充代码*/
ul li.li1{color:orange !important;}
</style>
</head>
<body>
<ul>
<li style="color:green" class="li1">JS基础</li>
<li>JS函数</li>
<li>JS对象</li>
</ul>
</body>
</html>
CSS优先级总结：
- 1.!important优先级是最高的
- 2.CSS使用方法的优先级：行内样式>内部样式>外部样式
* 注：link链入外部样式和style内部样式优先级，取决于先后顺序 - 3.样式表中优先级
- ID选择器>class选择器>标签选择器>通配符
- 权值相同，就近原则；权值不同，使用权值高的
7 CSS命名规范
CSS命名规则：采用英文字母，数字以及‘_’和‘-’命名
- 以小写字母开头，不能以数字和- _开头
- 命名形式：单子，连字符，下划线和驼峰
- 使用有意义的命名
<!-- 一个单词，采用全部小写 -->
.special{...}
<!-- 多个单词，驼峰写法，除第一个单词外，其他首字母大写 -->
.mainTitle{...}
<!-- 采用_连接符-->
.main_title{...}
<!-- 采用-连接符-->
.main-title{...}
常用CSS样式命名
- ID不要滥用，谨慎使用
- 适当使用class
| 页面结构 | |||
| 页头 | header | 导航 | nav |
| 页面主体 | main | 侧栏 | sidebar |
| 页尾 | footer | 栏目 | column |
| 内容 | content/container | 页面外围控制 | wrapper |
| 容器 | container | 左右中 | left/right/center |
| 导航 | |||
| 导航 | nav | 左导航 | leftsidebar |
| 主导航 | mainnav | 右导航 | rightsidebar |
| 子导航 | subnav | 菜单 | menu |
| 顶导航 | topnav | 子菜单 | submenu |
| 边导航 | sidebar | 标题 | title |
| 功能 | 摘要 | summary | |
| 标志 | logo | 注册 | register |
| 广告 | banner | 搜索 | search |
| 登陆 | login | 功能区 | shop |
| 登陆条 | loginbar | 标题 | title |
