Java学习——CSS详解

牛老板 發表於 2020-10-6 22:51:00

<h1 class="md-end-block md-heading">CSS详解</h1>
<h2 class="md-end-block md-heading">1、什么是CSS</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
CSS 指层叠样式表 (Cascading Style Sheets)
</li>
<li class="md-list-item">
样式定义如何显示 HTML 元素
</li>
<li class="md-list-item">
样式通常存储在样式表中
</li>
<li class="md-list-item">
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
</li>
<li class="md-list-item">
外部样式表可以极大提高工作效率
</li>
<li class="md-list-item">
外部样式表通常存储在 CSS 文件中
</li>
<li class="md-list-item">
多个样式定义可层叠为一个
</li>
</ul>
 
<h2 class="md-end-block md-heading">2、选择器</h2>
<h3 class="md-end-block md-heading">2.1、基本选择器</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
标签选择器
直接将元素标签放在style中，（少用）
<div class="cnblogs_code">
<pre> h1{
}</pre>
</div>
</li>
<li class="md-list-item">
类选择器 class
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
<div class="cnblogs_code">
<pre> .center {text-align:center;}</pre>
</div>
</li>
<li class="md-list-item">
ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
</li>
</ol>
<div class="cnblogs_code">
<pre> #para1 {
text-align:center;
color:red;
}</pre>
</div>
 
 
<h3 class="md-end-block md-heading">2.2、层次选择器</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
后代选择器
在某个元素的后面，包含在上一级标签中的所有标签
<div class="cnblogs_code">
<pre> ul li{
background：red
}</pre>
</div>
ul中li标签的背景颜色都变为红色
</li>
<li class="md-list-item">
子选择器
只有一代，指定子代同级标签中的一个
<div class="cnblogs_code">
<pre>body>p{
background：red
}</pre>
</div>
且只有子代的p标签会变色，p标签后ul，li标签不会变色
<div class="cnblogs_code">
<pre> body>p{
 background: aqua;
 }
</style>

</head>
<body>

p1
p2
<ul>
 <li>li1</li>
 <li>li2</li>
 <li>li3</li>
 </ul>


</body></pre>
</div>
 
</li>
</ol>
<img src="https://i.loli.net/2020/10/06/NxqlbYweimIUC1H.png">
<h3 class="md-end-block md-heading">2.3、结构伪类选择器</h3>
伪类：给标签加上条件，然后选中
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
 /*选中ul的第一个子元素*/
 ul li:first-child{
 background: #43b673;
 }
 /*选中p的第一个元素
 nth-child(1):选中当前标签父元素的第一个子元素，
 并且是当前类型标签才生效！
 */
 p:nth-child(1){
 background: aqua;
 }
</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></pre>
</div>
 
<img src="https://i.loli.net/2020/09/06/DKiJyX9Q3Zn2qpO.png">
<h3 class="md-end-block md-heading">2.4、属性选择器（重要）</h3>
基本类似于id+class
<div class="cnblogs_code">
<pre> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
 .demo a{
 float: left;
 display: block;
 height: 50px;
 width: 50px;
 border-radius: 10px;
 background: #43b673;
 text-align: center;
 color: gainsboro;
 text-decoration: none;
 margin-right: 5px;
 font:bold 20px/50px Arial;
 }
 /*利用属性名选择标签，属性名 = 属性值（正则）
 *=包含等号右边
 ^=以等号右边开头
 $=以等号右边结尾
 */
 /*存在id属性的元素a[]{}*/
 a{
 background: aqua;
 }
 /*也可以具体到某个id*/
 a{
 background: blueviolet;
 }
/*选中class是links的元素 */
 a{
 background: coral;
 }
/*选中href中以http开头的元素 */
 a{
 background: crimson;
 }

</style>

</head>
<body>

<p class="demo">
<a href="/abc.pdf" class=" item first" id="first">1</a>
<a href="" class="item active" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" id="qwe">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="http://www.baidu.com" class="links item">8</a>
<a href="abc.word" class="links item">9</a>
<a href="abc.doc" class="links item last">10</a>

</p>

</body>
</html></pre>
</div>
 
