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. Liferay 6.2 改造系列之二：清理不需要的Portlet

    一.特殊Portlet: 以下Portlet数据特殊用途的Portlet,去除后会出现运行错误: 1.站点模版 通过com.liferay.portal.events.AddDefaultLayout ...

  2. TweenMax参数补充

    构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓动的对象 duration:Number ...

  3. hdu2859 dp

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2859 题意:输入一个数n,接下来是一个由n*n个字母组成的矩阵,求以左下到右上的线为轴的最 ...

  4. Java类与对象的基础学习

    1. 请输入并运行以下代码,得到什么结果? public class Test{ public static void main(String args[]){ Foo obj1=new Foo(); ...

  5. MySQL 挺有意思

    1, 修改密码 mysql -u root -p update user set Password = PASSWORD('NEWPWD') WHERE user = 'root'; FLUSH PR ...

  6. POJ1769 Minimizing maximizer（DP + 线段树）

    题目大概就是要,给一个由若干区间[Si,Ti]组成的序列,求最小长度的子序列,使这个子序列覆盖1到n这n个点. dp[i]表示从第0个到第i个区间且使用第i个区间,覆盖1到Ti所需的最少长度 对于Si ...

  7. 每天一个linux命令---netstat

    中间件访问第三方服务,经常出现连不上的情况.可以增加监控,当出现异常的时候触发一些动作通知程序员 例如:  要在app 部署的主机上,应该登录 172.16.210.52 后运行  netstat - ...

  8. 【原】iOS学习18之OC内存管理高级

    1.属性的内存管理 1> 属性的语义特性 2> assign下的属性内部实现 @property (nonatomic, assign) NSString *name; @synthesi ...

  9. aspx与ashx

    ashx在VS的中文版是新建“一般处理程序”,其实是一个实现类System.Web.IHttpHandler接口的类.而任何一个实现了IHttpHandler接口的类都能作为一个外部请求的目标程序.H ...

  10. Leetcode Integer to Roman

    Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...