css字体样式与文本样式详解

目录

一、CSS字体样式

1. 字体类型(font-family)

2. 字体大小(font-size)

3. 字体粗细(font-weight)

4. 字体风格(font-style)

5. 字体颜色(color)

6. 字体简写属性(font)

7. 综合示例

二、CSS文本样式

1. 文本颜色(color)

2. 文本对齐(text-align)

3. 文本装饰(text-decoration)

4. 文本缩进(text-indent)

5. 文本转换(text-transform)

6. 文本阴影(text-shadow)

7. 行间距(line-height)

8. 字符间距(letter-spacing)

9. 单词间距(word-spacing)

10. 综合示例


一、CSS字体样式

CSS中的字体样式用于定义文本的外观,包括字体类型、大小、粗细、风格和颜色等。

1. 字体类型(font-family

font-family属性用于定义字体类型,可以指定多个字体,浏览器会按顺序查找并使用第一个可用的字体。若所有指定的字体都不可用,则使用浏览器默认字体。

语法:

 font-family: "字体1", "字体2", "字体3", ...;

示例:

 body {
     font-family: "微软雅黑", "Arial Black", sans-serif;
 }

在本例中,如果用户的系统中安装了"微软雅黑",则使用该字体;如果没有,则尝试使用Arial Black;如果都没有,则使用默认的sans-serif字体。

2. 字体大小(font-size

font-size属性用于定义字体大小,常用的单位有px(像素)、em(相对于父元素的字体大小)、rem(相对于根元素的字体大小)等,可以使用关键字(如smallmediumlarge)或具体的数值(如10px16px20px)。

语法:

 font-size: 数值 | inherit | medium | large | larger | x-large | xx-large | small | smaller | x-small | xx-small;

示例:

 h1 {
     font-size: 2em; /* 使用em单位,相对于父元素的字体大小 */
 }
 p {
     font-size: 16px; /* 使用像素单位 */
 }

3. 字体粗细(font-weight

font-weight属性用于定义字体的粗细,取值范围为100~900,也可以使用关键字(如normallighterboldbolder)。

语法:

 font-weight: 100-900 | bold | bolder | lighter | normal;

示例:

 strong {
     font-weight: bold; /* 使用关键字 */
 }
 span {
     font-weight: 700; /* 使用数字 */
 }

4. 字体风格(font-style

font-style属性用于定义字体的风格,取值包括normal(正常)、italic(斜体)、oblique(斜体)。

语法:

 font-style: normal | italic | oblique;

示例:

 span {
     font-style: italic;
 }

5. 字体颜色(color

color属性用于定义字体的颜色,可以使用关键字(如red)、16进制RGB值(如#03FCA1)、RGB值(如rgb(3, 252, 161))、RGBA值(如rgba(3, 252, 161, 0.8))、HSL值(如hsl(120, 100%, 50%))或HSLA值(如hsla(120, 100%, 50%, 0.8))等。

语法:

 color: 数值;

示例:

 a {
     color: #FF0000;
 }

6. 字体简写属性(font

font属性是一个简写属性,可以同时设置多个字体相关的属性,其顺序为:font-style font-variant font-weight font-size font-family。注意,font-sizefont-family是必需的,其他属性可以省略。

语法:

 font: font-style font-variant font-weight font-size font-family;

示例:

 p {
     font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
     /* 等同于分别设置这些属性 */
 }

7. 综合示例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS字体样式</title>
     <style>
         body {
             font-family: "微软雅黑", "Arial Black", sans-serif;
             font-size: 16px;
             color: #333;
         }
         h1 {
             font-size: 25px;
             font-weight: bold;
             color: blue;
         }
         p {
             font-style: italic;
         }
         a {
             color: #FF0000;
             text-decoration: none;
         }
         a:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
     <h1>CSS字体样式详解</h1>
     <p>这是一个使用了斜体样式的段落。</p>
     <p>This is a paragraph that uses an italicized style.</p>
     <a href="#">这是一个链接</a>
 </body>
 </html>

二、CSS文本样式

CSS的文本样式主要关注文本的布局、装饰和视觉效果。

1. 文本颜色(color

设置文本的颜色,与字体样式中的语法相同。

 a {
     color: #333; /* 使用十六进制颜色 */
 }
 p {
     color: rgba(0, 0, 0, 0.5); /* 使用RGBA颜色,包含透明度 */
 }

2. 文本对齐(text-align

设置文本的对齐方式,常用的有left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)等。

 div {
     text-align: center; /* 居中对齐 */
 }

3. 文本装饰(text-decoration

设置文本的装饰效果,如下划线、上划线、贯穿线等,常用值有none(无装饰)、underline(下划线)、overline(上划线)、line-through(贯穿线)等。

 a {
     text-decoration: none; /* 取消下划线 */
 }
 del {
     text-decoration: line-through; /* 删除线 */
 }

4. 文本缩进(text-indent

设置文本的首行缩进,可以使用长度单位或百分比。

 p {
     text-indent: 2em; /* 首行缩进2个字符宽度 */
 }

5. 文本转换(text-transform

控制文本的大小写转换,常用的值有none(无转换)、capitalize(每个单词的首字母大写)、uppercase(全部大写)、lowercase(全部小写)等。

 p {
     text-transform: uppercase; /* 全部大写 */
 }
 span {
     text-transform: capitalize; /* 首字母大写 */
 }

6. 文本阴影(text-shadow

为文本添加阴影效果,可以指定水平偏移、垂直偏移、模糊半径和颜色。

 h1 {
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径、颜色 */
 }

7. 行间距(line-height

设置文本行之间的间距,会影响文本的可读性,可以使用数字、长度单位或百分比。

 p {
     line-height: 1.5; /* 使用数字,表示行高是字体大小的1.5倍 */
 }

8. 字符间距(letter-spacing

设置字符之间的间距,可以使用正常的长度单位,如px、em等。

 .wide-letters {
     letter-spacing: 2px;
 }

9. 单词间距(word-spacing

设置单词之间的间距,同样可以使用正常的长度单位。

 .wide-words {
     word-spacing: 1em;
 }

10. 综合示例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS文本样式</title>
     <style>
         body {
             font-family: 楷体,"Arial Black", sans-serif;
             font-size: 16px;
             line-height: 1.5;
         }
         h1 {
             color: #333;
             text-align: center;
             text-transform: uppercase;
             text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
         }
         p {
             text-indent: 2em;
             margin-bottom: 1em;
         }
         .uppercase {
             text-transform: uppercase;
         }
         .italic {
             font-style: italic;
         }
         .deleted {
             text-decoration: line-through;
         }
         .wide-letters {
             letter-spacing: 2px;
         }
     </style>
 </head>
 <body>
 <h1>css文本样式详解</h1>
 <p class="uppercase">This is a paragraph with UPPERCASE text.</p>
 <p class="italic">This is a paragraph with <span class="deleted">deleted</span> and <span class="uppercase">uppercase</span> <span class="wide-letters">wide-letter-spaced</span> text.</p>
 </body>
 </html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值