CSS1-设置文本和背景

1、 p color ：#0077ff ； font-size:18px； color ：#223344 ； font-size:14px； H1 color:red;/* 红色 */ font-size:25px;/* 文字大小 */ 这是h1标题 这是p标记正文 这是h1标题 这是h3标题 说明：如果希望所有h1标记不再采用红色，仅仅需要修改属性color的值即可全 部生效。 h1 color:red; font-size:25px; 这是h1标题 这是p标记正文 这是这是h1标题标题 这是h3标题 这是这是h3标题标题 定 义 类 别 样 式 应 用 类 别 到 某 标 记 u两种选择器的区

2、别：标记选择器的样式不需应用，相应标记会自动产生 效果，而类别样式需要在标记中应用才能产生效果，类别样式可应用在所 有标记中，其应用方法是在标记中加上：Class=“类别名称” h1 color:red; font-size:25px; . Blue color:blue; font-size:16px; #pos1 position:absolute; top:100px; right:100px 这是h1标题 这是p标记正文 这是h1标题 这是h3标题 这是h3标题 标题应用#pos1样式前标题应用#pos1样式后 正文内容正文内容1 正文内容正文内容2 正文内正文内 容容3 说明： 行内

3、样式是同标记一起出现在文档 中，只在本标记中有效。 1. 行内样式遍布于整个html文档中， 很难维护，因此要尽量避免使用行 内样式。 页面标题页面标题 这是第这是第1行正文内容行正文内容 这是第这是第2行正文内容行正文内容 这是第这是第3行正文内容行正文内容 声明p标记的样式规 则，那么文档中所有 p标记的内容都会应 用相同的规则。 光盘光盘07-06.html： 页面标题页面标题 CSS标题标题 这是正文内容这是正文内容 CSS标题标题 这是正文内容这是正文内容 h2 color:#0000FF; p color:#FF0000; text- decoration:underline; f

4、ont-weight:bold; font-size:15px; 应用了外部样式表的网页应用了外部样式表的网页 页面标题页面标题 CSS标题标题 这是正文内容这是正文内容 CSS标题标题 这是正文内容这是正文内容 应用了外部样式表的网页应用了外部样式表的网页 页面标题页面标题 p color:blue; import url(red.css); 观察文字的颜色观察文字的颜色 如：如： h1, h2, h3, p，#p1 color:purple;/* 文字颜色文字颜色 */ font-size:15px;/* 字体大小字体大小 */ 等同于：等同于： h1 color:purple ;font

5、-size:15px; h2 color:purple ;font-size:15px; h3 color:purple ;font-size:15px; p color:purple ;font-size:15px; #p1 color:purple ;font-size:15px; Css样式定义前样式定义前 Css规则：规则： 无标题文档无标题文档 p color:red; font-size:26px; p span color:blue; font-weight: bolder; Span color:green; 总结：后代选择器的妙用总结：后代选择器的妙用 在构建网页的在构建网页

6、的html时，通常只给外层标记（父标记）定义一个类别名或时，通常只给外层标记（父标记）定义一个类别名或id名称，内层标记名称，内层标记 则可以通过后代选择器来定义其样式，而不需要再为其定义新的类别和则可以通过后代选择器来定义其样式，而不需要再为其定义新的类别和id名。名。 重要重要 其其Html代码如下：代码如下： 哈哈哈哈 哈哈哈哈哈哈哈哈 哈哈哈哈哈哈 哈哈哈哈 哈哈哈哈哈哈哈哈 哈哈哈哈哈哈 互联网发展的起源 A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken fr

7、om RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969. 1969年，为了保障通信联络，美 国国防部高级研究计划署ARPA资助建立了世 界上第一个分组交换试验网ARPANET，连接 美国四个大学。ARPANET的建成和不断发展 标志着计算机网络发展的新纪元。 无标题文档 H1 font:“黑体; P font-family: Courier New, Courier, monospace 注意：有关艺术字体在大多数机器上都无法显示，最安全的方法是把美术字注意：有关艺术字体在大多数机器上都无法显示，最安全的方法是把美术字 体做成图片

8、插入到网页中。体做成图片插入到网页中。 #p1 font-style: italic 注意：font-style属性值有三个：具体看课本130页。 #p1 font-style:italic; font-weight: bolder ：首字母大写； Lowercase：全部小写； 1. Uppercase：全部大写； #p1 font-style:italic; font-weight: bolder; text-transform: uppercase; #p2 text-transform:lowercase; 1、Css样式设置如下：样式设置如下： font-size:3em; floa

9、t:left 解释：后代选择器设置了解释：后代选择器设置了p标记下的标记下的span 标记内容应用该样式。标记内容应用该样式。 2、Html代码修改如下：代码修改如下： A very simple ascii 1 969年，为了保障通信联络年，为了保障通信联络 CSS设置如下: P color：red; P span font-weight:bold; color：blue; h1 font-family:黑体黑体; text-decoration: overline underline; #p2 text-indent:2em; #p1 letter-spacing:3px; word-sp

