css基本语法结构：
选择器{
声明1；
声明2；
}
h1{
color；red；
font-size:20px;
}
css样式优先级：行内样式>内部样式表>外部样式表
就近原则
内部样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1{
color: red;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<h1>书本</h1>
</body>
</html>
行内样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 style="color: green;font-size: 60px;">书本</h1>
</body>
</html>
外部样式：
一、链接式
二、导入式
一、链接样式表
HTML标签选择器：
id选择器：id
类选择器：class
id选择器>类选择器>标签选择器
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
id选择器在同一个页面只能使用一次
先创建css类
.nnn{
color: blue;
font-size: 100px;
}
#mmm{
color: red;
font-size: 10px;
}
然后在html中：
在<head>中间加入 <link href="文件路径" type="文件类型"> </head>
在html中代表class,在html中代表id
然后在<h1 class="nnn" id="mmm">书本</h1>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="qqq.css">
<title></title>
</head>
<body>
<h1 class="nnn" id="mmm">书本</h1>
</body>
</html>
二、导入式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
<!--
@import url("qqq.css");
-->
</style>
<title></title>
</head>
<body>
<h1 class="nnn" id="mmm">书本</h1>
</body>
</html>
层次选择器
结构伪类选择器
属性选择器
一、层次选择器
|
选择器 |
类 型 |
功能描述 |
|
E F |
后代选择器 |
选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
|
E>F |
子选择器 |
选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
|
E+F |
相邻兄弟选择器 |
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
|
E~F |
通用兄弟选择器 |
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {
color: yellow;
}
</style>
<title></title>
</head>
<body>
<a href="">黄色</a>
</body>
</html>
二、结构伪类选择器
|
选择器 |
功能描述 |
|
E:first-child |
作为父元素的第一个子元素的元素E |
|
E:last-child |
作为父元素的最后一个子元素的元素E |
|
E F:nth-child(n) |
选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd |
|
E:first-of-type |
选择父元素内具有指定类型的第一个E元素 |
|
E:last-of-type |
选择父元素内具有指定类型的最后一个E元素 |
|
E F:nth-of-type(n) |
选择父元素内具有指定类型的第n个F元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ol li:first-child{
color: green;
}
ol li:last-child{
color: blue;
}
ol li:nth-child(2){
color: red;
}
</style>
<title></title>
</head>
<body>
<ol>
<li>水杯</li>
<li>水杯</li>
<li>水杯</li>
</ol>
</body>
</html>
span标签的作用：
|
属性名 |
含义 |
举例 |
|
font-family |
设置字体类型 |
font-family:"隶书"; |
|
font-size |
设置字体大小 |
font-size:12px; |
|
font-style |
设置字体风格 |
font-style:italic; |
|
font-weight |
设置字体的粗细 |
font-weight:bold; |
|
font |
在一个声明中设置所有字体属性 |
font:italic bold 36px "宋体"; |
font-familt属性："楷体"
font-size属性:单位：px(像素)、em、rem、cm、mm、pt、pc
font-style属性：normal、itailc、