最近项目中经常要修改页面的CSS样式,所以做个系统的总结
css的四种引入方式
- css行内样式
<span class="span" style="font-size: 40px">css行内样式</span>
- 内部样式
<style type="text/css">
/* 内部样式 */
p{
font-size: 30px;
}
</style>
- 导入式
<!--导入式 读取完html文件之后加载-->
<style type="text/css">
@import "first.css";
</style>
- 外部样式
<!--外部样式-->
<link href="first.css" rel="stylesheet" type="text/css"/>
css的优先级:行内样式>内部样式(内部优先级代码位置:后面优先)>导入式>外部样式
注释
/*css注释语句 css区分大小写*/
选择器
- 标签选择器
/* 标签选择器 设置一种标签样式 */
p{
font-size: 30px;
}
- 类选择器
.span1{
font-family: "宋体";
}
<span class="span1" style="font-size: 40px">css行内样式</span>
- ID选择器(不建议使用ID选择器)
#two{
color:green;
}
<h3 id="two" class="two">h3标签样式<em>css</em></h3>
- 群组选择器
/* 群组选择器(可以是标签也可以是类) 设置多种标签样式 */
p,h1{
color: bisque;
font-family: "宋体";
}
- 标签和类选择器组合
/*标签和类选择器组合, 给p标签中有span类的标签设置样式*/
h3.span{
color: burlywood;
}
- 后代选择器
/*后代选择器 中间加空格 class为two的h3中em标签*/
h3.two em{
color: gray;
}
- 多个类选择器样式
<!--多个类选择器样式 中间加空格 -->
<h3 class="span one" >h3标签样式</h3>
- 全局选择器 (一般写在最前面用来重置样式)
/*全局选择器*/
*{
font-size: 20px;
}
- 伪类
<style type="text/css">
/*伪类 操作class id及标签操作不了的样式 如:a标签链接的颜色*/
a:link{color: #497F7F} /*未访问状态*/
a:visited{color: #FF2F2F} /*已访问状态*/
a:hover{color: burlywood} /*鼠标悬浮状态*/
a:active{color: coral}/*激活状态*/
/*hover 和active 可以用在其他标签上*/
</style>
<a href="http://www.baidu.com" target="_blank">百度</a>
选择器优先级
- 同一个元素引用标签、id、class定义的样式
优先级:id选择器>class选择器>标签选择器
- 同一个元素引用多个同类型选择器样式冲突
优先级:同类样式多次引用,样式表中后定义的优先级高
同一个样式表中选择器权值
标签选择器:权值为1
类选择器和伪类:权值为10
id选择器:权值为100
行内样式:权值为1000
通配符选择器:权值为0
权值相同:就近原则
div.warning h2
/* 标签:2 class:1 2*1+1*10=12 */
css样式命名规则
- 采用英文字母、数字以及“-”和“_”命名
- 以小写字母开头,不能以数字和“-”、“_”开头
- 命名形式:单字,连字符,下划线和驼峰
- 使用有意义的命名
常用css样式命名
- 页头:header 页面主体:main 页尾:footer 内容:content/container
- 容器:container 导航:nav 侧栏:sidebar 栏目:column
- 页面外围控制:wrapper 左右中:left right center