CSS的学习

零星记忆 發表於 2021-3-17 09:44:00

<h1 class="md-end-block md-heading">1.CSS</h1>
<h2 class="md-end-block md-heading">1.1什么是CSS</h2>
Cascading Style Sheets—>层叠级联样式表
CSS：表现层~（用于美化网页）
 如字体、颜色等
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094201448-839714267.png">
<h2 class="md-end-block md-heading">1.2CSS发展史</h2>
CSS1.0
CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆角边框，阴影，动画……，浏览器兼容性~
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094217738-65878625.png">
 ⬆联系格式
 
<h2 class="md-end-block md-heading">1.3快速入门</h2>
style
基本入门
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>        <style>        h1{            color: red;      }    </style> </head> <body> <h1>我是标题</h1> </body> </html></pre>
建议使用下面这种规范
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094227214-1457212692.png">
 
css的优势：
<ol class="ol-list" start="">
<li class="md-list-item">
内容和表现分离
</li>
<li class="md-list-item">
网页结构表现统一，可以实现复用
</li>
<li class="md-list-item">
样式十分丰富
</li>
<li class="md-list-item">
建议使用独立于html的css文件
</li>
<li class="md-list-item">
利于SEO，容易被搜索引擎收录！
</li>
</ol>
 
<h2 class="md-end-block md-heading">1.4CSS的三种导入方式</h2>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>        <style>        h1{            color: green;      }    </style>        <link rel="stylesheet" href="style.css"> </head> <body>      <h1 style = "color:red;">我是标题</h1> </body> </html></pre>
拓展：外部样式两种写法
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
导入式：
@inport是CSS 2.1特有的
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">    <style>        @import url("style.css");    </style></pre>
 
</li>
<li class="md-list-item">
链接式
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">     <link rel="stylesheet" href="style.css"></pre>
</li>
</ul>
 
<h1 class="md-end-block md-heading">2.选择器</h1>
作用：选择页面上的某一个或者某一类元素
 
<h2 class="md-end-block md-heading">2.1基本选择器</h2>
<ol class="ol-list" start="">
<li class="md-list-item">
标签选择器：选择一类标签标签{}
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>    <style>        h1{            color: red;            background: #23d9cc;            border-radius: 24px;      }        p{            font-size: 80px;      }    </style> </head> <body>    <h1>      哎哟不错哦    </h1>    <h1>      哎哟不错哦    </h1> <p>  有一说一 </p> </body> </html></pre>
 
</li>
<li class="md-list-item">
类选择器 class：选择所有class属性一致的标签，跨标签。.类名{}
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*好处，可以多个标签归类，是同一个class，可以复用*/        .a{            color: aqua;      }        .b{            color: green;      }    </style> </head> <body>    <h1 class="a">标题一</h1>    <h1 class="b">标题二</h1>    <h1 class="a">标题三</h1>    <p class="a">标签一</p> </body> </html></pre>
 
</li>
<li class="md-list-item">
ID选择器：全局唯一！#id名{}
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*id选择器     :   id必须保证全局唯一        #id名称{          不遵循就近原则，固定的：id选择器>类选择器>标签选择器         }      */        #qinjiang{            color: red;      }        .ab{            color: green;      }        h1{            color: bisque;      }    </style> </head> <body> <h1 id="qinjiang"class="a">标题1</h1> <h1 class="ab">标题2</h1> <h1 class="ab">标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html></pre>
 
</li>
</ol>
<h2 class="md-end-block md-heading">2.2层次选择器</h2>
<ol class="ol-list" start="">
<li class="md-list-item">
后代选择器：在某个元素的后面的所有元素（祖爷爷爷爷爸爸你）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*后代选择器*/        body p{            background: red;      }</pre>
</li>
<li class="md-list-item">
子选择器:下一代
<pre class="md-fences mock-cm md-end-block">/*子选择器*/
 body>p{
 background: bisque;
 }</pre>
</li>
<li class="md-list-item">
相邻兄弟选择器：同辈（只有一个且对下不对上，用.class+来实现）
<pre class="md-fences mock-cm md-end-block">/*相邻兄弟选择器*/
 .abc + p{
 background: blue;
 }</pre>
</li>
<li class="md-list-item">
通用选择器：同辈，对下且全对，用.class~实习
<pre class="md-fences mock-cm md-end-block">/*通用选择器*/
.abc~p{
 background: blueviolet;
 }</pre>
 
</li>
</ol>
<h2 class="md-end-block md-heading">2.3测试伪类选择器</h2>
<pre class="md-fences mock-cm md-end-block">/*ul的第一个子元素*/
ul li:first-child{
background: blueviolet;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #e2ba2b;
}
/*选择当前p元素的父级元素，选中父级元素的第n个子元素，并且该子元素是同样的p元素才生效*/
p:nth-child(2){
background: red;
}
/*选中父级元素，下的第n个相同的元素类型的元素生效*/
p:nth-of-type(2){
background: #cf16d5;
}
</pre>
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094301475-1069796800.png">
<h2 class="md-end-block md-heading">2.4属性选择器（常用）</h2>
=：绝对等于
*=：通配
^=:以规定内容开头的
&=:以规定内容结尾的
<pre class="md-fences mock-cm md-end-block">/*选择存在id属性的元素*/
a{
background: red;
}

/*选择id属性值为123的元素*/
a{
background: #23d9cc;
}

/*选择存在class属性的元素*/
a{
background: greenyellow;
}

/*选择class中有links的元素*/
a{
background: yellow;
}

/*选择href中以http开头的元素*/
a{
background: pink;
}

/*选择href中以jpg结尾的元素*/
a{
background:gray;
}</pre>
 
<h1 class="md-end-block md-heading">3.美化网页属性</h1>
<h2 class="md-end-block md-heading">3.1为什么要美化网页</h2>
<ol class="ol-list" start="">
<li class="md-list-item">
有效的传递页面信息
</li>
<li class="md-list-item">
美化网页、页面漂亮，才能吸引用户
</li>
<li class="md-list-item">
凸显页面的主题
</li>
<li class="md-list-item">
提高用户的体验
</li>
</ol>
 
span标签：重点要突出的字，使用span标签套起来
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 #title1{
 font-size: 50px;
 }
