CSS指层叠样式表(CascadingStyleSheets)_第1页
CSS指层叠样式表(CascadingStyleSheets)_第2页
CSS指层叠样式表(CascadingStyleSheets)_第3页
CSS指层叠样式表(CascadingStyleSheets)_第4页
CSS指层叠样式表(CascadingStyleSheets)_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、CSS指层叠样式表（Cascading Style Sheets） CSS语法由三部分组成：选择器、属性和值：Selector property: value  例：body color:blue;若值为若干单词，需加引号。 选择器分组 例：h1,h2,h3,h4 color:#ff0000;使这几个标题的颜色都是绿色的。 派生选择器 例：li strong      font-style:italic;指在li里的属性为strong的元素会变成斜体。 id选择器  以#定义#red color

2、:red;<p id="red“>这段是红色的<p>注：每个id属性只能在html中出现一次。#mm p color:red;#mm h1 color:green;作为派生选择器，指id为mm的段落是红色，h1标题是绿色的。注：id选择器作为派生选择器时，可出现多次。 类选择器 以一个点号显示.center text-align:center<h1 class="center">aaaaa</h1>注：类选择器的第一个字符不能是数字。td.fancy color: #f60;background: #666

3、;作为派生选择器，指类名为fancy的表格单元都是灰色背景的橙色。 如何插入样式表 3种方法外部样式表<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>注：外部样式表mystyle.css不包含任何html标签。内部样式表<head><style type="text/css">hr color:red;</style></head&

4、gt;内联样式<p style="color:sienna; margin-left:20px"></p>注：同一属性在不同样式表中被同样选择器定义，属性值将从更具体的样式表中被继承过来。（内部样式比外部具体） CSS背景背景色p backgroud-color:red;背景图像p backgroud-image:url(123.jpg);背景重复p backgroud-repeat:repeat;repeat是图像在水平垂直方向上都平铺，相当于添加整个背景图像。repeat-x是图像在水平方向上平铺，repeat-y是在垂直方向上。背景定

5、位p backgroud-position: center;其属性值可以为center,top,bottom,left.right，若只出现一个关键字，则认为另一个关键字是center。p backgroud-position:66% 33%;指将图像放在水平方向 2/3、垂直方向 1/3 处。p background-position:50px 100px;图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置。背景关联p backgroud-attachment:fixed;背景图像固定，不会随其他滚动。（就是你可以一直看到背景，它不会动）可以将所有背景属性放在一个声

6、明中：<head><style type="text/css">body background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; </style></head>  CSS文本缩进文本p text-indent:5em;使所有段落的首行缩进 5 em（即第一行开头距左边距有5em）使用负值p text-indent:-5em;段落的第一行的前5em的内容从左面超出了浏览器。p text-indent:-5em;padding-left:

7、5em;设置一个5em的内边距，第一行正常显示，其余行的开头距左边有5em距离。使用百分比值div width:500px;p text-indent:20%;<div><p>hello world!</p></div>缩进的长度为：百分比值乘以该元素的父元素的宽度。水平对齐p text-align:left;文本左对齐，还有center，right，justify（文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等）字间隔p word-spacing:3px;文本行中字（单词）间的间隔。（可以使用负值）字

8、母间隔p letter-spacing:3px;以上两种的默认值都是normal，和0一样。字符转换p text-transform:none;属性值：uppercase:全大写，lowercase:全小写，capitalize:每个单词的首字母大写。文本装饰p text-decoration:none;属性值：underline:下划线，overline:文本顶部一条线，line-through:横线从文本中间穿过，blink:使文本闪烁。注：none值会关闭原本应用到一个元素上的所有装饰。比如链接的下划线。p text-decoration:underline overline;可以这样使

9、文本同时拥有上下划线。 CSS字体注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。font用于将所有字体的属性值写到一个声明中。设置文本字体p font-family:Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。当一个字体名中有一个或多个空格（比如 New York

10、），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。设置字体大小p font-size:30;其他属性值：xx-small，x-small，small，medium，large，x-large，xx-large（默认值是medium）smaller：把 font-size 设置为比父元素更小的尺寸。larger：把 font-size 设置为比父元素更大的尺寸。inherit：规定应该从父元素继承字体尺寸。200%：把 font-size 设置为基于父元素的一个百分比值。设置字体风格p font-style:normal; （默认值）italic：浏

11、览器会显示一个斜体的字体样式。oblique：浏览器会显示一个倾斜的字体样式。inherit：规定应该从父元素继承字体样式。设置字体异体p font-variant:small-caps;浏览器会显示小型大写字母的字体。设置字体粗细p font-weight:bold;   (设置字体为粗体)bolder：定义更粗的字符。lighter：定义更细的字符。100900：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 CSS列表要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。设置列表标记类型 ul lis

12、t-style-type:disc;其他属性值：none：无标记。disc：实心圆。（默认值）circle：空心圆。square：实心方块。decimal：数字。decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman：大写罗马数字(I, II, III, IV, V, 等。)lower-alpha：小写英文字母。upper-alpha：大写英文字母。将图像作为列表标志ul list-style-image: url('/i/eg_arrow.gi

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论