<img src="https://i.loli.net/2020/09/07/7EODaYkxK1hmTof.png">
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> *=包含等号右边  ^=以等号右边开头  $=以等号右边结尾</pre>
 
<h2 class="md-end-block md-heading">3、美化网页元素</h2>
<h3 class="md-end-block md-heading">3.1、为什么要美化网页</h3>
<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标签：重点要突出的字
<div class="cnblogs_code">
<pre> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
 #ttd{
 font-size: 50px;
 }

</style>

</head>
<body>

欢迎学习<span id="ttd">Java</span>

</body>
</html></pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/2110253/202010/2110253-20201006223719184-972203877.png">
<h3 class="md-end-block md-heading">3.2、字体样式</h3>
<div class="cnblogs_code">
<pre>
<style>
body{
 font-family: 幼圆 , "Bell MT";
}
h1{
 font-size: 50px;
}
.p1{
 font-weight: bold;
}
p{
 color: #43b673;
}

</style></pre>
</div>
 
<h3 class="md-end-block md-heading">3.3、文本样式</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
颜色 color RGB RGB( , , )
</li>
<li class="md-list-item">
文本对齐方式 text-align=center
</li>
<li class="md-list-item">
首行缩进 text-indent: 2em
</li>
<li class="md-list-item">
行高 line-height
</li>
<li class="md-list-item">
装饰链接去下划线： text-decoration
</li>
<li class="md-list-item">
文本图片水平对齐：vertical-align: middle
</li>
</ol>
<div class="cnblogs_code">
<pre> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
 h1{
 color: rosybrown;
 text-align: center;
 }
 .p1{
 text-indent: 2em;
 }
 .p3{
 background: coral;
 height: 30px;
 line-height: 30px;
 }

</style>

</head>
<body>

<h1>人物介绍</h1>
<P class="p1">
2015年，李子柒开始自拍自导古风美食短视频。早期，她的视频虽然创意有余，却质量一般，比如《樱桃酒》。
</P >
<p>
而在拍摄内容的选择上，和奶奶生活在一起的李子柒选择了最熟悉的“农村生活”。其最初设定的话题取自俗语：“四季更替，适食而食”，后来在编辑的建议下改成了“古香古食”。期间，她曾用了一年多的时间还原“文房四宝”在古代的制作过程，也用古法制作过手工酱油，甚至以一人之力在院子里用木头和竹子搭了一座茅草棚和秋千架。
</P>

<p class="p3">You make me feel so happy;Whenever I'm with you.You make me feel so special--This love is too good to be true.</p>

</body>
</html></pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/2110253/202010/2110253-20201006223952767-786300673.png">
<h3 class="md-end-block md-heading">3.4、文本阴影和超链接伪类</h3>
超链接伪类，正常情况下 a:hover
<div class="cnblogs_code">
<pre> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
 /*默认的颜色*/
 a{
 text-decoration: none;
 color: #000000;
 }
 /*鼠标悬浮状态（重要，只记hover）*/
 a:hover{
 color: coral;
 font-size: 50px;
 }
 /*鼠标选中激活状态*/
 a:active{
 color: #43b673;
 }
 /*阴影*/
 #price{
 text-shadow: 0px 13px 1px #4f65a0;
 }
</style>

</head>
<body>

<a href="#">
<img src="aaa.jpg" alt="">
</a>
<p>
<a href="#">气质美女</a>
</p>
<p>
<a href="">国籍：未知</a>
</p>
<p id="price">
看了很高兴
</p>

</body>
</html></pre>
</div>
 
<img src="https://i.loli.net/2020/09/11/carbwVqK73F5Zoh.png">
<h3 class="md-end-block md-heading">3.5、列表样式</h3>
html页面原始样式：
<img src="https://i.loli.net/2020/09/11/3Cdy8IWTutgsEoO.png">
列表美化样式:
<div class="cnblogs_code">
<pre> /*ul li*/
ul{
background: gray;
}

/*
list-style:none
none去掉无需列表的圆点
circle空心圆
decimal有序列表
*/
ul li{
line-height: 35px;
list-style: none;
text-indent: 1em;
}</pre>
</div>
 
<img src="https://i.loli.net/2020/09/11/yMvpQ3qPmTXKSCw.png">
 
