Web前端第9章思维导图

2024-01-02 05:51:07

?本章内容是关于CSS样式属性,包含CSS单位、CSS字体样式、CSS文本样式、CSS颜色与背景、CSS列表样式、CSS盒模型。重点在于CSS盒模型、CSS文本样式、CSS字体样式。?

1. CSS单位

  • 绝对单位

    • 磅(pt),pica(pc)、cm、mm、in

  • 相对单位

    • em(字体高度,根据font-size确定单位大小)

    • ex(小写字母的高度作为参考,一般em/2=ex)

    • px(像素)

    • %(相对单位值)

2.CSS字体样式

  • font-size

    • 字体大小:相对单位|绝对单位|关键字

  • font-style

    • 字体样式

      • body斜体:<em></em>,<i></i>

      • norma:不使用斜体

      • italic:使用斜体

      • oblique:使用倾斜文字

  • font-variant

    • 字体变体(主要用于英语字母大小写)

      • normal:正常字体(默认属性)

      • small-caps:使用小型的大写字母字体

  • font-family

    • 字体系列:字体1,字体2,字体3......

  • font-weight

    • 字体加粗(整数表示:100、200、300、400、...、900)

      • normal:默认不加粗(等价整数400)

      • bold:标准加粗(等价整数700)

      • bolder:特粗(等价整数900)

      • lighter:细体(等价整数100)

  • font

    • 复合字体属性

      • font:font-style font-weight font-variant font-size/line-height font-family ①以空格间隔; ②前三个属性不分先后顺序,大小和字体设置必须先大小后字体; ③如果需要设置行高,可以直接在大小后+”/“+行高; ④font可以继承

3.CSS文本样式

  • 字符间距,行距与首行缩进属性

    • letter-spacing:(字符间距,设置字符与字符之间的距离)normal|长度单位

      • normal表示默认间距,长度一般为正数,也可以为负数,需要看浏览器是否支持。 word-spacing主要争对英文单词。 letter-spacing对中文和英文均有效。

    • line-height:(行距,用于设置行与行之间的距离)normal|length

      • normal:默认行高。 length:百分比、数字,由浮点数字和单位标识符组成的长度值,允许负值。取百分比是基于字体高度尺寸。

    • text-indent:(首行缩进,设置首行缩进量)长度单位|百分比单位

      • 长度单位可以使用绝对单位和相对单位,也可以使用百分比单位。

  • 字符装饰、英文大小写转换属性

    • text-decoration:(字符装饰)主要完成文字加上画线、下划线、删除线

      • text-decoration:none|underline|overline|line-through

    • text-transform:(英文大小写转换)转换英文大小写

      • text-transform:capitalize(将每个单词第一个字母转换为大写)|uppercase(全部转换为大写)|lowercase(全部转换为小写)|none

  • 水平对齐、垂直对齐属性

    • text-align(水平对齐):规定元素的水平对齐方式

      • text-align:left|right|center|justify(两端对齐)

    • vertical-align:规定元素垂直对齐方式

      • vertical-align:top|middle|bottom|text-top|text-bottom top:把元素的顶端与行中最高元素的顶端对齐 middle:把次元素放置在父元素的中部 bottom:把元素的顶端和行中最低元素的顶端对齐 text-top:把元素的顶端和父元素字体的顶端对齐 text-bottom:把元素的底端和父元素字体的底端对齐

4.CSS颜色与背景

  • color:设置元素字体的色彩

    • color:颜色英文名|rgb(r%,g%,b%)|rgb(r,g,b)|#FFFFFF|#3FE

  • background:用于设置指定元素的背景色彩、背景图案

    • background-color:背景颜色

      • 同color属性设置颜色一样

    • background-image:背景图片

      • background-image:url(“图像名字/地址”)|none

    • background-attachment:设置背景图案在元素滚动的时候是否要滚动

      • background-attachment:scroll(一起滚动)|fixed(固定不滚动)

    • background-position:设置背景图案的起始位置

      • background-position:参数1(left|center|right|x%|xpos) 参数2(top|center|bottom|y%|ypos) 第一个参数表示水平位置,第二个参数表示垂直位置

    • background-repeat:当背景图案小于知道那个元素是是否要重复

      • background-repeat:repeat(完全填充)|no-repeat(不重复)|repeat-x(水平方向填充元素大小空间)|repeat-y(垂直方向填充元素大小)

