1. CSS和 HTML 的结合方式
1.1 第一种
在标签的 style 属性上设置”key:value value;”,修改标签样式。
需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。
<body>
<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div>
<span style="border: 1px solid red;">span 标签 1</span>
<span style="border: 1px solid red;">span 标签 2</span>
</body>
1.2 第二种
在 head 标签中,使用 style 标签来定义各种自己需要的 css 样式。 格式如下:
xxx {
Key : value value;
Key : value value;
}
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。
虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)
需求 2:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <!--style 标签专门用来定义 css 样式代码-->
<style type="text/css">
div {
border: 1px solid red;
}
span {
border: 1px solid red;
}
</style>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
1.3 第三种
把 css 样式写成一个单独的 css 文件,再通过 link 标签引入即可复用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" />
标签 导入 css 样 式文件。
1.CSS文件
创建一个.css文件,不再需要<style type="text/css"> </style>
标签。
div {
border: 1px solid red;
}
span {
border: 1px solid red;
}
2.html 文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
link 标签专门用来引入 css 样式代码
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
2. CSS选择器
2.1 标签名选择器
标签名选择器的格式是:
标签名{
属性:值;
属性:值;
}
<style type="text/css">
div {
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span {
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
<div>div 标签 1</div>
2.2 id选择器
加一个 # ,后面表示id的属性值
<style type="text/css">
#id001 {
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#username {
color: red;
font-size: 20px;
border: 5px blue dotted;
}
</style>
<div id="id001">div 标签 1</div>
<div id="username">div 标签 2</div>
2.3 class选择器
加一个 .,后面表示类的属性值
<style type="text/css">
.class01 {
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.username {
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
<div class="class01">div 标签 class01</div>
<div class="username">div 标签</div>
2.4 组合选择器
组合选择器的格式是:
选择器 1,选择器 2,选择器 n{
属性:值;
属性:值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
2.5 所见举例:
Case1:只有div标签才能使用class01样式
div.class01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
Case2: 当一个标签,其有儿子标签div,儿子标签div又有儿子标签span时,则此标签才可使用class01样式
.class01 div span{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
2.6 id选择器与class选择器辨析
1. id与class的区别
-
id相当于人的身份证,不可以重复
-
class相当于人的名称可以重复
-
一个html标签只能绑定一个id名称
-
一个html标签可以绑定多个class名称
2. id选择器与class选择器的区别
-
id选择器是以#开头
-
class选择器是以.开头
3. CSS常用样式:
-
字体颜色 color:red;
颜色可以写颜色名如:black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值:如 rgb(255,0,0),#00F6DE,如果写十六进制值必 须加# -
宽度
width:19px;
宽度可以写像素值:19px;
也可以写百分比值:20%; -
高度
height:20px;
高度可以写像素值:19px;
也可以写百分比值:20%; -
背景颜色
background-color:#0F2D4C -
字体样式
color:#FF0000;字体颜色红色
font-size:20px; 字体大小 -
红色 ,1 像素,实线边框
border:1px solid red; -
DIV 居中
margin-left: auto;
margin-right: auto; -
文本居中
text-align: center; -
超连接去下划线
text-decoration: none; -
表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/
} -
列表去除修饰
ul {
list-style: none;
}