CSS学习笔记
CSS介绍
全称：Cascading Style Sheet 层叠级联样式表
层叠样式表是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
可直接在HTML文件下写CSS代码：
<!--在 <style> 标签内可以编写css代码
语法：
选择器{
声明1;
声明2;
声明3;
.......
}
-->
CSS导入方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!-- 优先级：就近原则，以离标签近的CSS为准-->
<!-- 外部标签-->
<link rel="stylesheet" href="导入方式.css">
</head>
<body>
<!--行内样式，在标签内部中编写style属性即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
选择器
基本选择器
1.标签 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<!--标签选择器会选择这个页面所有标签-->
<style>
h1{
color: green;
}
p{
color: aqua;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<h1>我爱JavaWeb</h1>
<p>我爱JAVA</p>
</body>
</html>
2.类 选择器 class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!-- 选择相同class的标签
类选择器格式：.class名称{.....} -->
<style>
.标题1{
color: #9a6f6f;
}
.标题2{
color: green;
}
.标题3{
color: aqua;
}
</style>
</head>
<body>
<h1 class="标题1">我是第一个标题</h1>
<h1 class="标题2">我是第二个标题</h1>
<h1 class="标题3">我是第三个标题</h1>
</body>
</html>
优势：可以对多个标签进行分类，归于同一个class,方便复用
3.ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
/*id选择器：id为全局唯一不可重复
格式：#id名{}
优先级：不遵循就近原则
id选择器>类选择器>标签选择器
*/
#id001{
color: red;
}
.style1{
color: green;
}
h1{
color: aqua;
}
</style>
</head>
<body>
<h1 class="style1" id="id001" >标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
注意id和类选择器不能设置为纯数字
层次选择器
1.后代选择器
可以选择某元素后代的所有元素
body p{
color: blueviolet;
}
2.子选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。（只有一代）
body>p{
color: blue;
}
3.相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）选择紧接在另一元素后的元素，且二者有相同父元素。
.brother+p{
background: green;
}
4.通用兄弟选择器
选择紧接在该元素后的所有兄弟元素（有相同父类元素）
/*通用选择器*/
.brother~p{
background: red;
}
结构类伪选择器
结构伪类选择器：可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul的第一个元素*/
ul li:first-child{
background: red;
}
/*ul最后一个元素*/
ul li:last-child{
background: green;
}
/*选中p1:定位到当前父元素，选择第一个子元素(按顺序选择)
即：选择当前p元素的父类元素，选择第一个子类元素（注意必须要是当前标签元素才生效）
*/
p:nth-child(1){
background: blue;
}
/*选择父类元素，第二个类型为p的标签（按类型选择）*/
p:nth-of-type(2){
background: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
属性选择器（常用）
属性选择器可以根据元素的属性及属性值来选择元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*=号为绝对等于
*=为 包含等于
^= 匹配开头的字符
$= 匹配结尾字符
*/
a[class]{
background:tan;
}
a[id]{
background: blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="link baidu" target="_blank" id="ccc">a1</a>
<a href="" id="aaa">a2</a>
<a href="" class="char" id="bbb">a3</a>
<a href="http://www.bilibili.com" class="link bilibili" target="_blank">a4</a>
</body>
</html>
美化网页元素
span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<!-- 约定俗成：重点元素一般用span标签-->
<style>
#span{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
我爱<span id="span">Java</span>
</body>
</html>
字体样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- font-family:字体样式
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
<style>
body{
font-family:华文楷体;
font-size: 30px;
}
.p1{
font-weight: 800;
color: darkmagenta;
}
</style>
</head>
<body>
<h3>基本概念：</h3>
<p class="p1">
图论〔Graph Theory〕是数学的一个分支。它以图为研究对象。图论中的图是由若干给定的点及连接两点的线所构成的图形，这种图形通常用来描述某些事物之间的某种特定关系，用点代表事物，用连接两点的线表示相应两个事物间具有这种关系。
</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<!--
颜色：rgb()或者rgba()调节，rgba()相比于rgb可以调节透明度
text-align:文本排版(位置)
text-indent:文本缩进（1个em表示一个字体的大小）
line-height:设置行高
text-decoration:修饰下划线
-->
<style>
.p1{
color: rgba(0,0,255,0.9);
text-indent: 2em;
line-height: 3em;
}
h3{
text-align: center;
}
.p2{
background: aqua;
font-family: "Bookman Old Style";
text-decoration: underline;
}
</style>
</head>
<body>
<h3>基本概念：</h3>
<p class="p1">
图论〔Graph Theory〕是数学的一个分支。它以图为研究对象。图论中的图是由若干给定的点及连接两点的线所构成的图形，这种图形通常用来描述某些事物之间的某种特定关系，用点代表事物，用连接两点的线表示相应两个事物间具有这种关系。
</p>
<p class="p2">
Spirit is a monument, is a cornerstone, is on the way of life is brilliant, ruler. A modest, being the Confucius YinChu hits, "two heads are better than one, slowly," fools, generation Confucianism masters, With tolerance, ambitious, daring JiHuanGong devoid of nay, appoint people by abilities, achievement, generation vista dominance, With firmness, lonely lonely YuFen SuWu of sorrow, always don't throw away the hand that race day, the heart of han motherland, patriotic model; the cadre A dedication, kindness and plain, the ordinary XuHuCai can years like one day, warm feeling, sprinkle the people, to today's "living lei feng." ... Through history, tunnel, through history, forever will hold the grand mansion lofty life.
</p>
</body>
</html>
超链接伪类
伪类：伪类用于定义元素的特殊状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: red;
}
/*表示鼠标悬停的状态*/
a:hover{
color:green;
}
/*表示鼠标按住未释放的状态*/
a:active{
color: blue;
}
/*文本阴影，水平阴影位置和垂直阴影位置必填(可为负数)
*/
#src{
text-shadow: blue 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="../images/a.png" title="实验课表" alt="课表" width="400" height="300">
</a>
<p>
<a href="#">实验课表</a>
</p>
<p>
<a href="" id="src">来源：官网</a>
</p>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
css美化:
#nav{
width: 300px;
background: gold;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
background: red;
}
/*list-style: none 无效果
circle 空心圆
square 正方形
decimal 数字
*/
ul li{
text-decoration: none;
line-height: 30px;
list-style: none;
text-indent: 1em;
background: gold;
}
a{
text-decoration: none;
}
a:hover{
color: cyan;
text-decoration: underline;
}
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div{
width: 1303px;
height: 810px;
/*border边框：边框粗细 边框样式 边框颜色*/
border:5px solid green;
background-image: url("../images/tx.webp");
/*先../找图片*/
/*默认为平铺*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
盒子模型
margin：外边距
padding：内边距
border：边框
一个登陆页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<!--外边距可居中元素-->
<style>
h2{
background: red;
margin: 0;
}
body{
/*body默认外边距为8*/
margin: 0px;
}
#box{
/*内外边距一个参数表示上下左右，2个分别表上下和左右*/
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
form{
background: green;
}
div:nth-of-type(1) input{
border: 2px solid black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="">
<div>
<span>账号</span>
<input type="text">
</div>
<div>
<span>密码</span>
<input type="text">
</div>
<div>
<span>邮箱</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
一个元素块的面积是外边距加内边距加边框的长度
边框样式：
圆角：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
div{
width: 50px;
height: 50px;
border: 1px solid red;
background: red;
/*圆角边框设置的是半径，顺序按顺时针*/
border-radius: 50px 0 0 0;
}
/*也可调整图片的边框*/
img{
border-radius: 64px;
}
</style>
</head>
<body>
<div>
</div>
<img src="../images/tx.webp" alt="">
</body>
</html>
边框阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style>
div{
margin: 0 auto;
width: 1000px;
height: 128px;
/*box-shadow是边框阴影*/
border-radius: 500px;
box-shadow: 10px 10px 10px 10px yellow;
}
img{
margin: 0 0 436px 436px;
}
</style>
</head>
<body>
<div>
<img src="../images/tx.webp" alt="">
</div>
</body>
</html>
浮动
文档标准流：
简单来说标准流就是浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流
内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
脱离文档流：
1、如果元素不再满足浏览器的默认布局排版，也就是说将元素从默认的布局排版中拿走，此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流，此时就是脱离文档流了。
2、元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
3、脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
使用float或定位会使元素脱离标准流
元素分类
块级元素 block：
块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可以自定义width和height，除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。
- 每个块级元素都是独自占一行。
- 元素的高度、宽度、行高和边距都是可以设置的。
- 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）。
如：<h1>~<h6> <div> <form> <table>...
行内元素 inline
行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。
- 每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
- 行内元素的高度、宽度、行高及顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
如：<a>链接标签 <span> <img>...
行内块级元素 inline-block
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素，它可以设置高宽以及一行多个。
- 和其他行内或行内块级元素元素放置在同一行上。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
这三种样式可以通过display设置转化，大多数情况使用float进行行内元素排版
父级边框塌陷问题
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会脱离标准文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
解决方案：
1.给父元素一个固定的高度
缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。
2.在浮动元素最后面加空div标签，并设置：
clear: both;
3.给父元素添加属性：overflow: hidden
缺点：边框以外的部分可能被剪掉，不推荐
4.万能法：在父类元素后添加伪类after（推荐）
father为父类标签的id
#father:after{
content: "";
clear: both;
display: block;
}
定位
相对定位
相对于自己原来的位置进行偏移，且原来位置会保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位：相对于自己原来的位置进行偏移
position: relative;
top:距离顶部 bottom:距离底部 left:距离左边 right:距离右边
定位后仍然在文档流中，原位置会保留
-->
<style>
#first{
background: orange;
border: 1px solid black;
height: 50px;
}
#second{
background: red;
border: 1px solid black;
height: 50px;
}
#third{
background: green;
border: 1px solid black;
height: 50px;
position: relative;
bottom: 20px;
}
</style>
</head>
<body>
<div id="first">盒子1</div>
<div id="second">盒子2</div>
<div id="third">盒子3</div>
</body>
</html>
绝对定位、固定定位
绝对定位：相对于父级元素或浏览器偏移，定位后脱离文档流，原来位置不保留
- 在父级元素未定位的前提下，相对于浏览器定位
- 父级元素定位的前提下，相对于父级元素偏移~
- 无法超出父级元素
固定定位：个人理解相对于电脑页面定位，不随滑动条的滑动而改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
position: relative;
top: 20px;
border: 2px solid black;
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background: green;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) { /*fixed:固定定位,相对于电脑页面*/
width: 100px;
height: 100px;
background: yellow;
position: fixed;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
图层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="../images/tx.webp" alt=""></li>
<li class="TpText">这是个头像</li>
<li class="Bg"></li>
<li>时间：CSS有点难</li>
</ul>
</div>
</body>
</html>
z-index表示图层，0是最下面的一层
opacity调节透明度
#content{
width: 350px;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
position: relative;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*z-index表示图层，0是最下面的一层*/
.TpText{
position: absolute;
top: 85px;
color: white;
z-index: 999;
}
.Bg{
background: black;
width: 350px;
position: absolute;
top: 85px;
height: 25px;
/*opacity调节透明度*/
opacity: 0.5;
}
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
