html之CSS设计（文本、边框、列表标签、display设置、内外边距）_查看html中及相应的css,及边距属性-优快云博客

本文链接：https://blog.youkuaiyun.com/Viewinfinitely/article/details/105820106

文章目录

本篇文章主要介绍CSS设计中的文本属性、边框边距、列表标签、display的几种用法，还有一个最容易被忽视的点，就是内外边距的设定，在网页设计中，边距的控制是极为重要的。（在“二、边框边距”中有各种边框样式总结）

一、文本属性

1、属性

文本大小：font-size: 10px;
对齐方式：text-align: center;
文本行高：line-height: 200px;
垂直对齐方式：vertical-align:－4px （只对行内元素有效，对块级元素无效）
首行缩进：text-indent: 150px;
字母间距：letter-spacing: 10px;
单词间距：word-spacing: 20px;
首字母大写：text-transform: capitalize;

2、测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
   
   
            height:100px;
            background-color: chartreuse;
            text-align:center;
            line-height:100px;
        }
    </style>
</head>
<body>

<div>一个文本属性
    <p>一个P标签</p>
</div>

</body>
</html>

文本属性

二、边框属性

1、属性

边框粗细：border-width:5px;
边框样式：border-style:dashed;
边框颜色：border-color: red;
简便写法：border:5px dashed red;

2、边框样式总结
无边框
点线式边框
槽线式边框
脊线式边框
内嵌效果的边框
突起效果的边框
破折线式边框
直线式边框
双线式边框

3、测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
   
   
            width