一、CSS 基本用法

　　1、CSS 样式语法

　　　　样式是 CSS 最小的语法单元，每个样式包含两部分内容：选择器和声明（规则）。

　　　　语法：

  p {font-size:12px; color:#333}　

　　　注意：

    • 　选择器（Selector）：告诉浏览器该样式将作用域页面中哪些对象。浏览器解析这个样式时，根据选择器来渲染对象的显示效果。
    • 声明（Declaration）：声明可以增加一个或多个，这些声明命令浏览器如何如渲染选择器指定的对象。声明必须包括：属性和属性值，并用分号来标识结束，最后一个声明可以省略分号。
    • 属性（Property）：属性是 CSS 提供的设置好的样式选择，能直观标识属性所要设置样式的效果。
    • 属性值（Value）：属性值是用来显示属性效果的参数，可以是数值、单位或者关键字。

　　2、CSS 应用

　　　　CSS 样式代码必须保存在 .css 类型的文本文件中，或者放在HTML 文件的 <style> 标签中，或者插在标签的 style 属性中。

　　　　CSS 样式应用的方法主要包括4种：行内样式、内嵌式、链接式以及导入式。

　　　　（1）行内样式（行间样式）

　　　　　　行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都放入标签的 style 属性中，由于行内样式直接插入标签中，是一种最直接的方式，同时也是修改最不方便的样式。

　　　　　　缺点：

        •   每个标签要设置样式都需要添加 style 属性；
        • 样式与结构糅杂在一起，后期维护成本高；
        • 添加样式多，将有很多重复代码，导致页面体积大，将浪费服务器带宽和流量。

　　　　　　优点：

        •   通过这样的编写方式，可以快速更改当前样式；
        • 在未开发完整阶段，可以使用这样的样式来快速的调试。

　　　　（2）内嵌式

　　　　　　内嵌式通过 CSS 写在网页源文件的头部，一般位于在 <head> 标签中 <title> 标签之后，通过 <style> 标签将其包围，也可以放在文档的任何地方。

　　　　　　特点：该要是只能在此页使用，解决行内样式多次书写的弊端。

　　　　　　语法：

<style type="text/css" title="字体号">

    选择器 {

     样式名1：样式值1；

     样式名2：样式值2；

    }

</style>

　　　　　　Tips:

　　　　　1、当 type="text/css" 时，声明的是 CSS 样式；HTML5 新规定，type 属性可以不用写了。

　　　　　2、可以声明一个 title 属性，使用该属性可以为不同的样式设置一个标题，可以根据标题选择不同的样式达到浏览器中切换的效果。（IE浏览器不支持，FireFox 浏览器支持此效果）

　　　　（3）链接式

　　　　　　链接式通过 HTML 的 <link> 标签，将外部样式表文件链接到 HTML 文档中，这也是网站上应用最多的方式，同时也是最实用的方式。

　　　　　　特点：

        • 　将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。
        •    CSS 文件可以放在不同的 HTML 文件中，使网站所有页面样式统一；
        •    CSS 代码放入一个 CSS 文件中，有利于管理、减少代码以及维护时间；　

　　　　（4）导入样式

　　　　　　导入样式使用 @import 命令导入外部样式表，有6中书写方式，如下所示：

@import daoru.css;

@import 'daoru.css';

@import "daoru.css";

@import url(daoru.css);

@import url('daoru.css');

@import url("daoru.css");

　　　　　　Tips：在 CSS 文件中也需要将@import 放在前面，后面加入 CSS 样式，否则无效。这种方式应用的很少，作为了解即可。

　　3、CSS 样式表

　　　　一个或多个 CSS 样式可以组成一个样式表。样式表包括内部样式表和外部样式表。

　　　　（1）内部样式表

　　　　　　内部样式表包含在 <style> 标签内，一个 <style> 标签就表示一个内部样式表。而通过标签的 style 属性定义的样式属性不是样式表。

　　　　（2）外部样式表

　　　　　　当把 CSS 样式文件放置在 html 文档外部的文件中，称为外部样式表。一个 CSS 样式文档就表示一个外部样式表。实际上，外部样式表就是一个扩展名为 .css 的文件。

　　　　　　Tips: 可以使用  @charset "字符集"  来为 css 文件设置字符编码，如果不声明，则浏览器会根据 HTML 文件的字符编码来解析 CSS 代码。

　　4、导入外部样式表

　　　　　（1）使用 <link> 标签导入

　　　　　　　　语法：

<link href="路径" rel="stylesheet" type="text/css">
      • 　　  href：定义样式表文件 URL
      • type：定义导入文件类型，同 style 元素一样
      • rel：用于定义文档关联，在这里表示关联样式表

　　　　　（2）使用 @import 关键字导入

　　　　　　　　语法：

<style type="text/css">

   @import url("daoru.css");

</style>
      • 利用 url() 函数包含具体的外部样式表文件的地址。

　　　　小结：

      • 　link 属于 HTML 标签，而 @import 是 CSS 提供的；
      • 页面被加载时，link 会同时被加载，而 @ import 引用的 CSS 会等到页面加载完再加载；
      • @import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容问题；
      • link 范式的样式的权重高于 @import 的权重；
      • 推荐使用 link 导入样式表的方法

　　　　三种样式表总结：

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少）
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中）
外部样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多）

　　5、CSS 注释

　　　　在 CSS 中添加注释有助于程序员更好的寻找某一部分样式，能更让人一眼就能看懂。注释主要包括两部分：行注释和块注释。

　　　单行注释：

/*  样式1：样式值1*/

　　

　　　多行注释：

/*

   样式1：样式值1;

   样式2：样式值2;

*/

　　

二、CSS 特性

　　　　层叠和继承是 CSS 样式两个最基本的特性，下面进行说明：

　　1、层叠性

　　　　所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

　　　　（1）CSS 样式表的优先级

　　　　　　　　按照 CSS 的起源可以将网页定义的样式分为4种：HTML、作者、用户、浏览器。HTML 表示元素的默认样式；作者就是创建人，即创建网站所编辑的 CSS；用户是浏览网页的人所设置的样式；浏览器就是指浏览器默认的样式。

　　　　　　　从原则上讲，作者定义的样式优先于用户设置的样式，用户设置的样式优先于浏览器的默认样式，而浏览器的默认样式会优先于 HTML 的默认样式。

　　　　　　　Tips：在 CSS2 中，当用户设置的样式使用了 !important 命令之后，用户的 !important 命令会优先于作者声明的 !important 命令。

　　　　（2）CSS 样式的优先级

　　　　　　　　不同位置的样式其优先级也是不同的。一般来说，行内样式优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了 !important 关键字的声明会拥有最高的优先级。

　　　　　　根据 CSS 层叠规则：作者设计的样式能够覆盖浏览器默认设置的样式；而用户在浏览器里设置的样式可以覆盖作者的样式。同时，CSS 根据样式的远近关系来决定层叠样式的优先级；在同等条件下，距离应用对象的距离越近就越有较大的优先权，因而行内样式大于内部样式和外部样式。

　　　　　　可以根据选择器的优先级来判断某一元素的样式，这个一个简单的计算方法，根据优先级加权值：

      • 　标签选择器：优先级加权值为 1；
      • 伪元素或伪对象选择器：优先级加权值 1；
      • 类选择器：优先级加权值为 10；
      • 属性选择器：优先级加权值为 10；
      • ID 选择器：优先级加权值为 100；
      • 其他选择器：优先级加权值为 0，如通配选择器等。

　　　　　　然后，将上面加权值数为起点来计算每个样式中选择器的总加权值数。

      • 　统计选择器中 ID 选择器的个数，然后乘以 100；
      • 统计选择器中类选择器的个数，然后乘以 10；
      • 统计选择器中标签选择器的个数，然后乘以 1；

　　　　　　最后，根据加权值来决定哪个样式的优先级大。

　　　　　　Tips：

      • 　　在特殊性逻辑框架下，被继承的值具有特殊性 0，不管父级样式的优先级多大，被子级元素继承时，它的特殊性为 0。
      •        内联样式优先，带有 style 属性的元素，其内联样式的特殊性可以为 100或者更高。
      •        在相同特殊性下，CSS 将遵循就近原则，也就是说靠近元素的样式具有最大优先权，或者说排在最后的样式具有最大优先权。
      •        CSS 定义了一个 !important 命令，该命令被赋予最大权利。也就是说不管特殊性如何，以及样式位置的远近，!important 都具有最大优先权。

　　　　　　使用 important 注意点：

      • 　　!important 只是提升一个属性，不是一个选择器；
      •        !important 无法提升继承的权重，是0还是0；
      • 　　不影响就近原则；

　　　　　　总结1：

　　　　　　

　　　　　　　　总结优先级：　　

　　　　　　1.使用了 !important声明的规则。

　　　　　　2.内嵌在 HTML 元素的 style属性里面的声明。

　　　　　　3.使用了 ID 选择器的规则。

　　　　　　4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

　　　　　　5.使用了元素选择器的规则。

　　　　　　6.只包含一个通用选择器的规则。

　　　　　　7.同一类选择器则遵循就近原则。

　　　　　　总结：权重是优先级的算法，层叠是优先级的表现.

　　2、继承性

　　　　所谓继承性，就是指被包含的元素将拥有外层的样式效果。继承性最典型的应用就是在默认样式的预设上。

　　　案例：

<div style="font-size:20px;">

    <p>hello world!</p>

</div>

　　　　在上面的结构中，只为 div 设置了一个样式，并没有直接给 p 元素设置样式，但是 p 标签内的字体会显示为20号字体，这是因为 p 的 div 元素的子代，从而继承了 div 的样式。

　　　Tips：<html>  标签是根元素，它是所有 HTML 元素的源头。在每一个分支中下层是上层的子元素、上层是下层的父元素。编写样式时，页面所有的元素都将继承根元素、父元素的部分样式（主要是字体样式），而编写的基本标签选择器、类别选择器、ID选择器以及其他符合选择器都是根据 HTML 结构进行编写的。

　　　　恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性），对于字体、文本属性等网页中通用的样式可以继承，例如：字体、字号、颜色、行高等，并不是所有的CSS属性都可以继承，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高等属性。

CSS 用法和特性的更多相关文章

  1. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  2. CSS(4)---三大特性(继承性，层叠性，优先级)

    CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...

  3. 其他css属性和特性

    其他css属性和特性 设置元素的颜色和透明度 下表列出了这些属性. 颜色相关属性 属 性 说 明 值 color 设置元素的前景色 <颜色> opacity 设置颜色的透明度 <数值 ...

  4. CSS的三大特性（继承、层叠和优先级）

    CSS的三大特性(继承.层叠和优先级) 1.css属性的继承 CSS中有些属性是可继承的,何为属性的继承? 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值.当然,一个元素如果有设置自 ...

  5. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  6. css 3 新特性

    CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3 ...

  7. 认识CSS中css的三大特性：层叠性、继承性以及优先级

    前端之HTML.CSS(四) CSS CSS三大特性 层叠性:多种样式的叠加,一个属性通过两个选择器设置在同一个元素上,后一个样式会把前一个样式层叠(覆盖).层叠性的两种情况:第一种样式冲突时,后样式 ...

  8. css 两大特性:继承性和层叠性

    css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...

  9. CSS基础 CSS的三大特性以及选择器优先级计算方法

    1.子元素默认会继承父元素的样式,但不是所有的元素都有继承 常见的继承父元素特点的元素有: 1.color 2.font-sytle.font-weight.font-size.font-family ...

随机推荐

  1. ajax jQ写的上传进度条

    XML/HTML Code <form id="myForm" action="upload.php" method="post" e ...

  2. Pandas | 14 统计函数

    统计方法有助于理解和分析数据的行为.可以将这些统计函数应用到Pandas的对象上. pct_change()函数 系列,DatFrames和Panel都有pct_change()函数.此函数将每个元素 ...

  3. 第六章深入python的set和dict

    1.collections中的abc MutableMapping是Mapping的子类 Mapping是Collection的子类 Collection是Sized,Iterable,Contain ...

  4. cf1179D

    cf1179D 链接 cf 思路 csdn 很玄学,正解是斜率优化dp,但被一个奇妙的贪心过了. 代码 #include <bits/stdc++.h> #define ll long l ...

  5. 洛谷p1458顺序的分数题解

    抱歉,您们的蒟蒻yxj不知道怎么插入链接qwq就只好粘个文本的了qwq:https://www.luogu.org/problemnew/show/P1458 没错,是个黄题,因为你们的小蒟蒻只会这样 ...

  6. JavaScript插件开发

    一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了 ...

  7. 构建一个给爬虫使用的代理IP池

    做网络爬虫时,一般对代理IP的需求量比较大.因为在爬取网站信息的过程中,很多网站做了反爬虫策略,可能会对每个IP做频次控制.这样我们在爬取网站时就需要很多代理IP. 代理IP的获取,可以从以下几个途径 ...

  8. C# 获取url中的查询字符串参数

    /// <summary> /// 获取url中的查询字符串参数 /// </summary> public static NameValueCollection Extrac ...

  9. 使用rxjs以及javascript解决前端的防抖和节流

    JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...

  10. POJ-动态规划-典型问题模板

    动态规划典型问题模板 一.最长上升子序列(Longest increasing subsequence) 状态(最关键):f[N]为动规数组,f[i]表示从第一个字符开始,以a[i]为最后一个字符的序 ...