DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页title>
<style>
h1 {
color: red;
}
style>
head>
<body>
<h1>我是标题h1>
body>
html>
style
标签内的 CSS 代码单独放在一个.css
文件中,再在 HTML 代码中使用link
标签引用该.css
文件。index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页title>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>我是标题h1>
body>
html>
style.css
h1 {
color: red;
}
.html
文件中同时出现了三种 CSS 导入方式,那么它们会查漏补缺,也就是说程序会把没有的效果自动加上去,已有的效果才会按照它们各自的优先级大小进行选择。.html
文件中同时导入了内部样式与外部样式,并且它们都修饰同一属性,那么最终网页实现的是谁的样式取决于style
标签和link
标签在.html
文件的head
标签中的先后顺序。由于代码是从上向下执行的,后面的代码会把前面的代码覆盖, 因此,网页最终实现的是写在后面的 CSS 样式,该规则也叫作就近原则,即谁离要修饰的标签更近就实现谁的样式。index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页title>
<style>
h1 {
color: green;
}
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1 style="color: red">我是标题h1>
body>
html>
style.css
/* 外部样式 */
h1 {
color: yellow;
}
h1
标签最近)。h1
标签中的行内样式:index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页title>
<style>
h1 {
color: green;
}
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>我是标题h1>
body>
html>
style.css
/* 外部样式 */
h1 {
color: yellow;
}
.html
文件中,我们的link
标签写在style
标签之后(link
标签离我们要修饰的h1
标签更近),所以此时网页实现的是我们定义的外部样式。style
标签与link
标签在.html
文件中的顺序:index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页title>
<link rel="stylesheet" href="css/style.css">
<style>
h1 {
color: green;
}
style>
head>
<body>
<h1>我是标题h1>
body>
html>
style.css
/* 外部样式 */
h1 {
color: yellow;
}
.html
文件中,我们的style
标签写在link
标签之后(style
标签离我们要修饰的h1
标签更近),所以此时网页实现的是我们定义的内部样式。
<link rel="stylesheet" href="css/style.css">
<style>
@import url("css/style.css");
style>
link
属于 HTML 标签,但@import
是 CSS 提供的一种方式。link
标签不仅可以加载 CSS,还可以定义 RSS、定义 rel 连接属性等;但是@import
只能加载 CSS。@import
是 CSS2.1 提出的,所以在此之前的旧浏览器不支持,即@import
只能在 IE5 以上才能被识别;但是link
标签不存上述的问题。link
标签,不能使用@import
指令。原因是 DOM 不可控的。基本选择器包括以下三种:
标签名 {
声明1;
声明2;
声明3;
}
class
属性一致的标签,可以实现跨标签选择。它在代码中的格式如下:.class的名称 {
声明1;
声明2;
声明3;
}
id
的标签,全局唯一。它在代码中的格式如下:#id名称 {
声明1;
声明2;
声明3;
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器title>
<style>
/* 标签选择器,会选择到页面上所有这个标签的元素
格式:
标签名 {
声明1;
声明2;
声明3;
}
*/
h1 {
color: red; /* 字体颜色 */
background: skyblue; /* 背景色 */
border-radius: 24px; /* 圆角边框 */
}
p {
font-size: 80px; /* 字体大小 */
}
style>
head>
<body>
<h1>我在学习Javah1>
<h1>我在学习HTMLh1>
<p>我在学习CSSp>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器title>
<style>
/* 类选择器
格式:
.class的名称 {
声明1;
声明2;
声明3;
}
优点: 可以给多个标签归类(同一个class),可以复用
*/
.study {
color: orange;
}
.rest {
color: lightgreen;
}
style>
head>
<body>
<h1 class="study">我在学习Javah1>
<h1 class="rest">我在休息h1>
<h1 class="study">我在学习HTMLh1>
<p class="study">我在学习CSSp>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器title>
<style>
/* id选择器: id必须保证全局唯一
格式:
#id名称 {
声明1;
声明2;
声明3;
}
*/
#java {
color: red;
}
#html {
color: #34b1e5;
}
style>
head>
<body>
<h1 id="java">我在学习Javah1>
<h1 id="html">我在学习HTMLh1>
<h1 id="css">我在学习CSSh1>
<h1 id="js">我在学习JSh1>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器title>
<style>
.study {
color: blue;
}
h1 {
color: green;
}
style>
head>
<body>
<h1 class="study">我在学习Javah1>
<h1 class="study">我在学习HTMLh1>
<h1>我在学习CSSh1>
<h1>我在学习JSh1>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器title>
<style>
#java {
color: red;
}
.study {
color: blue;
}
h1 {
color: green;
}
style>
head>
<body>
<h1 class="study" id="java">我在学习Javah1>
<h1 class="study">我在学习HTMLh1>
<h1>我在学习CSSh1>
<h1>我在学习JSh1>
body>
html>
元素M 元素N {
声明1;
声明2;
声明3;
}
元素M > 元素N {
声明1;
声明2;
声明3;
}
元素M + 元素N {
声明1;
声明2;
声明3;
}
元素M ~ 元素N {
声明1;
声明2;
声明3;
}
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
body
的所有后代元素p
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
/* 后代选择器 */
body p {
background: skyblue;
}
style>
<body>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
body
的所有子代元素p
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
/* 子代选择器 */
body > p {
background: yellow;
}
style>
<body>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
id=active
的元素p
(p1)的相邻的下一个元素p
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
/* 后代选择器 */
/*body p {*/
/* background: skyblue;*/
/*}*/
/* 子代选择器 */
/*body>p {*/
/* background: yellow;*/
/*}*/
/* 相邻兄弟选择器 */
#active + p {
background: brown;
}
style>
<body>
<p>p0p>
<p id="active">p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
id=active
的元素p
(p1)之后的所有同级元素p
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
/* 后代选择器 */
/*body p {*/
/* background: skyblue;*/
/*}*/
/* 子代选择器 */
/*body>p {*/
/* background: yellow;*/
/*}*/
/* 相邻兄弟选择器 */
/*#active + p {*/
/* background: brown;*/
/*}*/
/* 通用兄弟选择器 */
#active ~ p {
background: green;
}
style>
<body>
<p>p0p>
<p id="active">p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
伪类:
:hover
,:first-child
等。我们本节先学习伪类选择器中和结构相关的选择器,即结构伪类选择器。
准备工作:
下面是一个 HTML 页面的元素层次图:
indedx.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h1>h1h1>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
ul
的第一个和最后一个子元素li
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 选择ul的第一个子元素li */
ul li:first-child {
background: #2addf5;
}
/* 选择ul的最后一个子元素li */
ul li:last-child {
background: red;
}
style>
head>
<body>
<h1>h1h1>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
:nth-child(x)
)的方式来选择p1
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 选择ul的第一个子元素li */
ul li:first-child {
background: #2addf5;
}
/* 选择ul的最后一个子元素li */
ul li:last-child {
background: red;
}
/* 选择p1:
通过p元素定位到p的父级元素(body),然后选择其父级元素(body)的第二个子元素(p1)
注意: 只有当父级元素(body)的第二个子元素的标签类型为p时,才能生效
*/
p:nth-child(2) {
background: green;
}
style>
head>
<body>
<h1>h1h1>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
p
元素的父级元素(body
)的第二个子元素的标签类型为p
时,选择器中的声明语句才能生效。p1
和h1
调换一下位置,这样p
元素的父级元素(body
)的第二个子元素的标签类型就不再是P
,而是变成了h1
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 选择ul的第一个子元素li */
ul li:first-child {
background: #2addf5;
}
/* 选择ul的最后一个子元素li */
ul li:last-child {
background: red;
}
/* 选择p1:
定位到p元素的父级元素(body),然后选择其父级元素(body)的第二个子元素(p1)
注意: 只有当父级元素(body)的第二个子元素的标签类型为p时,才能生效
*/
p:nth-child(2) {
background: green;
}
style>
head>
<body>
<p>p1p>
<h1>h1h1>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
p
元素的父级元素(body
)的第二个子元素的标签类型不为p
时,选择器中的声明语句并没有生效。:nth-of-type(x)
)的方式来选择p1
:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 选择ul的第一个子元素li */
ul li:first-child {
background: #2addf5;
}
/* 选择ul的最后一个子元素li */
ul li:last-child {
background: red;
}
/* 选择p1:
定位到p元素的父级元素(body)中所有类型为p的子元素,然后选择其中的第一个元素(p1)
*/
p:nth-of-type(1) {
background: yellow;
}
style>
head>
<body>
<h1>h1h1>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
body
中有一个p
标签,p
标签又有十个a
标签,我们给每个a
标签都添加一些属性(herf
、class
、id
等),再使用后代选择器选中所有的a
标签,给其添加一些样式,具体代码如下:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 后代选择器,选择元素demo下的所有后代的a元素 */
.demo a {
float: left; /* 设置浮动 */
display: block; /* 设置为块级元素 */
height: 50px; /* a标签的高度 */
width: 50px; /* a标签的宽度 */
border-radius: 10px; /* 圆角边框 */
background: skyblue; /* a标签的背景颜色 */
text-align: center; /* 文字居中对齐 */
color: grey; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */
font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last" id="last">10a>
p>
body>
html>
id
属性的a
元素:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 后代选择器,选择元素demo下的所有后代的a元素 */
.demo a {
float: left; /* 设置浮动 */
display: block; /* 设置为块级元素 */
height: 50px; /* a标签的高度 */
width: 50px; /* a标签的宽度 */
border-radius: 10px; /* 圆角边框 */
background: skyblue; /* a标签的背景颜色 */
text-align: center; /* 文字居中对齐 */
color: grey; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */
font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */
}
/* 属性选择器 */
/* 选择所有包含id属性的a元素 */
a[id] {
background: yellow;
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last" id="last">10a>
p>
body>
html>
id
属性值为first
的a
元素:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 后代选择器,选择元素demo下的所有后代的a元素 */
.demo a {
float: left; /* 设置浮动 */
display: block; /* 设置为块级元素 */
height: 50px; /* a标签的高度 */
width: 50px; /* a标签的宽度 */
border-radius: 10px; /* 圆角边框 */
background: skyblue; /* a标签的背景颜色 */
text-align: center; /* 文字居中对齐 */
color: grey; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */
font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */
}
/* 属性选择器 */
/* 选择id属性值为first的a元素 */
a[id="first"] {
background: yellow;
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last" id="last">10a>
p>
body>
html>
class
属性值包含links
的a
元素:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 后代选择器,选择元素demo下的所有后代的a元素 */
.demo a {
float: left; /* 设置浮动 */
display: block; /* 设置为块级元素 */
height: 50px; /* a标签的高度 */
width: 50px; /* a标签的宽度 */
border-radius: 10px; /* 圆角边框 */
background: skyblue; /* a标签的背景颜色 */
text-align: center; /* 文字居中对齐 */
color: grey; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */
font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */
}
/* 属性选择器 */
/* 选择class属性值包含links的a元素 */
a[class*=links] {
background: yellow;
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last" id="last">10a>
p>
body>
html>
href
属性值以https
开头的a
元素:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 后代选择器,选择元素demo下的所有后代的a元素 */
.demo a {
float: left; /* 设置浮动 */
display: block; /* 设置为块级元素 */
height: 50px; /* a标签的高度 */
width: 50px; /* a标签的宽度 */
border-radius: 10px; /* 圆角边框 */
background: skyblue; /* a标签的背景颜色 */
text-align: center; /* 文字居中对齐 */
color: grey; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */
font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */
}
/* 属性选择器 */
/* 选择href属性值以https开头的a元素 */
a[href^="https"] {
background: yellow;
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last" id="last">10a>
p>
body>
html>
href
属性值以pdf
结尾的a
元素:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 后代选择器,选择元素demo下的所有后代的a元素 */
.demo a {
float: left; /* 设置浮动 */
display: block; /* 设置为块级元素 */
height: 50px; /* a标签的高度 */
width: 50px; /* a标签的宽度 */
border-radius: 10px; /* 圆角边框 */
background: skyblue; /* a标签的背景颜色 */
text-align: center; /* 文字居中对齐 */
color: grey; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
margin-right: 5px; /* 设置间隔(每个a标签都向右偏移5px) */
font: bold 20px/50px Arial; /* 设置字体样式(加粗 字体大小/行高 字体) */
}
/* 属性选择器 */
/* 选择href属性值以pdf结尾的a元素 */
a[href$="pdf"] {
background: yellow;
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last" id="last">10a>
p>
body>
html>