CSS入门系列:第一部分 基础知识
来源:互联网 发布:icloud备份微信数据 编辑:程序博客网 时间:2024/05/22 01:32
——摘自《CSS入门经典(第3版)》 Lan Pouncey、Richard York著
【CSS简介】
·各种浏览器
渲染引擎
浏览器
CSS的支持
Webkit
Apple Safari
支持CSS2.1,也支持CSS3的许多功能。
Google Chrome
支持CSS2.1,也支持CSS3的许多功能。
Trident
IE9
支持CSS2.1和CSS3。
IE8
支持CSS2.1,对CSS3支持较少。
IE7
支持CSS2.1,不支持CSS3。
IE6
支持CSS2.1的部分功能,不支持CSS3。
Gecko
Mozilla Firefox
支持CSS2.1,支持CSS3的许多功能。
Presto
Opera
支持CSS2.1,支持CSS3的许多功能。
【样式表组成】
·样式表的元素:样式表由规则组成;规则由选择器和声明组成;声明由属性和值组成。
·值:可以是关键字、长度、颜色、字符串、整数、实数或URI
·字符串:CSS中字符串的一种用法就是指定名称中包含空格的字体。
font-family:‘Times New Roman’,Times,serif; //带有空格的字体名称要使用引号括起来。
·颜色简写:#FFFFFF,包含3对FF,简写为#FFF。#FAB等效于#FFAABB。
·RGB颜色:rgb(128,128,128)或者用百分比表示,rgb(50%,50%,50%)
·URI(统一资源标识符):包含样式表;包含背景图像。
.jupiter{ Background-image:url(jupiter.jpg); }
·在文档中包含CSS的4种方式:
①使用内嵌样式表,使用<style>和</style>标签,必须放在<head>标签内。
<style type=”text/css”>Body{Font:12px sans-serif;}</style>
②放在单独的文档中,通过<link>链接到HTML文档中,因为<link>元素不只是引用CSS文件,还可以链接到当前站点的RSS源等,所以包含rel=”stylesheet”很重要。
<link rel=”stylesheet” type=”text/css” href=”exam1-1.css”>
③使用@import规则,从内嵌的或链接的样式表中导入CSS。
<style type=”text/css”>@import url(exam1-1.css);</style>
④包含在style属性中的内联样式直接应用于HTML。
<body style=”font:12px sans-serif;”>
建议使用①②。
【选择器】
·类选择器:以一个点开头,加类名。
如果想给<div>和<img>元素提供相同的类名,但让一条样式表规则只应用于<div>元素,而不应用于<div>元素,可以限定一个类选择器到一种元素的方法:当附加一个类型选择器到一个类选择器上时,就限定了样式表规则只作用于相应类型的元素。
div.planet {margin:10px 0;...}//!元素名称和类选择器之间不能有空格。有空格是后代选择器。
元素可以被分配多个类名,例如<div class=”planet jupiter”>,这个class属性的值包括两个类名,空格隔开,div元素将接受两条规则中的声明。
.planet{Margin:10px 0;...}.jupiter{Background-image:url(jupiter,jpg);}
类名也可以串联在一起:
.planet.jupiter{Background-image:url(jupiter.jpg);}//只应用于在其class属性中同时包含了这两个类名的元素。//!IE6根据CSS1规范来解释串联的类名,串联的类名中只有最后一个类名才会被识别。
·ID选择器:以#开头
<style type=”text/css”>#jupiter{background-image:url(jupiter.jpg);}</style><div class=”planet” id=”jupiter”><h2>Jupiter</h2></div>
·通用选择器:只有一个星号。
单独使用时,该CSS规则应用于文档中的所有元素。不常用,有更好的方法想整个文档应用样式。
*{font-family:Arial,Helvetica,sans-serif;}
·后代选择器
div.planet h2{font-size:18px;margin-top:0;}//只有当<h2>元素是类名为planet的<div>元素的后代时,才会选取该<h2>元素。
后代选择器不限于只使用两个元素,必须用一个空格隔开。
div.planet table td{padding:0 10px 0 0;text-align:left;}
·伪类选择器:用来表示动态事件、状态改变等情况。伪类属性的前面只能有一个冒号。
:link 表示未访问的超链接。 例 a:link{color:meduimblue;}
:visited 表示已访问的超链接。
:hover 表示鼠标悬停在该元素上。
:focus 表示获得键盘焦点。
:active 表示用户正在单击该元素。
动态伪类出现在样式表中的顺序是很重要的,如果:link伪类定义在:focus伪类之后,那么:link伪类将被优先采用,:link伪类的声明将重写:focus伪类的声明。
在样式表中出现的顺序遵循的口诀是LoVe HAte,即:link、:visited、:hover和:active。 :hover和:focus一般同时包含,使它们接收相同的样式。
a:focus,a:hover{text-decoration:underline;}//以逗号分组选择器
【层叠和继承】
· !important规则
!important语法出现在声明中,位于属性值之后、结束声明的分号之前。
body{background:#000 !important;}
包含!important规则的声明优先于其他任何声明,甚至是style属性。如果有多条!important规则,后一条规则优先。强烈建议不要使用!important规则。
- CSS入门系列:第一部分 基础知识
- Oracle 10g sql 入门基础知识 笔记 第一部分
- Linux基础知识:第一部分
- 第一部分:基础知识
- 第一部分 基础知识
- 第一部分 基础知识
- css第一部分简介
- css排雷第一部分
- CSS入门系列:第二部分 属性(一)
- CSS入门系列:第二部分 属性(二)
- CSS入门系列:第二部分 属性(三)
- CSS入门系列:第二部分 属性(四)
- 第一部分:基础知识(第一章)
- 第一部分 TCP/IP基础知识
- 第一部分:Hibernate入门
- 神经网络入门 第一部分
- 第一部分:Hibernate入门
- 第一部分 Hibernate入门
- poj 2141
- 传递动态内存
- Swt/Jface treeViewer的使用
- jmeter- 函数测试模式
- 结构体的内存对齐问题与位域
- CSS入门系列:第一部分 基础知识
- sql server 当月第一天和最后一天的SQL
- 【转】一位ACMer过来人的心得
- 最简单的全球基站定位接口API
- 10年资深猎头揭露:他们为什么能年薪百万!?
- 日志采集方式 SNMP TRAP 和 Syslog 的区别
- C代码优化方案
- 谁是下一波浪潮之巅 ——从规律中寻找答案
- 关于Cmake