<h2 class="md-end-block md-heading">4、盒子模型</h2>
<h3 class="md-end-block md-heading">4.1、什么是盒子模型</h3>
 
<img src="https://i.loli.net/2020/09/16/6xsfgmBhDSzn38u.png">
margin : 外边距 border ：边框 padding ：内边距
<h3 class="md-end-block md-heading">4.2、边框</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
边框的粗细
</li>
<li class="md-list-item">
边框的样式
</li>
<li class="md-list-item">
边框的颜色
</li>
</ol>
<div class="cnblogs_code">
<pre><style>
/*body等总有一个默认的外边距，常进行初始化*/
/*h1，h2,ul,li,a,body{*/
/* margin: 0px;*/
/* padding: 0px;*/
/* text-decoration: none;*/
/*}*/
#box{
 width: 300px;
 border:1px solid red;
}
h2{
 font-size: 16px;
 background-color: #4f65a0;
 line-height: 30px;
 margin: 0px;
 color: white;
}
form{
 background: #43b673;
}
div:nth-of-type(1) input{
 border: 2px solid black;
}

</style></pre>
</div>
 
<img src="https://i.loli.net/2020/09/16/E1kgP8YvAFUnxCJ.png">
<h3 class="md-end-block md-heading">4.3、外边距</h3>
<div class="cnblogs_code">
<pre> /*外边距可以进行居中操作
margin: 0 auto;
*/
 #box{
 width: 300px;
 border:1px solid red;
 margin: 0 auto;
 }</pre>
</div>
 
 
 
居中前：
<img src="https://i.loli.net/2020/09/22/6oQf8P1NgqWUbDA.png">
居中后：
<img src="https://i.loli.net/2020/09/22/DP8aJZY2jp5UE9x.png">
盒子的就算方式：margin+border+padding+内容宽度
<h3 class="md-end-block md-heading">4.4、圆角边框</h3>
4个角
<div class="cnblogs_code">
<pre> 
<style>
 div{
 width: 250px;
 height: 500px;
 border: 3px #43b673 solid;
 border-radius: 500px 00 500px;
 }</pre>
</div>
 
<img src="https://i.loli.net/2020/09/24/MNKvDFaXRzIkHPh.png">
<h3 class="md-end-block md-heading">4.5、盒子阴影</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> </pre>
<div class="cnblogs_code">
<pre>img{
width: 50px;
height: 50px;
border-radius: 25px;
box-shadow: 10px 10px 10px red;
}</pre>
</div>
 
 
<img src="https://i.loli.net/2020/09/25/bCFyfLdtoSRXmiE.png">
<h2 class="md-end-block md-heading">5、浮动</h2>
<h3 class="md-end-block md-heading">5.1、标准文档流</h3>
块级元素：独占一行
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> h1~h6   p   div列表...</pre>
行内元素：不独占一行，可以被包含在块级元素中
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> span   a   img   strong...</pre>
<h3 class="md-end-block md-heading">5.2、display</h3>
<div class="cnblogs_code">
<pre>/*dispplay：block；
block ，块元素
inline ，行内元素
inline-block , 块元素，但可以内联，在一行
none ，元素不显示
*/
span{
width: 100px;
height: 100px;
border: 1px solid skyblue;
display: inline-block;
}</pre>
</div>
 
<img src="https://i.loli.net/2020/09/25/1D7eaKsMmdvCkpJ.png">
<h3 class="md-end-block md-heading">5.3、左右浮动</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> float:left right ;</pre>
元素浮动，类似于行内元素那样的样式在一行，可以控制方向
<div class="cnblogs_code">
<pre> clear:both; //也可选择方向</pre>
</div>
 
清除浮动，恢复块元素的样式
<h3 class="md-end-block md-heading">5.4、父级边框塌陷</h3>
解决方法：
<ol class="ol-list" start="">
<li class="md-list-item">
增加父级元素高度
<div class="cnblogs_code">
<pre> #father{
border:1px blue solid;
height:800px;
}</pre>
</div>
 
</li>
<li class="md-list-item">
增加一个空的的div标签，清除浮动
</li>
</ol>
<div class="cnblogs_code">
<pre> <div class="clear"></div>

.clear{
clear:both;
margin=0;
padding:0;
}</pre>
</div>
 
