CSS2从入门到精通

1、CSS简介

1.1 CSS简述

CSS：(英文全称：Cascading Style Sheets)。中文翻译为：层叠样式表或级联样式表。
是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.2 为什么需要CSS样式表

是为了实现结构与样式的分离：

  • HTML：负责页面的结构
  • CSS：样式表负责页面外观的渲染（相当于华丽的衣服）

    1.3 CSS的特性：

  1. 结构与样式分离
  2. 网页样式的统一性，容易修改
  3. 丰富的样式，使得页面布局更加灵活
  4. 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  5. 运用独立于页面的CSS，有利于网页被搜索引擎收录
  6. 由浏览器解释运行
  7. 代码不区分大小写

    2、CSS语法

    2.1 CSS基本语法

    在页面上使用时，通常在部分写入style标签，样式代码放在style标签中。

CSS基本语法：
  1. 选择器 {
  2.     属性：属性值;
  3.     属性：属性值;
  4.     ...
  5. }

什么是选择器：选择器就是找到你要渲染的那个HTML标签（元素）。
  1. <style type="text/css">
  2.     p {                                    /* p是html选择器，表示给所有的p标签设置样式 */
  3.         color:red;
  4.         font-size:24px;
  5.     }
  6. </style>

2.2 CSS选择器

2.2.1 基本选择器

基本选择器有三种：

HTML标签选择器：直接作用于某个HTML标签
  1. <style>
  2.     p {color:red;font-size:24px;}
  3. </style>

类选择器：可在页面中被多次使用
  1. <style>
  2.     .one {color:red;font-size:24px;}
  3. </style>
  4. <p class="one">这是一个p标签</p>

ID选择器：ID选择器在同一个页面中只能使用一次
  1. <style>
  2.     #first {color:red;font-size:24px;}
  3. </style>
  4. <p id="first">这是一个p标签</p>

2.2.2 层次选择器

后代选择器：选择所有被E元素包含的F元素[标识符号：space]
  1. <style>
  2.     div p {color:red;font-size:24px;}
  3. </style>
  4. <div>
  5.     <p>这是div里的p标签</p>
  6. </div>
  7. <p>这是p标签</p>

子选择器：选择所有作为E元素的子元素F，IE8及以下版本浏览器无法识别 [标识符号：”>”]
  1. <style>
  2.     div>p {color:red;font-size:24px;}
  3. </style>
  4. <div>
  5.     <p>这是div里的p标签</p>
  6.     <ul>
  7.         <li><p>这是ul里的p标签</p></li>
  8.     </ul>
  9. </div>

群组选择器：多个选择器通过逗号连接而成，利用群组选择器同时声明风格相同样式 [标识符号：”,”]
  1. <style>
  2.     html,body {width:100%;height:100%;}
  3. </style>

相邻元素选择器：某元素后面的第一个兄弟元素，IE8及以下版本浏览器无法识别 [标识符号：”+”]
  1. <style>
  2.     div+p {color:red}
  3. </style>
  4. <div>我的div的内容</div>
  5. <p>我是段落内容</p>

所有相邻元素选择器：某元素后面的所有特定兄弟元素，IE8及以下版本浏览器无法识别 [标识符号：”~”]
  1. <style>
  2.     div~p {color:red}
  3. </style>
  4. <div>我的div的内容</div>
  5. <p>我是段落内容</p>
  6. <p>我是段落内容</p>

通配符选择器：代表所有元素
  1. *{padding:0;margin:0}

2.2.3 属性选择器

  • [attr] 选择具有attr属性的元素
  • [attr=value] 选择具有attr属性且属性值等于value的元素
  • [attr~=value] 选择具有attr属性且属性值为用空格分隔的字词列表；等于value的元素也会被选中（value和value前后有空格的）

  • [attr|=value] 选择具有attr属性且属性值为用连字符分隔的字词列表； 等于value的元素也会被选中（value和value-）

    2.2.4 伪类

    超级链接相关伪类

  • ：link 正常状态下的超级链接样式

  • ：hover 鼠标悬停状态下的超级链接样式
  • ：active 鼠标点击且没有松开时的超级链接样式
  • ：visited 访问过的超级链接样式

    在CSS1中这四个伪类只能用于a标签上；从CSS2开始，hover和active两个伪类，可以应用在任意标签上。

first相关伪类
  1. <style>
  2.     p:first-letter{font-size:36px}                                            <!--控制第一个文字的样式-->
  3.     p:first-line{color:red}                                                    <!--控制段落第一行的样式-->
  4. </style>
  5. <p>
  6.     人们常觉得准备的阶段是在浪费时间，只有当真正机会来临，而自己没有能力把握的时候，
  7.     才能觉悟自己平时没有准备才是浪费了时间。 ——罗曼.罗兰
  8. </p>
  1. <style>
  2.     ul li:first-child{color:red}                                            <!--控制父元素中第一个子元素的样式-->
  3. </style>
  4. <ul>
  5.     <li>我是第一行数据</li>
  6.     <li>我是第二行数据</li>
  7. </ul>

2.2.5 伪元素

  • : before 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
  • :after 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

    无论content属性中放置的是什么内容，都相当于是一个span标记。

  1. .oDiv:before {
  2.     content: open-quote;
  3. }
  4. .oDiv:after {
  5.     content: " ";
  6. }

2.3.CSS引入方式

CSS的引入方式共有四种：

  • 行内样式
  • 内嵌样式
  • 外链样式（HTML方式引入外部CSS文件）
  • 导入样式（CSS方式引入外部CSS文件—-基本不用）

    2.3.1 行内样式

    写在某个标签中，只对本行有效。（内联样式）
    1. <p style="font-family:华文行楷;color:green;font-size:32px">这是一个行内样式</p>

    2.3.2 内嵌样式

    样式写在某个页面的style标签中，只对本页面有效。前面的例子都是内嵌样式。
    1. <style>
    2.   div>p{color:red;font-size:24px;}
    3. </style>

    2.3.3 外链样式

    将样式代码写在一个单独的CSS文件中，使用时要将这个CSS文件引入使用。
    1. <link href="common.css" rel="stylesheet" type="text/css" />

    注意：href和rel属性是必须的。

2.3.4 导入样式

在页面的style标签中，使用import关键字导入外部文件。（不推荐使用：因为会先加载HTML代码，再加载CSS文件）

  1. <style type="text/css">
  2.     @import url("css/aside.css");
  3. </style>

2.4 CSS优先级

2.4.1 基本规则

CSS 优先规则：

  1. 从引用方式方面来说：行内样式 > 内嵌样式/外部样式
  2. 从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器
  3. 特殊最高级声明：
    1. div { color:red !important }                        /*加到某个属性值的后面*/

    2.4.2 样式叠加时的优先级

    如果在同一选择器上，外部样式、内嵌样式、行内样式都对某一属性使用了样式，也就是存在样式叠加时，那么要使用以下3个原则来决定到底哪一种样式有效。
  • 就近原则：距离最近的样式有效。
  • 顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。

  • 精细原则：或者叫特殊原则。既选择器的指向越精细越优先。

    2.5 CSS中使用的颜色

    颜色单词

  • red、blue、green、orange、yellow、pink、skyblue、deeppink等

    十六进制颜色值

  • 基本格式：

    • RRGGBB

      • 其中每个值的取值范围在0~f之间。越偏向0，颜色越暗；越偏向f，颜色越亮。
      • 六个值都为同一个数值的时候，肯定是某种灰色。

RGB颜色值

  • rgb(red的值，green的值，blue的值)

重要提示：更多相关内容请下载CSS2帮助手册