首先提供两个手册的下载 CSS2&JavaScript.rar

一.样式表基础

1. 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类(class)、标识符(id)、伪类(pseudo class,它们标示了超链接的不同状态)等。

2. 将样式表(规则)添加到HTML文档中有3种方式:

① 外部样式表。

② 应用于整个文档的样式,位于<head>区,包括嵌入样式表和输入样式表。

③ 行内样式,通过绝大多数元素的style属性实现。

3. 样式表内的注释用/* …*/。通过将样式规则包围在HTML注释<!--    -->之间可以让那些不支持样式表技术的老浏览器也能正常工作而不是直接把样式规则显示在屏幕上。一般而言,浏览器会忽略不认识的元素和属性,但包围在元素之间的内容会显示出来。

4. 每一条规则必须以分号;结束。

5. 如果多个元素共享相同的样式规则,可以使用逗号将它们分组定义。这里分组的概念与分类(class)或标识符(id)的概念不同,前者设置的规则对整个文档中所有的该元素都起作用,而后者只对该元素的一个子集(class或id相同的)起作用。当成组规则和其他规则都涉及到同一个元素时,它们将被组合起来,以生成某个元素的完整的样式。

举例:成组规则的应用。

h1,h2,h3  {background : yellow; color : black;}

h1    {font-size : 200%;}

h2    {font-size : 150%;}

h3    {font-size : 125%;}

二.外部样式表

外部样式表通过在<head>区内使用<link>元素来引用,<link>元素有三大属性:

① rel:指明了链接关系,这里是stylesheet。

② href:指明了外部样式表的URL。

③ type:指明了样式表的类型,这里是text/css。(其他还有jss)

 

举例:外部样式表的引用方式。

<head>

<title>Style Sheet Linking Example</title>

<link rel = "stylesheet" href = "\css\css1.css" type = "text/css">

</head>

三.应用于整个文档的样式表

3.1 嵌入样式表

    嵌入样式表的使用方式是直接写在head区的style元素内,从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。

 

举例:嵌入样式表的使用。

<head>

<style type = “text/css”>

<!--

body {

font: 10pt;

font-family: Serif;

color: black;

background-color: white;

}

-->

</style>

</head>

3.2 输入样式表

       输入样式表也是引用一个外部样式表,但不是通过link元素而是在style区内通过@import语法来引用:@import url(css的url地址);可以在<style>元素内引用一些输入样式表,同时又指定一些只应用于本文档的样式。但是(Netscape)浏览器对输入样式表的支持还不普遍,所以建议使用<link>来引用外部样式表。

举例:输入样式表和嵌入样式表的联合使用。

<head>

<style type = “type/css”>

<!--

@import url(corerules.css);

@import url(linkrules.css);

/* a rule specific to this document */

h1{

font : 24pt;

font-family : Sans-Serif;

color : black;

text-align : center;

}

-->

</style>

</head>

四.行内样式

       绝大多数元素都有style属性。行内样式信息并不需要从不支持样式表的浏览器中隐藏,因为浏览器会忽略它们不理解的任何属性。

 

举例:行内样式的使用。

<h1 style = “font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1>

五.样式规则的辖域

以上讨论了样式表的存放位置,现在讨论样式表的作用范围,两者既有联系又有区别:行内样式规则自然决定了它的影响范围是当前元素,而其他样式规则可以灵活地设置规则的作用范围。

5.1 简单规则

最简单的规则不妨称它们为文档规则和行内规则。前者可以应用到整个文档中出现的所有的某元素(如所有的<p>元素),后者只应用到当前元素。

5.2 id规则

使用id属性的元素除了可以作为超链接的目标外(类似name属性,在载入页面时将显示定位在页面的指定位置),还可以用它来和样式表中的某个样式规则绑定(比name属性强的地方)。无论是作为超链接的href还是样式规则的选择符,引用id的格式为:#id值。在一个HTML文档中,id属性值必须全局唯一。

 

举例:id属性与超链接或样式表的结合使用。

如有<p id = “SecondParagraph”>…</p>,则可以如下引用:

<a href = “# SecondParagraph”>Go to SecondParagraph</a> 或者

<head>

<style type = “text/css”>

<!--

#SecondParagraph       {background-color : green;}

-->

</style>

</head>

5.3 class规则

和id属性一样,class属性也是HTML核心属性之一,多数元素都有该属性。class属性定义了一个元素所属类的名称。class取值不要求唯一,同一类元素的多个实例、多个不同类的元素都可能属于同一个类。使用类可以显著地减少文档中必需的样式规则的数量。样式规则中有两种引用class的格式:

① 为所有该类的元素设置样式:.类名{样式规则;}

② 为属于该类的所有X元素设置样式:X.类名{样式规则;}

举例:class规则的使用。

<style type = “text/css”>

<!--

.main-item {font-size:150%;}

h1.veryimportant {background-color:orange;}

-->

</style>

