CSS2基础（补充part3）

已于 2024-08-26 16:31:29 修改
阅读量1.1k 收藏 30
点赞数 40
分类专栏： CSS合集 前端 文章标签： 前端 html css vscode
于 2024-08-25 21:47:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wozhaonue_w/article/details/141535440
版权

CSS2基础

盒子模型

常用长度单位

语法：

 html {
            font-size: 20px;
        }
        /* 第一种长度单位：px */
        .oh1 {
            width: 200px;
            height: 200px;
            font-size: 20px;
            background-color: skyblue;
        }
        /* 第二种长度单位：em （相对于元素font-size的倍数）
           若本元素没有，则找父元素，如果连body都没有，则默认为16px
            （不同浏览器的默认值标准不一样）
        */
        .oh2 {
            width: 10em;
            height: 10em;
            font-size: 20px;
            background-color: skyblue;
        }
        /* 第三种长度单位：rem （相对于根元素html标签的font-size的倍数）
            html标签的font-size默认也为16px（相对于chrome浏览器）
        */
        .oh3 {
            width: 10rem;
            height: 10rem;
            font-size: 20px;
            background-color: skyblue;
        }

        /* 第四种长度单位： % 相对于父元素的百分比 */
        .oh4 {
            width: 200px;
            height: 200px;
            font-size: 20px;
            background-color: skyblue;
        }
        .inside {
            width: 100px;
            height: 180px;
            font-size: 30px;
            background-color: aqua;
        }

必须加单位，否则无效

元素的显示模式

分类
  • 块级元素
  • 行内元素
  • 行内块元素
