CSS与HTML结合的三种方式以及常用CSS选择器
只有id=id001的样式会有改变。可以让多个选择器公用同一个CSS代码。
·
CSS是层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标志性语言
一、CSS与HTML结合的三种方式
1.第一种方式
在标签的style属性上设置“key： value value；” 修改样式
<div style="border:1px solid red;"> div标签</div>缺点：标签多了，样式多了，代码量非常庞大
可读性很差
CSS代码没有什么复用性可言
2.第二种方式
在head标签中，使用style标签来定义各种自己需要的CSS样式
<head>
<style type="text/css">
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>缺点：
只能在同一个页面内复用代码，不能在多个页面中复用CSS代码。
维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大
3.第三种方式（重要）
把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>二、常用CSS选择器
1.标签名选择器
标签名选择器，可以决定那些标签被动的使用这个样式
div{
border: 1px solid red;
color：blue;
font-size:30px;
}
span{
border: 1px solid red;
}2.id选择器
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;
}3.class选择器（类选择器）
<div class="class001"> div标签1</div>
<div class="class002"> div标签2</div>.class001{
border: 1px solid red;
color：blue;
font-size:30px;
}4.组合选择器
格式：
选择器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;
}三、常用样式
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
0- 0
已为社区贡献12条内容
所有评论(0)