前端CSS基础教程：Web开发之-第一部分
发表时间: 2022-06-11 10:56
之前我们讲了html的显示的基本元素，那么，如何来对这些元素来进行装饰呢？这就是我们css的作用。
css的使用方式
css的写法有三种，我们下面依次来进行举例分享三种的写法：
1:直接写在元素内
<html> <head> <title>css</title> </head> <body> <div style="color:red">文本样式</div> </body></html>注：我们通过在div标签内写上style属性，style属性用来在元素内写样式，这里我们设置这个div元素内的字体的颜色为红色，显示内容如下：
2:写在html内部的style外部标签中
<html> <head> <title>css</title> </head> <body> <div class="wb">文本样式</div> </body> <style> .wb{ color:red; } </style></html>注：我们可以在html通过<style>....</style>闭合标签内写上设置的元素属性的样式，在这里我们写了一个.wb的类，这个类不是编程的类，是css样式的类的概念，通过.+类名，例如.wb，如果要想使用这个类，需要在想要设置的元素内通过class属性来引用css类，例如 class="wb"，这里没有.号；类似的还有id属性来设置样式，例如：
<html> <head> <title>css</title> </head> <body> <div id="wb">文本样式</div> </body> <style> #wb{ color:red; } </style></html>注：id属性的设置是使用#来设置，元素使用的时候，直接写上id属性。
id属性和类属性的区别就是：id只能设置为一个元素，而class可以给多个元素来进行样式设置。
3.外部引入css样式
以上的写法都是写在html内，但是这样会导致文件不好管理，常用的写法是：我们把这个html文件用到的所有的样式写在外部以.css为后缀的文件中，看以下文件结构：
index.html:
<html> <head> <title>css</title> <link rel="stylesheet" href="./index.css" type="text/css"> </head> <body> <div class="wb">文本样式</div> </body></html>index.css:
.wb{ color: red;}
注：引入外部css需要使用link元素，因为这个元素是不需要显示的，最好写在head标签中,通过href来写上css的路径位置或者网络的地址。
鲁公网安备37020202000738号