CSS入门
之前我们学习过HTML
的基本知识,对于网页来说,HTML
搭建的只是框架,而对于网页的美容,则需要用到CSS
,CSS
就可以看做是网页的美容师。
CSS
的全称叫做Cascading Style Sheets
,中文名字叫层叠样式表。我们可以用CSS
设置字体的颜色,字体的大小以及图片外形,排版布局等等"美颜"的工作。
CSS的书写位置
行内式
CSS
的书写位置有三个,第一个是行内,如下
<标签 style="属性1:属性值1; 属性2:属性值2 ...">
下面就是把这个一级标题设置为红色。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style = "color:red">CSS入门</h1>
</body>
</html>
内嵌式
内嵌式是将CSS
代码集中写在HTML
文档的head
头部标签中,并且用style
标签定义,其基本语法格式如下:
<head>
<style>
选择器{属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>
比如下面
<head>
<style>
h1{color:red;}
</style>
</head>
就是把所有的h1
标签的文字颜色设置为红色。
外链式
外链式指的是HTML
文件与CSS
文件分开写,在实际工作中就是这么干的。但是为了方便,我在介绍CSS
的使用的时候一般会用内嵌式。外链式的写法如下
<link rel="stylesheet" href="CSS文件的路径" type="text/CSS"/ >
link
标签是单标签,它是放在head
标签内的。在使用link
标签时,必须指定link
标签的三个属性,如下:
href
:定义所链接外部样式表文件的URL
,可以是相对路径,也可以是绝对路径。type
:定义所链接文档的类型,在这里需要指定为“text/CSS”
,表示链接的外部文件为CSS
样式表。rel
:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”
,表示被链接的文档是一个样式表文件。
选择器
标签选择器
使用HTML
的标签名作为选择器,为HTML
的某一标签指定统一的CSS
样式。比如上面的
h1{color:red;}
就是标签选择器,使用h1
作为选择器,所有的h1
标签包含的文字都被设置为红色。
类选择器
类选择器是最常用的选择器,类选择器使用.
(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
.类名{
属性:属性值;
... ...
}
标签在调用CSS
样式时,使class="类名"
即可,比如
<head>
<style>
.red{
color : red;
}
</style>
</head>
<body>
<h1 class="red">CSS入门</h1>
</body>
我们声明了一个类选择器,类名叫做red
,在h1
标签中,我们通过class="red"
调用了该类,所以h1
标签所包含的文字设置成了红色。
多类名选择器
如果我们在标签中需要调用多个类怎么办,比如有两个类分别为
.red{
color:red;
}
.font14{
font-size=14px;
}
如果加入h1
标签要调用这两个类的话,写法如下
<h1 class = "red font14">标题</h1>
这个就叫做多类名选择器。
还有一个问题就是,如果调用的多个类有冲突怎么办?比如调用的两个类一个设置颜色为红色,一个设置颜色为蓝色,是如何处理这种冲突?
.red{
color:red;
}
.blue{
color:blue;
}
假设h1
调用如下
<h1 class="blue red">标题</h1>
你觉得会是蓝色还是红色的?答案是蓝色的,虽然调用时blue
写在red
前面,你想red
会覆盖blue
,所以会是红色,实际上最终的效果与调用的顺序无关,而与CSS
书写的顺序有关,由于CSS
书写时red
在blue
的上面,所以只有最后的blue
生效。
id选择器
与类选择器很相似,不管调用方式是通过id
来调用的,并且书写方式上有差别,即将.
改为了#
。如下
#id名{
属性:属性值;
... ...
}
调用方式同类调用方式,不过用的不是class=""
而是id=""
。
与类选择器不同的是,由于id
是唯一的,不同的标签的id
不能相同,所以该种方法只能给唯一的一个id
设置样式。并且id
选择器能做到的,类选择器也能做到,所以实际上类选择器是用的最多的。
通配符选择器
书写方式如下
*{
属性:属性值;
... ...
}
*
就是通配符,代表所有标签的意思,意思是所有的标签都会被设置成这样的样式,该种方法在开发几乎不用。