5.4 伪类(pseudo-classes)和伪元素(pseudo-elements

 

5.4.1 伪类

一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括:

① a:link:未访问链接

② a:visited:已访问链接

③ a:active:激活时(链接获得焦点时)链接的颜色

④ a:hover:鼠标移到链接上时

一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。

 

举例:伪类的常见状态值

<style type = “text/css”>

<!--

a:link {color: blue; text-decoration:none;}     //未访问:蓝色、无下划线

a:active:{color: red; }     //激活:红色

a:visited {color:purple;text-decoration:none;}       //已访问:purple、无下划线

a:hover {color: red; text-decoration:underline;}    //鼠标移近:红色、下划线

-->

</style>

5.4.2 伪元素

两个伪元素::first-letter和:first-letter。它们常常和像<p>这样的元素引导的一段文字一起使用,用来影响其中首字母或者首行的显示,如p:first-letter和p:first-line。

<style type = “text/css”>

<!--

p:first-line {background-color:yellow;}

p:first-letter{color:red;font-size:150%;}

-->

</style>

5.5 情景选择(contextual selection

情景选择允许对位于某嵌套层次内的某元素进行样式控制,该规则通过按照嵌套的顺序列出元素的名称,然后给出样式规则来创建。

举例:使所有出现在<p>元素内的<strong>元素都有黄色的背景颜色。

p strong {background-color : yellow;}

六.样式规则的继承与嵌套

该性质允许对元素的多种规则进行组合,既可以从父元素那里继承一些属性,也可以重写某些属性。层叠(CSS中的C)的一般思想有效地创建了一个系统以确定在有多个样式表的文档中哪些规则将被应用。例如,使用id属性为一个特定的<p>元素指定规则,这相对于通过class规则指定的规则具有优先权,而class规则相对于为<p>元素自身指定的规则有优先权。相对于应用于整个文档的样式或链接进来的外部样式,通过一个style属性指定的行内样式是更重要的。考虑究竟哪一个规则将最终生效的简单方法是:越专门的规则优先级越高,和标记位置越近的规则优先级越高。

    如果需要一个特定的规则永远不被后面的另一条规则重写,可以用!important声明。对希望绝不被忽略的规则,可以在这个规则的分号之前插入声明!important,它一定要放在规则的最后,分号之前的位置,否则将被忽略。另外,许多老版本的浏览器并不支持该声明。

举例:使用!important声明不被重写的规则。

P {color:red !important;font-size:12pt;}

<p style=“color:green;font-size:24pt;”}...</p>

<p>元素最终将以红色、24点大小显示。

继续:样式表(CSS:Cascading Style Sheets)简要教程[下]

来自:http://blog.csdn.net/tonywearme/

转载于:https://www.cnblogs.com/Hedonister/archive/2005/08/10/211771.html

样式表(CSS:Cascading Style Sheets)简要教程[上]相关推荐

  1. CSS (Cascading Style Sheets)

    CSS 是什么 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制 , 实现美化页面的效果 . 能够做到页面的样式和结构分离. 基本语 ...

  2. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性) 一.基本规则 1.css通常存储在样式表(style)中,用于定义如何显示HTML元素: 2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需 ...

  3. CSS(Cascading Style Sheets) 层叠样式表

    CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...

  4. 什么是CSS?Cascading Style Sheets

    通常称为CSS样式表或层叠样式表(级联样式表) 作用 为HTML标记语言提供了一种样式描述 即[设置HTML页面中的元素的位置.排版.样式外观等] 如文本内容(字体.大小.对齐方式等).图片的外形(宽 ...

  5. html5样式表,CSS3+HTML5_css,css3,html5,html5教程_html5,css,css3-站长之家

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不应该用在 ...

  6. CSS层叠样式表(Cascading Style Sheets)

    CSS简介 CSS全称为:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等. 使用CSS样式通过定义某个样式,可以 ...

  7. CSS 指层叠样式表 (Cascading Style Sheets) 和选择器

    CSS 指层叠样式表 (Cascading Style Sheets) 内联样式(行内样式) 在开始标记中通过style属性(attribute)来设置元素的样式.注意,这里的 property 指的 ...

  8. 【Python】解决Django Admin管理界面样式表(CSS Style)丢失问题

    [Python]解决Django Admin管理界面样式表(CSS Style)丢失问题 参考文章: (1)[Python]解决Django Admin管理界面样式表(CSS Style)丢失问题 ( ...

  9. CSS : Cascading Style Sheets

    作者:知乎用户 链接:https://www.zhihu.com/question/20077745/answer/137434995 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

最新文章

  1. windows扩展C盘空间
  2. JavaScript window.setTimeout() 的详细用法
  3. java循环基础知识_java基础知识—循环结构
  4. linux系统安装serv u,建立第一个可用的FTP服务器
  5. Java过滤器详细文档,简介,实例,应用
  6. [读书笔记] - 《深度探索C++对象模型》第6章 第7章
  7. SDL2 undefined reference to `SDL_Init' 问题
  8. 【转】outlook 2007 如何设置开机自动启动
  9. 深入理解 JVM 之 垃圾回收机制
  10. 冬夜读书示子聿 鉴赏
  11. 什么是模型管理和模型运维?
  12. JVM(6)之 二次标记
  13. 绿色版Mysql的安装配置
  14. 电脑端微信双开,教你两种简单的方法,上手即用!
  15. AutoCAD.NET学习笔记之绘制、插入图形和块
  16. 笃行致远,人大金仓荣获“2021年度卓越表现数据库”
  17. 基于随机共振算法的图像增强 黑暗图像视觉提升
  18. 数据库迁移之mysql到达梦数据库
  19. 与时间赛跑:微盟这次数据事件为啥需要这么长时间?
  20. windows xp 超级模仿windows Vista全攻略 一模一样的感觉

热门文章

  1. 【 Notes 】INS Preliminary Introduction
  2. Spartan-6的I/O时钟缓冲器
  3. python之路--网络编程之socket
  4. J2EE分布式框架之开发环境部署(上)
  5. 如何让history命令显示带时间
  6. Linux目录和文件中的常用命令(二)
  7. 关于jquery动态改变css样式后,对象获取不到的解决办法
  8. shell脚本替换文件中字符
  9. 使用yum管理软件包
  10. ASPNET服务器控件之一