CSS-学习笔记

黄小民 發表於 2021-1-15 21:42:00

<h1 class="md-end-block md-heading">CSS</h1>
<h2 class="md-end-block md-heading md-focus">一、三种CSS导入方式</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
直接在标签内部写：style="..."（多个样式以；间隔）
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><h2 style="color: green">我是标题2</h2></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
在head区域中写style代码块
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><style type="text/css">    h3{          color: pink;    } </style></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
单独写css文件，在指定的html文件中以link语句导入
link：
rel
href：css文件地址
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><link rel="stylesheet" href="../style/style01.css"></pre>
 
<h2 class="md-end-block md-heading">二、CSS选择器</h2>
<h3 class="md-end-block md-heading">1、CSS三种基本选择器</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
标签选择器：以标签名为名
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*标签选择器 所有标签同处理 标签名{} */ h1{     color: red; }</pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
类选择器：class类名方式
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*类选择器 同class名可以复用 .class名{} */ .cls{        color: blue;        font-size: 50px;  }</pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
id选择器：id名方式（全局唯一）
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*id选择器 全局唯一 #id名{} */ #ID{       color: green;       font-size: 70px;       font-family: 华文彩云;   }</pre>
 
<h3 class="md-end-block md-heading">2、层次选择器</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
后代选择器：
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*后代选择器 后代中所有都变 */ body h3{    color: pink;    font-size: 50px; }</pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
子选择器：
</li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*子选择器 后代中只有一代变 */ body>p{   background: brown; }</pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
相邻兄弟选择器：
</li>
</ul>
<pre class="md-fences mock-cm md-end-block">/*相邻兄弟选择器
当前选中元素的向下一个兄弟元素变
*/
.active + p{
 background: yellow;
}</pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
通用选择器：
</li>
</ul>
<pre class="md-fences mock-cm md-end-block">/*通用选择器
当前选中元素的向下所有兄弟元素都变
*/
.active~p{
background: aqua;
}</pre>
 
<h3 class="md-end-block md-heading">3、结构伪类选择器</h3>
伪类： 条件
<pre class="md-fences mock-cm md-end-block">/*ul的第一个子元素*/
ul li:first-child{
background: aqua;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: blue;
}</pre>
<pre class="md-fences mock-cm md-end-block">/*选择当前元素的父级元素，选中父级元素的第n个子元素，并且是当前元素才生效
按顺序，如果前面有别的标签，则会出现差异
*/
p:nth-child(2){
background: cadetblue;
}</pre>
<pre class="md-fences mock-cm md-end-block">/*选择父元素中第n个类型为p的元素
按类型括号中可以是数字、关键字（odd-奇数、even-偶数）
*/
p:nth-of-type(2){
background: yellow;
}</pre>
<img alt="image-20200419181551539">
 
<h3 class="md-end-block md-heading">4、属性选择器（常用）</h3>
格式：名称 [ ] { }
[ ] 中可以写：属性名 / 属性名=值（可以用正则）
其中
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
= 绝对等于
</li>
<li class="md-list-item">
*= 包含该元素
</li>
<li class="md-list-item">
^= 以该元素开头
</li>
<li class="md-list-item">
$= 以该元素结尾
</li>
</ul>
测试：
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
 .demo a{
 float: left;
 display: block;
 height: 50px;
 width: 50px;
 background: blue;
 color: white;
 border-radius: 10px;
 text-align: center;
 text-decoration: none;
 margin-right: 5px;
 font:bold 20px/50px Arial;
 }
 /*存在id属性的元素*/
 /*a{*/
 /* background: yellow;*/
 /*}*/
 /*id名为first的元素*/
 /*a{*/
 /* background: green;*/
 /*}*/
 /*值为指定href的元素*/
 /*a{*/
 /* background: aqua;*/
 /*}*/
 /*class中有links的元素*/
 /*a{*/
 /* background: darkorchid;*/
 /*}*/
 /*选中href属性以https开头的*/
 /*a{*/
 /* background: pink;*/
 /*}*/
 /*选中href属性以pdf结尾的*/
 a{
 background: red;
 }
</style>
</head>
<body>

<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="https://www.sohu.com/" class="links item active" target="_blank" title="2">2</a>
<a href="Demo01.html" class="links item">3</a>
<a href="123.png" class="links item">4</a>
<a href="123.jpg" class="links item">5</a>
<a href="abc.txt" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item">10</a>

</body>
</html></pre>
效果：
<img alt="image-20200419205127649">
 
<h2 class="md-end-block md-heading">三、美化网页元素</h2>
<h3 class="md-end-block md-heading">3.1、span标签</h3>
span标签：重点要突出的字，使用span套起来
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Span标签</title>
<style>
 #test{
 font-size: 50px;
 }
