CSS是指层叠样式表（cascading style sheets），样式定义如何显示HTML元素，是真正能够做到网页表现和内容分类的一种语言。
【1】CSS基本语法
【2】CSS两种结合方式
【3】几种选择器
基本语法
基本语法也就两种，在head中使用选择器选择，然后在body中使用，如下中的样式属性键：样式属性值1 样式属性值2...是多个属性值的连用。
<!DOCTYPE html>
<html>
<head>
<title>02-结合方式2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 语法1:
选择器{
样式属性键: 样式属性值;
样式属性键:样式属性值1 样式属性值2 样式属性值3...;
/*
注释内容!
*/
语法2:
style="样式属性键: 样式属性值;"
}
-->
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p > This is my HTML page. </p>
</body>
</html>
两种结合方式
<!DOCTYPE html>
<html>
<head>
<title>01-结合方式1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--下面是第二种结合方式-->
<style type="text/css">
p{
color:blue;
}
</style>
</head>
<body>
<p style="color:red;" > 我是在body中直接使用的结合方式 </p>
<p> 我是使用表标签选择器的结合方式了</p>
</body>
</html>
标签选择器
使用的是html的标签，比如p、h1、a等，也可以是html
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>02-结合方式2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
标签选择器:
标签名称{
}
}
-->
<style type="text/css">
a{
color:blue;
background:red;
padding:99;
}
p{
color:#FFFF00;
}
</style>
</head>
<body>
<a> This is my HTML page. </a>
<p> This is my HTML page. </p>
</body>
</html>
</span>
ID选择器
以一种独立于文档元素的方式来指定样式
<!DOCTYPE html>
<html>
<head>
<title>06-CSS选择器2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
id选择器:
#标签id{
}
注意: 使用id时.要保证id的值在页面中是唯一的
-->
<style type="text/css">
#one{
color:yellow;
}
#five{
size:88;
}
</style>
</head>
<body>
<a id="one" > This is my HTML page. </a><br>
<a id="five" > This is just a test. </a><br>
<a> This is my HTML page. </a>
</body>
</html>
类选择器
其实类选择器是和ID选择器想类似的
<!DOCTYPE html>
<html>
<head>
<title>07-CSS选择器3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
class选择器:
.class名称{
}
注意: 使用class选择器，前面要有一个.号
-->
<style type="text/css">
.three{
color:green;
}
</style>
</head>
<body>
<p>This is my HTML page.</p>
<p class="three" >This is my HTML page.</p>
<a class="three" > This is my HTML page. </a><br>
<a> This is my HTML page. </a>
</body>
</html>
伪类选择器
这个可以控制标签的的某些状态，配合其他选择器来共同使用
<!DOCTYPE html>
<html>
<head>
<title>07-CSS选择器3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
伪类选择器:
选择标签的某个状态.需要配合其他选择器来使用
l link <span style="white-space:pre"> </span>未访问过
v visited 访问过
h hover <span style="white-space:pre"> </span>悬浮
a active 激活,点击
-->
<style type="text/css">
a:link{
color:green;
}
a:visited{
color:black;
}
a:hover{
color:white;
}
a:active{
color:pink;
}
</style>
</head>
<body>
<a href="01-结合方式1.html" >点我，看我的状态变化</a>
</body>
</html>
复合选择器
将ID、类、元素结合在一起来使用，可以看到在body中是分开使用的，在style中是结合在一起的。
<!DOCTYPE html>
<html>
<head>
<title>09-CSS选择器5.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#one,.two,font{
color:green;
}
</style>
</head>
<body>
<a id="one" >我是ID选择器</a><br>
<a class="two" >我是类选择器</a><br>
<font>我是元素选择器</font>
</body>
</html>
时间： 2024-11-05 19:41:02