web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控制的，就不应该使用HTML标签完成，如果CSS能解决的问题尽量不要用JavaScript完成。

一、CSS3概要

CSS（Cascading Style Sheet）是层叠样式表的意思，CSS3就是在CSS2.1的基础上升级的CSS新版本，属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

1.1、特点

1.2、效果演示

纯CSS3画出小黄人并实现动画效果

HTML页面：

  1.  

CSS样式：

相册演示的代码可以在示例中下载到。

1.3、帮助文档与学习

权威的帮助文档是最好的学习资料，CSS2的帮助，非常详细：

CSS3的帮助文档：

点击下载帮助文档

二、选择器

在使用CSS时我们首先要做的事情是找到元素，在写相应的样式，在CSS2.1中最常使用的是三种选择器：

a)、ID选择器：以#开始，引用时使用id，如id="div1"

#div1

{

color:red;

}

b)、类选择器：以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"

.cls1

{

}

c)、标签选择器：以标签名称开始，如p,span,div,*

div span

{

font-size:14px;

}

当然还有如伪类选择，a:hover，a:link，a:visted，a:active。

在CSS3中新增了很多的选择器，如果大家会jQuery，jQuery中多数选择器在CSS3中都可以直接使用。

1.1、基础的选择器

红色字体中选择器的区别是：p.info的意思是p元素中必须有class="info"属性将被选择，p .info是选择后代元素，示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>选择器</title>
  6.         <style type="text/css">
  7.             p.info{
  8.                 color: red;
  9.             }
  10.             p .info{
  11.                 color: blue;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <h2>选择器</h2>
  17.         <p class="info">p1</p>
  18.         <p>
  19.                 <span class="info">span1</span>
  20.                 <p>p3</p>
  21.         </p>
  22.     </body>
  23. </html>

运行结果：

1.2、组合选择器

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>组合选择器</title>
  6.         <style type="text/css">
  7.              #div1 span
  8.              {
  9.                  color: red;
  10.              }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <h2>组合选择器</h2>
  15.         <div id="div1">
  16.             <span>span1</span>
  17.             <div id="div2">
  18.                 <span>span2</span>
  19.             </div>
  20.         </div>
  21.         <span>span3</span>
  22.     </body>
  23. </html>

运行结果：

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>组合选择器</title>
  6.         <style type="text/css">
  7.              #div1 > span
  8.              {
  9.                  color: red;
  10.              }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <h2>组合选择器</h2>
  15.         <div id="div1">
  16.             <span>span1</span>
  17.             <div id="div2">
  18.                 <span>span2</span>
  19.             </div>
  20.         </div>
  21.         <span>span3</span>
  22.     </body>
  23. </html>

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>组合选择器</title>
  6.         <style type="text/css">
  7.              #div1 + span
  8.              {
  9.                  color: red;
  10.              }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <h2>组合选择器</h2>
  15.         <div id="div1">
  16.             <span>span1</span>
  17.             <div id="div2">
  18.                 <span>span2</span>
  19.             </div>
  20.         </div>
  21.         <span>span3</span>
  22.         <span>span4</span>
  23.     </body>
  24. </html>

1.3、属性选择器

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>属性选择器</title>
  6.         <style type="text/css">
  7.             div[id][class~=cls1] {
  8.                 background: lightgreen;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <h2>组合选择器</h2>
  14.         <span>span0</span>
  15.         <div id="div1" class="cls1">
  16.             div1
  17.         </div>
  18.         <div id="div2" class="cls1 cls2">
  19.             div2
  20.         </div>
  21.     </body>
  22.  
  23. </html>

运行结果：

1.4、伪类

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>伪类</title>
  6.         <style type="text/css">
  7.            td:first-child
  8.            {
  9.                  background: lightcoral;
  10.            }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <h2>组合选择器</h2>
  15.         <table border="1" width="100%">
  16.             <tr>
  17.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  18.             </tr>
  19.             <tr>
  20.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  21.             </tr>
  22.             <tr>
  23.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  24.             </tr>
  25.             <tr>
  26.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  33.             </tr>
  34.         </table>
  35.         <hr />
  36.         <table border="1" width="100%">
  37.             <tr>
  38.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  39.             </tr>
  40.             <tr>
  41.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  42.             </tr>
  43.             <tr>
  44.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  45.             </tr>
  46.             <tr>
  47.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  48.             </tr>
  49.             <tr>
  50.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  51.             </tr>
  52.             <tr>
  53.                 <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  54.             </tr>
  55.         </table>
  56.     </body>
  57.  
  58. </html>

运行结果：

练习：实现隔行换色，当鼠标悬停在每一行上时高亮显示为黄色，按下时高亮红色。

  1.         <style type="text/css">
  2.            tr:nth-child(2n+1){
  3.                 background:lightblue;
  4.            }
  5.            tr:hover{
  6.                background: yellow;
  7.            }
  8.            tr:active{
  9.                background: orangered;
  10.            }
  11.         </style>

1.5、伪元素

标准的伪元素应该使用::，但单:也行，只是为了兼容。

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>伪类</title>
  6.         <style type="text/css">
  7.             a::before {
  8.                 content: "网站";
  9.                 display: inline-block;
  10.                 background: red;
  11.                 color: white;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <h2>伪元素</h2>
  17.         <a href="http://www.baidu.com">百度</a>
  18.         <a href="http://best.cnblogs.com">博客园</a>
  19.     </body>
  20. </html>

运行结果：

三、特殊性（优先级）

a)、同类型，同级别的样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式 
d)、具体 > 泛化的，特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

内嵌样式：内嵌在元素中，<span style="color:red">span</span>

内部样式表：在页面中的样式，写在<style></style>中的样式

外联样式表：单独存在一个css文件中，通过link引入或import导入的样式
f)、!important 权重最高，比 inline style 还要高

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>优先级</title>
  6.         <style type="text/css">
  7.             * {
  8.                 color: yellow;
  9.             }
  10.             p {
  11.                 color: red !important;
  12.             }
  13.             .cls1 {
  14.                 color: deeppink;
  15.             }
  16.             .cls2{
  17.                 color: blueviolet;
  18.             }
  19.             #p1{
  20.                 color:blue;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <div>
  26.             <p id="p1" class="cls2 cls1" style="color:#ccc">p1</p>
  27.             <span>span1</span>
  28.         </div>
  29.     </body>
  30. </html>