</style>
</head>
<body>
欢迎学习Java
</body>
</html></pre>
<h3 class="md-end-block md-heading">3.2、字体样式</h3>
font-family：字体样式 可以同时为中文英文指定字体，中间用 ‘ ， ’ 隔开 
font-size：字体大小
font-weight：字体粗细
color：字体颜色
可以直接一次指定：font：字体风格(斜体oblique等) 粗细大小/行高字体；
<h3 class="md-end-block md-heading">3.3、文本样式</h3>
1、颜色：color
 单词
 RGB：0~F（黑色：#000000，白色：#FFFFFF，红色：#FF0000，绿色：00FF
00，蓝色：0000FF）
 RGBA(A为透明度)：A 0~1
 如：color：rgba（0，255，255，0.5）
2、对齐方式
 text-align：排版 left / center / right
3、首行缩进
 text-indent：可以用em表示，1em等于一个字的长度
4、行高
 line-height
 行高和块的高度一致，就可以上下居中
5、装饰
 text-decoration：underline（下） / line-through（中） / overline（上）/ none（没有）
 文本图片水平对齐~ 参照物：a，b
 如：
<pre class="md-fences mock-cm md-end-block"><style>
img,span{
vertical-align:middle;
}
</style></pre>
<img alt="image-20200419214906558">
<h3 class="md-end-block md-heading">3.4、超链接伪类</h3>
默认的样式：a
鼠标悬浮的样式：a：hover（常用）
鼠标按住未释放的状态：a：active
未访问时的状态：a：link
已访问的状态：a：visited
 
阴影：text-shadow：阴影颜色水平偏移垂直偏移阴影半径
<pre class="md-fences mock-cm md-end-block">#price{
text-shadow: cyan 10px 10px 5px;
}</pre>
<h3 class="md-end-block md-heading">3.5、列表</h3>
list-style：可以选择列表中每一个li前面的标识
 none：没有
 circle：空心圆
 decimal：数字
 square：正方形
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表css</title>
<link rel="stylesheet" href="../../style/style01.css">
</head>
<body>
<div id="nav">
<h2 class="tit">全部商品分类</h2>
<ul>
 <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
 <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
 <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
 <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
 <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
 <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
 <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
 <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
</ul>
</div>
</body>
</html></pre>
<pre class="md-fences mock-cm md-end-block">#nav{
width: 300px;
background: gray;
}
.tit{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: #ff830d;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
/*ul{*/
/* background: gray;*/
/*}*/
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}</pre>
<img alt="image-20200420085225230">
<h3 class="md-end-block md-heading">3.6、背景</h3>
background 和 background-color都可以用来设置背景颜色，谁最后设置谁生效
 background：颜色图片（url）图片相对位置（水平，竖直）图片平铺方式 
border：边框粗细边框线样式边框颜色；
 边框线样式：实线--solid 虚线--dashed
背景图片：background-image：url（图片路径）
 默认全部平铺（repeat）
图片平铺方式：background-repeat
 repeat-x：水平方向平铺
 repeat-y：竖直方向平铺
 repeat：水平竖直都平铺
 no-repeat：不平铺（只有一个图片）
位置设定：background-position
 水平、竖直
<pre class="md-fences mock-cm md-end-block"><style>
div{
width: 1000px;
height: 700px;
background-color: cyan;
background-image: url("../../pic/pic_05.jpg");
border: 1px solid red;
}
#div1{
background-repeat: repeat-x;
}
#div2{
background-repeat: repeat-y;
}
#div3{
background-repeat: no-repeat;
}
</style></pre>
渐变
可以直接从网站找：grabient
<pre class="md-fences mock-cm md-end-block">background-color: #FFFFFF;
background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
</pre>
 
<h2 class="md-end-block md-heading">四、盒子模型</h2>
<h3 class="md-end-block md-heading">4.1、什么是盒子模型</h3>
<img alt="image-20200420160211097">
margin：外边距
padding：内边距
border：边框
<h3 class="md-end-block md-heading">4.2、边框</h3>
1、边框的粗细
2、边框的样式
3、边框的颜色
<img alt="image-20200420173956688">
<h3 class="md-end-block md-heading">4.3、内外边距及div居中</h3>
margin妙用：margin：0 auto；可以将该元素居中（上下外边距为0，左右自动对齐）
 前提：外边是块元素，且块元素有固定的宽度
 margin：X X X X；分别指定上下左右
 margin：X X X；分别指定上，左右，下
 margin：X X；分别指定上下、左右
 margin：X；上下左右都为X
padding操作方式同margin
 
盒子的计算方式：（元素到底有多大）
 margin + padding + border + 内容宽度
