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. 【JS】两种计时器/定时器

    1.首先介绍定时器 定时器:设置一个定时器,再设置一个等待的时间,到达指定时间后,执行对应的操作 两种定时器:用法一样,区别一个执行后不会停下来,一个只执行一次 第一种:window.setInter ...

  2. 浅谈C++多态性

    本文转载至http://blog.csdn.net/hackbuteer1/article/details/7475622 总结: (1)区分概念:    重载----同一个类中,相同的函数名字,不同 ...

  3. js兼容方法：通过样式名获取元素，byClass

    function byClass(oParent,className){ if(document.getElementsByClassName){ //if it is Firefox return ...

  4. MVC 异常处理机制

    方法一 :web.config配置文件的 system.web 接点下添加,若为On则不会将异常信息反馈到用户,而是友好的跳转到error.htm <customErrors mode=&quo ...

  5. Spring Boot 集成MyBatis

    http://blog.csdn.net/isea533/article/details/50359390

  6. http://www.roncoo.com/course/view/a09d8badbce04bd380f56034f8e68be0

    http://www.roncoo.com/course/view/a09d8badbce04bd380f56034f8e68be0

  7. figure元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【Infomatica】Infomatica PowerCenter 9.1.0配置Repository Service和Integration Service小结

    2014-05-14 今天在虚拟机中尝试安装Infomatica PowerCenter 9.1.0. 安装环境:Windows Server 2003 32bit. 字符集环境 DBMS:Oracl ...

  9. ROW_NUMBER() OVER函数的基本用法

    转自:http://www.cnblogs.com/icebutterfly/archive/2009/08/05/1539657.html 语法:ROW_NUMBER() OVER(PARTITIO ...

  10. CentOS 6.4 查看每个进程的网络流量

    所需工具nethogs 安装:yum install -y nethogs 使用:nethogs eth0