CSS技术
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图6.10 设置段落中首行文本悬挂缩进
1.9
设置字词间距
在CSS中，可以通过letter-spacing和 word-spacing这两个属性分别控制字母间 距和单词间距。例如下面的代码，实例文 件为“10-10.html”。
#p1{
font-style:italic; text-transform:capitalize; word-spacing:10px; letter-spacing:-1px;
优点：适合单一的 页面。 缺点：对于一个包 含很多页面的网站， 且这些页面中有许 多共同的格式 的 情况，这种方式不 适合
以下两种方式都是：将一个独立的CSS文件引入HTML文件中， 二者的区别不大。 3.链接式 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
none underline line-through
overline
blink
为文字加顶线
文字闪烁，仅部分浏览器支持
1.8
设置段落首行缩进
Text-indent属性是以各种长度为属性 值，为了缩进两个字的距离，最经常用的 是“2em”这个距离。 例如，对网页代码的p2段落进行如下 设置，实例文件为“10-08.html”。
2.2.3
ID选择器
ID选择器的用法与class选择器的基本相同：不同之 处在于ID选择器只能在HTML页面中使用一次，其针对 性更强！
声明 声明
#id
{
{color: yellow; 属性 值
font-size: 30 px; 属性 值
}
}
ID 选 择 器
图2.6 ID选择器
<html> <head> <title>ID选择器</title> <style type="text/css"> #bold{ font-weight:bold; /* 粗体 */ } #green{ font-size:30px;/* 字体大小 */ color:#009900; /* 颜色 */ } </style> </head> <body> <p <p <p <p </body> </html>
图6.4 设置文本倾斜后的效果
1.4
设置文字的加粗效果
然而遗憾的是，实际上大多数操作系 统和浏览器还不能很好地实现非常精细的 文字加粗设置，通常只能设置“正常”和 “加粗”两种粗细，分别如下。 font-weight:normal /*正常*/ font-weight:bold /*加粗*/
1.5
用CSS设置文本
6.1 使用CSS设置文本样式
在学习HTML的时候，通常也会使用 HTML对文本进行一些非常简单的样式设置， 而使用CSS对文本的样式进行设置远比使用 HTML灵活、精确得多。
1.1
创建基础页面
创建一个基本的网页，如图所示。
图6.1 预备用于设置CSS样式的网页文件
1.2
设置文字的字体
控制文字的大小
p{ font-family: Arial, "Times New Roman"; font-size:12px;}
图6.6 设置了正文文字的大小为12像素
1.7
设置文字装饰效果
表6.2
设 置 值
text-decoration属性设置
说 明 正常显示 为文字加下划线 为文字加删除线
（4）将所有中文的段落设置为：紫色、 加粗。
（5）将网页中的英文设置为单词首字大 写，英文的词距设置为8像素。 （6）将各英文段的最后一句。设为：红 色，20像素，倾斜的效果。
（7）将牡丹篇中的“国色天香”设为： 绿色、加粗，加删除线。
（8）将牡丹篇中的第一个段落设为首字 下沉，下沉行数为2行。
2.2.1
标记选择器
<style> h1{ color: red; font-size: 25px; } </style>
声明
声明
h1
{
{ color: red;
font-size: 25 px;
}
}
选择器
属性
值
属性
值
图2.1 CSS标记选择器
2.2.2
类别选择器
标记选择器一旦声明，那么页面中所有的该标记都 会相应的产生了变化。例如对于“flower.html”中 的<p>标记进行以下设置： p{ color: blue; font-size: 18px; } 将会发现页面中所有<p>标记处都显示18磅蓝色字。 如何需要某些段落不是蓝色，而是其他的格式 设置（如绿色、20磅等），怎么操作？
图6.2 设置正文字体
6.1.3
设置文字的倾斜效果
图6.3 正常字体与“意大利体”，及“倾斜体”的对比
CSS中的font-style属性正是用来控制 字体倾斜的，它可以设置为“正常”、 “意大利体”和“倾斜”3种样式，分别如 下： font-style:normal; font-style:italic; font-style:oblique;
4.导入式 <style type="text/css"> @import="mystyle.css" </style>
案例
花卉世界
案例分析
用CSS样式定义的方法（要求用内嵌式），按下面要 求对网页的文字进行设置。 （1）将网页中的标题1设为：文字大小为30像素、 黑体、白色、水平居中、背景为蓝色。
在HTML中，设置文字的字体需要通过 <font>标记的face属性。 而在CSS中，则使用font-family属性。 针对上述网页，在样式部分增加对<p>标记 的样式设置如下，实例文件为“1001.html”。
<style type="text/css"> h1{ font-family:黑体; } p{ font-family: Arial, "Times New Roman"; } </style>
把左面表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; }
CSS的思想就是首先指定对什么“对象” 进行设置，然后指定对该对象的哪个方面 的“属性”进行设置，最后给出该设置的 “值”。 因此，概括来说，CSS就是由3个基本 部分——“对象”、“属性”和“值”组 成的。
“结构”、“表现”和“行为”分别对 应于3种非常常用的技术，即 (X) HTML、 CSS和JavaScript。
作品
<ul>
名称 宣传语 简介 链接 联络方式
<h1> <h2> <p> <ul> <p> <p>
图1.4 仅使用HTML定“结构”的页面效果
图1.5 使用CSS设定样式之后的效果
2.1 CSS的基本概念
1.网页的组成
网页主要由3个部分组成：结构（Structure）、 表现（Presentation）和行为（Behavior）。
(X )HTML
事件 控制结构
Javascript
结构
行为
控制样式 CSS 表现
“结构”决定了网页“是什么”，“表 现”决定了网页看起来是“什么样子”， 而“行为”决定了网页“做什么”。
思考 如果将<style>…</style>中css样式放置在外部样式表中，如何 处理？
2.2 基本CSS选择器
在CSS的3个组成部分中，“对象”是 很重要的，它指定了对哪些网页元素进行 设置，因此，它有一个专门的名称——选 择器（selector）。
基本选择器 标记选择器 类别选择器 ID选择器 交集选择器 复合选择器 并集选择器 后代选择器
如何构造CSS规则？ 在具体介绍CSS之前，先思考一个生活中的问题。 张飞 {
对象 属性 对象名
身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族;
属性值
}
这个表实际上是由3个要素组成的，即姓名、属性和属性值。
2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }
对上述网页代码的#p1和#p2两个段落 分别设置如下，实例文件为“1004.html”。
#p1{ font-style:italic; text-transform:capitalize; } #p2{ text-transform:lowercase; }
图6.5 设置英文单词的大小写形式
1.6
可以使用“类别选择器”
类别名称 .class 声明 声明
{
color: green;
font-size: 20px; 属性 值
}
类别选择器
属性
值
图2.2 类别选择器
<html> <head> <title>class选择器</title> <style> .red{ color:red; font-size:18px; } .green{ color:green; font-size:20px;} </style> <body> </head> <p class="red">class选择器1</p> <p class="green">class选择器2</p> <h3 class="green">h3同样适用</h3> </body> </html>
CSS核心基础
制作网页的基础是使用HTML（Hyper Text Markup Language），其核心思想是需 要设置什么样式，就使用相应的HTML标记或 者属性。 然而仅仅依靠HTML会遇到很多不可解决 的问题，为此，HTML逐步地发展到了XHTML， 与此同时，CSS也应运而生。
麻烦！
flower.html
#p2{
text-indent:2em; }
这里再举一个不太常用的例子，如果 希望首行不是缩进，而是凸出一定距离， 也称为“悬挂缩进”，请看如下代码，实 例文件为“06-0源自文库.html”。 #p2{ padding-left:2em; text-indent:-2em; }
图6.9 设置段落中首行文本缩进
在HTML中引入CSS的方法
有四种： 1.行内式 如： <p style="color:#FF0000; font-size:25px; text-decoration:underline;">正文内容1</p>
2.内嵌式 集中写在<style>与</style>中，常常 放置在<head>和</head>内。 如：p{color:#FF0000; font-size:25px; text-decoration:underline; }
Q:发现 比较美观，如何设置？
标题上下端应留一些边距
A:可以设置内边距，例如内边距设为15像素
（2）将网页中的标题3设为：文字大小 为22像素、隶书、绿色、加上顶线和 下划线。 （3）将各段落设置为：文字大小为16像 素、首行缩进2个字符、段内行高为字 体大小的1.5倍、段距为5像素。
为了看清楚设置段落之间的距离，我们先来为每个段落添加 一条红色的边框。
转换英文字母大小写
例如下面3个文字段落分别可以实现单 词的首字母大写、所有字母大写和所有字 母小写。
p.one{ text-transform:capitalize; } /* 单词首字母大写 */ p.two{ text-transform:uppercase; } /* 全部大写 */ p.three{ text-transform:lowercase; } /* 全部小写 */
id="blod">ID选择器1</p> id="green">ID选择器2</p> id="green">ID选择器3</p> id="bold green">ID选择器4</p>
在ID选择器中这种 写法完全错误！
思考
什么时候用class选择器，什么时候用id选择 器呢？
W3C标准这样规定的，在同一个页面内， 不允许有相同名字的id对象出现，但是 允许相同名字的class。这样，一般网站 分为头，体，脚部分，因为考虑到它们 在同一个页面只会出现一次，所以用id， 其他的，比如说你定义了一个颜色为red 的class，在同一个页面也许要多次用到， 就用class定义。另外，当页面中用到js 或者要动态调用对象的时候，要用到id。
使用css的方法，来设置flower.html的文本格式
一些问题
• 如果我还有其他的一些网页，也需要对<P> 标记的文本设置同样的格式，怎么办？ 使用css的方法有几种？（见下页） • 如果我们希望不同的段落设置不同的格式 效果，如何处理？ 除了有标记选择器，还有哪些css选择器？ （见“基本的css选择器”）