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>

<style type=”text/css” media=”screen,projection”>

<!—

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>

<link rel ="stylesheet" href ="test.css" type ="text/css" media ="screen" />

</head>

<body >

<p>this is a css test.</p>

</body>

</html>

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

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

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

<STYLE TYPE=”text/css” MEDIA=”screen,projection”>

<!—

@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

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

  1. css级联样式表_CSS –级联样式表| 第三部分

    css级联样式表 CSS2雄心壮志 (CSS2 ambitions precipitated) To meet the first specification does not cover even ...

  2. css级联样式表_CSS –级联样式表| 第1部分

    css级联样式表 CSS –级联样式表 (CSS – Cascading Style Sheets) CSS (Cascading Style Sheets) is a computer langua ...

  3. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  4. 前端网页开发常用兼容css代码

    前端网页开发常用兼容css代码 /* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt ...

  5. css sheet2.0,详解CSS3.0(Cascading Style Sheet) 层叠级联样式表

    CSS3.0(Cascading Style Sheet) 层叠级联样式表 快速入门: CSS01 h1 { color: red; } 标题一 CSS的三种导入方式: 行内样式(优先级最高,但不建议 ...

  6. 外联样式表添加到html中,CSS联样式表之内联式、外联式和嵌入式

    CSS 全称级联样式表 (Cascading Style Sheets),在实际应用中,一般有以下三种级联方式. 1. 外联式 外联式样式表中,CSS 代码作为文件单独存放,如以 style.css ...

  7. 级联样式表_级联样式表| 第1部分

    级联样式表 级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS (Cascading Style Sheets) is a computer language ...

  8. css基本样式表_基本的即用型CSS样式

    css基本样式表 View demo 查看演示Download Source 下载源 Today we are going to dig a little bit more into process ...

  9. react 组件添加样式_如何通过4个简单的步骤将CSS模块样式表添加到React组件

    react 组件添加样式 Let's say you'd like to add a CSS Modules Stylesheet to your project. You can find Crea ...

  10. TABLE 的css的样式表

    TABLE 的css的样式表 <script></script> 标签:css it    TABLE 的css的样式表 ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

最新文章

  1. 存储系统的类型及特点
  2. Python入门100题 | 第023题
  3. C++中利用WebService下载文件
  4. matlab中矩阵怎么敲_Ansys刚度(质量、阻尼)矩阵的提取(part 1)
  5. vst3插件_Steinberg发布新的VST 3.7 SDK，音乐软件开发者速来围观
  6. 二分法的计算机应用,二分法（数学领域术语）_百度百科
  7. GO学习第三天——自定义包
  8. 有赞零售财务中台架构设计与实践
  9. kafka : CommitFailedException Commit cannot be completed since the group has already rebalanced
  10. 32 配置引脚中断_PCIe的中断机制
  11. Linux基础-06-vi编辑器
  12. 给自己的逆向工程阶段性学习感想总结
  13. Django教程 —— 站点后台管理
  14. 如何创建一个基本的魔兽全图外挂 HowTo create a basic Maphack by Chaotic
  15. 视频提取关键帧的三种方式【已调通】
  16. LabVIEW学习心得
  17. 用ansible自动化搭建web、sql服务器、lvs调度器
  18. OLE操作EXCEL
  19. 京东活动+自动运行脚本+签到2021.05.26更新
  20. 告别CSDN，转去博客园（http://www.cnblogs.com/organic/）

热门文章

  1. Java加载Class文件的原理机制
  2. python之Character string
  3. Java应用中使用ShutdownHook友好地清理现场
  4. POJ 2449 Remmarguts' Date （SPFA + A星算法） - from lanshui_Yang
  5. 使用谷歌统计来跟踪网页加载时间
  6. delphi 创建一个纯文本文件
  7. php中的http是什么意思,请问php中三种http请求方式有什么区别呢（cURL，stream，socket）...
  8. mysql复制(高可用架构方案的基础)
  9. 关于-最佳的业务连续性容灾架构设计
  10. getchar()细节