</style>
</head>
<body>
欢迎学习JAVA
</body>
</html></pre>
 
<h2 class="md-end-block md-heading">3.2字体样式</h2>
<pre class="md-fences mock-cm md-end-block">
body{
font-family: 楷体,"Agency FB";
font-size: 25px;
font-weight: bold;
color: #e2ba2b;
}
h1{
font-size: 80px;
}</pre>
<h2 class="md-end-block md-heading">3.3文本样式</h2>
<ol class="ol-list" start="">
<li class="md-list-item">
颜色
</li>
<li class="md-list-item">
文本对齐的方式
</li>
<li class="md-list-item">
首行缩进
</li>
<li class="md-list-item">
行高
</li>
<li class="md-list-item">
装饰（如下划线）
</li>
<li class="md-list-item">
文本图片水平对齐：vertical-align：middle
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
 h1{
 color: rgba(0,255,255,0.9);
 text-align: center;
 }
 .p1{
 text-indent: 2em;
 }
 .p3{
 background: blue;
 height: 300px;
 line-height: 300px;
 }
 .L1{
 text-decoration: underline;/*下划线*/
 }
 .L2{
 text-decoration: line-through;/*中划线*/
 }
 .L3{
 text-decoration: overline;/*上划线*/
 }
a{
 text-decoration:none;/*超链接去下划线*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">123</a>
123213
123123
123456
<h1>故事介绍</h1>
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
 在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。

 For years I had been searching,
</body>
</html></pre>
</li>
</ol>
 
<h2 class="md-end-block md-heading">3.4阴影</h2>
<pre class="md-fences mock-cm md-end-block">/*text-shadow:阴影颜色水平偏移垂直偏移阴影半径*/
#price{
text-shadow: #23d9cc 10px 10px 2px;
}</pre>
 
<h2 class="md-end-block md-heading">3.5超链接伪类</h2>
正常情况下，只需要用到，a，a：hover
<pre class="md-fences mock-cm md-end-block">/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的颜色(只需要记住这个：hover)*/
a:hover{
color:orange;
}</pre>
 
<h2 class="md-end-block md-heading">3.6列表</h2>
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav id="nav1">
<h2 class="title1">商品选择</h2>
<ul>
 <li><a href="#">书包</a>&nbsp;<a href="#">水杯</a>&nbsp;<a href="#">电脑</a>&nbsp;</li>
 <li><a href="#">纸巾</a>&nbsp;<a href="#">充电宝</a>&nbsp;<a href="#">口香糖</a>&nbsp;</li>
 <li><a href="#">口罩</a>&nbsp;<a href="#">手机</a>&nbsp;<a href="#">平板</a>&nbsp;</li>
</ul>
</nav>
</body>
</html></pre>
<pre class="md-fences mock-cm md-end-block">#nav1{
background: aqua;
width: 500px;
}
.title1{
background: red;
font-size: 50px;
font-weight: bold;
}
ul{
background: aqua;
}