10、acing:10px; #p2 word-spacing:3px; #p2 line-height:30px; 30px 30px 互联网发展的起源互联网发展的起源 H1 background:#678; color:white; 美丽的阳朔美丽的阳朔 创建创建CSS样式如下：样式如下： . test1 border: #009 3px dotted . test2 border: #F00 2px solid 应用应用CSS样式前样式前 应用应用CSS样式后样式后 .test1 width:250px; .test2 width:50%; height:50% 美丽的阳朔美丽的阳朔 美丽的阳

11、朔美丽的阳朔 阳阳朔县（英文名：朔县（英文名： Yangshuo），电话区码：），电话区码：0773 ，邮编区，邮编区 码：码：541900 阳朔县位于广西壮族自治阳朔县位于广西壮族自治 区东北部，桂林市区东南面，地处东经区东北部，桂林市区东南面，地处东经110。 13-110。40，北纬，北纬24。3825。04之间。之间。 隶属广西桂林市隶属广西桂林市,位于漓江西岸位于漓江西岸,风景秀风景秀 丽。建县始于隋开皇十年（公元丽。建县始于隋开皇十年（公元590年），年）， 距今已距今已1400余年。县城距桂林市区余年。县城距桂林市区65公里，公里， 距自治区首府南宁距自治区首府南宁445公公 里

12、。里。 盒子可以是所有的盒子可以是所有的html元素，比如图片、表格、甚至是文字。元素，比如图片、表格、甚至是文字。 .test1 width:250px; .test2 width:150px; float:right; p font-size:13px; span font:3em 华文琥珀华文琥珀; float:left; .test1 width:250px; .test2 width:30%; float:right; margin-left:20px; margin-bottom:10px p font-size:13px; line-height:1.5 span font:3e

13、m 华文琥珀华文琥珀; float:left; margin-right:10px .test1 width:250px; background-color:黄色黄色; span background-color: 黑色黑色; color:白色白色 padding:5px 美丽的阳朔美丽的阳朔 阳阳朔县（英文名：朔县（英文名： Yangshuo），）， 准备几个背景图像：准备几个背景图像： bg-2.jpgbg-5.jpg bg-1.jpg body background-image: url(pic/bg-2.jpg) .test1 background-image:url(pic/bg-1

14、.jpg) span background-image: url(pic/bg- 5.jpg) 美丽的阳朔美丽的阳朔 阳阳朔县（英文名：朔县（英文名： Yangshuo），）， bg-g.jpg 准备一个带渐变的背景图像准备一个带渐变的背景图像: body background-image: url(pic/bg-g.jpg) ; background-repeat:repeat-x; background-color:#CCC 案例案例1：设置网页背景图像位置在浏览器左下角：设置网页背景图像位置在浏览器左下角 body background-image: url(pic/cup.gif);

15、background-position: bottom left; background-repeat:no-repeat 案例案例2：设置网页背景图像位置在浏览器顶部：设置网页背景图像位置在浏览器顶部100px、 左侧左侧50px处。处。 body background-image: url(pic/cup.gif); background-position: 50px 150px; background-repeat:no-repeat 标题替换前标题替换前用图片替换标题用图片替换标题 美丽的阳朔美丽的阳朔 阳阳朔县（英文名：朔县（英文名： Yangshuo），电话区码：），电话区码：07

16、73 ，邮编区码：，邮编区码： 541900 阳朔县位于阳朔县位于 2、把制作好的图像作为、把制作好的图像作为h1的背景图片，不平铺、水平居中：的背景图片，不平铺、水平居中： .test1 background-image:url(pic/h1.gif); background-repeat:no-repeat; background-position:center 1、制作一个标题背景图像、制作一个标题背景图像: h1.gif 3、用在、用在h1标题里加入一对标题里加入一对标记，并利用标记，并利用visibility属性将属性将h1文字文字 内容隐藏，代码如下：内容隐藏，代码如下： 美丽的阳

17、朔美丽的阳朔 阳阳朔县（英文名：朔县（英文名：Yangshuo），电话），电话 区码：区码：0773 ，邮编区码：，邮编区码：541900 阳朔县位于阳朔县位于 h1 span visibility:hidden 注意：在命名选择器时要把注意：在命名选择器时要把h1的的span和网页里其他的和网页里其他的 span区分开来，否则会把网页上区分开来，否则会把网页上span标记都设置不标记都设置不 可见了。可见了。 准备一个背景图像：准备一个背景图像： bg-slide.gif 标题标题标标题标题标题标题标题标标题标题标题 标题标题标标标题标题标标 标题标标题标 2、然后，分别对、然后，分别对和和

18、设置设置CSS样式如下：样式如下： div background-image:url(pic/bg-slide.gif); background-position:left; background-repeat:no-repeat; padding-left:40px ; /*添加边框线用于查看标记的边界添加边框线用于查看标记的边界*/ border:#F00 dotted 1px; h3 background-image:url(pic/bg-slide.gif); background-repeat:no-repeat; background-position:right; padding-right:40px;