menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

CSS字体、行高等其他样式

武飞扬头像
JamesMoriartyZ
帮助1人

CSS字体、行高等其他样式

一、长度单位与颜色单位

        1. 长度单位

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
    <title>Document</title>
  8.  
    <!--
  9.  
    长度单位
  10.  
    1. 像素 px
  11.  
    就是电脑屏幕上的一个个的发光的小点, 我们眼睛是看不出来的
  12.  
    像素就是我们pc端最常用的一个单位, 它是一个固定单位
  13.  
     
  14.  
    2. 百分比 %
  15.  
    是父元素宽高的百分比, 是一个相对单位, 一般情况下,
  16.  
    做流式布局比较多, 会随着父元素的宽高变化而变化
  17.  
     
  18.  
    3. em
  19.  
    也是一个相对单位, 相对于当前字体大小来计算最终大小, 也就是
  20.  
    一个em等于一个font-size, 如果当前元素没有设置字体大小, 那么会
  21.  
    继承祖先元素的字体大小, 最终继承到html默认的字体大小, 是16px
  22.  
     
  23.  
    4. rem r root 根
  24.  
    也是一个相对单位, 相对于根标签html的字体大小来计算最终大小
  25.  
    1rem = 1个html的font-size
  26.  
    -->
  27.  
    <style>
  28.  
    section {
  29.  
    width: 300px;
  30.  
    height: 300px;
  31.  
    background-color: pink;
  32.  
    }
  33.  
    div {
  34.  
    /* width: 50%; */
  35.  
    /* height: 50%; */
  36.  
    /* width: 10em; */
  37.  
    /* height: 10em; */
  38.  
    width: 10rem;
  39.  
    height: 10rem;
  40.  
    background-color: red;
  41.  
    }
  42.  
    </style>
  43.  
    </head>
  44.  
    <body>
  45.  
    <section>
  46.  
    <div>到了方上。</div>
  47.  
    </section>
  48.  
    </body>
  49.  
    </html>
学新通

        2. 颜色单位

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
    <title>Document</title>
  8.  
    <!--
  9.  
    颜色单位
  10.  
    1. 在CSS可以直接使用颜色的单词来表示不同颜色
  11.  
    red, green, yellow, black等
  12.  
    缺点: 颜色单词太多, 不好描述
  13.  
     
  14.  
    2. 使用RGB值来表示不同颜色
  15.  
    rgb(红色, 绿色, 蓝色)
  16.  
    颜色的值 0-255之间 0最小, 255最大
  17.  
    直接用电脑或插件可以吸取颜色的比值
  18.  
     
  19.  
    3. RGBA
  20.  
    rgba(red, green, blue, alpha);
  21.  
    alpha 透明度 0-1之间 0是透明 1是不透明
  22.  
     
  23.  
    4. 使用十六进制的rgb来表示颜色, 原理上和RGB一样
  24.  
    十六进制: 0-9 abcdef 0表示最小, 代替0-255的0 ff表示最大, 代替0-255的25
  25.  
    用十六进制的值分别表示红色, 绿色, 蓝色的浓度
  26.  
    语法: #f00, 两两重复的表示, 可以省略一位
  27.  
    常用: #0f0 #00f #ccc #eee #333
  28.  
    5. HSL值(H - 色相值 0-360, S - 饱和度 0-100%, L - 亮度 0 - 100%)
  29.  
    -->
  30.  
    <style>
  31.  
    .box1 {
  32.  
    width: 100px;
  33.  
    height: 100px;
  34.  
    /* background-color: rgb(0, 255, 0); */
  35.  
    background-color: rgba(0, 255, 0, 0.5);
  36.  
    }
  37.  
    </style>
  38.  
    </head>
  39.  
    <body>
  40.  
    <div class="box1"></div>
  41.  
    </body>
  42.  
    </html>
学新通

二、字体

        1. 字体的样式

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
    <title>Document</title>
  8.  
    <!--
  9.  
    1. color 设置字体颜色
  10.  
    2. font-size 设置字体大小
  11.  
    3. font-family 设置字体样式
  12.  
    4. @font-face 自定义字体
  13.  
    -->
  14.  
    <style>
  15.  
    @font-face {
  16.  
    /* 给字体起的名字 */
  17.  
    font-family: '111';
  18.  
    /* 引入路径 */
  19.  
    src: url();
  20.  
    }
  21.  
    p{
  22.  
    color: red;
  23.  
    font-size: 30px;
  24.  
    /* 设置文字的字体 字体是设计师设计好的, 我们直接使用即可 */
  25.  
    font-family: cursive;
  26.  
    }
  27.  
    </style>
  28.  
    </head>
  29.  
    <body>
  30.  
    <p>赐招仄骨本之羊韩好策哥，龄我破无，导什。</p>
  31.  
    </body>
  32.  
    </html>
