CSS 知识总结（一）

一.认识CSS

　1.什么是CSS？

　　CSS (Cascading Style Sheet) 层叠样式表

　　是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

　　由于CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，因此不同的浏览器可能需要不同的前缀。

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

 

 

 

 

 

 

　2.CSS能做什么？

　　使用CSS可以有效地对页面进行布局。

　　使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。

　　CSS可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。

　　CSS可以支持多种设备，比如手机、PDA、打印机、电视机、游戏机等。

　　*目的：将表现与结构分离，便于后期维护。

　

　3.CSS语法结构

　　CSS 语法由三部分构成:选择符(selector)、属性(property)和值(value)

　　　　selector {property:value;}

　　属性是你想要设置的样式属性，每个属性都有一个值，属性和值用冒号 ":" 分开

　　每个选择符可以有多个属性值，之间用分号 ";" 隔开

　　例如：

<span style="color: #800000;"><style type="text/css">
    body </style></span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;">#ccc</span>;}<span style="color: #800000;">
</span>

 

 

　4.如何引入CSS？

　　将CSS应用到网页中有：3种方式 （行内样式表、内部样式表、外部样式表）

　　a.行内样式表（位于html元素内部）

　　　行内样式是指将CSS样式编码直接写在HTML标签中的style属性里，

　　　*注意：行内样式不需要写选择器。

　　　例如：

<span style="color: #0000ff;"><span style="color: #800000;">body </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background-color:#ccc;"</span><span style="color: #0000ff;">></span></span>

 

　　b.内部样式表（位于标签内部）

　　　内部样式作为页面中的一个单独部分，由

　　　例如：

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

 

　　c.外部样式表

　　　外部样式表是将CSS样式代码单独放在一个外部文件".css"中，再由网页文件".html"进行调用。

　　　*尽量使用外部样式表这种方式，目的是让我们的html结构与表现形式分开

<span style="color: #000000;">/* "style.css"代码 */
body{
    background-color:#cccccc;
}

</span><span style="color: #008000;"><!--</span><span style="color: #008000;"> "index.html"代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="style.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

 

 

　5.样式优先级

　　a.写法优先权（就近原则）

　　　行内样式表 > 内部样式表 > 外部样式表

　　b.选择符优先权

　　　选择符的比较（从低到高）:

　　　通配符"*"

　　　类型选择符"标签名为选择符名称的"

　　　子选择符">"

　　　包含选择符

　　　class选择符

　　　属性选择符

　　　id选择符

　　　行内样式

　　　!important[慎用]

 

　6.样式继承

　　HTML中的标签会继承部分父标签的样式。

　　比如 body { color:red;} ，那么body中的所有标签及标签下的所有子标签的文本都将变成红色。

 

　　*!important的用法

　　在两个相同类型的css样式定义中，优先执行后面一个

　　例如：

<span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">15px</span>; <span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">20px</span>;}

　　这种情况下，执行"font-size:20px;" 。

　　但是可以通过!important语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句

　　例如：

<span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">15px!important</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">20px</span>;}

 

　　这时，执行"font-size:15px" 。

 

　7.CSS代码注释（快捷键：Ctrl+/）

　　例如：

<span style="color: #008000;">/*</span><span style="color: #008000;"> 头部样式开始 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
#header</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 头部样式结束 </span><span style="color: #008000;">*/</span>

 

　　CSS代码注释可以帮助我们对自己写的CSS样式进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性；

　　同时在团队开发的时候合理适当的注解有利于团队看懂css样式对应html的位置，以便顺利快速开发网页。