CSS 基本样式规则
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第十章 用CSS美化页面元素
用CSS设置丰富的文字效果
CSS文字样式 模拟Google公司Logo实例 CSS段落文字 百度搜索实例
1.CSS文字样式
字体 文字大小 文字颜色 文字粗细 斜体 变体 文字的下划线 综合字体
1.CSS文字样式
字体:font-family 除了利用HTML的标记来设置字体外，也 可以用CSS的font-family属性来设置需 要的字体。 基本语法：
文字下划线等效果 : text-decoration 属性，主要完成文字加下划线、顶线、 删除线及文字闪烁效果。
font设置综合字体属性
font 属性是一种复合属性，可以同时对文字设 置多个属性。包括字体族科、大小、风格、加 粗及字体变体。
基本语法： • font: font-style font-weight font-variant font-size/line-height font-family 语法说明： • 如果要利用 font 属性，同时设置多个文字属性时，属性 与属性之间必须利用空格隔开； • 前三个属性次序不定或者省略，默认为normal； • 大小和字体系列必须显式地指定，先设置大小，再设置 字体系列，字体系列如果有多个，以逗号分割； • 行高必须直接出现在字体大小后面，中间用斜杠分开， 行高是可选的属性； • font属性是继承的。
letter-spacing字符间距
letter-spacing
• letter-spacing 字符间距属性，可以设置字 符与字符间的距离。
基本语法
• letter-spacing：normal | 长度单位
语法说明：
• normal 表示默认值，此处的长度单位可使用 负数
实例
line-height行距属性
1.CSS文字样式
文字大小:font-size
英寸(in)
厘米(cm) 毫米(mm) 磅(pt)
字体高(em) 字母x的高(ex)
像素(px)
百分比(%)
1.CSS文字样式
文字大小:font-size 语法说明：
• 绝对大小：是以pt为单位，以绝对大小的 方式来设置字号。可以指定关键字来指定 大小，如： font-size属性的关键字（ xxsmall | x-small | small | medium | large | x-large | xx-large ）。不过这 些关键字，在不同的设备下，可能会显示 不同的字号。
书本166页实例
4.百度搜索实例
二、用CSS设置图片效果
• 图片样式
• 图片边框 • 图片缩放
• 图片对齐
• 横向对齐 • 纵向对齐
• 图片混排
• 文字环绕 • 设置图片与文字间的间距
1.CSS文字样式
文字变体: font-variant，CSS中的字 体变体主要用于设置英文字体。
基本语法： • font-variant:normal | small-caps 语法说明： • normal 表示默认值， small-caps 表示英文字 体显示为小型的大写字母。
1.CSS文字样式
<body>
/* 在父标记的基础上200% */
/* 在父标记的基础上×0.5 */
<p class="one">文字大小<span>相对值</span>，15px。</p> <p class="two">文字大小<span>相对值</span>，30px。</p>
</body> </html>
1.CSS文字样式
Vertical-align垂直对齐
text-align属性可以控制段落文字的垂 直对齐方式，对于文字本身而言，该属 性对于块级元素并不起作用，但对于表 格而言，这个属性很重要。
基本语法： • Vertical-align：top | bottom | middle |
text-transform转换英文大小写
文字样式 : font-style属性来达到字体 变化的效果。
基本语法： • font-style:normal | italic | oblique 语法说明： • normal 为默认值，一般以浏览器默认的字体 来显示，italic为斜体效果，oblique为歪斜 体效果。
1.CSS文字样式
文字加粗 : font-weight 属性来设置字体 的粗细。
<p class="p6">设置字号为x-large</p></body></html>
1.CSS文字样式
文字大小:font-size 语法说明：
• 相对大小：利用百分比或者 em( 当前字母 中，字母的宽度 ) ，以相对父元素大小的 方式来设置大小。例如指定 font-size 的 属性值时父元素的 1.5em 或 150% ，或者使 用相对关键字 (larger | smaller) 来指定。
<!--程序10-10--> <html><head><title>设置字号的相对大小</title> <style type="text/css"> <!--
p{font-size:14px;}
.b{font-size:200%;} --> </style> </head> <body> <p>设置字号的相对大小</p>
利用text-transform属性可以转英文大小写。
基本语法： • text-transform ： uppercase | lowercase | capitalize | none 语法说明： • uppercase 表 示 使 所 有 单 词 的 字 母 都 大 写 ， lowercase 表 示 使 所 有 单 词 的 字 母 都 小 写 ， capitalize 表 示 使 每 个 单 词 的 首 字 母 大 写 ， none表示默认值。
line-height是用来设置行与行之间的距离。
基本语法： • line-height：normal | 比例 | 长度单位 | 百 分比 语法说明： • normal 为 默 认 值 ， 比 例 是 倍 数 ， 相 对 于 元 素 font-size 的几倍大小，长度单位和百分比请参 考说明，此处的长度单位可使用负数。
3.CSS 段落文字
text-indent首行缩进属性 letter-spacing字符间距属性 line-height行距属性 text-align水平对齐属性 text-transform转换英文大小写
text-indent首行缩进
text-indent
• text-indent 首行缩进属性，通常被用来 指定一个段落，第一行文字缩进的距离。 基本语法： • text-indent：长度单位 | 百分比单位 语法说明：
• font-family:字体一，字体二，字体三… 语法说明： • 上面的语法定义了几种不同的字体，并用逗 号隔开，当浏览器找不到字体一时，将会用 字体二代替，以此类推，当浏览器完全找不 到字体时，则使用默认字体（宋体）。
<!--程序10-8--> <html> <head><title>设置字体</title> <style type="text/css"> <!-.p1 {font-size:16px; font-family:黑体,草书,宋体;} .p2 {font-size:16px; font-family:琥珀,草书,宋体;} --> </style></head><body> <p class="p1">设置字体的顺序为，黑体，草书，宋体
<p class="b">设置字号的相对大小</p>
</body></html>
<html> <head>
<title>文字大小_相对值</title>
<style> <!-p.one{ font-size:15px; /* 象素，因此实际显示大小与分辨率有关，很常用的方式 */
} p.one span{ font-size:200%; } p.two{ font-size:30px; } p.two span{ font-size: 0.5em; } --> </style> </head>
<!--程序10-9--> <html><head><title>设置字号的绝对大小</title><style type="text/css"> <!--
p{color:blue}
.p1 {font-size:xx-small} .p2 {font-size:x-small} .p3 {font-size:small} .p4 {font-size:medium}
<!-p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } --> </style> </head> <body> <p><span class="g1">G</span><span class="o1">o</span> <span class="o2">o</span><span class="g2">g</span> <span class="l">l</span><span class="e">e</span></p> </body> </html>
基本语法： • font-weight ： normal | blod | bolder | lighter | 100-900 语法说明： • normal 表 示 默 认 字 体 ， bold 表 示 粗 体 ， bolder表示粗体再加粗，lighter表示比默认 字体还细， 100-900 共分为九个层次（ 100 、 200…… 、 900 ），数字越小字体越细、数字 越大字体越粗。
实例
text-align水平对齐
text-align属性可以控制文字段落的水平 对齐方式。
基本语法： • text-align ： left | right | center | justify 语法说明： • left为默认值，right表示右对齐，center表 示居中对齐，justify表示左右对齐。
.p5 {font-size:large}
.p6 {font-size:x-large} --> </style></head><body>
<p class="p1">设置字号为xx-small</p>
<p class="p2">设置字号为x-small</p> <p class="p3">设置字号为small</p> <p class="p4">设置字号为medium</p> <p class="p5">设置字号为large</p>
<p class="p2">设置字体的顺序为，琥珀，草书，宋体
</body></html>
写一写
1.CSS文字样式
文字大小:font-size 可以用<font size=值>标记来设置文字 的大小。在CSS里，利用font-size属性 来设置字号。 基本语法：
• font-size：绝对大小 | 相对大小
<p class="p2">本行文字以黑体斜体25像素大小加粗来显示</p>
</body></html>
2.模拟GOOGLE公司LOGO实例
<html> <head>
Span没有结构上的意义，纯粹是应用样式， <title>Google</tiBaidu Nhomakorabeale> 当其他行内元素都不合适时，就可以用它。 <style>
<!--程序10-15--> <html> <head><title>font字体设置</title> <style type="text/css">
<!-.p1{ font-family:黑体; font-size:25px;font-weight:bolder;} .p2{ font:italic 25px 黑体;} --> </style></head> <body> <p class="p1">本行文字以黑体25像素大小加粗来显示</p>
用CSS设置丰富的文字效果
CSS文字样式 模拟Google公司Logo实例 CSS段落文字 百度搜索实例
1.CSS文字样式
字体 文字大小 文字颜色 文字粗细 斜体 变体 文字的下划线 综合字体
1.CSS文字样式
字体:font-family 除了利用HTML的标记来设置字体外，也 可以用CSS的font-family属性来设置需 要的字体。 基本语法：
文字下划线等效果 : text-decoration 属性，主要完成文字加下划线、顶线、 删除线及文字闪烁效果。
font设置综合字体属性
font 属性是一种复合属性，可以同时对文字设 置多个属性。包括字体族科、大小、风格、加 粗及字体变体。
基本语法： • font: font-style font-weight font-variant font-size/line-height font-family 语法说明： • 如果要利用 font 属性，同时设置多个文字属性时，属性 与属性之间必须利用空格隔开； • 前三个属性次序不定或者省略，默认为normal； • 大小和字体系列必须显式地指定，先设置大小，再设置 字体系列，字体系列如果有多个，以逗号分割； • 行高必须直接出现在字体大小后面，中间用斜杠分开， 行高是可选的属性； • font属性是继承的。
letter-spacing字符间距
letter-spacing
• letter-spacing 字符间距属性，可以设置字 符与字符间的距离。
基本语法
• letter-spacing：normal | 长度单位
语法说明：
• normal 表示默认值，此处的长度单位可使用 负数
实例
line-height行距属性
1.CSS文字样式
文字大小:font-size
英寸(in)
厘米(cm) 毫米(mm) 磅(pt)
字体高(em) 字母x的高(ex)
像素(px)
百分比(%)
1.CSS文字样式
文字大小:font-size 语法说明：
• 绝对大小：是以pt为单位，以绝对大小的 方式来设置字号。可以指定关键字来指定 大小，如： font-size属性的关键字（ xxsmall | x-small | small | medium | large | x-large | xx-large ）。不过这 些关键字，在不同的设备下，可能会显示 不同的字号。
书本166页实例
4.百度搜索实例
二、用CSS设置图片效果
• 图片样式
• 图片边框 • 图片缩放
• 图片对齐
• 横向对齐 • 纵向对齐
• 图片混排
• 文字环绕 • 设置图片与文字间的间距
1.CSS文字样式
文字变体: font-variant，CSS中的字 体变体主要用于设置英文字体。
基本语法： • font-variant:normal | small-caps 语法说明： • normal 表示默认值， small-caps 表示英文字 体显示为小型的大写字母。
1.CSS文字样式
<body>
/* 在父标记的基础上200% */
/* 在父标记的基础上×0.5 */
<p class="one">文字大小<span>相对值</span>，15px。</p> <p class="two">文字大小<span>相对值</span>，30px。</p>
</body> </html>
1.CSS文字样式
Vertical-align垂直对齐
text-align属性可以控制段落文字的垂 直对齐方式，对于文字本身而言，该属 性对于块级元素并不起作用，但对于表 格而言，这个属性很重要。
基本语法： • Vertical-align：top | bottom | middle |
text-transform转换英文大小写
文字样式 : font-style属性来达到字体 变化的效果。
基本语法： • font-style:normal | italic | oblique 语法说明： • normal 为默认值，一般以浏览器默认的字体 来显示，italic为斜体效果，oblique为歪斜 体效果。
1.CSS文字样式
文字加粗 : font-weight 属性来设置字体 的粗细。
<p class="p6">设置字号为x-large</p></body></html>
1.CSS文字样式
文字大小:font-size 语法说明：
• 相对大小：利用百分比或者 em( 当前字母 中，字母的宽度 ) ，以相对父元素大小的 方式来设置大小。例如指定 font-size 的 属性值时父元素的 1.5em 或 150% ，或者使 用相对关键字 (larger | smaller) 来指定。
<!--程序10-10--> <html><head><title>设置字号的相对大小</title> <style type="text/css"> <!--
p{font-size:14px;}
.b{font-size:200%;} --> </style> </head> <body> <p>设置字号的相对大小</p>
利用text-transform属性可以转英文大小写。
基本语法： • text-transform ： uppercase | lowercase | capitalize | none 语法说明： • uppercase 表 示 使 所 有 单 词 的 字 母 都 大 写 ， lowercase 表 示 使 所 有 单 词 的 字 母 都 小 写 ， capitalize 表 示 使 每 个 单 词 的 首 字 母 大 写 ， none表示默认值。
line-height是用来设置行与行之间的距离。
基本语法： • line-height：normal | 比例 | 长度单位 | 百 分比 语法说明： • normal 为 默 认 值 ， 比 例 是 倍 数 ， 相 对 于 元 素 font-size 的几倍大小，长度单位和百分比请参 考说明，此处的长度单位可使用负数。
3.CSS 段落文字
text-indent首行缩进属性 letter-spacing字符间距属性 line-height行距属性 text-align水平对齐属性 text-transform转换英文大小写
text-indent首行缩进
text-indent
• text-indent 首行缩进属性，通常被用来 指定一个段落，第一行文字缩进的距离。 基本语法： • text-indent：长度单位 | 百分比单位 语法说明：
• font-family:字体一，字体二，字体三… 语法说明： • 上面的语法定义了几种不同的字体，并用逗 号隔开，当浏览器找不到字体一时，将会用 字体二代替，以此类推，当浏览器完全找不 到字体时，则使用默认字体（宋体）。
<!--程序10-8--> <html> <head><title>设置字体</title> <style type="text/css"> <!-.p1 {font-size:16px; font-family:黑体,草书,宋体;} .p2 {font-size:16px; font-family:琥珀,草书,宋体;} --> </style></head><body> <p class="p1">设置字体的顺序为，黑体，草书，宋体
<p class="b">设置字号的相对大小</p>
</body></html>
<html> <head>
<title>文字大小_相对值</title>
<style> <!-p.one{ font-size:15px; /* 象素，因此实际显示大小与分辨率有关，很常用的方式 */
} p.one span{ font-size:200%; } p.two{ font-size:30px; } p.two span{ font-size: 0.5em; } --> </style> </head>
<!--程序10-9--> <html><head><title>设置字号的绝对大小</title><style type="text/css"> <!--
p{color:blue}
.p1 {font-size:xx-small} .p2 {font-size:x-small} .p3 {font-size:small} .p4 {font-size:medium}
<!-p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } --> </style> </head> <body> <p><span class="g1">G</span><span class="o1">o</span> <span class="o2">o</span><span class="g2">g</span> <span class="l">l</span><span class="e">e</span></p> </body> </html>
基本语法： • font-weight ： normal | blod | bolder | lighter | 100-900 语法说明： • normal 表 示 默 认 字 体 ， bold 表 示 粗 体 ， bolder表示粗体再加粗，lighter表示比默认 字体还细， 100-900 共分为九个层次（ 100 、 200…… 、 900 ），数字越小字体越细、数字 越大字体越粗。
实例
text-align水平对齐
text-align属性可以控制文字段落的水平 对齐方式。
基本语法： • text-align ： left | right | center | justify 语法说明： • left为默认值，right表示右对齐，center表 示居中对齐，justify表示左右对齐。
.p5 {font-size:large}
.p6 {font-size:x-large} --> </style></head><body>
<p class="p1">设置字号为xx-small</p>
<p class="p2">设置字号为x-small</p> <p class="p3">设置字号为small</p> <p class="p4">设置字号为medium</p> <p class="p5">设置字号为large</p>
<p class="p2">设置字体的顺序为，琥珀，草书，宋体
</body></html>
写一写
1.CSS文字样式
文字大小:font-size 可以用<font size=值>标记来设置文字 的大小。在CSS里，利用font-size属性 来设置字号。 基本语法：
• font-size：绝对大小 | 相对大小
<p class="p2">本行文字以黑体斜体25像素大小加粗来显示</p>
</body></html>
2.模拟GOOGLE公司LOGO实例
<html> <head>
Span没有结构上的意义，纯粹是应用样式， <title>Google</tiBaidu Nhomakorabeale> 当其他行内元素都不合适时，就可以用它。 <style>
<!--程序10-15--> <html> <head><title>font字体设置</title> <style type="text/css">
<!-.p1{ font-family:黑体; font-size:25px;font-weight:bolder;} .p2{ font:italic 25px 黑体;} --> </style></head> <body> <p class="p1">本行文字以黑体25像素大小加粗来显示</p>