第一章 CSS层叠样式表
CSS：cascading style sheet（层叠样式表）
几种使用CSS的方式
第一种使用CSS的方法叫做行内样式，是在标签的style属性中书写CSS的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="border-width:1px; border-style:dashed; width:100px; height:100px"></div>
</body>
</html>第二种使用CSS的方式叫做页面样式，是在head标签中添加style标签，在style标签中书写CSS对应代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#first_div{
border-width: 1px;
border-style: dashed;
border-color: rebeccapurple;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="first_div"></div>
</body>
</html>第三种使用CSS的方式叫做外链样式，通过引用CSS文件，使用其内部的样式代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./CSS/test.css">
</head>
<body>
<div></div>
</body>
</html>第四种使用CSS的方式叫做@import，通过CSS的import方法导入CSS，使用其内部样式代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@import url("CSS/test.css");
</style>
</head>
<body>
<div></div>
</body>
</html>面试题：import和link有什么区别
①import是css的自带，link是html的功能，并且link不仅可以引用css，还可以定义rss rel。
②加载顺序的区别：link会等css加载完毕再显示，import会先加载完html，再加载css，所以当网速不太优良情况下会显示一个比较简单页面之后再慢慢补充细节。
③import引入css的代码，dom编程无法获取到css的内容。
④兼容性区别：ie5（即CSS2.1）版本以后的浏览器才支持import
CSS的选择器
基本选择器
基本选择器包括：id选择器，类选择器，通配符选择器，标签选择器
选择器的优先级：一般情况下，作用范围越小的，其优先级越高；当选择器的表达式越复杂，它的优先级就越高
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#first_div{
width: 100px;
height: 100px;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div id="first_div"></div>
</body>
</html>标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 100px;
border: 1px dashed black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div_class{
width: 100px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="div_class"></div>
</body>
</html>通配符选择器
一般用来格式化页面的
margin就是标签的外边距
padding就是标签的内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="first_div"></div>
</body>
</html>包含选择器（元素关系选择器）
子代选择器：修饰当前标签的子代标签，不修饰子代的子代
后代选择器：修饰当前标签的后代标签，包括子代、孙代、曾孙代等等等等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* ul > li{
border: 1px solid red;
} */
ul li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>子项1</li>
<li>子项2</li>
<li>子项3</li>
<li>子项4</li>
<li>子项5</li>
<div>
<li>子项7</li>
<li>子项8</li>
<li>子项9</li>
</div>
<li>子项7</li>
<li>子项8</li>
<li>子项9</li>
</ul>
<li>子项1</li>
<li>子项2</li>
<li>子项3</li>
<li>子项4</li>
<li>子项5</li>
<li>子项6</li>
<li>子项7</li>
<li>子项8</li>
<li>子项9</li>
</body>
</html>分组选择器：又名逗号选择器，通过逗号隔开的选择器共享同一套样式代码，逗号选择器两侧只要是符合语法规范的选择器即可，无特殊要求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* ul > li{
border: 1px solid red;
} */
/* 分组选择器又名都好选择器，通过逗号隔开的选择器共享同一套样式代码 */
.ul_class,div,#first_item,ul > li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul class="ul_class">
<li id="first_item">子项1</li>
<li>子项2</li>
<li>子项3</li>
<li>子项4</li>
<li>子项5</li>
<div>
<li>子项7</li>
<li>子项8</li>
<li>子项9</li>
</div>
<li>子项7</li>
<li>子项8</li>
<li>子项9</li>
</ul>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
<div>我是div6</div>
</body>
</html>属性选择器
语法结构：[]中写入筛选条件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input[type='text']{
border: 1px solid red;
}
/* $=表示以什么结尾 */
input[type$='t']{
border: 1px solid red;
}
/* ^= 表示以什么开头*/
input[type^='t']{
border: 1px solid red;
}
/* *=包含什么字符 */
input[type*='s']{
border: 1px solid red;
}
/* + 当前标签的下一个*/
input[type$='t'] + input,p {
border: 1px solid red;
}
[title*='鸡']{
width: 100px;
}
</style>
</head>
<body>
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
用户名：<input type="text">
密码：<input type="password">
邮件：<input type="reset">
<p>这是一段文字</p>
<img src="./pic/jige.webp" title="鸡你太美" alt="">
</form>
</body>
</html>伪类选择器
伪类选择器：即一个标签在不同状态下拥有不同的状态
a:link
a:visited
a:hover
a:active注：在书写伪类选择器的时候 一定要注意 保持 link visited hover active的顺序进行编写，否则有可能伪类选择器不生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
div:hover{
width: 200px;
height: 200px;
background-image: url("pic/jige.webp");
}
div:active{
width: 300px;
height: 300px;
background-image: url("pic/jige.webp");
}
/* a:active{
color: green;
text-decoration: none;
}
a:visited{
color: black;
border: 1px solid black;
}
a:hover{
color:red;
text-decoration: underline;
}
a:link{
color: orange;
text-decoration: none;
} */
</style>
</head>
<body>
<!-- <a href="http://www.bilibili.com" target="_blank">跳转到百度</a> -->
<div>
</div>
</body>
</html> 伪元素选择器
伪元素选择器：通过伪元素选择器可以设置元素的指定部分的样式，主要用来设置元素内部的文本的首字母、首行样式，或者是在元素内容前后插入其他元素。
::before
::after
::first-letter
::first-line
::section注：伪元素选择器是js代码无法获取的内容，意味着我们无法使用js对我们的当前进行伪元素方面的修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* :root{
background-color: yellow;
} */
ul{
list-style: none;
}
/* 如果在书写伪元素选择的时候如果没有content那么这个伪元素将不会生效 */
li::before{
display: inline-block;
content: "";
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
}
p::first-letter{
content: "";
display: inline-block;
width: 20px;
height: 20px;
font-size: 40px;
color: red;
}
p::after{
content: "--来自 席慕蓉";
display: inline;
width: 100px;
height: 20px;
font-size: 20px;
color: aqua;
}
/* ul > li:first-child{
border: 1px solid red;
} */
/* odd表示奇数 even表示偶数 */
li:nth-child(even){
background-color: black;
}
</style>
</head>
<body>
用户名:<input type="text" name="username" id="">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
<p>我相信人性本善,正如我相信每个人都是一朵美丽的鲜花,让我们每个人献出自己温暖,让这个世界芳香醉人,从此,只留清气满乾坤,“不要等到全球变暖,才觉不妙”。 </p>
</body>
</html>css陆续提供了大量的伪类选择器供大家使用，如下表所示。
选择器 | 示例 | 示例说明 |
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:empty | p:empty | 选择所有没有子元素的p元素 |
:enabled | input:enabled | 选择所有启用的表单元素 |
:first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
:in-range | input:in-range | 选择元素指定范围内的值 |
:invalid | input:invalid | 选择所有无效的元素 |
:last-child | p:last-child | 选择所有p元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
:not(selector) | :not(p) | 选择所有p以外的元素 |
:nth-child(n) | p:nth-child(2|2n-1|odd|even) | 选择所有 p 元素的父元素的第二个子元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
:nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
:only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
:only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
:optional | input:optional | 选择没有"required"的元素属性 |
:out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
:read-only | input:read-only | 选择只读属性的元素属性 |
:read-write | input:read-write | 选择没有只读属性的元素属性 |
:required | input:required | 选择有"required"属性指定的元素属性 |
:root | root | 选择文档的根元素 |
:target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
:valid | input:valid | 选择所有有效值的属性 |
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
::first-letter | p::first-letter | 选择每个p 元素的第一个字母 |
::first-line | p::first-line | 选择每个p元素的第一行 |
::first-child | p::first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
::before | p::before | 在每个p元素之前插入内容 |
:after | p::after | 在每个p元素之后插入内容 |
::selection | p::selection | 被鼠标选中后的样式 |
:lang(language) | p:lang(it) | 为p元素的lang属性选择一个开始值 |
CSS的常见样式
text相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text相关样式</title>
<style>
.content{
/* 用于对齐内容，并且具有传递给后代的效果 */
text-align: center;
/* text-align: left; */
/* text-align: right; */
/* 用于设置文本样式 */
text-decoration: underline;
/* text-decoration: line-through */
/* text-decoration: overline */
/* 用于设置文本的大小写 */
text-transform: lowercase;
/* text-transform: uppercase; */
/* text-transform: capitalize; */
/* 用于设置溢出的文本以省略号的形式显示需配合overflow属性 */
text-overflow: ellipsis;
overflow: hidden;
/* 用于设置自动换行的属性，如果自动换行后仍有文字溢出，可以结合使用overflow: scroll添加滑动 */
word-wrap: break-word;
overflow: scroll;
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG
</div>
</body>
</html>font相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font相关样式</title>
<style>
body{
/* 用于设置字体的大小 */
font-size: 100px;
/* 用于设置字体 */
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
/* 用于设置文字的粗细程度，取值范围为100-900 */
font-weight: 666;
/* 用于设置字体的风格 */
font-style: italic;
}
</style>
</head>
<body>
这是body
</body>
</html>border相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border相关样式</title>
<style>
div{
/* 设置标签的宽度 */
width: 100px;
/* 设置标签的高度 */
height: 100px;
border: 1px solid red;
/* 用于设置线条的宽度 */
border-width: 1px;
/* 用于设置线条的风格 */
border-style: dashed;
/* 用于设置边框的颜色 */
border-color: rebeccapurple;
/* 用于设置边的弧度 */
border-radius: 100%;
/* 局部设置边框角弧度 */
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
/* 局部设置边框颜色粗细样式 */
border-left: 1px solid red;
border-top: 10px solid rebeccapurple
}
</style>
</head>
<body>
这是body
</body>
</html>margin、padding相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin、padding相关样式</title>
<style type="text/css">
div{
display: block;
border: 1px solid green;
width: 300px;
/* 用于设置标签的内边距 */
padding: 20px;
/* 用于设置某条边边距 */
padding-left: 20px;
padding-top: 20px;
/* 用于设置标签与父标签的间距 */
/* 当标签对应的margin为auto时，标签将居中（必须有宽度） */
margin: auto;
/*margin-left: 20px;
margin-top: 20px;*/
text-align: center;
}
</style>
</head>
<body>
这是body
</body>
</html>display相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display相关样式</title>
<style>
#first,#second{
width: 100px;
height: 100px;
border: 1px solid rebeccapurple;
/* 使用属性值none会将标签从页面中彻底隐藏，不留坑 */
display: none;
/* 会将标签隐形，但是会留下标签所占用的空间 */
visibility: hidden;
/* visibility: hidden;相当于将标签的透明度设置为0 */
opacity: 0;
/* 将标签设置为块标签，独占一行 */
display: block;
/* 将标签设置为行内标签，不支持宽高属性 */
display: inline;
/* 将标签设置为行内块标签，默认大小取决于内容部分，但是支持宽高属性 */
display: inline-block;
}
#second{
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
</body>
</html>background相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background相关样式</title>
<style>
body{
border: 1px solid red;
width: 5000px;
height: 5000px;
}
div{
width: 380px;
height: 300px;
background: url("picture/001.webp");
background: #f00;
/* rgba函数可以设置红绿蓝以及透明度，透明度取值范围0-1 */
background: rgba(255, 0, 0, 0);
background-image: url('picture/001.webp');
background-size: 170px 55px;
/* 常用于设置图片循环，可使用专用循环图 */
background-repeat: no-repeat;
/* fixed可以将图片固定在页面上，内容可以滑动，背景不动 */
background-attachment: fixed;
/* 用来显示精灵图 */
background-position: 0px - 75px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>position相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position相关样式</title>
<style>
#first-child,#second-child{
width: 100px;
height: 100px;
border: 1px solid red;
}
#second-child{
border: 1px solid rebeccapurple;
/* 当前标签如果是绝对定位，那么它的父标签必须为相对定位 */
/* 子绝父相 */
width: 400px;
height: 150px;
left: 0px;
top: 0px;
position: absolute;
display: none;
background-color: black;
}
.container{
border: 1px solid green;
position: relative;
}
.container:hover>#second-child{
display: block;
}
</style>
</head>
<body>
<div class="parent">
<div class="container">
<div id="first-child"></div>
<div id="second-child"></div>
</div>
</div>
</body>
</html>position的固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position的固定定位</title>
<style>
.container{
width: 2000px;
height: 2200px;
border: 1px solid rebeccapurple;
background: url("picture/001.webp");
background-size: cover;
}
.go-top{
width: 100px;
height: 100px;
border: 1px solid white;
text-align: center;
position: fixed;
right: 0px;
bottom: 50%;
}
a{
color: white;
text-decoration: none;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="head"></div>
<div class="go-top">
<a href="#head">回到顶部</a>
</div>
</div>
</body>
</html>float相关样式
最初float属性用来做文字环绕图片的效果，后来常用于布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float相关样式</title>
<style>
.good{
width: 220px;
height: 360px;
border: 1px solid orangered;
/* float设置为right，排列顺序也会变成从右到左 */
float: left;
}
img{
width: 220px;
}
</style>
</head>
<body>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
1
</div>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
2
</div>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
3
</div>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
4
</div>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
</div>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
</div>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
</div>
<div class="good">
<img src="./picture/cloth.jpg" alt="">
</div>
<!-- 当前标签的前一个标签如果有设置float，那么要取消掉当前标签的float效果，可是已使用clear: both -->
<p style="clear: both;">123456</p>
</body>
</html>
950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
