【前端学习之HTML&CSS】-- CSS第一篇 – 为网页添加样式
文章目录
本文具体内容参考了B站渡一教育的课程,原课程链接如下:
渡一教育课程
前言
html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言,在学习过程中,我们首先从html出发,在html的学习过程中深入了解css,在步入学期末尾阶段再进行js的学习。
本篇文章从HTML逐渐转到CSS中,css是为网页添加样式的语言,拥有很庞大的结构体系,我们将抽丝剥茧,从总体出发,先讲清楚样式的组成,再了解样式书写的位置,一步步出发,掌握样式的使用。
一、术语解释
h1{
color: red;
background-color:lightblue;
text-align: center;
}
上述整体代码就是CSS的规则,即样式 = 选择器 + 声明块
1. 选择器(部分):
用于选中元素,确定样式的返回,即大括号之前的内容;
写法:
- 1 元素选择器:输入元素名称,就可以选择对应元素;
可以选择到页面上所有的同名元素
/* 此时的CSS会选中所有的P元素 */
p{
color: aquamarine;
background-color: lightcoral;
text-align: left;
}
- 2 ID选择器:# + ID名称,就可以选择对应ID值的元素;
/* ID选择器,CSS中# + ID名称选择 */
#test01 {
color: blueviolet;
}
- 3.类选择器:需要在元素中添加class属性对应,通过. + class名称对应,一个元素可以同时选择多个类;
/* 类选择器 */
.c1 {
color: goldenrod;
background-color: darkblue;
}
.big-center {
font-size: 3em;
text-align: center;
}
<p class="c1 big-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
实际操作中,我们可以写多个类选择器,分别对应多种样式,让元素去选择对应的样式,实现快速清晰的样式分布
2. 声明块
出现在大括号中,声明块中包含很多声明/属性,这一部分重点在下一篇博客中提及;
每一个属性表达了某一方面的样式,学习CSS主要就是学习多种多样的属性及其应用;
eg. color、background-color等
二、CSS代码书写位置
1. 内部样式表:
书写在style元素中,style元素最好放在head元素中;【在学习JS之后会更加有用】
2. 内联/元素样式表:
直接把style元素属性写在元素里
不需要选择器,且内联样式与内部样式不冲突时属性叠加,冲突时先以内联样式为准
<P style="font-size: 3em;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</P>
3. 外部样式表【推荐】:
书写在独立的CSS文件中,通过link连接;
<!-- 构建与CSS文件的连接 -->
<link rel="stylesheet" href="./CSS/index.css">
<!-- link元素在head中 -->
<!-- 外部样式表 -->
<P class="red-big-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</P>
推荐的原因:
- 可以解决多页面样式重复的问题;
- 有利于浏览器缓存,提高页面响应速度;
- 有利于代码分离(HTML与CSS),更加容易阅读和维护;
总结
本篇博客是关于CSS内容的第一篇博客,重点讲述了添加样式的组成部分,以及在何处、如何添加样式,关于更多的样式种类,将会在下一篇博客中介绍,敬请期待。