- 浏览: 1324590 次
- 性别:
- 来自: 湖南澧縣
文章分类
最新评论
-
虾米小尹:
不行啊!2.2-0.25=1.9500000000000002 ...
JavaScript浮点数运算 —— 精度问题 -
heluping000000:
引用String a= "abc",首先在 ...
String,到底创建了多少个对象? -
mack:
谢谢分享matcher.appendReplacement(s ...
string.replaceAll()中的特殊字符($ \)与matcher.appendReplacement -
wzt3309:
完全理解,比网上其他资料都要详细
String,到底创建了多少个对象? -
u014771876:
Java中十六进制转换 Integer.toHexString()
一个样式规则由两部分组成:选择器和样式声明。选择器表明要为哪一个元素设置样式,样式声明则表明要应用哪些样式属性。如,我们想尽上文档中的一级标题 H1 以红色显示,就可以这样定义CSS规则:
h1 { color: red }
这样只要加载了该样式文档中所有<H1>标签都将应用这个样式。
<html> <head> <title></title> <style type='text/css'> h1{ color: red; } </style> </head> <body> <h1>h1</h1><h2>h2</h2> </body> </html>
效果图:
CSS选择器
有以下三种选择器:通过HTML标签类型、通过已声明类开或者通过元素的唯一ID。
标签类型的选择器
div h1 { color: red; }
表示只能<div>标签中的嵌套标签<h1>起作用:
<html> <head> <title></title> <style type='text/css'> div h1{ color: red; } </style> </head> <body> <h1>h1</h1> <span>span</span> <div>div</div> <div><h1>div.h1</h1></div> </body> </html>
效果图:
类选择器
. callout { border: solid blue 1px; background-color: cyan }
如下使用:
<div class='callout' >...</div>
一个元素可以分配多个样式类。如果我们还有一个类样式名为 loud 时,可以同时使用:
<html> <head> <title></title> <style type='text/css'> .callout { border: solid blue 1px; background-color: cyan } .loud { color: orange } </style> </head> <body> <span class='callout' >callout</span> <span class='loud' >loud</span> <span class='callout loud' >callout loud</span> </body> </html>
效果图:
我们也可以混合使用样式类和基于元素的规则,来定义一个仅仅针对特定标签类弄的样式类。如:
span.highlight { background-color: yellow }
这个规则仅会应用在声明了值为 highlight 的类属性(即 class='highlight' )的 <span> 标签上。其他无该属性的 <span> 标签(即 span 上无 class='highlight' 类属性设置)或其他有 class='highlight' 属性设置的标签(比如说 <div class='highlight' > )将不受影响。以下使用该样式:
<html> <head> <title></title> <style type='text/css'> span.highlight { background-color: yellow } </style> </head> <body> <div class='highlight'>div</div> <span>without highlight</span><br> <span class='highlight'>span</span> </body> </html>
效果图如下:
我们甚至可以与父子关系的选择器联合使用,创建在非常特定的场合下使用的规则:
div.prose span.highlight { background-color: yellow }
这个规则仅会应用在设置了prose样式类的<div>标签中嵌套的设置了highlight样式类的标签。应用上面的样式:
<html> <head> <title></title> <style type='text/css'> div.prose span.highlight { background-color: yellow } </style> </head> <body> <div class='prose'>div</div> <span class='highlight'>span</span> <div class='prose'>div<span class='highlight'>div.span</span></div> </body> </html>
只有最后一句生效,且只有div里的嵌套标签span里的内容变颜色,如下图:
ID选择器
也可以为单个元素指定规则,它需要有唯一ID,这是通过在HTML中加上id属性来完成的。HTML中只会有一个使用这个ID的元素,所以,这样一类选择器通常只用来选择页面中的一个元素。例如,为了突出显示页面中的关闭按钮,我们可以这样定义样式:
#close { color: red }
使用以上样式:
<html> <head> <title></title> <style type='text/css'> #close { color: red } </style> </head> <body> <input type='button' id='close' value='Close'> </body> </html>
效果图:
伪选择器
在CSS中我们还可以定义基于伪选择器的样式 。浏览器定义了一些有限的伪选择器,这里展示一些最有用的,例如:
*:first-letter {
font-size: 500%;
color: red;
float: left;
}
通过这个选择器,我们可以将任何元素的第一个字母以很大的粗体红色字体来显示,如下使用:
<html> <head> <title></title> <style type='text/css'> *:first-letter { font-size: 500%; color: red; float: left; } </style> </head> <body> <span>firse</span> second <div>third</div> </body> </html>
效果图:
我们还可以将这个规则限制大一点,就像这样:
p.illuminated:first-letter {
font-size: 500%;
color: red;
float: left;
}
这样的话,红色的效果只会应用在设置了illuminated样式类的<p>元素上。其他有用的伪选择器包括first-line 和hover 。hover可以改变当鼠标光标停在超链接上时,超链接的显示效果。例如,当鼠标光标停在链接上时,链接显示为黄色,我们可以编写下列规则:
a:hover{ color: yellow; }
<html> <head> <title></title> <style> p.illuminated:first-letter { font-size: 500%; color: red; float: left; } p:first-line { font-size: 200%; color: blue; float: left; } a:hover{ color: red;font-size: 50 px; } </style> </head> <body> <div class='illuminated'>div</div> <p>without illuminated</p> <p class='illuminated'>with illuminated</p> <a href='#'>a link </a> </body> </html>
效果图:
发表评论
-
HTML、JS、JSON特殊字符
2010-12-13 23:47 25806JS到HTML特殊字符转换 这几天做项目,发现从服务器端以J ... -
HTML — HTTP URL 中的特殊字符
2009-10-31 18:16 32361. + URL中的+号表示空格 ... -
部分解决JsUnit无法在firefox3、safari 测试的问题
2009-10-25 07:03 1402在上一篇中出现了一个问题,就是用 jsunit2.2alpha ... -
JsUnit——eclipse插件(四)
2009-10-25 06:59 2401这节我们来看看如何通过JsUnit插件来运行前几节所测试过的测 ... -
10、JavaScript跨浏览器需注意的问题——ajax基础笔记
2009-10-21 22:19 1320向表中追加行 创建表格行时,我们要把创建的 tr 追加到 t ... -
JsUnit详解——Web服务方式(三)
2009-10-21 00:21 2393上两节提到过以Web方式来运行JsUnit,不过不是很详细,这 ... -
JsUnit详解——《ajax基础》笔记(二)
2009-10-20 22:38 2480使用标准/定制查询串 如此说来,测试运行工具是很强大的,但是 ... -
JsUnit详解——《ajax基础》笔记(一)
2009-10-20 19:57 2537JsUnit与JUnit对比 JsUnit也有setUp() ... -
使用Firefox的Web开发插件
2009-10-18 17:53 1433Firefox的Web开发插件为Firefox浏览器增加了大量 ... -
9、访问WEB服务(REST)——ajax基础笔记
2009-10-18 17:24 3972最其名的WEB服务实现是S ... -
8、读取响应头部——ajax基础笔记
2009-10-18 17:20 6711你有时可能需要从服务器获取一些内容,例如,可能想“ping”一 ... -
7、使用JSON向服务器发送数据——ajax基础笔记
2009-10-18 17:20 5136看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可 ... -
6、请求参数作为XML发送——ajax基础笔记
2009-10-18 17:20 1717如果只是使用一个包含 名/值 对的简单查询串,这可能不够健壮, ... -
4、将使用W3C DOM动态生成页面——ajax基础笔记
2009-10-18 17:19 1359使用W3C DOM动态生成页面 dynamicContent ... -
3、将响应解析为XML——ajax基础笔记
2009-10-18 17:18 1012将响应解析为XML parseXML.xml清单: < ... -
2、使用innerHTML属性创建动态内容——ajax基础笔记
2009-10-18 17:17 1866使用innerHTML属性创建动态内容 如果结合作用HTML ... -
1、使用XMLHttpRequest对象——ajax基础笔记
2009-10-18 17:17 1979XMLHttpRequest最早是在 IE5 中以active ... -
30、JavaScript代码优化
2009-10-16 21:25 1519JavaScript代码的速度被分成两部分:下载时间和执行速度 ... -
JavaScript代码优化(二)
2009-10-16 01:32 1156◆字符串的使用 在IE6和IE7中因字符串级联导致的主要问题 ... -
JavaScript代码优化(一)
2009-10-15 23:47 1219尽可能避免使用全局变量和函数.全局的变量和函数其实等价于 wi ...
相关推荐
CSS样式定义什么类型的HTML标签,CSS样式就对该类HTML标签所起作用。 例如下面的代码样式选择器用的是p,那么该样式将对该网页中的所有标签之间的内容起作用。
CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS基础选择器 基础选择器: 针对...
详解CSS选择器标签HTML 选择器 类别CLASS 选择器
CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。
支持复杂的:not和:has选择器(和sizzle一样)2, 结果的正确性Sizzle在某些选择器上由于查询策略的原因,会返回错误的结果考虑在这样的html上查询"<div/><h1/><h1/><div/>"查询 div~div : 应返回1个节点查询 h1~div: ...
1.css选择器-属性选择器.html
CSS3选择器--关系选择器 关系选择器 01 子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。 定义 语法结构 E>F{ CSS样式属性 } 说明 选择所有作为E元素的子元素F。 子代选择器(>) 示例:设置 h1 ...
在编程和网页开发中,选择器是一种用于识别并定位文档(HTML文档、XML文档等)中特定元素的方法。这里主要介绍CSS选择器和jQuery选择器。
CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器,是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;:root选择器;:not选择器;:only-child 选择器;:first-child和:last-child选择器;:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-...
CSS3选择器--属性选择器;CSS3选择器简介;使用选择器可以方便的定位于指定的元素,而不用使用额外的class或id,通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。;属性选择器;属性选择器;E[att^=value]...
使用HTML+css3写的城市选择器。实现了城市多选了单选功能。支持最多选择三个城市。 适合下载下来作为一个参考的demo。
css-diner选择器练习
这款日历应用的特点是拥有非常酷的日期选择效果,鼠标滑过日期时即会有立体的背景展现出来。建议使用支持HTML5及CSS3的火狐或谷歌等浏览器预览。
Css选择器 _样式的继承 _样式的优先级 _两个关键属性 _块标记和行内标记 _一些常见的属性 _【案例】仿当当网首页;
该资源是我本人自学css时,系统地整理的一些关于css选择器的资料汇总拿出来与大家共享,如果需要转载请注明出处,如果表达有误,欢迎指出谢谢!
html2data 通过CSS选择器从HTML提取数据的库和cli-utility安装安装软件包和命令行实用程序: go get -u github.com/msoap/html2data/cmd/html2data仅安装软件包: go get -u github.com/msoap/html2data方法...
brackets-emmet-1.2.2 它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度 让web开发代码飞起来
CSS样式表中设置了多个样式规则,根据其对于HTML页面中元素的影响范围,将选择器分为: id选择器 类选择器 标签选择器 全局选择器 群组选择器 后代选择器 伪类选择器 …… 2 标签选择器,也称为元素选择器,可以为...
2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用‘,'逗号隔开可以选择...