JavaScript网页开发--三．CSS（级联样式表）

最新推荐文章于 2024-07-11 20:55:36 发布

weixin_33736832

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liyaonan/archive/2009/02/15/1390816.html

版权

l 什么是CSS

1. CSS是Cascading Style Sheets的简写，它除了可以轻松设置网页元素的显示位置和格式外，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。简而言之，CSS就是要对网页的显示效果实现与Word一样的排版控制。

l CSS的几种设置方式

1. 内嵌样式表（Inline styles）

u <meta http-equiv=”Content-Style-Type” content=”text/css”>

2. 嵌入样式表（Embedded style sheets）

u <head>

<!—

P{font-size:20pt; color:blue; font-family:华文仿宋; background-color:silver; text-decoration:underline }

</style>

</head>

u 在<style></style>标签对中定义的每条样式规则的基本格式如下：

u Selector{property：value；property：value；……}

l Selector：当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。

l Property：指定那些将要被修改的样式名称，即CSS属性，如color、font-size等。

l Value：赋给property的值，即CSS属性值。

3. 外部样式表（Linked style sheets）

u 首先编写一个test.css文件，文件中的内容如下：

P{font-size:20pt; color:blue; font-family:华文仿宋; background-color:silver; text-decoration:underline }

u 接着编写一个要使用这个样式表文件的网页文件，假设网页文件与test.css文件放置在相同的目录中，网页文件中的内容如下：

<html>

<head>

</head>

<body >

</body>

</html>

4. 输入样式表（imported style sheets）

u 可以使用CSS的@import声明将一个外部样式表文件（CSS文件）输入到另一个CSS文件中，被输入的CSS文件中的样式规则定义语句就成为了输入到的CSS文件的一部分。也可以使用@import声明将一个CSS文件输入到网页文件的<style></style>标签对中，被输入的CSS文件中的样式规则定义语句就成了<style></style>标签对中的语句。

u 使用@import声明的例子语句如下：

<!—