作用
作用块级行内行内块
在页面内独占一行，不与其他元素共用一行√
在页面内不独占一行，多的行内元素可以从左到右排列√√
默认宽度：撑满父元素√
默认宽度：由内容撑开√√
默认高度：由内容撑开√√√
可以通过CSS设置宽高√√
不可以通过CSS设置宽高√
语法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .oh1 {
            background-color: skyblue;
        }
        .oh2 {
            background-color: salmon;
        }
        .oh3 {
            width: 50px;
            height: 100px;
            background-color: khaki;
        }
        .o1 {
            background-color: burlywood;
        }
        .o2 {
            background-color: aqua;
        }
        .o3 {
            background-color: bisque;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>  
    <div class="oh1">大圣 床前明月光，疑是地上霜，举头望明月，低头思故乡。黄河之水天上来，奔流到海不复回。 life is a fucking movie ,so i just keep going with my heart something will happen if you always think that is true and work hard for it;</div>
    <div class="oh2">大圣</div>
    <div class="oh3">大圣fasfasdfsdfafsd</div>
    <br>
    <span class="o1">大圣</span><span class="o2">大圣</span><span class="o1">大圣</span><span class="o2">大圣</span>
    <span class="o1">大圣</span><span class="o2">大圣</span><span class="o1">大圣</span>
    <span class="o2">大圣</span><span class="o1">大圣</span> <span class="o1">大圣</span>
    <span class="o2">大圣</span><span class="o1">大圣</span> <span class="o2">大圣</span>
    <span class="o1">大圣</span>span class="o2">大圣</span> <span class="o1">大圣</span>
    <span class="o1">大圣</span> <span class="o2">大圣</span><span class="o2">大圣</span>
    <span class="o1">大圣</span><span class="o1">大圣</span> <span class="o1">大圣</span>
    <span class="o2">大圣</span> <span class="o2">大圣</span> <span class="o2">大圣</span>
    <span class="o1">大圣</span><span class="o2">大圣</span><span class="o1">大圣</span>
     <span class="o2">大圣</span> <span class="o1">大圣</span> <span class="o2">大圣</span>
   <span class="o1">大圣</span><span class="o2">大圣</span><span class="o1">大圣</span>
   <span class="o2">大圣</span> <span class="o1">大圣</span> <span class="o1">大圣</span>
    <span class="o2">大圣</span><span class="o2">大圣</span><span class="o1">大圣</span>
     <span class="o2">大圣</span> <span class="o1">大圣</span><span class="o2">大圣</span>
     <span class="o1">大圣</span> <span class="o2">大圣</span> <span class="o1">大圣</span>
    <span class="o2">大圣</span> <span class="o1">大圣</span><span class="o2">大圣</span>
    <span class="o1">大圣</span><span class="o2">大圣</span><span class="o1">大圣</span>
   <span class="o2">大圣</span><span class="o2">大圣</span><span class="o2">大圣</span>
   <span class="o1">大圣</span>
    <br>
    <span class="o1">dasheng</span>
    <span class="o2">dashengdasheng</span>
    <br>
    <span class="o1">大圣 床前明月光，疑是地上霜，举头望明月，低头思故乡。黄河之水天上来，奔流到海不复回。 life is a fucking movie ,so i just keep going with my heart something will happen if you always think that is true and work hard for it;</span>
    <br>    
    <span class="o3">dasheng</span>
    <br>

</body>
</html>

显示的页面：

总结各元素的显示模式

[!IMPORTANT]

  • 块级元素
    1. 主体结构标签：html,body
    2. 排版标签：h1~h6,hr,p,pre,div
    3. 列表标签：ul,ol,li,dl,dt,dt
    4. 表格相关标签：tabel,tbody,thead,tfoot,tr,caption
    5. 其他标签：form,option

[!IMPORTANT]

  • 行内元素
    1. 文本标签：br,em,strong,sup,del,ins
    2. 其他标签：a,label

[!IMPORTANT]

  • 行内块元素
    1. 图片：img
    2. 单元格：td,th
    3. 表单控件：input,textarea,select,button
    4. 框架标签：iframe
修改元素的显示模式

display

语法：

 div {
            display: inline;
            background-color: skyblue;
        }

属性值：

  • none：元素被隐藏
  • block：元素被当作块级元素
  • inline：元素被当作行内元素
  • inline-blcok：元素被当作行内块元素

盒子模型的组成

本质

html元素就是一个个盒子，如下图所示

语法：

 div  {
            background-color: skyblue;
            /* 内容区的宽 */
            width: 50px;
            /* 内容区的高 */
            height: 80px;
            /* 内边框，内容区的背景颜色会填充内边框 */
            padding: 20px;
            /* 边框 内边框的背景颜色会填充边框 */
            border: 1px dashed black;
            /* 外边距 */
            margin: 10px;
            font-size: 20px;

        }

[!NOTE]

  • 补充
    1. margin：外边距（盒子与外界的距离）
    2. border：边框（盒子的边框）
    3. padding：内边距（紧贴内容的补白区域）
    4. content：内容（元素中的文本或后代元素都是它的元素）
    5. 盒子的大小：content+padding+border
    6. margin不会影响盒子的大小，而是影响位置，但是当盒子与外界的距离无法满足margin的值，则会挤占盒子的空间
内容区（content）

属性

  • width：内容区域宽度（长度）
  • height：内容区域高度（长度）
  • max-width：内容区的最大宽度（长度）
  • min-width：内容区的最小宽度（长度）
  • max-height：内容区的最大高度（长度）
  • min-width：内容区的最小高度（长度）

括号里为使用的单位

语法：

div {
            height: 100px;
            background-color: skyblue;
            min-width: 200px;
            max-width: 800px;
            max-height: 50px;
            min-height: 20px;
        }

若写了height和width，则无需补充最大最小宽度和高度（这两个一般不一起使用）

最大宽度和最小宽度都有默认值（不同浏览器标准不一样）

内边距（padding）

属性：

  • padding-top：上内边距（长度）
  • padding-bottom：下内边距（长度）
  • padidng-left：左内边距（长度）
  • padding-right：右内边距（长度）
  • padding：复合属性

语法：

div {
            /* 左内边距 */
            padding-left: 10px;
            /* 右内边距 */
            padding-right: 10px;
            /* 上内边距 */
            padding-top: 20px;
            /* 下内边距 */
            padding-bottom: 30px;
            /* 复合属性 写一个值 上下左右都为10px*/
            padding:10px;
            /* 复合属性 写两个值 两个值分别对应 上下 左右 */
            padding:10px 20px;
            /* 复合属性 写三个值  三个值对应 上 左右 下 用的不多*/
            padding:10px 20px 20px;
            /* 复合属性 写四个值 四个值分别对应 上 右 下 左*/
            padding:10px 20px 30px 40px;
            background-color: skyblue;
            height: 100px;
        }

补充：

行内元素的上下边距不占位置，容易导致元素产生重叠

边框（border）

属性：

border-style：边框风格（如实线，虚线等等）

border-color：边框颜色

border-width：边框宽度

以上三个都是复合属性，可以分为上下左右四个区域

也可以是border-right等复合属性

语法：

/* border-width,border-style,border-color是复合属性 */
        div {
            /* 上边框 */
            border-top-width: 10px;
            border-top-color: skyblue;
            border-top-style: dashed;
            /* 右边框 */
            border-right-width: 5px;
            border-right-color: aqua;
            border-right-style: dotted;
            /* 下边框 */
            border-bottom-width: 3px;
            border-bottom-color: brown;
            border-bottom-style: double;
            /* 左边框 */
            border-left-width: 2px;
            border-left-color: saddlebrown;
            border-left-style: solid;
            /* 内容区 */
            width: 50px;
            height: 80px;
            background-color: azure;
        }

外边框（margin）

区别：

无颜色，无风格

概念：

外界到盒子的距离

外界也可以是其他元素形成的盒子

语法：

 div {

​      /* 内容区 */

​      width: 50px;

​      height: 80px;

​      background-color: skyblue;

​      /* 外边距 */

​      margin-top: 10px;

​      margin-left: 20px;

​      margin-bottom: 30px;

​      margin-right: 40px;

​      /* margin为复合属性，属性值的个数的应用参考前面的padding，顺时针 */

​    }

图片（外边框10203040）

margin注意事项

[!IMPORTANT]

  1. 子元素盒子加上外边距都在父元素content里面
  2. 块级元素margin左上宽度影响自身位置，右下宽度影响兄弟元素位置
  3. 行内块及行内元素margin左宽度影响自身位置，右宽度影响兄弟元素位置，上下宽度可以设置但无效
  4. margin可以是负值，若同为块级元素会导致元素的覆盖
  5. 块级元素子元素margin左右宽度设置auto可以使在父元素水平居中

语法：

2，3点的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .oh1 {
            background-color: skyblue;
        }
        .oh2 { 
            background-color: brown;
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .oh3 {
            background-color: wheat;
        }
        .i2 {
            margin-left: 20px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="oh1">大圣</div>
    <div class="oh2">大圣</div>
    <div class="oh3">大圣</div>
    <img src="../favicon.ico" alt=""><img class="i2" src="../favicon.ico" alt=""><img  src="../favicon.ico" alt="">
</body>
</html>

图片

4，5点的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .i {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .q{
            background-color: blue;
            margin: -100px;
        }
        .outer {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .center {
            margin-left: auto;
            margin-right: auto;
            width: 20px;
            height: 20px;
            background-color: saddlebrown;
        }
    </style>
</head>
<body>
    <div class="i"></div>
    <br>
    <div class="i q"></div>
    <br>
    <div class="i">
        <div class="o"></div>
    </div>
    <br>
    <div class="outer">
        <div class="center"></div>
    </div>
</body>
</html>

图片

margin塌陷问题

概念：

父元素会吃掉第一个元素的margin上宽度和最后一个元素的margin下宽度，使父元素的位置发生变化

原因：

以前网页较为简单，设计语言时觉得这样子设计会比较好

语法：（解决方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            background-color: skyblue;
            width: 400px;
            /* 解决塌陷问题，告诉浏览器这是一个标准的盒子 */
            /* 方法一 border值为0px不可以解决 */
            border: 1px;
            /* 方法二 padding值为0px也不可以解决*/
            padding: 1px;
            /* 方法三 */
            overflow: hidden;
        }
        .inner1 {
            background-color: rebeccapurple;
            width: 100px;
            height: 100px;
            margin-top: 200px;
            margin-bottom: 200px;
        }
        .inner2 {
            background-color: saddlebrown;
            height: 100px;
            width: 100px;
            margin-top: 210px;
            margin-bottom: 200px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>
    <div>test</div>
</body>
</html>
margin合并问题

概念：

外界到盒子的距离为外边距，但外界也包括了不同的盒子，所以两个不同的盒子都有外边距时会产生重叠，合并

解决：

只设置一个margin即可

左右不合并

处理内容溢出问题

概念：

当父元素容器的高度和宽度确定时，里面的文本过多或子元素过大，会出现内容溢出的问题

解决方法：

通过overflow属性来进行处理

语法：

div {
            background-color: skyblue;
            width: 70px;
            height: 70px;
            overflow: scroll;
        }

谁是容器就在谁身上设置overflow属性

属性值：

  • visible：显示（默认值）
  • hidden：隐藏
  • scroll：显示滚动条，不论内容是否溢出
  • auto：依据内容是否溢出来判断是否显示滚动条

[!NOTE]

overflow-x和overflow-y为实验性属性，不建议进行使用

overflow还能用来解决其他的问题

隐藏元素的方式

分类：

属性名属性值作用
visibility“show”或“hidden”使元素隐藏，但元素的位置依旧被其占用
display”none“使元素隐藏，而且其他元素可以占据其位置

display的其他属性值

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .o {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            visibility: hidden;
        }
        .none {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            display: none;
        }
    </style>
</head>
<body>
    <div class="o"></div>
    <div>test</div>
    <div class="none"></div>
    <div>test</div>
</body>
</html>

在这里插入图片描述

样式的继承

概念：

子元素会继承父元素一些样式（如果子元素没有被选择器选择或者整体赋予样式）

子元素继承的样式都是不会影响盒子大小和位置的一些样式

  • 会继承：字体属性，文本属性（除了vertical-align），文本颜色等
  • 不会继承：边框，背景，内边距，外边距，宽高，溢出方式等

元素的默认样式

例子：

元素：下划线，字体颜色，鼠标小手

补充：

若需要更改元素的默认样式，需要通过选择器进行改变，因为继承的样式的优先级低于元素的默认样式

布局小技巧

使用原因：

  • 行内块元素或行内元素可以被父元素当作文本处理
  • 块级元素的margin也被父元素的内容区包裹进去

技巧：

子元素在父亲中：

位置块级行内（块）
水平居中margin左右设置值为auto父元素text-align值设为center
垂直居中margin-top = （父元素content - 子元素盒子）/ 2父元素height = line-height，子元素vertical-align值为middle

**行内（块）**元素若要在父元素中绝对垂直居中，还需要使父元素的font-size值为0

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .o {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            overflow: hidden;
            text-align: center;
        }
        .q {
            line-height: 200px;

        }
        /* 块元素在盒子内中心 */
        /* 水平居中 margin的左右值设置为auto */
        /* 垂直居中 margin的上下值设置为（父元素内容区高度 - 子元素盒子高度） / 2 */
        .i1 {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin:75px auto;
            text-align: center;
            line-height: 50pxf;
        }

        .i2 {
            vertical-align: middle;
            background-color: cadetblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="o">
        <div class="i1"> 我勒个扫杠</div>
    </div>
    <br>
    <div class="o q">
        <span class="i2">大圣</span>
    </div>
    <br>
    <div class="o">
        <div class="i3"></div>
    </div>
    <br>
    <div class="o">
        <span class="i4"></span>
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            text-align: center;
            line-height: 400px;
            font-size: 40px;
        }
        .inner {
            background-color: blue;
            vertical-align: middle;
            font-size: 20px;
        }
        img {
            width: 50px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="outer">
        <spam class="inner">
            幽兰<img src="../favicon.ico" alt="">
        </span>
    </div>
</body>
</html>

元素之间的空白问题

概念：

当元素在网页中进行排列时，往往会因为源代码中的空格使网页中多出不必要的空白

解决方式：

  1. 让源代码中的空格和回车消失（***但此方法在源代码多起来的时候会导致混乱）
  2. 使父元素的font-size的值为0，使空格和回车在网页中的效果消失（推荐）

行内块的幽灵空白问题

概念：行内块元素在父元素中，在高度上无法占满

本质：

行内块元素与父元素的文本的基线对齐，而其与文本最底端有一定距离

解决方法：

  1. vertical-align设置值，除了baseline
  2. display设置值为block（前提是父元素中无内容）
  3. 父元素font-size设置为0px

语法：

div {
            width: 400px;
            background-color: skyblue;
            /* 方法3 */
            font-size: 0;
        }
        img {
            width: 200px;
            /* 方法1 */
            vertical-align: bottom; 
            /* 方法2 */
            display: block;
        }
超雄代码狂
关注
专栏目录
Python Web开发记录 Day13：Django part7 Ajax入门与案例（任务管理）
流苏的博客
03-18 1320
Python Web开发记录 Day13：Django part7 Ajax入门与案例
【CSS】CSS字体样式【CSS基础知识详解】
@花无缺
11-08 1万+
文字是网页界面上最常见的元素，而文字的字体、大小和文字样式等都可以通过CSS来设置。在 CSS 中，有五个通用字型： 衬线字体（Serif） 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感 特点：文字笔画粗细不均匀，并且首尾有笔锋装饰 场景：报刊书籍中应用广泛 常见该系列字体：宋体、Times New Roman 无衬线字体（Sans-serif）字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。 特点：文字笔画粗细均匀
CSS字体的单位
wyt20040310的博客
10-10 475
相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size。相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-size，实际上是屏幕上的一个个小点，100px，100个小点，这个点，正常情况我们是看不到，html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px。如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，也是我们最常用的长度单位，它是固定单位。
css文本只展示两行，多余的用省略号显示
最新发布
qq_35478008的博客
08-20 627
【代码】css文本只展示两行，多余的用省略号显示。
CSS实现文本显示两行(或者多行)，超过部分用省略号隐藏
qq_54140719的博客
03-12 5512
控制文本显示的行数，并超出的部分用省略号隐藏。
最详细的CSS字体样式总结包含自定义文字样式（font-family、font-size、font-weight、font-style等）
weixin_56242678的博客
05-04 5121
本文介绍了前端CSS字体样式的常见用法，希望对各位有所帮助。
CSS font-family 各字体一览表
热门推荐
吃不胖的程序猿历程
08-04 2万+
windows常见内置中文字体 字体中文名 字体英文名宋体                      SimSun（浏览器默认）黑体                      SimHei微软雅黑               Microsoft Yahei微软正黑体            Microsoft JhengHei楷体              ...
从HTML和CSS开始-第4/12部分-布置第一个Web页面
04-03
在提供的文件“Beginning-with-HTML-and-CSS-Part-Laying-Out-Y.pdf”中，你将深入学习这些概念，并通过实际案例练习布置你的第一个Web页面。此外，“LogOn.aspx”链接可能指向一个补充资源，如一个关于HTML和CSS盒...
【前端面试】Part 1：2020届初级前端校招笔试题及面经总结 —— 基础知识题
苏珊蓝顿
09-16 8323
2020届初级前端校招笔试题及面经总结 —— 持续更新
HTML期末作业：基于html+css+javascript+jquery实现古诗词网页 学生网页设计作品 web前端开发技术 web课程设计 网页规划与设计
qq_38518191的博客
03-20 316
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
javaweb整合开发 完全自学手册 技术文档PartI
02-17
此外，了解HTML、CSS和Bootstrap等前端技术也是必要的，它们构建了用户界面的基础。对于JavaWeb开发者来说，熟悉开发工具如Eclipse、IntelliJ IDEA，版本控制工具如Git，以及构建工具如Maven或Gradle也十分关键。 ...
font-awesome.min.css
04-22
css字体应用下载，下载下来直接可以在HTML里面加载进来应用
css字体样式属性大全（内附实例）
weixin_45135068的博客
07-31 3749
目录 font-size：字号大小 font-family：字体 font-weight：字体粗细 font-style：字体风格 综合设置字体样式 font-size：字号大小 font-size 属性用于设置字体字号，该属性的值可以使用相对长度单位，也可以使用绝对单位长度，其中，相对单位比较常用，推荐使用像素单位px，绝对单位使用较少 可选参数值： xx-small|x-small|small|medium|large|x-large|xx-large|smaller|la
css-多行文本仅显示两行
m0_58172543的博客
09-18 478
【代码】多行文本仅显示两行。
css文字显示两行，溢出显示省略号，点击查看更多
Crazy_GirlLL的博客
04-20 1万+
效果图如下： 初始化展示两行，超出显示省略号，点击查看全部，展示全部内容，点击收起，恢复初始化状态两行 知识点： 展示两行，用的css属性： display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2; 利用clientHeight和scrollHeight的特性比较，来判断内容是否溢出 摘自：https://blog.csdn.net/qq_35430000/article/det...
最多显示2行文字,多余的省略显示。
qq_43532275的博客
02-14 1万+
前端最多显示2行文字,多余的省略显示。
css设置各种中文字体如雅黑、黑体、宋体、楷体等等
A2830563的专栏
11-12 7625
这篇文章主要介绍了css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等，需要的朋友可以参考下 代码如下: .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }  说明：  加上中文名“微软雅黑”是为了兼容opera。  Microsof
CSS——CSS常用的字体样式
万里顾一程的博客
11-08 1万+
CSS——字体样式 常用： font-family：字体 font-size：大小 font-weight：粗细 color：颜色 字体样式测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ font-family:楷
CSS常用字体名列表
Tao的前端笔记
06-10 619
windows常见内置中文字体 字体中文名 字体英文名 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft Yahei 微软正黑体 Microsoft JhengHei 楷体 KaiTi 新宋体 NSimSun 仿宋 FangSong OS X常见内置中文字体 字体中文名 字体英文名 苹方 PingFang SC 华文黑体 STHeiti 华文楷体 STKaiti 华
HTML5+CSS3基础知识大全
**CSS3基础知识点** 1. **CSS简介**：CSS（Cascading Style Sheets）是一种样式表语言，用于控制网页的布局和样式。 2. **CSS结构**：CSS结构主要包括选择器、属性和值，选择器用于选择要样式化的元素，属性用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值