ul li{
list-style: none;
height: 40px;

}
a{
text-decoration: none;
color: black;
}
a:hover{
color: #e2ba2b;

}</pre>
效果图：
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094321509-666109755.png">
<h2 class="md-end-block md-heading">3.7背景</h2>
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 div{
 width: 1000px;
 height: 700px;
 border: 1px solid red;
 background-image: url("images/tx.jpg");
 }
 .div2{
 background-repeat:repeat-x;/*由左向右平铺*/
 }
 .div3{
 background-repeat:repeat-y;/*由上到下平铺*/
 }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html></pre>
效果图：
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094328681-913722126.png">
 
练习：在列表的基础上添加箭头
<pre class="md-fences mock-cm md-end-block">#nav1{
background: aqua;
width: 500px;
}
.title1{
font-size: 50px;
font-weight: bold;
/*颜色、图片、图片位置、平铺方式*/
background: red url("../images/下箭头.jpg") 450px 20px no-repeat;
}
ul{
background: aqua;
}

ul li{
list-style: none;
height: 40px;
background-image: url("../images/右箭头.jpg");
background-repeat: no-repeat;
background-position: 410px -3px ;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: #e2ba2b;

}</pre>
效果图：
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094339332-1717927796.png">
 
<h2 class="md-end-block md-heading">3.8渐变</h2>
<pre class="md-fences mock-cm md-end-block">background-color:#FFFFFF;
background-image:linear-gradient(19deg,#21D4FD 0%, #21ff37 100%) ;</pre>
 
<h1 class="md-end-block md-heading">4盒子模型</h1>
<h2 class="md-end-block md-heading">4.1盒子模型</h2>
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094346248-298084376.png">
margin：外边距
padding：内边距
border：边框
<h2 class="md-end-block md-heading">4.2边框</h2>
<ol class="ol-list" start="">
<li class="md-list-item">
边框的粗细
</li>
<li class="md-list-item">
边框的样式
</li>
<li class="md-list-item">
边框的颜色
</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094352659-807325736.png">
<h2 class="md-end-block md-heading">4.3内外边距</h2>
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>

 body{
 margin: 0;
 }
 #box{
 width: 300px;
 border: 1px solid red;
 margin: 0 auto;
 }
 h2{
 background-color: palevioletred;
 line-height: 30px;
 margin: 0px;
 text-align: center;
 color: #e7d50c;
 }
 form{
 background: palevioletred;
 }
 input{
 border: 1px solid black;
 }
 div:nth-of-type(1){
 padding: 5px 6px;/*内边距设置为上下5，左右6*/
 }
</style>
</head>
<body>
<div id="box">
 <h2>登录</h2>
 <form>
 <div>
 账号
 <input type="text">
 
 </div>
 <div>
 密码
 <input type="text">
 
 </div>
 </form>
</div>
</body>
</html></pre>
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
 
<h2 class="md-end-block md-heading">4.4圆角边框</h2>
<pre class="md-fences mock-cm md-end-block"><style>
div{
 width: 100px;
 height: 100px;
 border: 10px solid red;
 border-radius: 50px 10px ;/*前面数据为主对角线，后面为次对角线*/
 /*想变成圆圈的话，只需使圆角=边长*/
}
</style></pre>
 
<h2 class="md-end-block md-heading">4.5盒子阴影</h2>
<pre class="md-fences mock-cm md-end-block"><style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 200px yellow;/*左偏移，右偏移，模糊半径，颜色*/
}
</style></pre>
效果：<img src="https://img2020.cnblogs.com/blog/2317821/202103/2317821-20210317094403542-1863036096.png">
 
<h1 class="md-end-block md-heading">5.浮动</h1>
<h2 class="md-end-block md-heading">5.1块元素与行内元素</h2>
块级元素（block）：独占一行（h1~h6、p、div、列表……）
行内元素（inline）：不独占一行（span、a、img、strong……）
<pre class="md-fences mock-cm md-end-block">


</pre>
行内元素可以被包含在块级元素中，反之，则不可以
 
<h2 class="md-end-block md-heading">5.2display</h2>
<pre class="md-fences mock-cm md-end-block"><style>
 div{
 width: 100px;
 height: 100px;
 border: 1px solid red;
 display: inline-block;
 }
 span{
 width: 100px;
 height: 100px;
 border: 1px solid red;
 display: none;
 }
</style></pre>
1.这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
 
<h2 class="md-end-block md-heading">5.3float</h2>
1.左右浮动float
 
