前言
前面我们说过了一些简单的HTML标签以及用法。本篇的内容主要是讲述一些常用的css以及他们的使用方法。后续还会有JS 的篇章。
CSS样式无法展示请自行测试。
1.CSS基础语法
1.1css基础语法
css规则有两部分组成：选择器，声明器
选择器{
属性:值;
属性:值;
}
h1{
color:#888888;
font-size:20px;
}
需要改变样式的地方是有学则器决定的，属性则是改变哪里效果，值就是改变什么样式。选择器里可以有多个属性，也可以多个选择器，多个值。
如：
选择器，选择器{
属性:值;
属性:值;
}
h1，p{
color:#880000;
font-size:20px;
}
<html>
<head>
<style type="text/css">
h1,p{ // 多个选择器的写法
color:#880000; //字体红色
font-size:20px; //字体大小
}
em{
color:#008800; // 字体绿色
}
</style>
<meta charset="utf-8"/>
<tltle>例子</title>
</head>
<body>
<h1>html</h1>
<p>我是一个<em>html</em>文档！</p>
</body>
</html>
注： 冒号，分号和选择器之间的逗号，都需要在英文状态下输入。
css样式中的属性只有一个是的时候,我们把代码写在一行。
如下：
p{color:#ff000;}
1.2如何引用CSS样式
1.2.1行内样式（内联样式）
如：
<p style="color:#ff0000;font-size:30px;">aaa</p>
在标签中style属性中直接写入css的属性和值。
注：在上一片篇HTML基础篇（上篇）中我们说到过p标签，可是没有style属性。style是全局属性。style属性详情
1.2.2内部样式（嵌入样式）
在1.1css基础语法中使用的就是内部样式。
<html>
<head>
<style type="text/css">
选择器{
属性:值;
属性:值;
}
选择器{
属性:值;
属性:值;
}
</style>
<meta charset="utf-8"/>
<tltle></title>
</head>
<body>
</body>
</html>
把样式写在style标签内，style标签则需要写在head标签内。
怎么和上边的行内样式用的属性一样呢？style标签详情
12.3外部样式
我们直接创建一个文件，它的后缀名改成css后，直接打开文件进行编写。css文件不需要文建声明。
h1,p{ // 多个选择器的写法
color:#880000; //字体红色
font-size:20px; //字体大小
}
em{
color:#008800; // 字体绿色
}
假设，上边是我们在a.css文建中写，css和我们的html在同一目录下。
我们在head标签内写入link标签进行调用link标签详情
<head>
<link hred="a.css" rel="stylesheer" type="text/css">
</head>
1.2.4导入式
使用sytle标签 写入 @import “css.css” 或 @import url(css.css);
注：css.css是css的外部地址。
<style type="text/css">
@import url(css.css);
</style>
1.2.5CSS使用方法的区别
| 类别 | 引入方式 | 位置 | 加载 |
|---|---|---|---|
| 行内样式 | 标签的开始标签内style属性 | html文件内 | 同时 |
| 内部样式 | head标签中style标签内 | html文件内 | 同时 |
| 外部样式 | head标签中link标签引入 | 独立css文件l文件内 | 页面加载时同时加载 |
| 导入式 | head标签中style标签内写入@import(css链接); | 独立css文件l文件内 | 页面加完后再加载 |
1.2.6使用链入式的好处
1.css和html 分离。
2.多个文件可使用同一个文件。
3.多个引用同一个css文件，css只需要下载一次。
2.CSS选择器
2.1标签选择器
标签选择器是根据HTML标签作为选择器。
如：
p,h1,h2,{
color:#ff000;
}
i{
color:#00ff00;
}
b{
color:#0000ff;
}
html内的 所有的标签都会改变样式 。
2.2类选择器
需要在标签中添加class属性
如：
<h1 class="aaa"></h1>
class中的值需要和css选择器同名。
.aaa{
font-size:20px;
}
css选择器名前加（.）点。
只需要在标签内添加class属性，值是aaa。他的字体大小就是20px。
p.aaa{
color:#ff0000;
}
注：上边代码的意思是，只有在p标签中class值是aaa的标签受到效果！！
.aaa{
color:#ff000;
}
.bbb{
text-decoration:underline;
}
<p class="aaa bbb">我</p>
class 中可以写两个值，只需要用空格隔开，class中的值只能填写类选择器。
2.3 ID选择器
id选择器 和类选择去相似，
#p1{
color:#ff0000;
}
#p2{
color:#ff0000;
}
ID选择器 #号开头
<p id="p1">dsad</p>
<div id="p2">dasdsa</div>
标签内 添加id属性 同一个html文件里 id值是唯一的，id内的属性也只能有一个。
2.4全局选择器
通配符 *
*{
font-size:20px;
}
所有标签内的字体大小为20px。
注：一般常用于css开始，来消除所有的边距和字体样式。
2.5群选择器
群选择器就是：集体统一的设置样式
如：
p,h1,h2{font-size:20px;}
2.6后代选择器
p i{color:#ff0000;}
意思是p标签下的i标签颜色为字体红色。
p a em{color:#ff0000;}
意思是p标签下的a标签下的em标签为字体红色。
#pi em{color:#ff0000;}
意思id为p1标签下的 em标签为字体红色
p.red #p2 em{color:#ff0000;}
意思是 p标签class属性是red 下的id为p2 下的em标签 字体为红色
2.7伪类
2.7.1链接伪类
链接的4种状态：激活，已访问，未访问，鼠标悬停。
| 伪类 | 说明 |
|---|---|
| :link | 未访问 |
| :visited | 已访问 |
| :hover | 鼠标悬停 |
| :active | 激活的链接（点击未放开） |
请注意编写顺序：
:link> :visited > :hover > :active
如下：
自行测试
a:link{color:#ff0000;}
a:visited{color:#00ff00;}
a:hover{color:#0000ff;}
a:active{color:#ffff00;}
这个两个可以运用再其他标签,ie6 不支持。
p:hover{color:#0000ff;}
p:active{font-size:50px;}
同一级a标签设置不同效果
a.a1:link{color:#ff0000;}
a.a1:visited{color:#00ff00;}
a.a1:hover{color:#0000ff;}
a.a1:active{color:#ffff00;}
a.a2:link{color:#ffff00;}
a.a2:visited{color:#ff0000;}
a.a2:hover{color:#0000ff;}
a.a2:active{color:#00ff00;}
<a href="/" class="a1">aa</a>
<b href="/" class="a2">aa</a>
3.CSS继成，层叠和优先级
3.1继成
集成的好处：
1.从父元素那集成继成部分css属性
2.减少css代码
3.2层叠
1.可以定义多个样式。
2.不冲突，多个样式可层叠为一个
3.冲突时，按不同样式规则优先级来应用样式、
3.3 CSS优先级
3.3.1 CSS使用方法优先级
行内样式>内部样式>外部样式>通配符
说明：
1.链入外部样式与内部样式的优先级取决于所在位置的先后。
2.最后定义的优先级最高。
3.3.2 CSS选择的优先级
id选择器>class选择器>标签选择器
3.4CSS权值
同一样式表中：
1.权值相同
就近原则（离被设置元素越近优先级越高）
2.权值不同
根据权值来判断css样式
那种css样式权值高，就使用哪种样式
选择器权值
| 选择器 | 权值 |
|---|---|
| 标签选择器 | 1 |
| 类选择器和伪类 | 10 |
| ID选择器 | 100 |
| 通配符选择器 | 0 |
| 行内样式 | 1000 |
1.统计不同选择器的个数
2.每类选择器的个数乘以相应权值
3.把所有的值相加得出选择器的权值
如：
#main div.warning h2{}
id选择器1个 ，class选择器1个，标签选择器2个
1 * 100=100 ，1 * 10=10，2 * 1=2
权值：100+10+2=112
3.5CSS权值优先级
1.可调整样式规则的优先级
2.添加在样式规则之后，中间用空格隔开
div{color:red !important;}
3.6CSS优先级总结
1.!important声明最高
2.CSS使用方法优先级
行内样式>内部样式>外部样式
link链入外部样式和style内部样式优先级，取决于先后顺序。
3.样式表中优先级
id选择器>class选择器>标签选择器>通配符
| 权值相同 | 权值不同 |
|---|---|
| 就近原则 | 使用权值高的 |
4.CSS样式命名
4.1css样式命名规则
1.采用英文字母，数字以及"-“和”“命名。
2.以小写字母开头，不能用数字和”-"，""开头。
3.命名形式：单字，连字符，下划线和驼峰
/*一个单词，采用全小写方式*/
.specia{......}
/*多个单词*/
/*驼峰写法，除第一个单词外，其他首写字母大写*/
.mainTitle{....}
/*采用"-"链接字符*/
.main-title{.....}
/*采用"_"链接字符*/
.main_title{.....}
4.使用有意义命名
4.2常用的CSS样式命名
1.页面结构
| 中文 | 英文 |
|---|---|
| 页头 | header |
| 页面主体 | main |
| 页尾 | footer |
| 内容 | content或container |
| 容器 | container |
| 导航 | nav |
| 侧栏 | sidebar |
| 栏目 | column |
| 页面外围控制 | wrapper |
| 左右中 | left和right和center |
2.导航
| 中文 | 英文 | - | 中文 | 英文 |
|---|---|---|---|---|
| 导航 | nav | - | 左导航 | leftsidebar |
| 主体导航 | mainnav | - | 有导航 | rightsidebar |
| 子导航 | subnav | - | 菜单 | menu |
| 顶导航 | topnav | - | 子菜单 | submenu |
| 边导航 | sidebar | - | 提示 | title |
| 摘要 | summary | - |
3.功能
| 中文 | 英文 | - | 中文 | 英文 |
|---|---|---|---|---|
| 标志 | log | - | 注册 | register |
| 广告 | banner | - | 搜索 | search |
| 登录 | login | - | 功能区 | shop |
| 登录条 | loginbar | - | 标题 | title |
id和class使用
1.id不要滥用，谨慎使用
2.适当使用class
5.总结
本篇我们讲述过CSS的基本使用方法，优先级和常用命名。
如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！