CSS与HTML结合的三种方式以及常用CSS选择器

最新推荐文章于 2024-05-17 07:58:08 发布

我爱布朗熊

最新推荐文章于 2024-05-17 07:58:08 发布

阅读量3.1k

点赞数 2

分类专栏： # CSS 文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_51351637/article/details/125813224

版权

2 篇文章 0 订阅

订阅专栏

CSS是层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标志性语言

一、CSS与HTML结合的三种方式

在标签的style属性上设置“key： value value；” 修改样式

<div style="border:1px solid red;"> div标签</div>

缺点：标签多了，样式多了，代码量非常庞大

可读性很差

CSS代码没有什么复用性可言

在head标签中，使用style标签来定义各种自己需要的CSS样式

<head>
<style type="text/css">

  div{
     border: 1px solid red;
   }
  
  span{
     border: 1px solid red;

   }

</style>

</head>

缺点：

只能在同一个页面内复用代码，不能在多个页面中复用CSS代码。

维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大

把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用

下面代码在CSS样式文件中

  div{
     border: 1px solid red;
   }
  
  span{
     border: 1px solid red;

   }

link标签引入CSS样式

<head>

  <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

标签名选择器，可以决定那些标签被动的使用这个样式

  div{
     border: 1px solid red;
     color：blue;
     font-size:30px;
   }
  
  span{
     border: 1px solid red;

   }

class类型选择器，可以通过class属性有效的选择性地去使用这个样式

<div id="id001"> div标签1</div>
<div id="id002"> div标签2</div>

只有id=id001的样式会有改变

#id001{

     border: 1px solid red;
     color：blue;
     font-size:30px;


}

<div class="class001"> div标签1</div>
<div class="class002"> div标签2</div>

.class001{

     border: 1px solid red;
     color：blue;
     font-size:30px;



}

格式：

选择器1，选择器2，选择器3，........，选择器n{

样式

}

可以让多个选择器公用同一个CSS代码

<div class="class001"> div标签1</div>
<div id="id002"> div标签2</div>

.class001,#id002{

     border: 1px solid red;
     color：blue;
     font-size:30px;



}

关注

专栏目录