# h1表示选择器
# font-size和color表示属性
# 12px和#fff表示属性值
p{
font-size:12px;
color:#fff;
}
在HTML中通过使用 <style> 标签引入CSS样式, <style> 标签用于为HTML文档定义样式信息; <style> 标签位于 <head> 标签中,它规定浏览器中如何呈现HTML文档; 在 <style> 标签中,type是必须属性,用于定义style元素的内容,值为“text/css”;
<style type="text/css">
p{
font-size:12px;
color:#fff;
}
</style>
<body>
</body>
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素; 所有HTML语言中的标签样式都是通过不同的CSS选择器进行控制的; CSS的选择器分为三种,分别是: 标签选择器 、 类选择器 、 ID选择器 ; 标签选择器:
一个HTML页面由很多的标签组成,例如 <html> 、 <p> 、 <h1> 、 <div> 、 <span> 等,CSS标签选择器就是用来声明这些标签的;
每种HTML标签的名称都可以作为相应的标签选择器的名称,例如 <p> 标签和 <h1> 标签,如果我们需要在它们上面定义一个标签选择器,那我们要怎么做呢;
p{
font-size:12px;
}
h1{
font-size:16px;
}
需要注意的是,一个HTML页面会有很多的 <p> 标签和 <h1> 标签,标签选择器一旦声明,那么页面的所有该标签都会应用,这样虽然用起来很方便,但是如果想要给其中一个标签单独定义属性则不能,此时需要使用类选择器或者ID选择器了;
类选择器:
类选择器的名字可以由用户自定义,属性和值跟标签选择器一样,必须符合CSS规范,它的语法如下;
# .class1为类选择器的名字
# font-size为属性
# 12px为属性值
.class1{
font-size:12px;
}
和标签选择器不同的是,设置了类选择器之后就要在HTML的标签中应用相应类样式,使用标签的class属性引用类样式,如下所示;
<style>
.class1{
font-size:18px;
color:#f00;
}
</style>
<body>
<p class="class1">hello world!</p>
<p>hello world!</p>
</body>
ID选择器:
ID选择器的使用方法和类选择器相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此它的针对性更强; 比如说有一个类选择器.class1,那么它可以在页面的多个标签中应用,有一个ID选择器class1,那么它只能在页面 中用一次;
<style>
.class1{
font-size:18px;
color:#f00;
}
#id1{
font-size:26px;
color:#0A00F3;
}
</style>
<body>
<p class="class1">这是第一行哟</p>
<p class="class1">这是第二行哟</p>
<p class="class1">这是第三行哟</p>
<p id="id1">这是第二行哟</p>
<p >这是第二行哟</p>
</body>
行内样式:
内部样式:
外部样式:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="style.css" /> # 引入外部css文件style.css,所有的样式都写在这个文件中
</head>
<body>
<p class="class1">这是第一行哟</p>
<p class="class1">这是第二行哟</p>
<p class="class1">这是第三行哟</p>
<p id="id1">这是第二行哟</p>
<p >这是第二行哟</p>
</body>
</html>
后代选择器:
<style>
p strong{
font-size:24px;
}
</style>
<body>
<p>春眠不觉晓,<strong>处处</strong>闻啼鸟</p>
</body>
后代选择器:
交集选择器由两个选择器直接连接构成,其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器,这两个选择器之间不能有空格; 它的语法为:
<style>
p.special{
color:red;
}
</style>
<body>
<p class="special">春眠不觉晓,处处闻啼鸟</p>
</body>
并集选择器:
并集选择器简称集体声明,并集选择器是多个选择器通过逗号连接而成的; 并集选择器可以用来定义风格完全相同,或者部分相同的选择器; 语法为:
<style>
h1,h2,h3,h4,h5{
color:red;
}
</style>
<body>
<h1>第一个</h1>
<h2>第二个</h2>
<h3>第三个</h3>
<h4>第四个</h4>
<h5>第五个</h5>
</body>
九、继承特性 CSS的继承简单的说就是将各个HTML标记看做一个个容器,其中被包含的小容器会继承包含它的大容器的风格样式; 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影响父标记;