运行结果：

3.2、计算特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法：
CSS样式选择器分为4个等级，a、b、c、d
1.如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0 
2.b为ID选择器的总数 0,1,0,0 
3.c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0

4.d为标签、伪元素选择器的数量 0,0,0,1

5.!important 权重最高，比 inline style 还要高

比如结果为：1093比1100，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>优先级</title>
  6.         <style type="text/css">
  7.             html body #div1
  8.             {
  9.                 background: red;
  10.             }
  11.  
  12.             .cls1 #div1{
  13.                 background: blue;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div class="cls1">
  19.             <div id="div1">div1
  20.             </div>
  21.             <div id="div2">div2
  22.             </div>
  23.         </div>
  24.     </body>
  25. </html>

运行结果：

因为html body #div1的特殊性值为：0102，而.cls1 #div1的特殊性值为0110，后者胜出。

四、刻度

在CSS中刻度是用于设置元素尺寸的单位。

特殊值0可以省略单位。例如：margin:0px可以写成margin:0 
一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。 
长度单位包括包括：相对单位和绝对单位。 
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin 
绝对长度单位包括有： cm, mm, q, in, pt, pc, px

4.1、绝对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

4.2、文本相对长度单位

em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }

浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。

示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>em与rem</title>
  6.         <style type="text/css">
  7.             #div2{
  8.                 background: blue;
  9.                 height: 5em;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="div1">
  15.             <div id="div2">
  16.                 Hello em
  17.             </div>
  18.         </div>
  19.     </body>
  20. </html>

结果：

div2的高度为80px，是因为user agent stylesheet默认样式中字体大小为16px，按照这个规则我们可以手动修改字体大小，div2的高度将发生变化。

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>em与rem</title>
  6.         <style type="text/css">
  7.             #div1 {
  8.                 font-size: 20px;
  9.             }
  10.             #div2 {
  11.                 color: white;
  12.                 background: blue;
  13.                 height: 5em;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="div1">
  19.             <div id="div2">
  20.                 Hello em
  21.             </div>
  22.         </div>
  23.     </body>
  24. </html>

结果：

rem

rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>em与rem</title>
  6.         <style type="text/css">
  7.             #div1 {
  8.                 font-size: 20px;
  9.             }
  10.             #div2 {
  11.                 color: white;
  12.                 background: blue;
  13.                 height: 5rem;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="div1">
  19.             <div id="div2">
  20.                 Hello em
  21.             </div>
  22.         </div>
  23.     </body>
  24. </html>

运行结果：

