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. css学习（2）-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  2. Android Studio导出Jar包并混淆

    在Android Studio中,自带反编译查看class文件,如果没有混淆的话,class文件跟java文件基本没有区别了,为了保护,还是混淆的好. 网上看了不少资料,都是直接下载proguard额 ...

  3. css与js后边有？v=20160101

    原文地址http://blog.csdn.net/zanychou/article/details/8813076 <span style="font-size:14px;" ...

  4. Uva 699The Falling Leaves

    0.唔.这道题 首先要明确根节点在哪儿 初始化成pos=maxn/2; 1.因为是先序的输入方法,所以这个建树的方法很重要 void build(int p) { int v; cin>> ...

  5. SPOJ PHRASES 后缀数组

    题目链接:http://www.spoj.com/problems/PHRASES/en/ 题意:给定n个字符串,求一个最长的子串至少在每个串中的不重叠出现次数都不小于2.输出满足条件的最长子串长度 ...

  6. iOS LoginDemo

    // // ViewController.m // FicowLoginDemo1 // // Created by Ficow on 15/11/12. // Copyright © 2015年 F ...

  7. BZOJ2164 : 采矿

    树链剖分+线段树,每个节点维护以下信息: (1)单独在某个点分配$i$个人的最大收益.可以$O(m)$合并. (2)分配$i$个人的最大收益.可以用$O(m^2)$合并. 时间复杂度$O(c(m^2\ ...

  8. 科技部专家王涌天：移动AR头显将“让人类重新站起来”

    目前,业内普遍认为VR和AR技术将是继移动手机之后的下一代计算平台,将给社会的方方面面带来全新的改变.近日,北京理工大学信息与电子学部主任.科技部863信息技术领域专家组成员王涌天教授对头戴式增强现实 ...

  9. CSS样式覆盖顺序

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  10. gson 简要使用

    http://www.cnblogs.com/chenlhuaf/archive/2011/05/01/gson_test.html 发现了google的gson,因为之前对于protocolbuf有 ...