【CSS—前端快速入门】CSS常用样式
- 开源代码
- 2025-09-16 12:30:01
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 的样式，来观察页面的变化：
【CSS—前端快速入门】CSS常用样式由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【CSS—前端快速入门】CSS常用样式”
