HTML和CSS的相同效果之处

最新推荐文章于 2024-02-04 11:13:24 发布

weixin_40263603

最新推荐文章于 2024-02-04 11:13:24 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/weixin_40263603/article/details/78237137

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用 CSS 控制文字样式的多种方法，包括字体样式、首行缩进、字符装饰、英文大小写转换及对齐方式等。通过具体实例展示了如何设置字体系列、字体大小、字体粗细等属性。

文字样式

1、字体样式

HTML：

CSS：

<style type="text/css">
      		#p{font-style:normal | italic | oblique }//字体样式
      		#p{font-size:20px;}//字体大小
      		#p{font-variant:normal | small-caps}//字体变体
      		#p{font-weight:normal | bold | lighter | 数值}//字体粗细
      		#p{font-family:字体1，字体2，...}//字体系列
</style>

2、首行缩进

HTML：

<p>    </p>

CSS:

<style type="text/css">
#p{text-indent:2em;}
</style>

3、字符装饰

HTML:（第一点的图片中提到了...）

CSS：

<style type="text/css">
#p{text-decoration:none | underline | blink | overline | line-through;}
</style>

none：表示文字无装饰

blink：表示文字闪烁

underline：表示文字加下划线

line-through：表示文字加贯穿线

overline：表示文字加上划线

4、英文大小写转换

HTML:（第一点的图片中提到了...）

CSS：

<style type="text/css">
#p{text-transform:capitalize | uppercase | lowercase | none}
</style>

5、对齐方式

HTML：（内容居中）

<center>内容</center>

CSS：

<style type="text/css">
#p{text-align:left | right | center | justify}//水平对齐
#p{vertical-align:baseline | sub | super | top | middle | bottom | text-bottom | length}//垂直对齐
</style>