<h2 class="md-end-block md-heading">5.4父级边框塌陷的问题</h2>
clear
<pre class="md-fences mock-cm md-end-block">/*
clear:right;右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动元素
clear:none;
*/</pre>
 
解决方案：
<ol class="ol-list" start="">
<li class="md-list-item">
增加父级元素的高度~
</li>
<li class="md-list-item">
增加一个空的div标签，清除浮动
<pre class="md-fences mock-cm md-end-block"><div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0
}</pre>
</li>
</ol>
3.overflow
<pre class="md-fences mock-cm md-end-block">在父级元素中增加一个 overflow：hidden;</pre>
4.父类添加一个伪类：after
<pre class="md-fences mock-cm md-end-block">#father:after{
content:'';
display:block;
clear:both;
}</pre>
 
小结：
1.浮动元素后面增加空的div
 简单，但是代码中空的div不太好
2.设置父元素的高度
 简单，但是假设新增的元素超过了设置的高度就被限制了
3.overflow
 简单，但是下拉的一些场景应当尽量避免使用，会使网页边难看
4.父类添加一个伪类：after（推荐使用）
 没有副作用，推荐使用
 
<h2 class="md-end-block md-heading">5.5对比</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
display
方向不可控制，不需要管父级边框塌陷的问题
</li>
<li class="md-list-item">
float
方向可控，需要解决父级边框塌陷的问题
</li>
</ul>
 
<h1 class="md-end-block md-heading">6.定位</h1>
<h2 class="md-end-block md-heading">6.1相对定位</h2>
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
 div{
 margin: 10px;
 padding: 5px;
 font-size: 12px;
 line-height: 25px;
 }
 #father{
 padding: 0;
 border:1px solid #d75c5c;
 }
 #first{
 background-color:#234199 ;
 border:1px dashed #23417d;
 position: relative;/*相对定位：上下左右*/
 top: -20px;
 left:20px;/*是相对于左边位移了（远离）20px，注意不是往左边走了20px*/
 }
 #second{
 background-color: #1ebd99;
 border:1px dashed #1ebd73;
 }
 #third{
 background-color: #ce9b99;
 border:1px dashed #ce9b17;
 }
</style>
</head>
<body>
<div id="father">
 <div id="first">第一个盒子</div>
 <div id="second">第二个盒子</div>
 <div id="third">第三个盒子</div>
</div>
</body>
</html></pre>
相对定位：
position:relative;
相对于原来的位置进行指定的偏移，相对定位的话，它仍然在标准文档中，原来的位置会被保留，不会造城父级边框塌陷。
 
<h2 class="md-end-block md-heading">6.2绝对定位</h2>
定位：基于XXX定位，上下左右~
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 div{
 margin: 10px;
 padding: 5px;
 font-size: 12px;
 line-height: 25px;
 }
 #father{
 padding: 0;
 border:1px solid #d75c5c;
 position: relative;
 }
 #first{
 background-color:#234199 ;
 border:1px dashed #23417d;
 }
 #second{
 background-color: #1ebd99;
 border:1px dashed #1ebd73;
 position: absolute;
 }
 #third{
 background-color: #ce9b99;
 border:1px dashed #ce9b17;
 }
</style>
</head>
<body>
<div id="father">
 <div id="first">第一个盒子</div>
 <div id="second">第二个盒子</div>
 <div id="third">第三个盒子</div>
</div>
</body>
</html></pre>
 
<h2 class="md-end-block md-heading">6.3 固定定位</h2>
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 body{
 height: 1000px;
 }
 div:nth-of-type(1){/*绝对定位*/
 width: 100px;
 height: 100px;
 background: red;
 position: absolute;
 right: 0;
 bottom: 0;
 }
 div:nth-of-type(2){/*fixed浏览器导航栏必用，无论怎么滑滚动条，永远定位在你面前*/
 width: 50px;
 height: 50px;
 background: yellow;
 position: fixed;
 right: 0;
 bottom: 0;
 }
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html></pre>
 
<h2 class="md-end-block md-heading">6.4 z-index</h2>
图层~
z-index：默认是0，最高无限~999
<pre class="md-fences mock-cm md-end-block">#content{
width: 880px;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
padding:0px;
margin: 0px;
overflow: hidden;
}
ul,li{
padding:0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位先*/
ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 880px;
height: 25px;
top: 362px;
}
.tipText{
color: black;
z-index: 999;
}
.tipBg{
background: #e7cb1a;
opacity: 0.5;/*背景透明度*/
}
</pre>
 
  
来源：https://www.cnblogs.com/PinkBird/p/14547567.html

頁: [1]

琼殿技术论坛's Archiver

CSS的学习