怎样学习web前端css（程序员都必掌握的前端教程之CSS基础教程）
CSS基础教程（上）成哥为大家介绍了CSS的基础知识及选择器，本篇文章主要介绍CSS的常用样式属性及伪类等内容，下面成哥就为大家一一介绍这些内容。
01 CSS样式CSS的基础样式如下表所示：
下面我们主要讲解一下常用的样式。
（1）display样式
display属性有四个常用的值，用来修改标签的展示状态：
1）display:block，将标签设置为块级标签，块级标签独自占据一行高度，可以自定义width 和height，每个块级元素都从新一行开始，并且其后的元素都另起一行，常见的块级标签有div、h{number}、p、ul、table等；
2）display:inline，将标签设置为行内标签，行内标签会在一条直线上排列，不可以自定义自定义width和height，常见的行内元素有a、span等；
3）display:inline-block，将便签设置为行内块级标签（行内标签与块级标签的结合），可以自定义width和height，常见原生就是行内块级标签的有input、img标签；
4）display:none，隐藏标签，使用了该设置的标签在html页面中不显示。
下面我们对上述四种样式设置进行演示具体如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. </head>
6. <body>
7. <h4>块级标签示例</h4>
8. <!--我们将行内标签span设置为块级标签，最终效果设置成span效果的标签会独占一行，行内标签设置高度不生效，块级标签设置高度生效-->
9. <spanstyle="background-color:#2eabff;height:40px;">我是span1,我是行内标签在同一行，设置高度没生效</span>
10. <spanstyle="background-color:#722ed1;height:60px;">我是span2,我是行内标签在同一行，设置高度没生效</span>
11. <spanstyle="display:block;background-color:#87e8de;height:50px;">我是span3,我被设置
12. 成块级标签我独占一行，设置高度生效</span>
13.
14. <h4>行内标签示例</h4>
15. <!--将块级标签div设置成行内标签，让其在同行显示,并且对其设置高度不会生效-->
16. <divstyle="display:inline;background-color:#722ed1;height:50px;">我是div1,我被设置成行内标签，
17. 所以和div2在同行显示，设置高度没生效</div>
18. <divstyle="display:inline;background-color:#52c41a;height:50px;">我是div2,我被设置成行内标签，
19. 所以和div1在同行显示，设置高度没生效</div>
20.
21. <h4>行内块级标签示例</h4>
22. <!--将div模块设置成行内块级标签，可以让其在同行显示，同时还可以设置高度-->
23. <divstyle="display:inline-block;background-color:#a0d911;height:60px;">我是div3,
24. 被设置成行内块级标签，可同行显示，设置高度生效</div>
25. <divstyle="display:inline-block;background-color:#aaaaaa;height:50px;">我是div4,
26. 被设置成行内块级标签，可同行显示，设置高度生效</div>
27.
28. <h4>display:none示例</h4>
29. <span>我下面还有内容但被设置成display:none所以看不到，可以通过游览器页面内容debug中看到</span>
30. <divstyle="display:none">我被隐藏了</div>
31. </body>
32. </html>
（2）高度与宽度样式
height与width是用于设置html标签的宽度与高度的，其设置的单位通常有像素与百分比。如果height需要设置成百分比，那需要在其外面套一个父标签并设置其高度才可以，因为html高度是无限制的所以直接使用是无效的。height与width属性的其具体使用如下所示：
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. width:300px;
8. height:60px;
9. background-color:coral;
10. }
11. .class2{
12. width:50%;
13. height:10%;
14. background-color:#2aabd2;
15. }
16. </style>
17. </head>
18. <body>
19. <h4>height与width设置示例</h4>
20. <divclass="class1">宽300像素，高60像素</div>
21.
22. <!--由于class2中使用了为百分比的高度，所以必须在其外加上父标签同时需要设置其高度-->
23. <divstyle="height:500px">
24. <divclass="class2">宽50%，高10%</div>
25. </div>
26.
27. </body>
28. </html>
（3）字体样式
CSS可以对HTML的字体类型、字体大小、字体粗细及字体颜色等维度进行设置，其具体示例如下所示：
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. font-family:"MicrosoftYaHei";
8. }
9. .class2{
10. font-size:15px;
11. }
12.
13. .class3{
14. font-weight:bold;
15. }
16.
17. .class4{
18. color:red;
19. }
20. </style>
21. </head>
22. <body>
23. <h4>1.字体类型示例</h4>
24. <divclass="class1">我是微软雅黑</div>
25.
26. <h4>2.字体大小示例</h4>
27. <divclass="class2">大小：15px</div>
28.
29. <h4>3.字体粗细示例</h4>
30. <divclass="class3">我被加粗了</div>
31.
32. <h4>4.字体颜色示例</h4>
33. <divclass="class4">我是红色</div>
34.
35. </body>
36. </html>
（4）文本样式
CSS的文本样式中最常用的属性就是对文本的对齐方式进行设置，在水平方向可以设置左、中、右对齐方式，在垂直方向可以设置上、中、下对齐方式，具体示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. width:300px;
8. height:40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.水平方向设置</h4>
16. <divclass="class1"style="background-color:rosybrown;text-align:left;">左对齐</div>
17. <divclass="class1"style="background-color:#2eabff;text-align:center;">居中</div>
18. <divclass="class1"style="background-color:coral;text-align:right;">右对齐</div>
19.
20. <h4>2.垂直方向设置</h4>
21. <divclass="class1"style="background-color:#b7eb8f;">默认文字在垂直方向是靠最上排列</div>
22. <!--垂直居中就是将line-height的值设置与高度一致-->
23. <divclass="class1"style="background-color:darkseagreen;line-height:40px;">垂直居中</div>
24.
25. <h4>3.两个方向居中</h4>
26. <divclass="class1"style="background-color:darkcyan;line-height:40px;text-align:center">两个方向居中</div>
27.
28. </body>
29. </html>
（5）内边距与外边距
在了解内外边距之前我们先了解一个模型即盒子模型，盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的。CSS 定义的宽和高，指的是填充以里的内容范围。而盒子的宽度=左外边距 左边框 左内边距 内容宽度 右内边距 右边框 右外边距。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成，如下所示：
在了解了盒子模型后我们分别对内边距及外边距内容进行讲解。
1）内边距（padding）
padding内边距作用是为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。具体示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. width:300px;
8. height:40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.无内边距</h4>
16. <divstyle="height:50px;width:200px;border:1pxsolidred;background-color:#b7eb8f">
17. <div>
18. CSS基础教程。
19. </div>
20. </div>
21.
22. <h4>2.有内边距</h4>
23. <!--设置一个宽200px,高50px的div，然后为其设置边框-->
24. <divstyle="height:50px;width:200px;border:1pxsolidred;background-color:#87e8de">
25. <!--内边距设置为10px,这边的10px表示上下左右都设置成10px,可以使用padding-(top,bottom,left,right)只设置一边-->
26. <divstyle="padding:10px;">
27. CSS基础教程。
28. </div>
29. </div>
30.
31. </body>
32. </html>
2）外边距（margin）
外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。具体示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. width:200px;
8. height:30px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.无外边距</h4>
16. <divclass="class1"style="background-color:#87e8de">div1</div>
17. <divclass="class1"style="background-color:#46a6ff">div2</div>
18.
19. <h4>2.有外边距</h4>
20. <divclass="class1"style="margin:10px;background-color:#87e8de">div3</div>
21. <divclass="class1"style="margin:10px;background-color:#46a6ff">div4</div>
22.
23. </body>
24. </html>
（6）float浮动
float浮动用于实现多个标签并排存放，一般用于块级标签，我们一般页面的横排目录都会用该属性来实现。float属性支持将标签设置为左浮动（float:left）与右浮动（float:right），具体示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. </head>
6. <body>
7. <h2>浮动示例</h2>
8. <div>
9. <divstyle="float:left;width:100px;background-color:yellowgreen;">左浮动</div>
10. <divstyle="float:right;width:100px;background-color:blue;">右浮动</div>
11. <!--在使用浮动后需要进行清除，不然就会脱离文档流，也就不会按照html固定的顺序进行排版-->
12. <divstyle="clear:both;"></div>
13. </div>
14. </body>
15. </html>
（7）定位（position）
position用于对屏幕上的标签进行定位，定位有三种类型分别为绝对定位（position：absolute;）、相对定位（position：relative;）与固定定位（position：fixed;），下面我们分别进行介绍
1）绝对定位
绝对定位一般以浏览器左上角为基准设置位置，但如果定位标签存在父标签且父标签存在定位设置则子标签以父标签的左上角为基准。绝对定位的具体示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. width:100px;
8. height:100px;
9. background-color:#46a6ff;
10. position:absolute;
11. left:60px;/*相对于浏览器向左偏移60像素*/
12. top:20px;/*相对于浏览器向上偏移20像素*/
13. }
14. </style>
15. </head>
16. <body>
17. <divclass="class1">绝对定位</div>
18. </body>
19. </html>
2）相对定位
相对定位以元素自身的位置为基准设置位置，相对定位需要占用位置空间。通常父标签设置为相对定位，子标签设置为绝对定位，具体示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. width:200px;
8. height:100px;
9. /*父标签设置相对定位*/
10. position:relative;
11. background-color:#aaaaaa;
12. }
13. .class2{
14. width:80px;
15. height:50px;
16. position:absolute;
17. /*子标签设置绝对定位*/
18. background-color:#46a6ff;
19. top:20px;
20. left:30px;
21. }
22. </style>
23. </head>
24. <body>
25. <divclass="class1">
26. <divclass="class2">我是子标签</div>
27. </div>
28. </body>
29. </html>
3）固定定位
固定定位表现类似于绝对定位，两者主要区别是绝对定位是以html的元素进行定位的，而固定定位是以游览器窗口进行定位。具体使用示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. width:100px;
8. height:100px;
9. background-color:#46a6ff;
10. position:fixed;
11. top:100px;
12. left:80px;
13. }
14. </style>
15. </head>
16. <body>
17. <divclass="class1">固定定位</div>
18. </body>
19. </html>
hover伪类作用：当鼠标放在标签上时，可以能够设置一些样式。
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. background-color:#46a6ff;
8. }
9.
10. .class1:hover{
11. background-color:#722ed1;
12. }
13.
14. </style>
15. </head>
16. <body>
17. <h4>伪类示例</h4>
18. <divclass="class1">将鼠标放在我上面，将会变色</div>
19. </body>
20. </html>
至此我们《CSS基础教程》就讲完了，如有任何问题欢迎在文章后面进行留言。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
程序员都必掌握的前端教程之CSS基础教程（上）
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
