CSS之常用属性、元素的显示模式、盒模型(上)

简介: CSS之常用属性、元素的显示模式、盒模型(上)

一、字体属性

  • 字体名称可以用中文, 但是不建议.
  • 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
  • 如果字体名有空格, 使用引号包裹.
  • 建议使用常见字体, 否则兼容性不好.


设置字体

2e4ba91b7f5e41b794e4291d5ce5a262.png

设置大小和粗细

8a089c3f9dbc4442800a062873385c18.png


359d1f4e786e4c43ae3d3bfc71789aa5.png

二、文本属性

文本颜色

认识 RGB


我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.

我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.


计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).

数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色


3745ce08e4264546a1f08445db9bbdf6.png

文本对齐

不光能控制文本,还能控制图片的对齐


87ddb4fa485c4a7991687f62c896ea0a.png

文本缩进


b0539594036b4f0f876d98ab158b2e69.png

行高

661d15e83ddd4df7960a28d256d0174c.png

三、背景属性

5ba3df37b3fe442c83c79a8712644a9e.png

f335c17268e142b4986eeb4064ee95fe.png



1d8735607dea4ff0ac13535304c8c884.png

二、元素的显示模式

🍑块级元素


61db2ff6ec5144ebbf3161427c33cc9a.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 块级元素可以修改高度和宽度 -->
    <style>
        .test {
            width: 100px;
            height: 50px;
            background-color: brown;
        }
        .parent {
            width: 200px;
            height: 100px;
            background-color: aqua;
        }
        .child {
            height: 20px;/* 不写 width, 默认和父元素一样宽 不写 height, 默认为 0 (看不到了) */
            background-color: bisque;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: darkcyan;
        }
    </style>
    <!-- 行级元素无法修改高度和宽度,及时你在选择器了设置了,也不会生效,但背景可以设置 -->
</head>
<body>
    <div class="test">
        这是一个块级元素
    </div>
    <div class="parent">
        这是一个块父元素
        <div class="child">
            这是一个子级元素块
        </div>
    </div>
    <span>
        这是一个行级元素
    </span>
</body>
</html>


78b07f0eaaba42efbbd262a0f88eaf1c.png

d6cf590a79c84ed68f5e87e005bea4d0.png

🍑行内元素与内联元素


77b19382e0d842e4a0d4bb9a21fa2998.png

🌰 l栗子


46135a6f5fd342059b1c72675da33445.png

一个有关的前端面试题

6b226c14100b4e8dbd85c173e428b624.png

🍑元素的显示模式

8169d4be1737495b8dcf5a3dd9ee863f.png

栗子

d35dae1742e94dca95516ee4760ab426.png

此外,display还有一个功能:可以控制元素是否显示,可以通过他来隐藏元素


相关文章
|
11天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
16 7
|
1月前
|
前端开发 容器
CSS语言的属性(Property)和值(Value)
CSS语言的属性(Property)和值(Value)
|
1月前
|
前端开发
CSS语言的盒模型
CSS语言的盒模型
N..
|
21天前
|
前端开发 容器
CSS 网页布局元素
CSS 网页布局元素
N..
23 1
|
26天前
|
前端开发 UED 容器
CSS3美化网页元素
CSS3美化网页元素
9 0
|
1月前
|
前端开发 容器
CSS背景background八种属性
CSS背景background八种属性
|
5天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
16 0
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
8天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
10 0
|
25天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码