示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>em与rem</title>
  6.         <style type="text/css">
  7.             html {
  8.                 font-size: 10px;
  9.             }
  10.             body {
  11.                 font-size: 16px;
  12.             }
  13.             #div1 {
  14.                 font-size: 20px;
  15.             }
  16.             #div2 {
  17.                 color: white;
  18.                 background: blue;
  19.                 height: 5rem;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <div id="div1">
  25.             <div id="div2">
  26.                 Hello em
  27.             </div>
  28.         </div>
  29.     </body>
  30. </html>

结果：

按理说高度为5*10px=50像素高度，但这里为60，是因为chrome浏览器限制了最小字体大小为12px，从上图可以看出。

4.3、Web App与Rem

为了实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的tmall就使用这种办法，示例如下：

示例一：

运行结果：

示例二：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>web app 与rem</title>
  7.         <style type="text/css">
  8.             html {
  9.                 font-size: 20px;
  10.             }
  11.             body {
  12.                 font-size: 16px;
  13.             }
  14.             #div2 {
  15.                 color: white;
  16.                 background: blue;
  17.                 height: 3rem;
  18.                 width: 3rem;
  19.                 font-size: .7rem;
  20.             }
  21.         </style>
  22.     </head>
  23.  
  24.     <body>
  25.         <div id="div2">
  26.             Hello rem
  27.         </div>
  28.         <script type="text/javascript">
  29.             function resize() {
  30.                 var w = document.documentElement.clientWidth;
  31.                 document.documentElement.style.fontSize = w * 20 / 290 + "px";
  32.             }
  33.             window.onresize =resize;
  34.  
  35.             resize();
  36.         </script>
  37.     </body>
  38.  
  39. </html>

运行结果：

变屏幕变宽时元素大小也随之发生变化，但这里并没有考虑高度，但为响应式布局与hack提供了思路。

Css概要与选择器，刻度单位的更多相关文章

  1. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  2. CSS概要

    CSS概要 laiqun@msn.cn Contents 1. css的引入 2. css的选择器及效果图 3. css 盒模型 4. css 浮动 4.1. 浮动的作用: 4.2. 浮动的影响: 5 ...

  3. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

  4. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  5. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  6. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  7. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  8. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  9. CSS之后代选择器与多类选择器

    <新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子 ...

随机推荐

  1. HDU5618 & CDQ分治

    Description: 三维数点 Solution: 第一道cdq分治...感觉还是很显然的虽然题目不能再傻逼了... Code: /*=============================== ...

  2. 二分 题目 压缩打包 Special Judge？ 不不不 当然不是

    http://noi.openjudge.cn/ch0111/ No 题目 分数 01 查找最接近的元素 10 3176 02 二分法求函数的零点 10 2181 03 矩形分割 10 1420 04 ...

  3. 线段树 - ZYB's Premutation

    ZYB has a premutation P,but he only remeber the reverse log of each prefix of the premutation,now he ...

  4. [BZOJ2072][POI2004] MOS过桥

    Description 一个夜晚一些旅行者想要过桥. 他们只有一个火把. 火把的亮光最多允许两个旅行者同时过桥. 没有火把或者多于2个人则不能过桥.每个旅行者过桥都需要特定的时间, 两个旅行者同时过桥 ...

  5. bzoj1024搜索

    进度1/10mark(感觉完不成了) 事实上我刚看到题目一下子慌了,,,我在想怎么二分一块的长宽,然后验证 然而极其难写 于是想有没有暴力,举一些例子模拟一下 然后发现切割是有很明显的限制的:每次切割 ...

  6. XDocument获取指定节点

    string xmlFile = @"D:\Documents\Visual Studio 2013\Projects\Jesee.Web.Test\ConsoleApplication1\ ...

  7. cookie的基本用法案例

    注:cookie必须在服务器环境下有效. 步骤讲解: 1,引入cookie文件: 2,设置过期时间: var date = new Date(); date.setTime(date.getTime( ...

  8. JQuery中的dialog使用介绍

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...

  9. nmea协议

    NMEA协议 信息类型为: GPGSV:可见卫星信息 GPGLL:地理定位信息 GPRMC:推荐最小定位信息 GPVTG:地面速度信息 GPGGA:GPS定位信息 GPGSA:当前卫星信息 1. Gl ...

  10. FMX保存JPG格式的Stream

    刚刚看以前的笔记,估计这个用的人很少 var surf:TBitmapSurface; astream:TmemoryStream; begin surf:=TbitmapSurface.Create ...