【网页前端】CSS的基本样式边框、布局、字体

👀专栏介绍

【前端网页】 目前主要更新HTML，一起学习一起进步。

👀本期介绍

本期主要介绍CSS的基本样式边框、布局、字体

文章目录

1.边框属性

1.1border

1.2 width

1.3 height

1.4 background-color

1.5 background-image

2.布局

2.1 float

2.2 clear

3.字体

3.1 font-size

3.2 color

1.边框属性

所有的 HTML 标签都有边框，默认边框不可见

1.1border

设置边框的样式

格式：宽度 样式 颜色

例如： border:1px solid red ， 1 像素粗的 实线 红色边框。

线条样式： solid 实线， none 无边， double 双线

示例：

效果：

1.2 width

用于设置标签的宽度

示例：

效果：

1.3 height

用于设置标签的高度

示例：

效果：

1.4 background-color

用于设置标签的背景颜色

背景颜色设置的两种主流方式：

①英文单词

例如： red,blue,yellow

②颜色代码

格式： # 红绿蓝， 每一个颜色用两个 16 进制位数表示

例如： #ff1100 红色 ff ，绿色 11 ，蓝色 00 ，红色颜色最重，绿色其次，没有蓝色

示例：

效果：

1.5 background-image

用于设置元素背景图片。

格式： background-image : url ( "图片路径" );

例如：某个小狗爪子图片

作为背景图片引入一个长宽 25 的 DIV 标签中，

因为图片太小，所以为了铺满背景，CSS 采取了重复显示多个的策略。

若需要对背景图片是否重复显示进行调整，有以下几个常见设置

2.布局

2.1 float

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排

版， 就需要使用浮动属性

格式：

选择器 {float: 属性值 ;}

常用属性值：

none ：元素不浮动（默认值）

left ：元素向左浮动

right ：元素向右浮动

注意：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素

的

样式，所以设置浮动以后，页面样式需要重新调整

准备代码：

<style> 
    #d1{
        background-color: red; 
        width: 100px; 
        height: 100px; 
    } 
    #d2{
        background-color: green; 
        width: 110px; height: 110px; 
    }
    #d3{
        background-color: blue; 
        width: 120px; 
        height: 120px; 
    } 
</style> 
<div id="d1"></div> 
<div id="d2"></div> 
<div id="d3"></div>

示例 1 ：

效果 1：

示例 2：

效果 2：

2.2 clear

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。

如果要避免影响，需要使用 clear 属性进行清除浮动。

格式：选择器 {

clear: 属性值 ;

}

常用属性值：

left ：不允许该元素左侧有浮动元素（清除左侧浮动的影响）

right ：不允许该元素右侧有浮动元素（清除右侧浮动的影响）

both ：同时清除左右两侧浮动的影响（一般用 both ）

3.字体

3.1 font-size

用于设置字体的大小。

3.2 color

用于设置字体的颜色。

示例：

效果：