CSS教程
CSS
本文主要是介绍CSS，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
css
如何学习
-
CSS是什么？
-
CSS怎么用(快速入门)
-
CSS选择器 (重点+难点)
-
美化网页 （文字、阴影、超链接、列表渐变...）
-
盒子模型
-
浮动
-
定位
-
网页动画（特效）
什么是CSS
css概述
CSS：Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...
打开网页-->右键-->审查元素
CSS发展史：
-
CSS1.0
-
CSS2.0 DIV(块) +CSS HTML与CSS结构分离的思想，网页变得简单
-
CSS2.1 浮动定位
-
CSS3.0 圆角、阴影、动画......
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--规范：<style>可以编写css的代码，每一个声明，最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: chartreuse;
}
</style>
<body>
<h1>一级标题</h1>
</body>
</html>
上面是没有分离的，最好使用下面这样分离的：
css的优势：
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分的丰富
-
利用SEO，容易被搜索引擎收录
css的三种导入方式
-
行内样式
-
内部样式
-
外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--优先级：就近原则 就这个例子，谁挨着h1近，就按哪个样式-->
<!--内部样式-->
<style>
h1{
color: chartreuse;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
<body>
<!--行内样式-->
<h1 style="color:#ef3525;">一级标题</h1>
</body>
</html>
选择器
作用：选择页面上的某一个或者某一类元素
1.基本选择器（重要）
-
标签选择器 :选择一类标签 标签{}
-
类 选择器 class:选择所有class属性一致的标签，跨标签 .类名{}
-
Id选择器 :全局唯一 #id名{}
优先级：id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*标签选择器*/
h1{
color: yellow;
}
/*类选择器*/
.blue{
color: blue;
}
/*id选择器*/
#red{
color: red;
}
#red1{
color: #ef3525;
}
</style>
<body>
<!--优先级
id选择器>类选择器>标签选择器
-->
<h1>一级标签</h1>
<h1 class="blue">一级标签</h1>
<h1 class="blue">一级标签</h1>
<h1 id="red">一级标签</h1>
<h1 class="blue" id="red1">一级标签</h1>
</body>
</html>
2.层次选择器
-
后代选择器：在某个元素的后面 爷爷 爸爸 你
/*后代选择器*/ body p{ background-color: blue; } -
子选择器：一代 儿子
/*子选择器*/ body>p{ background-color: red; } -
相邻兄弟选择器
/*相邻兄弟选择器 只有一个 相邻（向下）*/ #action+p{ background-color: yellow; } -
通用兄弟选择器
/*通用兄弟选择器 */ .action~p{ background-color: chartreuse; }
3.结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*定位ul的第一个元素*/
ul li:first-child{
background-color: #ef3525;
}
/*定位ul的最后一个元素*/
ul li:last-child{
background-color: chartreuse;
}
/*选中p1元素，定位到父元素，获取当前的第一个元素 如果第一个不是p元素 不显示 看顺序*/
p:nth-child(1){
background-color: blue;
}
/*选中p1元素，定位到父元素，获取第二个p元素*/
p:nth-of-type(2){
background-color: aqua;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
4.属性选择器（重要）
id+class的结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: chartreuse;
text-align: center;
color: red;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名， 属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[id]{} */
/*a[id]{*/
/* */
/*}*/
/*id属性为one的元素 a[id=one]{} */
/*a[id=one]{*/
/* */
/*}*/
/*class属性为last的元素 a[class="last"]{}*/
/*a[class="last"]{*/
/* */
/*}*/
/*class属性中有HH的元素 a[class*=HH]{}*/
/*a[class*=HH]{*/
/* */
/*}*/
/*选中href中以https开头的元素 a[href^=https]{}*/
/*a[href^=https]{*/
/* */
/*}*/
/*选中href中以jpg结尾的元素 a[href$=jpg]{}*/
a[href$=jpg]{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<p class="p">
<a href="https://www.baidu.com/" class="first HH com " id="one">1</a>
<a href="https://www.csdn.net/" class="first HH ">2</a>
<a href="基本选择器.html">3</a>
<a href="层次选择器.html"class="first com ">4</a>
<a href="../../resources/video/G.E.M.%20邓紫棋-光年之外%20(《太空旅客》电影中国区主题曲)(蓝光).mp4">5</a>
<a href="../../resources/image/奋斗的小孩.jpg">6</a>
<a href="1.jpg">7</a>
<a href="abc.pdf">8</a>
<a href="ab.png" id="nine">9</a>
<a href="abc.png" class="last">10</a>
</p>
</body>
</html>
美化网页元素
为什么要美化网页？
-
有效的传递页面信息
-
美化网页，页面漂亮，才能吸引用户
-
凸显页面的主题
-
提高用户体验
字体样式
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#study{
font:50px bold ;
}
</style>
</head>
<body>
我爱<span id="study">学习</span>
</body>
</html>
常用的字体样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--分开写：
font-family ：字体
font-size :字体大小
font-weight :字体粗细
color :字体颜色
合一块写：font:oblique bolder 20px "华文隶书";
-->
<style>
body{
font-family: 楷体;
color: #ef3525;
}
h2{
font-size: 100px;
}
.p1{
font-weight: bolder;
}
#p3{
font: oblique bolder 20px "华文隶书";
}
</style>
</head>
<body>
<h2>赵立坚为上海加油</h2>
<p class="p1">没有一场疫情不会过去</p>
<p>没有一场战争不会结束</p>
<p id="p3">加油</p>
</body>
</html>
文本样式
-
颜色 color rgb rgba
-
文本对齐的方式 text-align
-
首行缩进 text-indent
-
行高 height line-height
-
装饰 text-decoration
-
文本图片水平对齐 两个参照物 vertucal-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--文本样式
颜色：rgb()颜色：0~255 rgba()颜色+透明度：0~1
文本对齐方式：text-align center 水平居中
首行缩进：text-indent 1em表示一个字的宽度
height: 100px; line-height: 100px; 行高和块高一样就可以上下居中
text-decoration 装饰 underline下划线 line-through中划线 overline上划线
图片与文本水平对齐 有2个参照物： a b
#libai001,#libai002{
vertical-align: middle;
}
-->
<style>
h2{
color:rgba(0,255,255,0.9);
text-align: center;
}
p{
text-align: center;
}
#libai{
text-indent: 3em;
}
.h3{
background-color: blue;
height: 100px;
line-height: 100px;
}
#p02{
text-decoration: underline;
}
#p03{
text-decoration: line-through;
}
#p04{
text-decoration: overline;
}
#libai001,#libai002{
vertical-align: middle;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p id="libai">李白</p>
<p id="p01">窗 前 明 月 光</p>
<p id="p02">疑 是 地 上 霜</p>
<p id="p03">举 头 望 明 月</p>
<p id="p04">低 头 思 故 乡</p>
<h3 class="h3">《静夜思》是唐代诗人李白的诗作。此诗描写了秋日夜晚，旅居在外的诗人于屋内抬头望月而思念家乡的感受。</h3>
<p>
<img src="../../resources/image/李白.png" alt="李白" height="290" width="201" id="libai001">
<span id="libai002">李白</span>
</p>
</body>
</html>
文本阴影和超链接伪类
文本阴影：text-shadow：颜色,x坐标,y坐标
超链接伪类：a:hover 鼠标按住未释放的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的状态*/
a{
text-decoration: none;
color: blue;
}
/*鼠标悬浮上去的状态 (重点记住这个就好 hover)*/
a:hover{
color: aqua;
font-size: 30px;
}
/*鼠标按住未释放的状态*/
a:active{
color: red;
}
/*阴影*/
#L666{
text-shadow: red 15px 15px;
}
</style>
</head>
<body>
<p>
<a href="">
<img src="../../resources/image/奋斗的小孩.jpg" alt="努力拼搏" width="240" height="240">
</a>
</p>
<p><a href="" >奋斗的小孩</a></p>
<p><a href="">开心每一天</a></p>
<p><a href="" id="L666">666</a></p>
</body>
</html>
列表样式
#div01{
background-color: #006272;
width:266px ;
}
#title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background-color: red;
}
/*list-style
none:去掉原点
circle：空心圆
decimal:数字
square:小正方形
*/
li{
list-style: none;
height: 30px;
text-indent: -1em;
}
a{
text-decoration: none;
color: black;
font-size: 14px;
}
a:hover{
color: blue;
}
背景图片应用和渐变
背景图片：
<style>
div{
width: 1280px;
height: 640px;
border: 1px solid red;
background-image: url("../../resources/image/nb.jpg" );
/*默认是全部平铺的*/
}
/*平铺一行*/
#div1{
background-repeat: repeat-x;
}
/*向下平铺一列*/
#div2{
background-repeat: repeat-y;
}
/*不平铺*/
#div3{
background-repeat: no-repeat;
}
</style>
渐变：
网站：https://www.grabient.com/
background-color: #0093E9; background-image: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
盒子模型
什么是盒子模型？
内外边距 边框
margin：外边距
padding：内边距
border：边框 （粗细 样式 颜色）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一些默认的属性值，外边距等 常见操作直接设置为0*/
/*h1,ul,li,a,body{*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
/*border: 粗细 样式 颜色;*/
/*margin: 0 auto; 水平居中*/
#box_01{
width: 250px;
border: 1px solid red;
background: #0093E9;
margin: 0 auto;
}
h2{
background: #0093E9;
font-size: 36px;
margin: 0;
padding:0 0 0 50px;
;
}
div:nth-of-type(1)>input{
border: 2px solid greenyellow;
}
div:nth-of-type(2)>input{
border: 2px dashed yellow;
}
div:nth-of-type(3)>input{
border: 2px solid #0833ff;
}
</style>
</head>
<body>
<div id="box_01">
<h2>京东商城</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text" name="username">
</div>
<div>
<span>密 码：</span>
<input type="password" name="password">
</div>
<div>
<span>邮 箱：</span>
<input type="text" name="postbox">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你这个元素到底有多大？ margin+border+padding+内容宽高度
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*border-radius
成圆：等于圆的半径
左上 右上 左下 右下 顺时针
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 60px;
}
/*方形照片制成圆形照片
只要border-radius 的数值大于它的半径就可
*/
img{
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
<img src="../../resources/image/nb.jpg" alt="nb">
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*盒子阴影
box-shadow 颜色 X坐标 Y坐标 阴影的范围
*/
img{
border-radius: 100px;
box-shadow: yellow 10px 10px 100px;
}
/*居中*/
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="../../resources/image/nb.jpg" alt="nb">
</div>
</body>
</html>
浮动
标准文档流
标准文档流就是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML文档中的元素可以分为两大类：块级元素和行内元素。
块级元素： 块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素： 行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有 span 、a、 img等。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
block:块元素
inline:行内元素
inline-block: 是块元素 但是可以内联(在一行)
none:不展示
*/
div{
width: 500px;
height: 200px;
border: 1px solid red;
display: inline-block;
}
span{
width: 500px;
height: 200px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
<img src="../../resources/image/nb.jpg" alt="nb">
</div>
<span>nb的小孩</span>
</body>
</html>
这个也是实现块级元素排列的一种方式 但是我们在多数情况下还是使用float
float
左右浮动：float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="Fu"> <div id="Zi1"><img src="../../resources/image/nb.jpg" alt="nb"></div> <div id="Zi2"><img src="../../resources/image/nb.jpg" alt="fd"></div> <div id="Zi3"><img src="../../resources/image/nb.jpg" alt="lb"></div> <div id="Zi4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止</div> </div> </body> </html>
div{
margin: 10px;
padding: 5px;
}
#Fu{
border: 1px solid red;
}
#Zi1{
border: 1px dashed red;
float: right;
}
#Zi2{
border: 1px dashed blue;
float: left;
}
#Zi3{
border: 1px dashed black;
float: left;
}
#Zi4{
border: 1px dashed yellow;
float: right;
}
父级边框塌陷的问题
clear
clear:right 右侧不允许有浮动元素 clear:left 左侧不允许有浮动元素 clear:both 两侧不允许有浮动元素 clear:none
父级边框塌陷解决办法：
-
增加父级(div)元素的高度
<div id="Fu"> <div id="Zi1"><img src="../../resources/image/nb.jpg" alt="nb"></div> <div id="Zi2"><img src="../../resources/image/nb.jpg" alt="fd"></div> <div id="Zi3"><img src="../../resources/image/nb.jpg" alt="lb"></div> <div id="Zi4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止</div> </div> #Fu{ border: 1px solid red; height: 800px; } -
增加一个空的div标签 清除浮动
<div id="Fu"> <div id="Zi1"><img src="../../resources/image/nb.jpg" alt="nb"></div> <div id="Zi2"><img src="../../resources/image/nb.jpg" alt="fd"></div> <div id="Zi3"><img src="../../resources/image/nb.jpg" alt="lb"></div> <div id="Zi4">浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另一个浮动盒子为止</div> <div id="clear"></div> </div> #clear{ clear: both; margin: 0; padding: 0; } -
overflow
overflow: scroll; //滚动条 不建议使用 太丑 用hidden 在父级元素添加： #Fu{ border: 1px solid red; overflow: hidden; } -
添加父类的伪类选择器:after
#Fu:after{ content: ""; display: block; clear: both; }
小结：
-
增加父级(div)元素的高度
简单 但是假设元素有了固定的高度，就会被限制
-
增加一个空的div标签 清除浮动
简单 但是在代码中应避免空div的编写
-
overflow
简单 下拉的一些场景避免使用 太丑
-
添加父类的伪类选择器:after
写法稍微微复杂一些，但是没有副作用，推荐使用
定位
相对定位relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 10px;
}
#Fu01{
width: 300px;
height: 200px;
border: 1px solid yellow;
}
#one{
border: 1px dashed green;
position: relative;
top: -20px;
left: 20px;
}
#two{
border: 1px solid red;
position: relative;
}
#three{
border: 1px solid black;
bottom: 30px;
right: 20px;
}
</style>
</head>
<body>
<div id="Fu01">
<div id="one">第一个盒子</div>
<div id="two">第二个盒子</div>
<div id="three">第三个盒子</div>
</div>
</body>
</html>
相对定位：position:relative;
相对于原来的位置，进行指定的偏移。相对定位的话，它仍然在标准文档流中，原来的位置会被保留
position: relative; /*开启相对定位*/ top: -20px; /*距离顶部-20px*/ bottom: 30px; /*距离下部30px*/ left: 20px; /*距离左部20px*/ right: 20px; /*距离右部20px*/
方块定位练习：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="all"> <a id="l_t" href="相对定位.html">左上</a> <a id="r_t" href="相对定位.html">右上</a> <a id="center" href="相对定位.html">中</a> <a id="l_b" href="相对定位.html">左下</a> <a id="r_b" href="相对定位.html">右下</a> </div> </body> </html>
#all{
width: 300px;
height: 300px;
border: 1px solid red;
padding: 10px;
}
a{
display: block;
width: 100px;
height: 100px;
background-color: pink;
text-decoration: none;
line-height: 100px;
text-align: center;
color: white;
}
a:hover{
background-color: blue;
}
#r_t{
position: relative;
top: -100px;
left: 200px;
}
#center{
position: relative;
top: -100px;
left: 100px;
}
#l_b{
position: relative;
top: -100px;
}
#r_b{
position: relative;
top: -200px;
left: 200px;
}
绝对定位 absolute
定位：基于***定位，上下左右~
-
没有父级元素定位的前提下，相对于浏览器定位
-
假设父级元素存在定位，相对于父级元素定位，我们通常会相对于父级元素进行偏移
-
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不存在于标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 10px;
position: absolute;
}
#Fu01{
width: 300px;
height: 200px;
border: 1px solid yellow;
}
#one{
border: 1px dashed green;
position: absolute;
left: 0px;
top: 0px;
}
#two{
border: 1px solid red;
}
#three{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="Fu01">
<div id="one">第一个盒子</div>
<div id="two">第二个盒子</div>
<div id="three">第三个盒子</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 3300px;
}
div{
width: 100px;
height: 100px;
border: 1px solid yellow;
background-color: yellow;
}
div:nth-of-type(1){ /*绝对定位 相对于浏览器*/
position: absolute;
right: 0px;
bottom: 0px;
}
div:nth-of-type(2){ /*固定定位*/
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div>div01</div>
<div>div02</div>
</body>
</html>
z-index
图层~
z-index:默认是0，最高无限 追求最高级别用大数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style02.css"> </head> <body> <div class="d001"> <ul> <li> <img src="../../resources/image/李白.png" alt="lb"> </li> <li class="li001">这是李白</li> <li class="li002"></li> <li>李白 唐代大诗人，有诗仙著称</li> </ul> </div> </body> </html>
.d001{
margin: 0px;
padding: 0px;
overflow: hidden;
width: 800px;
border: 1px solid red;
font-size: 25px;
line-height: 25px;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.d001 ul{
position: relative;
}
.li001,.li002{
position: absolute;
width: 800px;
height: 25px;
top: 1100px;
}
.li002{
background-color: black;
opacity: 0.5; /*透明度*/
}
.li001{
color: white;
z-index: 999; /*图层级别 在.li002之上*/
}
动画
css也可做出好看的动画
可去菜鸟教程上查看 不做为重点了解
可以去网上找一些动画 特别好看 下载可查看源码
经验
开发前端页面 不是非要自己写
-
可以直接拿别人的网页，右键另存为到桌面 直接进行修改
-
也可以直接去 源码世界等 这样的网站 直接去找需要的页面 拿上面的代码 在进行修改
源码世界： https://www.ym4j.com/
飞冰：https://ice.work/
这篇关于CSS的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
uniapp动态设置不同的css有哪些方法？-icode9专业技术文章分享12-07
-
UniApp 中，怎么通过 CSS 设置 view 组件的水平居中效果？-icode9专业技术文章分享12-07
-
TailwindCSS开发入门教程12-06
-
TailwindCSS项目实战：从入门到上手12-06
-
TailwindCss项目实战：初学者指南12-06
-
TailwindCSS入门指南：轻松上手实用教程12-05
-
TailwindCss入门指南：轻松上手实用技巧12-05
-
Tailwind.css入门：简洁高效的设计利器12-04
-
Tailwind.css学习：从入门到实战的全面指南12-03
-
Tailwind.css入门指南：快速上手实用教程11-29
-
CSS-Module学习：轻松入门指南11-14
-
CSS9资料入门指南11-12
-
CSS浮动资料详解：初学者指南11-12
-
CSS选择器资料详解与实战教程11-12
-
CSS样式资料：初学者必备指南11-12
栏目导航
