CSS为层叠样式表,级联样式表,简称样式表。
用于HTML文档中元素样式的定义,将网页美化。
CSS语法规则:选择器,一条或多条声明{属性:值}
<style>
p{
color: brown;<!--字体颜色-->
font-size: 40px;<!--字体大小-->
}
</style>
先在html文件中写CSS的代码,在<head>标签中写一对<style></style>标签,按照上面的格式对所需标签进行属性的修改。需注意的是,目前调试发现,在<head>中使用<style>对段落标签<p>进行属性修改时,会对所有的段落文本进行一致修改。修改的属性可以为一条或者多条。
内联样式
当需要对单条标签进行样式修改时,可以使用内联样式在相关标签内进行修改
<p>段落1,这是第一个段落。</p>
<p style="background-color:darkgreen;font-size: xx-small;">段落2,这是另一个段落。</p>
运行可以发现,即使在<head>标签内先对<p>标签进行属性修改,但在第二个段落标签内继续修改,两个段落的格式就不同了。
内部样式
当需要对文档中所有同类标签使用统一格式(例如字体大小,颜色等等),为了代码简洁性,降低维护成本,就可以在<head>标签中使用<style>进行统一定义。
<style>
h3{
color: aquamarine;<!--颜色-->
font-size: 20px;<!--字体大小-->
}
p{
color: brown;
font-size: 40px;
}
</style>
单页面生效,多页面不适合。
外部样式
当需要对一个多页面大型网站进行样式规定时,可以在文件夹中另外创建一个后缀为.css的文件,将所有的样式规定都写在其中,然后在需要使用的页面使用<link>标签进行关联。只用改变这个文件中的样式,就能改变所有使用该样式的网页。
<link rel="stylesheet" href="./public.css">
注意:写在<head>标签中,访问地址使用前面学的相对路径同级寻找。
选择器
全局选择器
与任意元素匹配,即可以作为样式的基础,做样式初始化,描述所有元素的共性。
语法
*{
margin: 0;
padding: 0;
}
标签选择器
对一类标签进行选择,描述一类标签的共性,无法描述单个标签的个性。
语法
p{
color: chocolate;
font-size: medium;
background-color: darkseagreen;
}
当全局选择器与标签选择器对同一属性进行规定时,全局选择器优先级最低。
所有学习过的标签都可以用作选择器。
可以用来处理一段文字中部分特殊样式的短语或单字,嵌套标签使用,标签选择器修改属性。
类选择器
当需要有针对性的对某些标签进行属性修改时,使用类选择器能很灵活的实现。
语法
.type1{
color: blueviolet;
font-size: 68px;
}
<h1 align="center" class="type1">一级标题</h1>
<h2 align="center" class="type1 type2">二级标题</h2>
类名由字母数字下划线组成,但不能由数字开头。
在.css文件中写好样式,然后在.html文件中选择标签使用该类选择器,就可以修改对应属性。
一个类选择器可以被多个标签使用,一个标签也可以使用多个类选择器,使用空号隔开即可。
ID选择器
针对某一特定标签使用,且只能使用一次。
语法
#texttype1{
font-size: 20px;
color: chartreuse;
}
<span id="texttype1">这是一段文字</span>
既可以写在.css文件中,也可以写在<head>标签中的<style>标签中。
每个ID只可以使用一次,要想对两个标签使用,第二个标签的ID名需要改变。
ID不能以数字作为ID名开头。