CSS 层叠样式表

　　不同的浏览器需要不同的前缀，虽然目前最新版本的浏览器的不需要，但为了向下兼容，前缀还是少不了。

前缀

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

　　CSS代码注释：

/*注释内容*/

　　CSS可支持多种设备，简化程序员的设计过程，加快加载速度，当然最重要的还是实现将表现与结构的分离。

　　CSS样式可分为3种，分别为行内引用，页内引用，页外引用（外部样式表），它们依照就近原则，优先级：

　　行内引用，页内引用，页外引用（外部样式表）

1、行内引用（这种引用方式是不需要选择器的）

<body style="bockground:#ccc">

    <h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1>

</body>

2、页内引用

<head>

    <style type="text/css">

        body {

       　　background-color:#cccccc;

        }
　　　　　h1{
　　　　　　font-size:12px; 
　　　　　　color:#ff0000;
　　　　　　}
    </style>

</head>

3、页外引用（外部样式表）

style.css :

body {

    background-color:#cccccc;

}
h1{
　　font-size:12px; 
　　color:#ff0000;
}

CSS选择符

1、通配选择符*，*代表所有对象

*{

    color:blue;

    margin:;

    padding:;

}

2、元素选择符，其实就是标签作为名称的选择符

body{}

h1{}

3群组选择符，对一组标签进行相同的样式定义，标签之间用逗号（,）分隔

h1,h2, h3, p {

    font-size:12px;

    font-family:arial;

}

4、关系选择符，可分为4种：包含选择符、子选择符、相邻选择符、兄弟选择符，其中包含选择符与子选择符效果类似，以下图为例子解释，包含选择符选中的是被包含的所有F元素，不管嵌套多少层，只要被E包含就有效果。而子选择符选中的是，E元素的子元素F，就算E元素的子元素中存在F也没有效果。

例：

<style>

    div a{

        background-color:#67B374; /*绿色*/

    }

    div>a{

        background-color:#E61061;/*紫红色*/

    }

    .n+p{

        background-color:#0000FF;/*蓝色*/

    }

    div~p{

        background-color:#808080;/*灰色*/

    }

  </style>

 <body>

    <div class="n">

        <a>背景色是#E61061</a>

            <span>

                <a>背景色是#67B374</a>

            </span>

    </div>

    <p>背景色是#0000FF</p>

    <p>背景色是#808080</p>

    <p>背景色是#808080</p>

 </body>

效果图：

CSS3初学篇章_1的更多相关文章

  1. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

  2. Javascript初学篇章_1（概念/数据类型）

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  3. CSS3初学篇章_7(布局/浏览器默认样式重置)

    CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象, ...

  4. CSS3初学篇章_5（背景样式/列表样式/过渡动画）

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  5. CSS3初学篇章_4（边框样式/段落样式）

    边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...

  6. CSS3初学篇章_3（属性选择符/字体样式/元素样式）

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  7. CSS3初学篇章_2（伪类选择符）

    id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...

  8. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  9. Javascript初学篇章_8（事件）

    事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...

随机推荐

  1. LVS 三种工作模式原理、以及优缺点比较（转载）

    原文地址:http://9ilinux.com/149.html 一.NAT模式(VS-NAT) 原理:就是把客户端发来的数据包的IP头的目的地址,在负载均衡器上换成其中一台RS的IP地址,并发至此R ...

  2. torch7安装

    按照官网进行安装即可;(http://torch.ch/docs/getting-started.html#_) # in a terminal, run the commands WITHOUT s ...

  3. no-jquery 02 DOM

    DOM Manipulation Creating Elements // IE 5.5+ document.createElement('div'); Inserting Elements Befo ...

  4. [工作中的设计模式]适配器模式adapter

    一.模式解析 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 也就是说,如果已经写好了一个接口,但是又来了一种截然不同的接口,如 ...

  5. event 内存泄漏

    组长说用event有内存泄漏的隐患..做个测试. 预留

  6. S5中新增的Array方法详细说明

      ES5中新增的Array方法详细说明 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wor ...

  7. HDU5726 GCD（二分 + ST表）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5726 Description Give you a sequence of N(N≤100, ...

  8. C#生成PDF文档，读取TXT文件内容

    using System.IO;using iTextSharp.text;using iTextSharp.text.pdf; //需要在项目里引用ICSharpCode.SharpZipLib.d ...

  9. RColorBrewer包---R语言的配色方案

    // RColorBrewer包介绍 RColorBrewer包提供了3套很好的配色方案.用户只需要指定配色方案的名称,就可以用包中的brewer.pal()函数生成颜色.这3套配色方案包括: 连续型 ...

  10. ccc 模拟重力

    x=x+v v=v+gr cc.Class({ extends: cc.Component, properties: { velocity:{ default:null }, grivatity:{ ...