- 浏览: 98600 次
- 性别:
- 来自: 北京
文章分类
最新评论
一、如何创建 CSS
插入样式表的方法有三种:
1.外部样式表
<head>
<link rel="stylesheet" type="text/css"
href="/YGFMISWebRes/html/component/css/jquery.ygsoft.common.css"/>
</head>
2. 内部样式表(在html中,位于 <head> 标签内部)
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
3. 内联样式(在 HTML 元素内部)
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
优先级:内联样式 > 内部样式表 > 外部样式表
二、CSS选择器
1. id 选择器
ID属性用于定义一个元素的独特的样式。
DOM中id= sidebar的样式定义。
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
2. 类选择器(class)
1) class = center的样式定义。
.center {text-align: center}
2) 可以为对象的 class 属性(特性)指定多于一个值( className ),其方法是指定用空格隔开的一组样式表的类名。例如:<div class="class1 class2">。注:id不可以用此方法。
3. 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、td、a。
td { font-size:14px; width:120px; }
a { text-decoration:none; }
4. 包含选择器(后代选择器)E1 E2 { sRules }
1) 实例:
table td { font-size:14px; }
div.sub a { font-size:14px; }
2) 在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。
可以是ID选择器和类选择器之间相互包含,实用范围非常大。
5. 组选择器 E1 , E2 , E3 { sRules }
1) 实例:
.td1, div a, body { font-size:14px; }
td, div, a { font-size:14px; }
2) 将同样的定义应用于多个选择器,可以将选择器以逗号分隔的方式并为组。
6. 子对象选择器 E1 > E2 { sRules }
1) 实例:
h1 > strong {color:red;}
//这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:
<h1>This is <strong>very</strong> important.</h1>
2) 如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,使用子元素选择器(Child selector)。
7. 相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
8. 属性选择器
对带有指定属性的 HTML 元素设置样式。
[title] { color:red; }
input[type="text"]
{
background-color:yellow;
}
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
注:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。
三、伪类及伪对象
css内部本身赋予它一些特性和功能,也就是你不用再class=...或id=...你就可以直接拿来使用,当然你也可以改变它的部分属性比如:a:link{color:#ff0000;}
1. 伪类
CSS 伪类用于向某些选择器添加特殊的效果。
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
2. 伪对象
语法:(伪对象选择符共有4种)
1). Selector:first-letter
2). Selector:first-line
3). Selector:before
4). Selector:after
说明:
1). 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象,必须先设定对象具有块元素的表状。
2). 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象具有块元素的表状。
3). 用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
4). 用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
注:first-letter和:first-line目前所有主流浏览器均支持;:before和:after非IE核心浏览器及IE8支持。
发表评论
-
Deployment failure on Tomcat 6.x.
2012-03-06 17:56 827在用MyEclipse6.5做项目时发现这样的问题:Deplo ... -
页面缓存时间设置
2012-02-22 12:45 0http://www.go2pad.com/space-201 ... -
url 中文转码
2012-02-20 11:10 2613我想,URL传参中文对于程序员来说,是个很头疼的问题吧。虽然在 ... -
html meta
2011-12-02 11:16 667meta是用来在HTML文档中模拟HTTP协议的响应头报文。m ... -
JDK&JRE区别
2011-11-28 18:28 693对于java初学者来说,往往不懂区分jdk和jre的区别,实际 ... -
jsp页面不缓存
2011-11-25 09:01 780html <meta http-equiv =& ... -
将双引号(“”) 存入数据库的处理方法
2011-11-15 20:00 767将双引号(“”) 存入数据库的处理方法: 例如 :“恐男症”女 ... -
解决时分秒不能写入Date类型字段中
2011-11-02 18:48 1054CallableStatement cstmt = null; ... -
StringBuffer内容清空效率比较
2011-10-31 18:08 800在开发程序的时候,经常使用StringBuffer来进行字符串 ... -
tl标签常用方法
2011-10-31 17:46 762函数名 函数说明 使用举例 fn:contains 判断 ... -
Test.java
2011-10-21 11:44 587Test.java右键Run as RUN CONFIGUR ... -
myeclipse把maven普通java项目变成web项目的全程操作
2011-10-20 11:47 777http://apps.hi.baidu.com/share/ ... -
用线程调用方法
2011-10-13 16:25 769package nkc.util; import ... -
json转换为java对象
2011-10-11 19:43 1717json数组格式 [{},{}] 转换 List<Li ... -
java 事件
2011-10-10 10:10 6921.创建事件源 EventSource source = ne ... -
LazySingleton 单例模式
2011-10-10 10:00 734public class LazySingleton{ ... -
EventObject类
2011-10-10 09:31 1570开发者经常要基于Observer模式创建事件监听系统(Even ... -
复合优先于继承
2011-09-26 08:33 748继承是代码重用的有力武器,但是它并不是完成这项工作的最佳工具, ... -
超强过滤器彻底解决JSP/SERVLET中文参数GET/POST传递的问题
2011-09-19 13:57 1290query = new String(query.getByt ... -
Quartz Cron Expression
2011-08-16 09:34 765Quartz Cron Expression 原文解释: ...
相关推荐
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理。放弃到处可见的基础知识、网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者使用CSS布局的思维方式,通过本书的阅读读者将会...
9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生网页作业,div css js 等通过dreamwear的工具实现规范化,比如文件夹的规范,代码写作的规范,...
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
svg转css,css转svg,svg与css互相转换并压缩
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
由于本书压缩质量比较好,所以格式比较大,40MB多,我分了6段压缩大家可以按 精通CSS(css mastery)中文版 part1 精通CSS(css mastery)中文版 part2 精通CSS(css mastery)中文版 part3 精通CSS(css ...
什么是CSS? CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。 CSS 是用来表现HTML或XML的标记语言。 CSS 是由W3C的CSS...
CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装
CSS3实现烟花特效-图片+css
CSS
包含:CSS权威指南、css彻底设计研究、HTML5和CSS3实战、HTML5与CSS3设计模式