【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 的不同形式设置

---

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

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

---

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

保存代码，打开页面：

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

---

<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>

保存代码，打开页面：

---

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

---

<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 表示设置字体大小：

<!-- 将所有 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 属性可以修改元素的显示模式

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 的样式，来观察页面的变化：

---

---

---

---

---