前端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的路径位置或者网络的地址。

前端CSS基础教程：Web开发之-第一部分

css的使用方式

热门阅读

推荐阅读