神刀安全网

css文本标签和文本样式

一,文本标签

(1)<em>和<strong>,<i>,<b>,<cite>标签

  • 通常em显示为斜体,而strong显示为粗体
  • <i>,<b>这两个标签和em和strong类似,但是这两 个标签没有语义。
  • small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。
  • 使用cite标签可以指明对某内容的引用或参 考。例如,戏剧、文章或图书的标题,歌 曲、电影、照片或雕塑的名称等。
  • blockquote和q表示标记引用的文本。
    blockquote用于长引用,q用于短引用。
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>文本标签</title> </head> <body>     <p>         /*em标签用于表示一段内容中的着重点。*/         今天是个<em>好日子<em>     </p>     <p>         /*strong标签用于表示一个内容的重要性。*/          <strong>                     注意:你不好好上课,以后就找不到好工作         </strong>     </p>     <p>          /*i标签会使文字变成斜体。*/         <i>i标签</i><br>         /*b标签会使文字变成粗体。*/         <b>b标签</b>     </p>                  <p>         <small>我是small标签</small>     </p>         <p>         你是<q>局外人</q>吗?     </p> </body> </html> 

(2)sup和sub标签

  • sup和sub用于定义上标和下标。
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>文本标签</title> </head> <body>     <p>5<sup>2</sup>0</p>     <p>3<sub>2</sub>0</p>     <p>林志玲<sup><a href="">[1]</a></sup></p>     </body> </html> 

(3)<ins>和<del>标签

  • ins表示插入的内容,显示时通常会加上下 划线。
  • del表示删除的内容,显示时通常会加上删 除线。
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>文本标签</title> </head> <body>         <p>         郭敬明的个头<ins>真高啊</ins>     </p> </body> </html> 

(4)<code>和<pre> 标签

  • 如果你的内容包含代码示例或文件名,就 可以使用code元素。
  • pre元素表示的是预格式化文本,可以使用
  • pre包住code来表示一段代码。
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>文本标签</title> </head> <body>     <pre>         <code>             function fun(){  alert("hello");             }         </code>     </pre> </body> </html> 

(5) 有序列表和无序列表

  • 使用ol和li来创建一个有序列表。
  • 使用ul和li来创建一个无序列表。
  • 使用dl、dd、dt来创建一个定义列表。
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>有序列表</title>     <style type="text/css">              </style> </head> <body>     <ul>         <li>西门庆</li>         <li>潘金莲</li>         <li>武大郎</li>         <li>武松</li>      </ul>     <ol type="1">         <li>结构</li>         <li>表现</li>         <li>行为</li>          </ol>     <li>         鱼香肉丝         <ol>             <li>鱼</li>             <li>香</li>                          <li>肉</li>             <li>丝</li>         </ol>     </li>     <dl>         <dt>武松</dt>         <dd>景阳冈打虎</dd>         <dd>为哥哥报仇</dd>         <dd>杀死嫂嫂</dd>         <dd>投奔梁山</dd>     </dl> </body> </html> 

二,文本样式

(1),单位

  • px
    如果我们将一个图片放大的话,我们会发现一个图片 是有一个一个的小色块构成的,这一个小色块就是一 个像素,也就是1px,对于不同的显示器来说一个像素 的大小是不同的。
  • 百分比
    也可以使用一个百分数来表示一个大小,百分比是相 对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。
  • em
    em和百分比类似,也是相对于font-size说的,1em就相 当于100%,2em相当于200%,1.5em相当于150%
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>单位</title>     <style type="text/css">         .box{             /*宽度*/             width: 200px;             /*高度*/             height: 200px;             /*背景颜色*/             background-color: yellow;         }         .box1{             width: 50%;             height: 50%;             background-color: red;         }              </style> </head> <body>     <div class="box">         <div class="box1"></div>     </div>      </body> </html> 

(2)颜色单位

  • 在CSS中可以直接使用颜色的关键字来代表 一种颜色
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>颜色单位</title>     <style type="text/css">         /*颜色单位*/         .p1{             color: yellow;         }         /*十六进制颜色单位*/         .p2{             color: #FF0000;         }         /*RGB颜色单位*/         .p3{             color: rgb(200 130 100);         }     </style> </head> <body>     <p class="p1">这是一个颜色单位</p>     <p class="p2">这是一个十六进制颜色单位</p>     <p class="p3">这是一个RGB颜色单位</p> </body> </html> 

(3)字体单位

  • font-size用来指定文字的大小。
  • 通过font-family可以指定标签中文字使用 的字体
  • font-style用来指定文本的斜体。
  • font-weight用来指定文本的粗体
  • font-variant属性可以将字母类型设置为小 型大写。在该样式中,字母看起来像是稍 微缩小了尺寸的大写字母。
  • text-transform样式用于将元素中的字母全都变成大写。
  • text-align用于设置文本的对齐方式

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

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>字体的样式</title>     <style type="text/css">         .p1{             color: blue;             font-size: 50px;             font-family: 华文行楷;             /*斜体*/             font-style: italic;             /*粗体*/             font-weight: bold;             /*小型大写字母*/             font-variant: small-caps;         }         /*字体简写*/         .p2{             font: bold small-caps 60px "微软雅黑";         }     </style> </head> <body>     <p class="p1">我在你眼里到底算什么</p>     <p style="font-size: 50px;font-family: 方正姚体;color: yellow;">我在你眼里到底算什么</p>     <p style="font-size: 50px;font-family: 华文隶书;color: red;">我在你眼里到底算什么</p>     <p style="font-family: 华文彩云;font-size: 50px;color: black">我在你眼里到底算什么</p>     <dl>         <dt>武松</dt>         <dd>武松打虎</dd>         <dd>武松杀嫂嫂</dd>     </dl>     <<p class="p2" style="font-style: italic;">我在你眼里到底算什么</p> </body> </html> 

三,盒子

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

  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)
  • 通过width和height两个属性可以设置内容区的大 小。
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>盒子</title>     <style type="text/css">         .box1{             width: 100px;             /*高度*/             height: 100px;             /*背景颜色*/             background-color: #bfa;             /*外面的盒子宽度*/             border-width: 60px 60px 60px 60px;             /*颜色*/             border-color: yellow red green blue;              border-style: groove;          }     </style> </head> <body>     <div class="box1"> </div> </body> </html> 

这个盒子运行结果如下:

css文本标签和文本样式

image.png

目前只学习了那么多

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » css文本标签和文本样式

分享到:更多 ()