css基础

我们知道 一个网页由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）

1. 行内样式(内联样式)
   在标签中添加 style样式属性 如：

内容

2. 内部样式表（嵌入样式）
   把css样式写在style标签里面 如：

然后将 style 放到 标签内 即：

3. 外部样式表（link链入）
   将样式写在一个独立的.css后缀文件中，比如新建一个文件，文件名为 demo.css， 内容如下：

 p { color:red;}
 div {height:100px;width:100px;}

然后在head标签中引入，像这样：

href属性的值就是引入 .css文件的入口
注意 demo.css的相对位置

4. 导入式（@import）

@import "外部css样式"

注意@import 写在 style标签内 最开始

css选择器

选择器有下面几种类型

• Id选择器
• 类选择器（伪类）
• 标签选择器
• 全局选择器
• 群组选择器
• 后代选择器

1. Id选择器
   为html元素添加id属性

内容1
内容2

通过id来给元素添加样式属性

#p1{color:red;}
#p2{color:blue;}

2. 类选择器（伪类）
   为html元素添加class属性

//可设置多个 用 空格 隔开
内容1
内容2

通过class来给元素添加样式属性

.p1{color:red;}
.p2{color:blue;}

3. 标签选择器
   以html作为选择器

p,h1,h2,div {
  font-size:30px;
}

4. 全局选择器
   给所有标签设置样式：

* {
  color:blue;
}

5. 群组选择器

p,h1,h2,h3{
font-size:30px;
}
p{
  color:blue;
}
h1{
  color:red;
}

6. 后代选择器
   标签如下：

css
css1

设置样式：

// 使用 空格 该开
p em{color:red;}

css优先级

1. ！important 优先级最高

2. 行内样式 > 内部样式 > 外部样式 （注意：link链入的外部样式和style内部样式，取决于先后顺序【就近原则】）

3. 样式表中的优先级 【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注释

形式：
/* ... */