<h3 class="md-end-block md-heading">4.4、圆角边框及阴影</h3>
border-radius：左上、右上、右下、左下（顺时针方向）
 100px就为圆了（头像设计原理）
阴影：box-shadow：颜色水平偏移垂直偏移模糊半径；
<h3 class="md-end-block md-heading">4.5、标准文档流</h3>
标准文档流
<img alt="image-20200420220504723">
块级元素：独占一行
<pre class="md-fences mock-cm md-end-block">h1~h6 p div 列表...</pre>
内联元素：不独占一行
<pre class="md-fences mock-cm md-end-block">span a img strong...</pre>
行内元素可以被包含在块级元素中；反之，则不可以
 
display：
 block：块元素
 inline：行内元素
 inline-block：既是行内元素又是块元素
display也是一种实现行内元素排列的方式，但是很多情况用 float（因为display还是在文档流内，而float是不在文档流内的独立部分）
 
float：浮动。不在原有文档流中排版，而是浮动起来。
clear：both：清除浮动。既有浮动的效果又有块元素的效果。
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="../../style/style02.css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="../../pic/pic_04.jpg" alt="pic_04.jpg"></div>
<div class="layer02"><img src="../../pic/pic_03.jpg" alt="pic_03.jpg"></div>
<div class="layer03"><img src="../../pic/pic_02.jpg" alt="pic_02.jpg"></div>
<div class="layer04">
 浮动的盒子可以向左浮动，也可以向右浮动，
</div>
</div>
</body>
</html></pre>
<pre class="md-fences mock-cm md-end-block">div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid blue;
}
.layer01{
border: 1px dashed red;
display: inline-block;
float: right;
}
.layer02{
border: 1px dashed yellow;
display: inline-block;
float: right;
}
.layer03{
border: 1px dashed green;
display: inline-block;
float: right;
}
.layer04{
border: 1px dashed pink;
display: inline-block;
font-size: 12px;
line-height: 24px;
float: right;
clear: both;
}</pre>
<img alt="image-20200421092311961">
<h3 class="md-end-block md-heading">4.6、父级边框塌陷的问题</h3>
clear：
 clear：right；右侧不允许有浮动元素
 clear：left；左侧不允许有浮动元素
 clear：both：两侧不允许有浮动元素
 clear：none：允许浮动
 
解决方案：（让浮动元素依然在父级元素内）
1、增加父级元素的高度（不建议）
<pre class="md-fences mock-cm md-end-block">#father{
border: 1px solid blue;
height: 800px;
}</pre>
2、增加一个空的div标签，清除浮动
<pre class="md-fences mock-cm md-end-block"><div class="clear"></div>
.clear{ 
clear: both; 
margin: 0; 
padding: 0; 
}</pre>
3、在父级元素中增加一个overflow属性
<pre class="md-fences mock-cm md-end-block">#father{
border: 1px solid blue;
overflow: hidden;
}</pre>
4、在父类中添加一个伪类：after （常用）
<pre class="md-fences mock-cm md-end-block">#father:after{
content: '';
display: block;
clear: both;
}</pre>
<h2 class="md-end-block md-heading">五、定位</h2>
<h3 class="md-end-block md-heading">5.1、相对定位</h3>
相对于原来的位置，进行指定的偏移
 注：相对定位的话，它仍然在标准文档流中！原来的位置会被保留
position：relative
 top、bottom、left、right
<pre class="md-fences mock-cm md-end-block"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
 div{
 margin: 10px;
 padding: 10px;
 width: 300px;
 height: 300px;
 }
 #father{
 border: 2px solid red;
 margin: 0 auto;
 }
 a{
 display: block;
 width: 100px;
 height: 100px;
 background-color: pink;
 text-decoration: none;
 color: white;
 text-align: center;
 line-height: 100px;
 }
 a:hover{
 background-color: blue;
 color: white;
 }
 #two,#four{
 position: relative;
 left: 200px;
 top: -100px;
 }
 #five{
 position: relative;
 left: 100px;
 top: -300px;
 }
</style>
</head>
<body>
<div id="father">
<a href="#" id="one">链接1</a>
<a href="#" id="two">链接2</a>
<a href="#" id="three">链接3</a>
<a href="#" id="four">链接4</a>
<a href="#" id="five">链接5</a>
</div>
</body>
</html></pre>
<img alt="image-20200421135130120">
<h3 class="md-end-block md-heading">5.2、绝对定位</h3>
定位：基于XXX定位，上下左右
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素偏移 
来源：https://www.cnblogs.com/imut-LF/p/lf_css_study.html

頁: [1]

琼殿技术论坛's Archiver

CSS-学习笔记