目录
CSS叫做"层叠样式表",作用就是装饰网页.类似于我们平时所说的化妆。
字体、大小、间距、颜色、位置、边框、背景等等统称为样式,用来描述一个网页。
针对一个html的元素/标签,同时可以有很多组CSS样式,一个字体是一个样式,描述一个颜色也是一个样式。
1、CSS编写方式
CSS在进行编写的时候有三种引入方式:
1.内部样式,把CSS嵌入到HTML中,通过style标签
2.外部样式,把CSS写成一个单独的文件,通过HTML的link标签引入
创建一个CSS文件:
通过link标签引入
3.内联样式:把CSS属性写到元素的style属性内
(一般来说,内联样式的优先级比较高,也比较方便)
2.CSS选择器
举个例子:
div:就是一个选择器,针对选择的内容进行属性设置
{}内:就是一些具体的CSS属性,描述各种样式。
好了,我们接下来详细说明一下CSS的几种常用选择器:
1.标签选择器
使用标签名,把页面中所有同名标签的元素全选中。
此时,我们选中了所有标签为div的元素,设置样式:
<body>
<div>陈宇</div>
<div>顾魏</div>
<div>琑儿</div>
<style>div{
font-size: 23px;
color: red;
}
</style>
</body>
效果:
但是我们发现,这种选择器是有缺点的,无法针对某一个元素进行个性化设置。因此,我们引入了其他的选择器---类选择器以及id选择器。
2.类选择器
通过创建一个类,实现很多属性。设置元素样式时,就可以直接使用这个类,达到想要的效果。
比如,我们创建了一个类one,在里面实现了设置颜色为绿色。元素陈宇调用这个类,将字体颜色设置成了绿色。
<!-- s调用class时,去掉. -->
<div class="one">陈宇</div>
<div>顾魏</div>
<div>琑儿</div>
<style>
/* CSS类使用.开头 */
.one{
color: green;
}
div{
color: red;
font-size: 23px;
}
</style>
我们还可以创建多个类,实现不一样的样式。
<!-- s调用class时,去掉. -->
<div class="one">陈宇</div>
<div class="two">顾魏</div>
<div class="three">琑儿</div>
<style>
/* CSS类使用.开头 */
.one{
color: green;
}
.two{
color: red;
}
.three{
color:yellow;
}
div{
color: red;
font-size: 23px;
}
效果:
在一个标签中,使用不同类:
<div><span class="one">王</span><span class="two">一博</span></div>
效果:
3.id选择器
id是这个元素的身份标识,我们使用id选择器可以将对应的元素设置样式
<div id="xiaozhan">肖战</div>
<style>
/* id选择器使用#开头 */
#xiaozhan{
color: pink;
}
}
效果:
以上都为基础选择器
4.后代选择器
是多种基础选择器的综合,
<div class="one">
<h3>王一博</h3>
<h2>琑儿</h2>
</div>
<div class="two">
<h3>肖战</h3>
</div>
<style>
.one h3 {
color: green;
}
.two h3{
color:red;
}
</style>
效果:
此时,先找实现的类的所有元素,再从这个类的后代(子标签/...)里查找指定的标签。
举例:
此时,我们的第一步就是找所有实现one这个类的元素,然后再从这些元素中查找标签为h3的元素,设置样式
3.CSS属性
常见的属性我们都可以在下面推荐的这个网站中找到:
总结
CSS作为“层叠样式表”,可以通过实现多种样式,装饰一个网页,让网页变得更好看!!!