恶补web之二:css知识(1)
css指层叠样式表(Cascading Style Sheets)
样式定义如何显示html元素，样式通常存储在样式表里。把样式添加到html4.0中，是为了解决内容与表现分离的问题。外部样式表可以极大提高工作效率，外部样式表存储在css文件里，多个样式定义可层叠为一。
html标签原本被设计为用于定义文档内容，由于netscape和ie不断将新的html标签和属性（比如字体和颜色属性）添加到html规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为解决该问题，w3c在html4.0之外创造出样式。所有主流浏览器均支持层叠样式表。
当同一个html元素定义不止一个样式时，会优先使用小编号的样式：
1.内联样式(html元素内部)
2.内部样式表(位于<head>标签内部)
3.外部样式表
4.浏览器缺省设置
css规则由2部分组成：选择器以及一条或多条声明。选择器通常是需要改变样式的html元素，而声明由一个属性和一个值组成：selector {property:value},比如以下代码将h1元素内文字定义为红色，同时字体大小设置为14象素：
h1 {color:red;font-size:14px;}
是否包含空格不会影响css在浏览器的效果，css也是大小写不敏感的。不过存在一个例外：如果涉及到与html文档一起工作的话，class和id名称对大小写是敏感的。
选择器的分组。你可以对选择器分组，被分组的选择器共享相同的声明：
h1,h2,h3,h4 {
color:green;
}
根据css，子元素从父元素继承属性，但实际不总是如此：
body {
font-family:Verdana,sans-serif;
}
根据上条规则，站点的body元素使用特定字体。通过css继承，子元素将继承最高级元素（本例中为body）所拥有的属性，这些子元素诸如p,td,ul,ol,li,dl,dt;这样所有body子元素都应该显示body设定的字体，子元素的子元素也一样，并且在大多数现代浏览器中，也确实如此。但某些浏览器不支持继承，而且忽略应用于body元素的规则；ie直到ie6还存在相关问题：在表格内字体样式会被忽略。
如果不希望子元素继承父元素属性，可以单独为子元素创建一个特殊规则即可：
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
派生选择器允许你根据上下文关系来确定某个标签的样式；比如你只希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以如下定义派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
在上面例子中，只有li中的strong元素会发生改变。
id选择器可以为标有特定id的html元素指定特定的样式，id选择器以”#“来定义。
#red {color:red;}
#green {color:green;}
下面是如何应用上述样式：
<p id="red">xxx</p>
<p id="green">xxx</p>
在现代布局中，id选择器常用来建立派生选择器：
#sidebar p{
font-sytle:italic;
text-align:right;
}
以上样式只会应用于出现在id是sidebar元素的段落。
即使id只能在文档中出现一次，但id选择器作为派生选择器也可以被使用多次：
#sidebar p {...}
#sidebar h2 {...}
id选择器可以独立发挥作用：
#sidebar{
border: 1px dotted #000;
padding:10px;
}
老版本的ie浏览器会忽略该规则，除非你特别定义这个选择器所属的元素：
div#sidebar {...}
在css中，类选择器以一个点号显示：
.center {text-align:center}
在上面例子中，所有拥有center类的html元素均居中显示。类名第一个字符不能使用数字，它在firefox中不起作用。
和id一样，class也可以被用作派生选择器：
.fancy td {...}
以上代码表示类名为fancy更大元素内部的表格单元的样式信息。
元素也可以基于它们的类而被选择：
td.fancy {...}
表示类名为fancy的表格单元的样式信息：<td class="fancy"></td>
可以为拥有指定属性的html元素设置样式，而不仅限于class和id属性。（只有在规定了!DOCTYPE时，ie7和ie8才支持属性选择器，更低的ie版本不支持。）
下面代码为带有title属性以及title属性为hello的所有元素设置样式：
[title]
{
color:red;
}
[title=hello]
{
color:5px solid blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<img title="W3School" src="/i/w3school_logo_white.gif" />
<br />
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式：</h1>
<p title="greeting">Hi!</p>
<a class="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>
下面代码为包含指定值（不必严格匹配）的title属性所有单元设置样式,适合于空格分隔的属性值：
[title~=hello]{color:red;}
下面代码为带有包含指定值得lang属性的所有元素设置样式，适用于连字符分隔的属性值:
[lang|=en]{color:red;}
属性选择器在为不带有class或id的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
下表列出了其他的匹配模式：
选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
应用样式表的3种方法：
1 外部样式表。
<head>
<link rel="stylesheet" type="text/css" href="xxx.css" />
</head>
外部样式表可以在任何文本编辑器中编辑，其中不能包含任何html标签，后缀应该是.css.
2 内部样式表。
<head>
<style type="text/css">
hr {...}
p {...}
body {...}
</style>
</head>
3 内联样式。
<p style="color:sienna;margin-left:20px">
this is a box
</p>
css背景。css运行应用纯色作为背景，也允许适用背景图像。css在这方面的能力远在html之上。
p {background-color:gray;} #将元素背景设置为灰色
p {background-color:rap;padding:20px;} #如上，不过背景色像外略有延伸（增加一些内边距）
body {background-image:url;} #设置背景图像
也可以为属于某个类的某个元素设置背景图像：
p.flower {...}
a.hello {...}
理论上，设置可以向textures和select等替换元素的背景应用图像，不过不是所有浏览器都能很好的处理这种情况。另外background-image不能继承。事实上，所有背景属性都不能继承。
背景重复。如果在页面上对背景图像进行平铺，可以使用background-repeat属性。
背景定位。可以用background-position属性改变图像在背景中的位置。
背景关联。可以用background-attachment属性防止背景滚动（声明图像为fixed）。
CSS 文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
恶补web之二:css知识(1)的更多相关文章
- 恶补web之二:css知识(3)
css有3种定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定. 通过使用position属性,可以选择4种不同类型的 ...
- 恶补web之二:css知识(2)
css字体属性定义文本的字体系列,大小,加粗,风格和变形等. css中包含两种字体系列:通用字体系列和特定字体系列. font-family属性定义文本的字体系列: body {font-family ...
- 恶补web之七:html DOM知识
html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准: w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更 ...
- 恶补web之一:html学习(1)
发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...
- 恶补web之六:javascript知识(2)
若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...
- 恶补web之六:javascript知识(1)
javascript(下称js)是一种轻量级编程语言,它可以插入html页面然后由浏览器执行. document.write("<h1>...</h1>") ...
- 恶补web之一:html学习(2)
iframe用于在网页内显示网页:<iframe src="URL"></iframe>,iframe可用作链接的目标: <!DOCTYPE html ...
- 恶补web之八:jQuery(3)
jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...
- 恶补web之八:jQuery(2)
jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...
随机推荐
- Spring开发环境搭建教程
Spring开发环境搭建 JDK7以上版本 eclispe for j2ee 4.0以上版本 Spring frameWorks 3.0以上版本 至于前两个我们就不介绍,直接百度就可以了,对于Spri ...
- COM原理与实现之二: 聚合
COM原理与实现之二: 聚合 C++没有同聚合等价的特性.聚合实际上是继承性的一种动态形式.而C++的继承总是静态的,是实现继承.COM是接口继承,通过聚合接口,可以做成动态配置. 研究COM,主要是 ...
- FFmpeg源代码简单分析：libswscale的sws_getContext()
===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...
- Android简易实战教程--第十三话《短信备份和还原~三》
之前写过短信备份的小案例,哪里仅仅是虚拟了几条短信信息.本篇封装一个业务类,且直接通过内容提供者,访问本系统的短信信息,再提供对外接口.如果想要短信备份和短信还原,直接复制这段代码即可.对于您调用这个 ...
- 如何在mac OS X中查看Emoji表情的含义
使用ctrl+空格,在搜索框中搜索 TextEdit程序,其实中文是 文本编辑 程序, 运行,在菜单中选择 编辑->特殊字符 然后可以看到每个图标的说明啦
- 音乐API
博主在前几篇博客中介绍了小Q聊天机器人的源码及其包含的一些功能,并在应用市场上上线了一个版本,其中有一个功能是歌曲搜索,即输入格式为"歌曲#歌曲名#歌手"即可搜索出相应的歌曲并进行 ...
- StringBuffer与StringBuilder详解
刚刚在参加网易实习生在线考试的时候,出了一道选择题谈到了StringBuilder这个类的一些选项,虽然那道题自己做对了,但是也提醒了我应该好好了解一些StringBuffer与StringBuild ...
- Android版本更新时对SQLite数据库升级或者降级遇到的问题
SQLite是Android内置的一个很小的关系型数据库.SQLiteOpenHelper是一个用来辅助管理数据库创建和版本升级问题的抽象类.我们可以继承这个抽象类,实现它的一些方法来对数据库进行自定 ...
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(二十一)
回到Xcode中,在MainScene.h接口中添加碰撞协议: @interface MainScene : CCNode <CCPhysicsCollisionDelegate> //. ...
- Guava 教程2-深入探索 Google Guava 库
原文出处: oschina 在这个系列的第一部分里,我简单的介绍了非常优秀的Google collections和Guava类库,并简要的解释了作为Java程序员,如果使用Guava库来减少项目中大量 ...