CSS 常用元素属性

CSS 属性有很多, 可以参考文档 CSS 参考手册

1. 字体属性

设置字体

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

    <style>
        .one {
            font-family:"Microsoft YaHei";
        }
        .two {
            font-family:"宋体";
        }
    </style>
    <p class="one">这是微软雅黑</p>
    <p class="two">这是宋体</p>

大小

p {
    font-size: 20px;
}

• 可以给 body 标签使用
• font-size 要注意单位 px 不要忘记

    <style>
        .one {
            font-size: larger;
        }
        .two {
            font-size: 10px;
        }
    </style>
    <p class="one">大大大大大</p>
    <p class="two">小小小小小</p>

粗细

p {
    font-weight: bold;
    font-weight: 700;
}

可以使用数字表示粗细，取值范围是 100 -> 900，700 == bold, 400 == normal 即不变粗。

    <style>
        .one {
            font-weight: 900;
        }
        .two {
            font-weight: 100;
        }
    </style>
    <p class="one">粗粗粗</p>
    <p class="two">细细细</p>

文字样式

p {
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
 }

    <style>
        .one {
            font-style: italic;
        }
        .two {
            font-style: normal;
        }
    </style>
    <p class="one">倾斜</p>
    <p class="two">正常</p>

2. 文本属性

文本颜色

认识 RGB

我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色. 我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果. 计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示 为 00-FF). 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.

设置文本颜色

color 属性值的写法:

• 预定义的颜色值(直接是单词)

color: red;

• [最常用] 十六进制形式

color: #ff0000;

• RGB 方式

color: rgb(255, 0, 0);

鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.

文本对齐

控制文字图片等元素水平方向的对齐.

text-align: [值];

• center: 居中对齐
• left: 左对齐
• right: 右对齐

    <style>
        .one {
            text-align: left;
            font-size: 40px;
        }
        .two {
            text-align:center;
            font-size: 40px;
        }
        .three {
            text-align:right;
            font-size: 40px;
        }
    </style>
    <p class="one">左对齐</p>
    <p class="two">居中对齐</p>
    <p class="three">右对齐</p>

文本装饰

text-decoration: [值];

• underline 下划线. [常用]
• none 啥都没有. 可以给 a 标签去掉下划线.
• overline 上划线. [不常用]
• line-through 删除线 [不常用]

    <style>
        .one {
            text-decoration:underline;
        }
        .two {
            text-decoration:none;
        }
        .three {
            text-decoration:overline;
        }
        .four {
            text-decoration:line-through;
        }
    </style>
    <p class="one">下划线</p>
    <a class="two" href="#">啥都没有</a>
    <p class="three">上划线</p>
    <p class="four">删除线</p>

文本缩进

控制段落的 首行 缩进 (其他行不影响)

text-indent: [值];

• 单位可以使用 px 或者 em，使用 em 作为单位更好，1 个 em 就是当前元素的文字大小.
• 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

    <style>
        .one {
            text-indent: 2em;
        }
        .two {
            text-indent: -2em;
        }
    </style>
    <p class="one">正常缩进</p>
    <p class="two">反向缩进</p>

3. 背景属性

背景颜色

background-color: [指定颜色]

    <style>
        .one {
            background-color:red;
        }
        .two {
            background-color:green;
        }
    </style>
    <div class="one">红色背景</div>
    <div class="two">绿色背景</div>

背景图片

background-image: url(图片路径);

注意:

1. url 可以是绝对路径, 也可以是相对路径

2. url 上可以加引号, 也可以不加.

    <style>
        .one {
            background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
            height:400px;
        }
    </style>
    <div class="one"></div>

背景平铺

background-repeat: [平铺方式]

• repeat: 平铺，默认是 repeat.
• no-repeat: 不平铺
• repeat-x: 水平平铺
• repeat-y: 垂直平铺

    <style>
        .one {
            background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
            height:200px;
            background-size:150px;
            background-repeat: no-repeat;
            font-size: 50px;
            text-align: center;
        }
        .two {
            background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
            height:200px;
            background-size:150px;
            background-repeat:repeat-x;
            font-size: 50px;
            text-align: center;
        }
        .three {
            background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
            height:200px;
            background-size:150px;
            background-repeat:repeat-y;
            font-size: 50px;
            text-align: center;
        }
    </style>
    <div class="one">不平铺</div>
    <div class="two">水平平铺</div>
    <div class="three">垂直平铺</div>

背景位置

background-position: x y;

参数有三种风格:

• 方位名词: (top, left, right, bottom)
• 精确单位: 坐标或者百分比(以左上角为原点)
• 混合单位: 同时包含方位名词和精确单位

    <style>
        .one {
            background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
            height:200px;
            background-size:150px;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
    <div class="one">背景居中</div>

背景尺寸

background-size: length|percentage|cover|contain;

• lenth:填具体的数值,如 40px 60px 表示宽度为 40px, 高度为 60px。
• percentage:填百分比,按照父元素的尺寸设置。
• cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无 法显示在背景定位区域中。
• contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4. 圆角矩形

基本用法

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

    <style>
        .one {
        height: 200px;
        width:400px;
        border: 2px solid red;
        border-radius: 10px;
        }
    </style>
    <div class="one"></div>

生成圆形

让 border-radius 的值为正方形宽度的一半即可.

    <style>
        .one {
        height: 200px;
        width: 200px;
        border: 2px solid red;
        border-radius: 50%;
        }
    </style>
    <div class="one"></div>

5. 盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子"，这个盒子由这几个部分构成：

• 边框 border
• 内容 content
• 内边距 padding
• 外边距 margin

边框

基础属性

• 粗细: border-width
• 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
• 颜色: border-color

    <style>
        .one {
            height: 200px;
            width:200px;
            border-width: 10px;
            border-color: blue;
            border-style: solid;
    </style>
    <div class="one">边框测试</div>

支持简写, 没有顺序要求

border: 10px solid blue;

内边距

默认内容是顶着边框来放置的,用 padding 来控制这个距离。可以给四个方向都加上边距 padding-top, padding-bottom, padding-left, padding-right。也可以把多个方向的 padding 合并到一起：

padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

此时可以看到带有了一个绿色的内边距.

外边距

控制盒子和盒子之间的距离，可以给四个方向都加上边距 margin-top，margin-bottom，margin-left，margin-right。也可以把多个方向的 margin 合并到一起：

margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40