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