CSS文本标签和盒子标签

<em>标签和<strong>标签

**em标签用于表示一段内容中的着重点。

**strong标签用于表示一个内容的重要性。

**通常em显示斜体,二strong显示为粗体。

<i>标签和<b>标签

<i>标签会是文字变成斜体

<b>标题回收文字变成斜体

效果和,效果一样, 但是没有实际语义,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使用i和b标签.

<small>

small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信息等。

small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信息等.

<cite>

使用cite标签可以指明对某内容的引用或参 考。例如,戏剧、文章或图书的标题,歌 曲、电影、照片或雕塑的名称等。

<blockquote>和<q>

blockquote和q表示标记引用的文本。

blockquote用于长引用,q用于短引用。

在两个标签中还可以使用cite属性来表示引 用的地址。

<sup>和<sub>

sup和sub分别用于定义上标和下标。

<ins>和<del>

ins表示插入的内容,显示时通常会加上下 划线。

del表示删除的内容,显示时通常会加上删 除线。

<code>和<pre>

如果你的内容包含代码示例或文件名,就 可以使用code元素。

pre元素表示的是预格式化文本,可以使用

pre包住code来表示一段代码.

有序列表

使用ol和li来创建一个有序列表。

无序列表

使用ul和li来创建一个无序列表。

定义列表

使用dl、dd、dt来创建一个定义列表使用dl、dd、dt来创建一个定义列表

单位

px

如果我们将一个图片放大的话,我们会发现一个图片 是有一个一个的小色块构成的,这一个小色块就是一 个像素,也就是1px,对于不同的显示器来说一个像素 的大小是不同的。

百分比

也可以使用一个百分数来表示一个大小,百分比是相 对于父元素来说的,如果父元素使用的大小是16px,  则100%就是16px,200%就是32px。

em

em和百分比类似,是相对于font-size说的              1em = 1font-size

行间距

line-height用于设置行高,行高越大则行 间距越大。

行间距 = line-height – font-size

文本的修饰

text-decoration属性,用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。

可选值:

underline

overline

line-through

none

对齐文本

text-align用于设置文本的对齐方式。

可选值:

left:左对齐

right:右对齐

justify:两边对齐

center:居中对齐

首行缩进

text-indent用来设置首行缩进。

该样式需要指定一个长度,并且只对第一 行生效。

盒子

CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里,把所有的元 素都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

盒子模型

一个盒子我们会分成几个部分:

内容区(content)

内边距(padding)

边框(border)

外边距(margin)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • <em>标签和<strong> **em标签用于表示一段内容中的着重点。 **strong标签用于表示一个内容的重...
    眼前人_249d阅读 631评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,075评论 1 92
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,430评论 2 66
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,849评论 32 459
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,167评论 3 119

友情链接更多精彩内容