@import url(http://www.it315.org/style.css);

@import url(/stylesheets/style.css);

P{background:yellow;color;black}

-->

</STYLE>

l 样式规则的选择器

1. HTML selector

2. class selector

u 要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。

<p class=”stop”>paragraph1</p>

<p class=”warning”>paragraph2</p>

<p class=”normal”>paragraph3</p>

u 在样式表中，可以分别为某个HTML标签的各个类别定义样式规则：

<STYLE>

p.stop{color:red}

p.warning{color:yellow}

p.normal{color:green}

</STYLE>

u 在样式表中，可以为某个类别的所有HTML标签定义样式规则：

<STYLE>

.blueone{color:blue}

</STYLE>

<h1 class=”blueone”>蓝色的题目</h1>

<p class=”blueone”>蓝色的段落</p>

3. ID selector

u ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值，ID selector就是样式规则定义语句选择具有某一ID属性值的HTML元素。<span ID=”yellowone”>text here</span>

u 在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下：

<STYLE>

<!—

#yellowone{color：yellow}

-->

</STYLE>

u 经验总结：

l ID selector只能为单个HTML标签元素设置样式规则，因此具有一定的局限性，在CSS中应该尽量少用。JavaScript和CSS-P可以根据这个ID值来操作和定位这个特定的HTML标签，所以ID属性在JavaScript中会被广泛使用。

l 如果网页只在某种媒介上输出时，才需要对某个单一元素进行样式设置的话，应该使用ID selector代替直接设置HTML元素的style属性的内联样式表。

l 在网页中使用了嵌入和链接样式表后，对某个元素的显示效果需要对样式表中已定义的相关样式重新设定，这就要用到使用内嵌样式表来直接设置HTML元素的style属性。

4. 关联选择器

u 关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串，例如： P EM{background：yellow}其中的“P EM”就是关联选择器，它表示段落中的强调文本（<em></em>标签对中的内容）的背景为黄色，而其它地方出现的强调文本则不受影响。

u 关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权高，即使在P EM{background：yellow}的后面部分定义了如下样式规则：EM{background：green}但是，在段落标签（<p>）中定义的强调文本仍用黄色背景。

5. 组合选择器

u 为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（，）隔开。例如，h1，h2，h3，h4，h5，h6，TD{color：red；}

6. 伪元素选择器

u 伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于超链接标签（<a></a>）的正常状态（没有任何动作前）、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可使用伪元素选择器来定义。

u 使用伪元素作为选择器的样式规则定义格式：HTML元素伪元素{属性：值}

u 常用的伪元素：

l A：active选中超链接时的状态

l A：hover光标移动到超链接上的状态

l A：link超链接的正常状态（没有任何动作前）

l A：visited访问过的超链接状态

l P：first-line段落中的第一行文字

l P：first-letter段落中的第一个字母

u 类选择器与伪元素一起使用的格式：HTML元素类名：伪元素{属性：值}

l 样式规则的注释与有效范围

1. 样式表中的注释

u 使用“/*要注释的内容*/”格式进行注释，注释不能嵌套，例如，“/*xxx/*yyy*/xxx*/”这样的注释是不允许的。

2. 样式规则的继承

u 所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

3. 样式规则的优先级

u ID选择器>CLASS选择器>HTML标签选择器

u 内联样式表>嵌入样式表>链接样式表

l 用Microsoft Visual Studio .NET产生CSS

1. 产生内联样式表

2. 产生嵌入样式表

3. 产生外部样式表

4. 连接外部样式表

l 样式属性详解

1. 字体

u Font-family

u Font-size

l 绝对大小的设置为xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个，xx-small为最下取值，xx-large为最大取值。

l 相对大小的设置可以为larger或smaller。

l 相对单位有：px、mm、cm、in、pt、pc。

l 相对单位有：em、ex、%。

u Font-style

u Text-decoration

u Font-weight

u Font-variant

u Text-transform

u Color

l 三种表示方法：#RRGGBB、rgb（R、G、B）、red

u Font

l 例如，p{font：italic bold 12pt Times，serif}

2. 背景

u Background-color

u Background-image

l 例如，{background-image：url（”http://www.it315.org/logo.gif”）}

u Background-repeat

l 设置值：no-repeat、repeat、repeat-x、repeat-y

u Background-attachment

l 设置值：fixed、scroll

u Background-position

l 设置值：left、center、right、20px、top、center、bottom

u Background-

l 例如，TABLE{background：#00cc00 url（logo.Jpg）no-repeat bottom right}

3. 文本

u Word-spacing

u Letter-spacing

u Vertical-align

l 设置值：sub（下标）、super（上标）、top（与顶端对齐）、middle（居中）、bottom（与底端对齐）、相对于元素行高属性的百分比

u Text-align

l 设置值：left、right、center、justify

u Text-indext

u White-space

l 设置值：normal、pre、nowrap

u Line-height

4. 位置

u 位置属性就是指定元素的位置，它是CSS-P（Cascading Style Sheets Positioning）中的内容，CSS-P是CSS的一个扩展，它可用来控制任何网页元素在浏览器文档窗口中的位置。

u Position

l 设置值：absolute、relative、static

u Left

u Top

u Width

u Height

u Z-index

5. 布局

u Visibility

l 设置值：inherit、visible、hidden

u Display

l 设置值：block、inline、list-item、none

u Clip

l 例如，clip:rect(top,right,bottom,left)

u Overflow

l 设置值：visible、hidden、scroll、auto

u Float

l 设置值：left、right、none

u Clear

l 设置值：left、right、none、both

u Page-break-before

l 设置值：always

u Page-break-after

l 设置值：always

6. 边缘

u Margin（margin-top、margin-right、margin-bottom、margin-left）

l 例如，P{margin：2em 4em}

u Padding（padding-top、padding -right、padding -bottom、padding -left）

u Border-width（border-top-width、border-right-width、border-bottom-width、border-left-width）

l 设置值：thin、medium、thick或数值

u Border-color（border-top- color、border-right- color、border-bottom- color、border-left- color）

u Border-style（border-top-style、border-right-style、border-bottom-style、border-left-style）

l 设置值：none、dotted、dashed、solid、double、groove、ridge、inset、outset。

u Border（border-top、border-right、border-bottom、border-left）

l 例如，A：active{border:thick double red}

7. 列表

u List-style-type

l 设置值：dsc（实心圆）、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无项目符号）

u List-style-image

u List-style-position

l 设置值：inside（内部）、outside（外部）

l List-style-Position等于outisde的显示效果：

l *主题1

l 这是主题1的第二行，缩进显示在列表标记符（*）的下面

l *主题2

l List-style-Position等于inside的显示效果：

l *主题1

l 这是主题1的第二行，缩进显示在列表标记符（*）的下面

l *主题2

u List-style

8. 其他

u Cursor

l 设置值：hand（手型）、crosshair（“十”型）、text（“I”型）、wait（等待）、default（默认）、help（帮助）、e-resize（东箭头）、ne-resize（东北箭头）、n-resize（北箭头）、nw-resize（西北箭头）、w-resize（西箭头）、sw-resize（西南箭头）、s-resize（南箭头）、se-resize（东南箭头）和auto（自动）

u Filter

9. CSS滤镜

转载于:https://www.cnblogs.com/liyaonan/archive/2009/02/15/1390816.html

weixin_33736832

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript网页开发--三．CSS（级联样式表）

l 什么是CSS1. CSS是Cascading Style Sheets的简写，它除了可以轻松设置网页元素的显示位置和格式外，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。简而言之，CSS就是要对网页的显示效果实现与Word一样的排版控制。l CSS的几种设置方式1. 内嵌样式表（Inline styles）...
复制链接

扫一扫