<ol class="ol-list" start="3">
<li class="md-list-item">
overflow
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> overflow:hidden; //在父级元素中增加一个</pre>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
</li>
<li class="md-list-item">
父类添加一个伪类(推荐）
<div class="cnblogs_code">
<pre>#father:after{
content:'';
display:block;
clear:both;
} </pre>
</div>
</li>
</ol>
<h2 class="md-end-block md-heading">6、定位</h2>
<h3 class="md-end-block md-heading md-focus">6.1、相对定位</h3>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>


<style>
 body{
 padding: 20px;
 }
 div{
 margin: 10px;
 padding: 5px;
 font-size: 12px;
 line-height: 25px;
 }
 #father{
 border: solid 1px blue;
 padding: 0px;
 }
 #first{
 background-color: #43b673;
 border: dashed 1px blue;
 position: relative;/*相对定位：向自己原来位置的上下左右移动*/
 top:-30px;
 left: 30px;
 }
 #second{
 background-color: #4f65a0;
 border: dashed 1px blue;
 }
 #third{
 background-color: rosybrown;
 border: dashed 1px blue;
 position: relative;
 bottom: -30px;
 right: 30px;
 }
</style>

</head>
<body>

<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>

</div>

</body>
</html></pre>
</div>
 
<img src="https://i.loli.net/2020/09/27/TF53YmqB8s6NhIo.png">
相对定位： position: relative;
 /相对定位：向自己原来位置的上下左右移动/ ，
但元素原来盒子位置仍然保留，仍在标准文档流中
top right bottom left 顺时针 
<h3 class="md-end-block md-heading">6.1、绝对定位</h3>
定位: 基于xxx定位，上下左右移动
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> position: absolute;</pre>
<ol class="ol-list" start="">
<li class="md-list-item">
没有父级元素定位的情况下，相对于浏览器边框定位
</li>
<li class="md-list-item">
假设父级元素存在定位，通常相对于父级元素进行偏移
</li>
<li class="md-list-item">
在父级元素范围内移动
</li>
</ol>
元素原来盒子位置不保留，不在标准文档流中
<div class="cnblogs_code">
<pre> #second{
 border: dashed 1px blue;
 position: absolute;
 right: 30px;
 }</pre>
</div>
 
<img src="https://i.loli.net/2020/09/27/N5Dansqotjep7Kw.png">
<h3 class="md-end-block md-heading">6.3、固定定位fixed</h3>
<div class="cnblogs_code">
<pre> <!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>
</div>
 
<img src="https://img2020.cnblogs.com/blog/2110253/202010/2110253-20201006224916875-1045929633.png">
 
 
<img src="https://img2020.cnblogs.com/blog/2110253/202010/2110253-20201006224739645-402732411.png">
 
 
<h3 class="md-end-block md-heading">6.4、z-index</h3>
z-index简单类比千层饼，浏览器的页面就是盘子，页面上的盒子就是摞起来的饼层。
给不同的盒子赋予不同的层级，高层级显示在底层级之上。
z值就是层数值。
<div class="cnblogs_code">
<pre> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
<ul>
 <li><img src="images/bg.png" alt=""></li>
 <li class="tipText">一些代码</li>
 <li class="tipBg"></li>
 <li>时间：2020-10-01</li>
 <li>地点:dasdlkjm</li>
</ul>
</div>

</body>
</html></pre>
</div>
 
 
<div class="cnblogs_code">
<pre> #content{
width: 300px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 21px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
color: orange;
}
/*父级元素相对定位，子级绝对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 183px;
height: 25px;
top: 82px;
}
/*设置层级让字显示在绿色背景之上*/
.tipText{
z-index: 3;
}
/*opacity 调整背景透明度*/
.tipBg{
background: #43b673;
opacity: 0.5;
}</pre>
</div>
 
前：<img src="https://i.loli.net/2020/10/06/CU95xWitPBhrzOD.png">
后：<img src="https://i.loli.net/2020/10/06/IcS5mOdW8nolH3J.png"> 
来源：https://www.cnblogs.com/juvenileblogs/p/13775862.html

頁: [1]

琼殿技术论坛's Archiver

Java学习——CSS详解