我们知道 一个网页由html,css以及js3部分组成，html是用于内容显示的载体，js是行为，用来实现网页特效效果，而css则也是页面的外观控制说的简单点就是穿的衣服，化的装。下面来看下css最基础的东西，主要是以下几个方面：
- css样式规则
- css样式的引入
- css选择器
- css优先级
- css命名规则
- css注释
css样式规则
css 书写 一般是 选择器:{k:v；k:v}
k:v为一个样式的属性和值 比如 color:red
完整示例：
p {color:red}
div {width:300px;height:300px}
css样式的引入
有4中引入方式，分别是行内样式(内联样式),内部样式表（嵌入样式）,外部样式表（link链入）以及导入式（@import）
- 行内样式(内联样式)
在标签中添加 style样式属性 如：
<p style="color:red;">内容</p>
- 内部样式表（嵌入样式）
把css样式写在style标签里面 如：
<style type="text/css">
p { color:red;}
div {height:100px;width:100px;}
</style>
然后将 style 放到 <head> 标签内 即：
<head>
<style type="text/css">
p { color:red;}
div {height:100px;width:100px;}
</style>
</head>
- 外部样式表（link链入）
将样式写在一个独立的.css后缀文件中，比如新建一个文件，文件名为 demo.css， 内容如下：
p { color:red;}
div {height:100px;width:100px;}
然后在head标签中引入，像这样：
<head>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
href属性的值就是引入 .css文件的入口
注意 demo.css的相对位置
- 导入式（@import）
@import "外部css样式"
注意@import 写在 style标签内 最开始
css选择器
选择器有下面几种类型
- Id选择器
- 类选择器（伪类）
- 标签选择器
- 全局选择器
- 群组选择器
- 后代选择器
- Id选择器
为html元素添加id属性
<p id="p1">内容1</p>
<p id="p2">内容2</p>
通过id来给元素添加样式属性
#p1{color:red;}
#p2{color:blue;}
- 类选择器（伪类）
为html元素添加class属性
//可设置多个 用 空格 隔开
<p class="p1 p3">内容1</p>
<p class="p2 p4">内容2</p>
通过class来给元素添加样式属性
.p1{color:red;}
.p2{color:blue;}
- 标签选择器
以html作为选择器
p,h1,h2,div {
font-size:30px;
}
- 全局选择器
给所有标签设置样式：
* {
color:blue;
}
- 群组选择器
p,h1,h2,h3{
font-size:30px;
}
p{
color:blue;
}
h1{
color:red;
}
- 后代选择器
标签如下：
<em>css</em>
<p><em>css1</em></p>
设置样式：
// 使用 空格 该开
p em{color:red;}
css优先级
！important 优先级最高
行内样式 > 内部样式 > 外部样式 （注意：link链入的外部样式和style内部样式，取决于先后顺序【就近原则】）
样式表中的优先级 【ku】
Id选择器（100）>class选择器(10)> 标签选择器(1) >通配符（0）
取值相同 ，就近原则；权值不同，使用权值高的
权值计算：
#app div.sidebar p {...}
// id的有1个 #div ，标签的有2个即div p ；class有1个 .sidebar 权值为 100*1 + 1*2 + 1*10 = 112
css命名规则
- 采用英文字母，数字 ,'-' , ' _' 命名
- 以小写字母开头 ，不能以'-','_' 开头
- 形式： 单字，连字符，下划线，驼峰
//单字符
.logo{}
//连字符
main-logo{}
//下划线
main_logo{}
//驼峰
mainLogo{}
- 命名要有意义
css注释
形式：
/* ... */