学新通

        2. 字体的分类

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <title></title>
  6.  
    <style>
  7.  
    /* p{
  8.  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  9.  
    } */
  10.  
    </style>
  11.  
    </head>
  12.  
    <body>
  13.  
    <!--
  14.  
    在网页中将字体分成5大类：
  15.  
    serif ['serif]（衬线字体）
  16.  
    sans-serif（非衬线字体）
  17.  
    monospace （等宽字体）
  18.  
    cursive ['kə:siv]（草书字体）
  19.  
    fantasy ['fæntəsi]（虚幻字体）
  20.  
    可以将字体设置为这些大的分类,当设置为大的分类以后，
  21.  
    浏览器会自动选择指定的字体并应用样式
  22.  
    一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底
  23.  
    -->
  24.  
     
  25.  
    <p style="font-size: 20px; font-family: serif">
  26.  
    衬线字体：我是一段文字，ABCDEFGabcdefg
  27.  
    </p>
  28.  
    <p style="font-size: 20px; font-family: sans-serif">
  29.  
    非衬线字体：我是一段文字，ABCDEFGabcdefg
  30.  
    </p>
  31.  
    <p style="font-size: 20px; font-family: monospace">
  32.  
    等宽字体：我是一段文字，IHABCDEFGabcdefg
  33.  
    </p>
  34.  
    <p style="font-size: 20px; font-family: cursive">
  35.  
    草书字体：我是一段文字，ABCDEFGabcdefg
  36.  
    </p>
  37.  
    <p style="font-size: 20px; font-family: fantasy">
  38.  
    虚幻字体：我是一段文字，ABCDEFGabcdefg
  39.  
    </p>
  40.  
    </body>
  41.  
    </html>
学新通

        3. 字体的其他样式

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <title></title>
  6.  
    <!--
  7.  
    设置一个文字大小 font-size
  8.  
    设置一个字体 font-family
  9.  
    设置文字斜体 font-style: ;
  10.  
    可选值：
  11.  
    normal 默认值 文字正常显示
  12.  
    italic 文字倾斜 （比较常用）
  13.  
    oblique 文字倾斜 （了解）
  14.  
     
  15.  
    设置文字的加粗
  16.  
    font-weight: ;
  17.  
    可选值：
  18.  
    normal 默认值 文字正常显示
  19.  
    bold 文字加粗
  20.  
    bolder 文字加粗
  21.  
    100-900 之间数值 100最细 900最粗 注意没有单位
  22.  
    设置一个小型大写字母
  23.  
    font-variant
  24.  
    可选值：
  25.  
    normal 默认值 文字正常显示
  26.  
    small-caps 设置小型大写字母
  27.  
     
  28.  
     
  29.  
    font简写
  30.  
    可以统一设置文字相关的一些样式
  31.  
    注意：
  32.  
    1、必须要有字体大小和文字的字体
  33.  
    2、字体大小必须在倒数第二位
  34.  
    文字字体必须在倒数第一位
  35.  
    -->
  36.  
    <style>
  37.  
    .p1 {
  38.  
    font-size: 2em;
  39.  
    font-family: "Times New Roman", Times, serif;
  40.  
    /* 设置文字斜体 */
  41.  
    font-style: oblique;
  42.  
    /* 设置文字的加粗 */
  43.  
    font-weight: 900;
  44.  
    }
  45.  
    .p2 {
  46.  
    color: red;
  47.  
    font-size: 35px;
  48.  
    font-variant: small-caps;
  49.  
    }
  50.  
    .p3 {
  51.  
    color: green;
  52.  
    font: italic bold 30px serif;
  53.  
    }
  54.  
    </style>
  55.  
    </head>
  56.  
    <body>
  57.  
    <p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>
  58.  
     
  59.  
    <p class="p2">我是一段文字，ABCDEFGabcdefg</p>
  60.  
     
  61.  
    <p class="p3">我是一段文字，ABCDEFGabcdefg</p>
  62.  
    </body>
  63.  
    </html>
学新通

三、行间距

        

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
    <title>Document</title>
  8.  
    <!--
  9.  
    1. 行高(line height) 文字占有的实际高度
  10.  
    行高 = 上间距 文字大小 下间距
  11.  
    上间距 = 下间距
  12.  
    如果要设置行与行之间的空白距离, 可以通过设置行高来实现
  13.  
    line-height样式名
  14.  
    可选值:
  15.  
    (1). 直接写大小, 单位: px/em/rem/%
  16.  
    (2). 直接写倍数, 1/2/3/4/5...
  17.  
    (3). 可以写百分比, 100%, 200%, 300%
  18.  
     
  19.  
    2. 单行文本在父元素垂直居中
  20.  
    只需要设置行高跟父元素高度一致
  21.  
     
  22.  
    3. font中也可以指定行高
  23.  
    font: 30px/60px cursive;
  24.  
    font: 字体大小/行高 字体;
  25.  
    -->
  26.  
    <style>
  27.  
    .p1 {
  28.  
    font-size: 26px;
  29.  
    color: red;
  30.  
    /* line-height: 50px; */
  31.  
    line-height: 2;
  32.  
    }
  33.  
    .p2 {
  34.  
    color: green;
  35.  
    font: 30px/60px cursive;
  36.  
    }
  37.  
    .box {
  38.  
    width: 100px;
  39.  
    height: 100px;
  40.  
    background-color: pink;
  41.  
    line-height: 100px;
  42.  
    }
  43.  
    </style>
  44.  
    </head>
  45.  
    <body>
  46.  
    <p class="p1">
  47.  
    况是太谓我也王司里帮未药能四，上即感赐她要三开马，之战日国。
  48.  
    有郭洪，鲜人氏纯郭，来张起同德皮小也月远大们你别到勇，谓劫快帅王老能招小揽磊起极的色上诗而，怒毒后君，韩单韩命足说才话感范一友，无领化前胜极到资房年极，通作了极几秦关会整自自老下五要助无是雷，皇陛沾。
  49.  
    </p>
  50.  
    <p class="p2">况是太谓我也王司里帮未药能四，上即感赐她要三开马，之战日国。</p>
  51.  
    <div class="box">
  52.  
    <a href="#">我是一个超链接</a>
  53.  
    </div>
  54.  
    </body>
  55.  
    </html>
学新通

四、文本相关样式

        1. 文本相关样式（一）

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
    <title>Document</title>
  8.  
    <!-- 文本相关样式 -->
  9.  
    <style>
  10.  
    h1 {
  11.  
    text-align: center;
  12.  
    text-shadow: 5px 5px 10px rgb(146, 143, 143);
  13.  
    }
  14.  
    .p1 {
  15.  
    font-size: 30px;
  16.  
    /* text-transform: none; */
  17.  
    /* text-transform: uppercase; */
  18.  
    /* text-transform: lowercase; */
  19.  
    /* text-transform: capitalize; */
  20.  
    /* text-decoration: line-through; */
  21.  
    /* letter-spacing: 10px; */
  22.  
    }
  23.  
    .p2 {
  24.  
    font-size: 30px;
  25.  
    /* text-align: center; */
  26.  
    text-indent: 2em;
  27.  
    }
  28.  
    .p3 {
  29.  
    background-color: pink;
  30.  
    /* 设置单行文本省略号的固定写法 */
  31.  
    /* 自行研究多行文本省略号写法 */
  32.  
    width: 300px;
  33.  
    /* 设置不换行 */
  34.  
    white-space: nowrap;
  35.  
    /* 设置多余内容隐藏 */
  36.  
    overflow: hidden;
  37.  
    /* 设置多余的内容以省略号的形式出现 */
  38.  
    text-overflow: ellipsis;
  39.  
    }
  40.  
    .box:hover {
  41.  
    box-shadow: 0px 0px 10px black;
  42.  
    }
  43.  
    .box {
  44.  
    width: 100px;
  45.  
    height: 100px;
  46.  
    background-color: green;
  47.  
    /* box-shadow: 0px 0px 10px black; */
  48.  
    }
  49.  
    </style>
  50.  
    <!--
  51.  
    1. text-transform 可以设置文本大小写
  52.  
    可选值:
  53.  
    none 文本正常显示 默认值
  54.  
    uppercase 字母大写
  55.  
    lowercase 字母小写
  56.  
    capitalize 首字母大写
  57.  
     
  58.  
    2. text-decoration 可以用来设置文本的修饰符
  59.  
    可选值:
  60.  
    none 文本正常显示 默认值
  61.  
    underline 文本下划线
  62.  
    overline 文本上划线
  63.  
    line-through 删除线
  64.  
     
  65.  
    3. letter-spacing 可以指定字符间距
  66.  
    4. word-spacing 可以指定单词之间的间距或句和句之间的间距
  67.  
     
  68.  
    5. text-align: 设置文本的对齐方式
  69.  
    可选值:
  70.  
    left 默认值 文本靠左对齐
  71.  
    right 文本靠右对齐
  72.  
    center 文本居中对齐
  73.  
    注意: 设置文本的对齐方式必须要给文本一定的空间, 如果要是行内元素的话,
  74.  
    它的宽度是被内容撑开的, 也就无法设置
  75.  
     
  76.  
    6. text-indent: 设置首行缩进
  77.  
    常用的长度单位: em
  78.  
     
  79.  
    7. white-space
  80.  
    设置网页如何处理空白, 换不换行
  81.  
    8. text-overflow
  82.  
    可选值: ellipsis 省略号
  83.  
     
  84.  
    9. text-shadow: h-shadow v-shadow blur color
  85.  
    4个参数(参数之间以空格隔开)
  86.  
    1. 阴影水平位移距离 正值向右 负值向左
  87.  
    2. 阴影的垂直位移距离 正值向下 负值向上
  88.  
    3. 阴影模糊半径
  89.  
    4. 阴影颜色, 一般情况下, 用rgba形式比较多, 选填, 默认是字体颜色
  90.  
     
  91.  
    10. box-shadow: h-shadow v-shadow blur color
  92.  
    4个参数和text-shadow一样, 唯一不同阴影颜色默认黑色
  93.  
    -->
  94.  
    </head>
  95.  
    <body>
  96.  
    <h1>人卧互，才圣快。</h1>
  97.  
    <p class="p1">
  98.  
    得历瞠一揽厅回鼓第话了为洪被流，国不全。 相后才说尽挟了若孔子无派非春薪好妄应常。
  99.  
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, voluptate.
  100.  
    </p>
  101.  
    <p class="p2">
  102.  
    学都子会，互但木下，夫县量人者回尝，几。了绝诗，为孔忧日败。Lorem ipsum dolor sit
  103.  
    amet consectetur adipisicing elit. Doloribus, esse?
  104.  
    </p>
  105.  
    <p class="p3">是夭是览的壬尤锐尺无，之快韩人中曰承劝一着挟望哥德区没，到。</p>
  106.  
    <div class="box"></div>
  107.  
    </body>
  108.  
    </html>
学新通

        2. 文本相关样式（2）

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8" />
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
    <title>Document</title>
  8.  
    <!-- vertical-align 设置元素垂直对齐方式 -->
  9.  
    <!--
  10.  
    作用:
  11.  
    1. 设置图文的对齐方式
  12.  
    2. 解决图片三像素问题
  13.  
    引入图片后, 图片与图片之间会有三像素空白, 正常情况下, 这个空白是不需要的
  14.  
    方法一:
  15.  
    vertical-align 非baseline
  16.  
    方法二:
  17.  
    设置其父元素font-size为0
  18.  
    方法三:
  19.  
    设置图片为块元素
  20.  
    方法四:
  21.  
    使图片脱离文档流, 设置它浮动或绝对定位
  22.  
    可选值:
  23.  
    baseline: 基线对齐 默认值 以x的最下方为标准
  24.  
    top: 文本靠上
  25.  
    bottom: 文本靠下
  26.  
    middle: 文本居中
  27.  
    -->
  28.  
    <style>
  29.  
    div{
  30.  
    width: 300px;
  31.  
    }
  32.  
    img{
  33.  
    width: 300px;
  34.  
    /* vertical-align: baseline; */
  35.  
    vertical-align: top;
  36.  
    }
  37.  
    </style>
  38.  
    </head>
  39.  
    <body>
  40.  
    <div>
  41.  
    <img src="../homework1121/images/game01.jpg" alt="!" width="300">
  42.  
    <img src="../homework1121/images/game01.jpg" alt="!" width="300">
  43.  
    </div>
  44.  
    </body>
  45.  
    </html>
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgeibie
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群