【CSS—前端快速入门】CSS 常用样式

CSS

常用 CSS 样式

1. 前端样式查询网站：

MDN Web Docs (mozilla.org)

w3school

2. border

2.1 借助 MDN 了解 border

我们借助 MDN 网站来学习 border 样式的使用：

2.2 border 常见属性

保存代码，打开页面：

对于标签不同样式的设置，可以用一个标签设置好所有的样式，并且因为是不同的样式，所以不需要指定样式的设置顺序：

2.3 border-width 的不同形式设置

我们也可以把一个边框的上下左右线条的宽度，设置为不同的像素：

|----------------------|
| 方法一：统一指定边框上下左右宽度 |

html 复制代码

<style>
    div{
        width: 500px;
        height: 200px;
        border-width: 5px;
        border-style: dashed;
        border-color: black;
    }
</style>

保存代码，打开页面：

|------------------------|
| 方法二：分别指定边框上下左右线条宽度 |

html 复制代码

<style>
    div{
        width: 500px;
        height: 200px;
            
        border-top-width:3px ;
        border-bottom-width:5px ;
        border-left-width:8px ;
        border-right-width:10px ;
            
        border-style: dashed;
        border-color: black;
    }
</style>

保存代码，打开页面：

|--------------------------------|
| 方法三：按照"上右下左"的顺时针顺序指定边框线条宽度 |

html 复制代码

<style>
    div{
        width: 500px;
        height: 200px;
        border-width: 2px  5px  7px  10px;
        border-style: dashed;
        border-color: black;
    }
</style>

保存代码，打开页面：

3. color

|-------------|
| 颜色的表现形式 |

|-------------|
| 1. 英文单词 |

|-----------------|
| 2. 以 RGB 形式 |

所有颜色都由 red , green , blue 三原色组成：

调色盘右边两列，分别代表透明度和颜色，可拖动上面的透明杆选择

点击调色盘中的某一种颜色后，代码会显示出三种颜色的比例参数，比例参数的范围[0 , 255]；

|----------------|
| 3. 十六进制表示法 |

4. font-size

font-size 表示设置字体大小：

html 复制代码

<!-- 将所有 class 属性为 text 的标签字体设置为 32 px -->

.text{
	font-size: 32px;
}

5. width / height

width：设置宽度

height：设置高度

只有块级元素可以设置宽高

块级元素是HTML标签的一种显示模式，对应的还有行内元素

常见块级元素：h1-h6, p, div 等，块级元素独占一行

常见行内元素：a , span , img 等，不能独占一行

块级元素独占一行，不用<br/>就可以自动换行，可以设置宽高

行内元素不独占一行，需要<br/>换行，不能设置宽高

6. 改变显示模式

使用 display 属性可以修改元素的显示模式

html 复制代码

display: block   <!-- 改为块级元素 -->

display: inline  <!-- 改为行内元素 -->

保存代码，打开页面：

保存代码，打开页面：

7. padding

padding：内边距，设置内容和边框之间的距离；

内容默认是顶着边框来放置的，用 padding 来控制这个距离：

8. margin

margin: 外边距，设置元素和元素之间的距离；

9. padding / margin 的使用

我们用如下代码，讲解内边距和外边距的操作：

保存代码，打开页面：

我们观察上述页面，发现 div1 和 div2 这两个框离得太近了，接下来要调整它们间的距离（外边距）：

保存代码，打开页面：

margin 添加后，会让元素之间的上下左右边距都是 10 px；

margin，padding 都是复合标签，我们只让 div1 的下边距生效：

保存代码，打开页面：

在第一个边框中，内容"div1"和 id=div5 的透明小格子，离 id=div1 的大格子太近了，我们也想调整一下它们和大格子的距离，就需要使用 padding

padding 和 margin 都是复合属性，赋值时也遵从如下原理：

10. 在浏览器中调试页面

我们可以按 F12 ，在浏览器的调试页面中，通过改变 css 的样式，来观察页面的变化：