CSS 字体风格

其他 2019-03-22 12:28:01 阅读次数: 0

粗体

font-weight 属性可以设置文本的粗细。

它有两个属性:

  • normal 普通粗细
  • bold 粗文本

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >font-weight</ title >
     < style >
         .a{
             font-weight:nomal;
         }
         .b{
             font-weight:bold;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >学编程，上利永贞网</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

斜体

font-style 属性可以设置文本倾斜。

它有3个属性:

  • normal 正常显示
  • italic 手写风格斜体
  • oblique 斜体

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >font-style</ title >
     < style >
         .a{
             font-style:nomal;
         }
         .b{
             font-style:italic;
         }
         .c{
             font-style:oblique;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
</ body >
</ html >

大写和小写

text-transform 属性可以设置文本的大写或小写。

它有3个属性:

  • upercase 使文本大写显示
  • lowercase 使文本小写显示
  • captialize 使每个单词的首字母大写

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-transform</ title >
     < style >
         .a{
             text-transform:uppercase;
         }
         .b{
             text-transform:lowercase;
         }
         .c{
             text-transform:capitalize;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
</ body >
</ html >

下划线和删除线

text-decoration 属性可以给文本设置线条。

它有5个属性:

扫描二维码关注公众号，回复： 5612879 查看本文章
  • none 删除文本的装饰线
  • underline 在文本底部增加一条实线
  • overline 在文本顶部增加一条实线
  • line-through 在文本中间穿一条线
  • blink 文本动态闪烁

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-decoration</ title >
     < style >
         .a{
             text-decoration:none;
         }
         .b{
             text-decoration:underline;
         }
         .c{
             text-decoration:overline;
         }
         .d{
             text-decoration:line-through;
         }
         .e{
             text-decoration:blink;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
< p class = "e" >study hard, improve every day</ p >
</ body >
</ html >

行间距

line-height 属性可以设置行间距。

行间距会使文本垂直方向的空隙增大。

设置行间距单位使用em，不要使用px，这样的好处是可以根据用户选择的文本大小来设定。

行间距的初始值最好设定在1.4em~1.5em之间。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >line-height</ title >
     < style >
         .a{
             line-height:1.4em;
         }
         .b{
             line-height:2.4em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

字母间距

letter-spacing 属性可以设置字母间距。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >letter-spacing</ title >
     < style >
         .a{
             letter-spacing:2em;
         }
         .b{
             letter-spacing:1em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

单词间距

word-spacing 属性可以设置单词之间距离。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >word-spacing</ title >
     < style >
         .a{
             word-spacing:2em;
         }
         .b{
             word-spacing:1em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

对齐方式

text-align属性可以设置文本的对齐方式。

它有4个属性:

  • left 设置文本左对齐
  • right 设置文件右对齐
  • center 设置文本居中显示
  • justify 设置文本两端对齐

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             text-align:left;
         }
         .b{
             text-align:right;
         }
         .c{
             text-align:center;
         }  
         .d{
             text-align:justify;
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
</ body >
</ html >

垂直对齐

vertical-align 垂直对齐通常在文本做为内联元素时使用。

它的属性有：

  • baseline 使元素的基线与父元素的基线对齐
  • sub 使元素的基线与父元素的下标基线对齐
  • super 使元素的基线与父元素的上标基线对齐
  • text-top 使元素的顶部与父元素的字体顶部对齐
  • text-bottom 使元素的底部与父元素的字体底部对齐
  • middle 使元素的中部与父元素的基线加上父元素x-height的一半对齐
  • top 使元素及其后代元素的顶部与整行的顶部对齐
  • bottom 使元素及其后代元素的底部与整行的底部对齐

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             vertical-align:text-top;
         }
         .b{
             vertical-align:middle;
         }
         .c{
             vertical-align:text-bottom;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p >
< img class = "a" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
< p >
< img class = "b" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
< p >
< img class = "c" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
</ body >
</ html >

文本缩进

text-indent 属性可以设置首行文本缩进。

中文的首行缩进两个字可以设置为2em。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-indent</ title >
     < style >
         .a{
             text-indent:2em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >一日，许褚走马入东门，正迎许攸，攸唤褚曰：“汝等无我，安能出入此门乎？”褚怒曰：“吾等千生万死，身冒血战，夺得城池，汝安敢夸口！”攸骂曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔剑杀攸，提头来见曹操，说“许攸如此无礼，某杀之矣。”操曰：“子远与吾旧交，故相戏耳，何故杀之！”深责许褚，令厚葬许攸。乃令人遍访冀州贤士。冀民曰：“骑都尉崔琰，字季珪，清河东武城人也。数曾献计于袁绍，绍不从，因此托疾在家。”操即召琰为本州别驾从事，而谓曰：“昨按本州户籍，共计三十万众，可谓大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相争，冀民暴骨原野，丞相不急存问风俗，救其涂炭，而先计校户籍，岂本州士女所望于明公哉？”操闻言，改容谢之，待为上宾。
</ p >
< p >study hard, improve every day</ p >
</ body >
</ html >

投影

text-shadow 属性可以设置文本的投影效果。

它有4个值，同时使用，也可以有选择地使用：

  • 第一个值 设置阴影左右延伸长度，负值向左，正值向右
  • 第二个值 设置阴影上下延伸长度，负值向上，正值向下
  • 第三个值 设置阴影的模糊程度
  • 第四个值 设置阴影的颜色

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             text-shadow:1px 1px 0px #df3232;
         }
         .b{
             text-shadow:1px 1px 5px #df3232;
         }
         .c{
             text-shadow:2px 2px 9px #red;
         }  
         .d{
             text-shadow:1px 1px 10px blue;
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
</ body >
</ html >

首字母

:first-letter 属性可以设置首字母

它是一个伪选择器。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >:first-letter</ title >
     < style >
         .b:first-letter{
             font-size:2em;
             font-weight:bold;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >学编程，上利永贞网</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

首行文本

:first-line属性可以设置首字母

它是也一个伪选择器。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >:first-line</ title >
     < style type = "text/css" >
         p.a:first-line {
             font-weight: bold;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p >学编程，上利永贞网</ p >
< p >study hard, improve every day</ p >   
</ body >
</ html >

链接样式

链接样式也是伪选择器，有两个：

:link 未访问过的链接样式

:visited 已经单击过的样式

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >链接样式</ title >
     < style type = "text/css" >
         a:link{
             color:#000;
         }
         a:visited{
             color:#982312;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< a href = "https://www.liyongzhen.com/" target = "_blank" >学编程，上利永贞网</ a >
< p >study hard, improve every day</ p >   
</ body >
</ html >

响应用户

响应用户有3个伪选择器：

:hover 鼠标悬停时的样式

:active 用户在元素上操作时生效

:focus 元素拥有焦点时生效

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >链接样式</ title >
     < style type = "text/css" >
         a:link{
             color:#000;
         }
         a:visited{
             color:#982312;
         }
         a:hover{
             color:yellow;
         }
         a:active{
             color:red;
         }
         a:focus{
             color:blue;
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< a href = "https://www.liyongzhen.com/" target = "_blank" >学编程，上利永贞网</ a >
< p >study hard, improve every day</ p >   
</ body >
</ html >

猜你喜欢

转载自www.cnblogs.com/lszw/p/10577359.html
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022