美文网首页
03_day CSS文本标签 、盒子

03_day CSS文本标签 、盒子

作者: dream_seeker | 来源:发表于2018-07-06 20:30 被阅读0次

<em>和<strong>

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

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

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

例题1-1》

<i>和<b>标签

*i标签会使文字变成斜体。

b标签会使文字变为粗体。

这两个标签和EM STRONG类似,但是这两个标签没有语义

<small>

small标签表示细则一类的旁注,通常包括声明,版权信息等。small标签在浏览器中显示会比父元素小的字号。

<cite>

使用cite标签可以指明对某内容的引用或参考。

例如: <cite>《西游记》</cite>讲述的是三和尚取经的故事

<blockquote>(换行)和<q>(加引号)

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

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

<sup>和<sub>

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

H<sup>2</sup>0

H<sub><a href = "#">[2]</a></sub>0

<ins>和<del>

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

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

<code>和<pre>

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

pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码。

<pre>

    <code>

            while true:

                        print("lalalalalalala")

    </code>

<pre>

列表:

1、无序列表(ul,li)

2、有序列表(ol,li)

3、定义列表(dl,dt)

套用可无序套有序。

单位

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

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

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

1em = 1font-size

字体大小:font-size用于指定文字的大小

font-family可以指定标签中文字的字体。

font-style设置样式、斜体 itatic

font-weight粗细 bold

font - variant:small-caps 小写变大写

p{bold italic 60px "华文行楷"}字体号必须在最后,字号在字体之前

字体属性的简写:

font可以一次性同时设置多个字体的样式。

– font:加粗 斜体 小型大写 大小/行高 字体

这里前边几个加粗、斜体和小型大写的顺 序无所谓,也可以不写,但是大小和字体 必须写且必须写到后两个。

行间距:line-height           font-size

大写化:text-transform样式将元素中的字母全都变成大写

大写:text-transform:upercase

小写:text-tansform:lowercase

首字母大写:text-transform:capitalize

正常:text-transform:none

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

-underline下划线

-overline上划线

line-through删除

-none原样输出

字母间距和单词间距:letter-spacing用来设置字符之间的间距。    

word-spacing用来设置单词之间的间距。

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

-lift:左对齐    -right 右对齐     -justify两边对其   center 居中对齐

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

                                     盒子

CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里。

盒子模型,一般分成几个部分:

内容区(content)

内边距(padding)

边框(border)

外边距(margin)

设置盒子的元素 效果图内容区

内容区:通过width和height设置内容区的大小。他们只适合块元素。

内边距:padding:10px 20px 30px 40px 这样可以设置元素上、右、下、左四个方向的内边距。

padding:10px 20px 30px;

分别指定上、左右、下四个方向的内边距

padding:10px 20px;

分别指定上下、左右四个方向的内边距

padding:10px;

同时指定上左右下四个方向的内边距

同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距

边框:可以使用border属性来设置盒子的边框:

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

和padding一样,默认width和height并包括边框的宽

边框的样式:style:

边框可以设置多种样式:

none(没有边框)

dotted(点线)

dashed(虚线)

solid(实线)

double(双线)

groove(槽线)

ridge(脊线)

inset(凹边)

outset(凸边)

外边距:外边距是元素边框与周围元素相距的空间。

使用margin属性可以设置外边距。

用法和padding类似,同时也可以提供四个方向的

margin -top/right/bottom/left

但是将左右外边距设置为auto是,浏览器会将左右外 边距设置为相等,所以这行代码margin:0 auto可 以使元素居中。

相关文章

  • 03_day CSS文本标签 、盒子

    **em标签用于表示一段内容中的着重点。 **strong标签用于表示一个内容的重要性...

  • HTML前端复习

    关键字:HTML常用标签,CSS,CSS文本样式,盒子模型 html文本的内部基本结构 1.

  • CSS文本标签和盒子标签

    标签和 标签 **em标签用于表示一段内容中的着重点。 **strong标签用于表示一个内容的重要性。 **通常e...

  • CSS文本标签和盒子模型

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

  • css设置文本显示不下是用省略号表示

    直接给文本那个盒子设置css样式

  • CSS属性

    link标签的rel属性 rel属性值: CSS的单位 字体的属性 文本属性 背景属性 列表属性 (重要)盒子模型...

  • 【6Day】Joshua—初识html+css学习笔记(3)

    标签,短文本引用,初识HTML+CSS教程-慕课网 目录 标签,短文本引用 标签,长文本引用(大段文本)使用 标签...

  • css权威教程

    基础知识 文本使用闭合标签(标签,段落,文本) 引用文本使用自闭和标签 css display属性1:block(...

  • CSS 文本标签

    文本标签 和 1.em标签用于表示一段内容中的着重点。(语气强调)2.strong标签用于表示一个内容的重要性。(...

  • CSS文本标签

    今天来说简单说一下,文本标签。 和 em标签用于表示一段内容中的着重点。(语气强调)strong标签用于表示一个内...

网友评论

      本文标题:03_day CSS文本标签 、盒子

      本文链接:https://www.haomeiwen.com/subject/jwrbuftx.html