复习之CSS（一）——多种导入方式、选择器及命名规则

最近项目中经常要修改页面的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