CSS学习总结（二）_border:3px rgb-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42093672/article/details/104441508

博客主要介绍了页面美化和盒子模型相关知识。页面美化方面，涉及使用span标签突出重点、字体样式、文本样式、阴影、超链接伪类和列表等内容。盒子模型包含外边距、边框、内边距和内容，还提到了盒子的计算方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.美化页面

3.1重点突出使用span标签

 欢迎学习 <span>java</span>

3.2字体的样式

       /*
        font-family：字体的样式
        font-weight：字体的粗细
        font-size：字体的大小
        color：字体的颜色
        */

3.3文本样式

1、颜色 color rgb(red,green,blue) rgba(red,green,blue,alpha)

   /*
        font-family：字体的样式
        font-weight：字体的粗细
        font-size：字体的大小
        color：字体的颜色
        */

2、**文本对齐的方式 **

 text-align = center

3、首行缩进

text-indent: 2em;

4、**行高 **

line-height：  单行文字上下居中！ line-height =  height

5、装饰 text-decoration:

下划线
 text-decoration: underline;
中划线
text-decoration: line-through;
上划线
text-decoration: overline;
a标签去掉下划线
text-decoration:none;

6、文本图片水平对齐：

  vertical-align: middle

3.4阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/ 
text-shadow: #ff2121 10px -10px 2px;字体的阴影

3.5超链接伪类

/*超链接原本的颜色*/
a{
color:red;
}
/*鼠标悬浮时的颜色*/
a:hover{
color:blue;
}

3.6列表

    /*
      list-style:
          none没有
          circle:空心圆
          decimal:数字
          square；实心正方形
         */
        ul li{
            list-style:  square;
        }

4.盒子模型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qy48nxuK-1582344416217)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1581310412873.png)]$

Margin(外边距)：清除边框外的区域，外边距是透明的

Border(边框)：围绕在内边距和内容外的边框

Padding(内边距)：清除内容周围的区域，内边距是透明的

Content(内容)：盒子的内容，显示文本和图像

**盒子的计算方式：**这个元素的大小

margin+border+padding+content

边框：   粗细 样式  颜色
border: 3px solid red;