幕客前端基础入门-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>内	html文件内	同时
链入外部样式	<head>中<link>引用	css样式文件与html文件分离	页面加载时，同时加载css样式
导入式@import	在<head>中<style>最开始处	css样式文件与html文件分离	在读取完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