CSS3初学篇章_1
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的更多相关文章
- CSS3初学篇章_6(自定义动画)
自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器 -webkit chrome和safari -moz firefox - ...
- Javascript初学篇章_1（概念/数据类型）
Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...
- CSS3初学篇章_7(布局/浏览器默认样式重置)
CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象, ...
- CSS3初学篇章_5（背景样式/列表样式/过渡动画）
背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...
- CSS3初学篇章_4（边框样式/段落样式）
边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...
- CSS3初学篇章_3（属性选择符/字体样式/元素样式）
属性选择符 选择符 说明 E[att] 选择具有att属性的E元素. E[att="val"] 选择具有att属性且属性值等于val的E元素. E[att~=&quo ...
- CSS3初学篇章_2（伪类选择符）
id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...
- Javascript初学篇章_5(对象)
对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...
- Javascript初学篇章_8（事件）
事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...
随机推荐
- Linux定时，计划任务cron
假如你有一些任务要定期执行,比如清理磁盘.删除过期文件.发送邮件和提醒,这个时候可以用cron来实现. crond是后台进程,而crontab则是定制好的计划任务表. 启动与停止 查看状态/sbin/ ...
- Linux查看可执行程序所在路径
首先通过命令获得进程PID:如4285,然后执行下述命令 cd /proc/4285 ls -l 或直接ls -l /proc/4285 其中exe所在行即为可执行文件的全路经.如下图所示:
- 2016.8.14 HTML5重要标签及其属性学习
1.移动端的CSS: 一般需要引入下面的外部样式表: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/ ...
- zepto的bug1
给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以正常响应. 但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时 ...
- Java命令行输入求和的简单学习
思想:命令行输入的参数,必须先转换为数字才能进行加法计算,这就需要引用java.util.Scanner; 流程框图: 源代码: //实现几个整数相加的程序 //高开拓,2015.9.26 packa ...
- Docker中自动化搭建Hadoop2.6完全分布式集群
这一节将在<Dockerfile完成Hadoop2.6的伪分布式搭建>的基础上搭建一个完全分布式的Hadoop集群. 1. 搭建集群中需要用到的文件 [root@centos-docker ...
- Redis入门指南
随着互联网业务对性能需求日益强烈,作为Key/Value存储的Redis具有数据类型丰富和性能表现优异的特点.如果能够熟练地驾驭它,不管是把它用做缓存还是存储,对很多大型应用都很多帮助.新浪作为世界上 ...
- 在Revit中如何显示附件模块（Add Ins） 这个命令页？zz
分类: 概念说明 Revit Revit界面编程 Revit 二次开发入门2013-08-22 13:58 1395人阅读 评论(9) 收藏 举报 在windows 7 32-bit OS 上装了 ...
- BZOJ3551 : [ONTAK2010]Peaks加强版
首先强制在线的话,肯定是不能再离线排序+平衡树启发式合并了. 这回要用的是线段树合并,每次把两棵线段树合并,总复杂度为$O(n\log n)$ 预处理: 把边按权值从小到大排序,依次加边, 对于边(x ...
- angularjs 实现 文件拖拽，缩略图显示
成果图: main-hugeScreen.html <div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller=&qu ...