html之CSS设计(文本、边框、列表标签、display设置、内外边距)


本篇文章主要介绍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、边框样式总结
<p style=border-style:none>无边框</p>
<p style=border-style:dotted>点线式边框</p>
<p style=border-style:groove>槽线式边框</p>
<p style=border-style:ridge>脊线式边框</p>
<p style=border-style:inset>内嵌效果的边框</p>
<p style=border-style:outset>突起效果的边框</p>
<p style=border-style:dashed>破折线式边框</p>
<p style=border-style:solid>直线式边框</p>
<p style=border-style:double>双线式边框</p>

3、测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
   
   
            width
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鸿蒙Next

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值