5.CSS列表样式

  • list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(阿拉伯数字)|lower-roman(小写罗马数字)|upper-roman(大写罗马数字)|lower-alpha(小写英文字母)|upper-alpha(大写英文字母)|none

  • list-style-position:outside(标志放在文本外,任何换行文本均不对齐)|inside(标志放在文本中,任何换行文本均对齐)

6.CSS盒模型

  • MBPC模型:margin(外边界、外边距、边界,盒子边框与页面边界之间)|border(边框)|padding(填充、内边距、内边界,内容与边框之间的距离)|content(内容)

  • 一个盒子的高=上边界+上边框+上填充+内容高度+下填充+下边框+下边界

  • 一个盒子的宽=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

  • margin参数设置

    • margin:10px 20px 30px 40px

    • 一个参数:四个边界均为该参数

    • 两个参数:上下为第一个参数,左右为第二个参数

    • 三个参数:上为第一个参数,左右为第二个参数,下为第三个参数

  • border参数设置

    • border-style:设置不同风格边框样式 可以每个边框设置设置一个样式:border-top-style...

      • hidden|none:无边框 dotted:定义点状边框 dashed:定义虚线 solid:定义实线 double:定义双线 groove:定义3D凹槽边框 ridge:山脊状边框 outset:使页面浮出感边框 inset:是页面沉入感边框

    • 边框宽度:border-width:medium(默认值)|thin(小于默认宽度)|thick(大于默认宽度)|length(长度值)

  • padding:长度|百分比

    • padding-top|right|bottom|left:长度|百分比

7.示例?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css样式属性</title>
  <style>
    .css1{
      font-size:50px;
      font-style: italic;
    } 
    #css2{
      font-size: 25em;
      font-size: 50ex;
      font-size: 100%;
    } 
    .word{
      font-size:50px;
      font-style:oblique;
      font-weight: bold;
    }
    .word1{
      font-size:50px;
      font-style:normal;
      font-variant: small-caps;
      font-weight: 100;
    }
    #word2{
      font:italic bolder small-caps 24px 宋体;
    }
    div{
      height: 1000px;
      width: 2000px;
      background-color: antiquewhite;
      /* text-transform:capitalize; */
      /* text-transform: uppercase; */
      text-transform:lowercase;
      /* text-transform: none; */
      text-align: justify;
      background-position: 20px;
      vertical-align: middle;
    }
    img{
      height: 100px;
      width: 80px;
    }
    #style{
      letter-spacing: 2px;
      line-height:1em;
      text-indent:2em;/*缩进两个单位*/
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <p>
    绝对单位:英寸(in),厘米(cm),毫米(mm),磅(pt),pica(pc)
    <hr>
    相对单位:em(字体高度);ex(小写字母x的高度,一般em/2=ex);px(像素点);%(通过另外一个值进行计算)
  </p>

  <div class="css1" id="css2">
    World!
  </div>

  <h3>关于font-style的取值</h3>

  <hr>

  <div class="word">文字文字wenziwenzi</div>
  <div class="word1">文字AWDEWEWwenzi</div>使用小型大写字母字体
  <p id="word2">文字文字wenziwenzi</p>

  <h2>文本样式</h2>
  <div>letter-spacing用于<img src="./kong.jpg">设置字符间距.CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表</div>
   <p id="style">CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表</p>
</body>
</html>

文章来源:https://blog.csdn.net/m0_75125827/article/details/135323782
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。