web学习之添加css样式

最新推荐文章于 2022-05-06 17:49:04 发布

味道凉GIRL

最新推荐文章于 2022-05-06 17:49:04 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web学习之旅文章标签：样式标签

本文链接：https://blog.youkuaiyun.com/qq_35970364/article/details/78787905

web学习之旅专栏收录该内容

3 篇文章

订阅专栏

本文介绍了四种常见的网页元素样式添加方法：直接在HTML标签中添加内联样式；在<head>标签内的<style>标签中定义样式；通过@importurl导入外部CSS文件；以及使用<link>标签链接外部CSS文件。最后两种方法在实际工作中应用更为广泛。

给网页上的元素添加样式的方法：

以<div >Hello World </div>为例

（1）直接加在<div>标签里

如将div块设置为背景颜色为蓝色：<div style=”background-color:blue;”> </div>

（2）加在head标签里的style里

<head> 
  <style type=”text/css”>
   div { 
         background-color:blue;
     }
  </style> 
</head>
<body>
  <div>Hello World</div>
</body>

（3）在style标签里，使用@import url(此处填入css样式的路径)

首先在要目前下创建一个color.css文件，里面写入div要设置的样式。

color.css代码如下：

div {
  background-color:blue;
}

div.html代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       @import url(color.css);
    </head>
    <body>	
    <div>Hello World </div>
    </body>
</html>

（4）<link>引入标签。例子如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
       <link rel="stylesheet" type="text/css" href="color.css">
    </head>
    <body>	
    <div>Hello World </div>
    </body>
</html>

href里面填写css的样式路径，这里填写的是相对路径。
第一、二种方法一般在工作中很少用，用得比较多的是三四种，第一二种方法比较固定，三四种灵活使用。可以写好自己要用的样式，放于同一个css里面，然后再用link链接，即可添加样式，操作方便，大大减少了代码的重用。