目录
一、CSS：层叠样式表。简称：CSS样式/级联样式表
主要作用：美化HTML，让网页更美观。（HTML做结构，CSS做样式，结构样式相分离）
如何快速的排错，检测？打开浏览器-查看-element。直观快捷。
快捷的编码。基于vs code而言。emment语法已集成于vscode中。
<body>
<!-- emment的使用 ，已集成vscode-->
<!-- 1.写一个标签名，按Tab键，得完整的标签 -->
<div></div>
<!-- 2.生成相同的多个标签，写法:标签名*n,不要要任何空格 如下：p*4 tab键-->
<p></p>
<p></p>
<p></p>
<p></p>
<!-- 3.生成父子关系的标签，父标签名>子标签名 tab键 如下：ul>li -->
<ul>
<li></li>
</ul>
<!-- 4.生成兄弟标签，用+相连，如：div+input -->
<div></div>
<input type="text">
<!-- 5.生成带有类名/id名的，直接.名字/#名字 但是默认是div标签下的内容，除非在符号前加标签名 -->
<div class="red"></div>
<div id="red"></div>
<p class="red"></p>
<p id="red"></p>
<!-- 6.生成有顺序的类名，用.名字/#名字$*n， $有自增作用-->
<div class="red1"></div>
<div class="red2"></div>
<div class="red3"></div>
<div id="red1"></div>
<div id="red2"></div>
<p class="red1"></p>
<p class="red2"></p>
<!-- 7.标签名{文字内容} -->
<p>生活就像海洋，只有意志坚强的人才能到达彼岸</p>
</body>二、语法结构
选择器 { 样式 }；
其中选择器：用该CSS样式的HTML标签；
每个样式里可以有1/多个声明，语法为 属性：属性值；（该语法形式也是键值对）
选择器类型：1.基础选择器；2.复合选择器。
1.基础选择器：单个选择器组成。分为标签选择器、id选择器、类选择器、通配符选择器。 常用类选择器，可以多个标签调用。但是id选择器只能被一个标签调用且只能使用一次，经常与js结合使用。
<!DOCTYPE html>
<head>
<style>
/* 标签选择器 {样式} */
p {
color: aqua;
font-size: larger;
text-align: center;
}
/* .类选择器 {样式} class用.*/
.blue {
color: blue;
}
.font {
font-size: smaller;
}
/* id选择器 只能用一次，别人不能使用。#id名 {样式} id用#*/
#font {
color: aquamarine;
}
/* 通配符选择器，把页面的所有元素都使用该css样式 */
* {
color: black;
}
</style>
</head>
<body>
<p>日照香炉生紫烟，遥看瀑布挂前川</p>
<p class="blue font">飞流直下三千尺，疑是银河落九天</p>
<p id="font">赠汪伦</p>
<div>通配符选择器</div>
</body>
</html>font的复合属性写法
.texiao {
/* font-family: 'Microsoft YaHei';
font-weight: bold;
font-size: 16px;
font-style: italic; */
/* 复合属性：简写方式 节约代码 下面的属性顺序一定不能更换！！！并且字体大小和字体名称一定要有，才有效*/
/* font： font-style font-weight font-size/line-height font-family; */
font: italic 700 16px 'Microsoft YaHei';
}
<div class="texiao">拥抱你的我，比国王富有，曾多么快乐</div>图片居中对齐， 可以在其父标签上添加一行文本居中对齐的CSS样式属性。如：
.tu {
text-align: center;
}
<p class="tu"><img src="01.jpg"></p>2.复合选择器：后代选择器、子元素选择器、链接伪类选择器、并集选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 复合选择器之后代选择器 */
ul li {
color: aqua;
}
/* 复合选择器之后代选择器 */
ul li a {
color: black;
}
/* 子元素选择器 div>p */
div>p {
color: cornflowerblue;
}
/* 并集选择器，用逗号隔开，作用：多个标签用同一个样式 习惯竖着写 */
ul li,
ol li {
font-family: "黑体";
}
/* 链接伪类选择器 */
/* 1.a:link链接最原始的呈现状态 */
a:link {
color: black;
text-decoration: none;
}
/* 2.a:hover鼠标移动到该连接上时的变化 */
a:hover {
color: blue;
}
/* 3.a:visited链接被点击/访问过后的变化 */
/* 由于没有在浏览器上留下历史记录，导致在点击过后，浏览器不知道我们已经点击过了，但没有应用a:visited伪类。 */
a:visited {
color: red;
}
/* 4.a:active链接活动状态的变化。（鼠标点击不放时） */
a:active {
color: chartreuse;
}
/* :focus伪类选择器。针对input表单的，聚焦在该表单上的效果 */
input:focus {
background-color: green;
color: darkcyan;
}
</style>
</head>
<body>
<ul>
<li>复合选择器之后代选择器</li>
<li><a href="www.baidu.com" target="_blank">生命之花</a></li>
</ul>
<div>
<!-- 子元素选择器 div>p-->
<p>梁山好汉</p>
<span>
<p>可惜好景不长</p>
</span>
</div>
<!-- 并集选择器，用逗号隔开，作用：多个标签用同一个样式 习惯竖着写 -->
<ul>
<li>大哥</li>
<li>小弟</li>
</ul>
<ol>
<li>奥</li>
<li>运</li>
<li>会</li>
</ol>
<a href="www.baidu.com" target="_blank">黄河</a><br>
<input type="text">
</body>
</html>3.CSS元素显示模式：行内元素和块元素
①块元素：h1-h6、div、p、ul、ol、li等，div是最典型的块元素。
特点：独占一行；可自行控制高度、宽度（默认是父级容器的100%）、内边距、外边距；是一个容器，可以放行内/块级元素。
注意：文字类标签不能放块级元素。如：p、h1-h6等。
②行内元素：span(典型)、strong、b、i、em、del、a、ins、u、s
特点：相邻行内元素在一行上，一行可以有多个元素；高宽不能直接设置（默认宽度为他本身内容的宽度）；行内元素只能放文本或其他行内元素。
注意：链接内不能放链接；链接内可以存放块元素，但一般会把a转换为块元素（更安全）
③行内块元素：既有块元素性质也有行内元素性质。有：img、input、td
行内元素与块元素之间的转换：
1）行内元素转为块元素:display:block;
2）块元素转换为行内元素： display:inline
3) 行内元素转换为行内块元素：display：inline-block；
4.如何实现单行文字垂直居中？
将行高line-height=盒子/文本高度height
5.背景模式相关设置：
优点：便于控制位置（如精灵图的应用）
场景：背景图、大图片、装饰性的小图片、logo
兼容：IE9+浏览器适用，现在不考虑兼容问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片的设置</title>
<style>
div {
height: 500px;
width: 500px;
/* 一般大图片做背景，位置设为center top 会让图片重点更好地显示出来。 */
/* background-color: aqua; 背景颜色
background-image: url(pic.jpeg); 背景图像
background-repeat: no-repeat; 背景平铺：repeat/no-repeat/repeat-x/repeat-y
background-attachment: fixed; 位置附着：fixed（固定）、scroll（滚动）。
background-position: left top; 方位名词写的位置，不分顺序，只写一个，另一个默认居中；精确单位px/混合单位（px+方位），一定是第一个为x轴，下一个y轴，若只有一个，默认x轴
background: rgba(0,0,0,0.3); 4个值，a代表透明度，取值0~1 颜色透明度设置，会直接覆盖掉以上其他设置*/
/* 背景简写 一般按照这个顺序写（颜色 图片 平铺 滚动 位置），实际没有位置局限*/
background: aqua url(pic.jpeg) no-repeat fixed left top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>7.CSS三大特性：层叠性、继承性、优先级。
层叠性：同一个标签/内容，有2个及以上的样式定义，就近原则。
继承性：若子标签没有定义相关的样式，则子标签继承父标签的样式。（font-、line-、text-、color这几个属性的样式可以继承。）
行高的继承：子标签没有定义行高，则继承父标签的行高，实际行高=子标签当前字体大小*父行高倍数。如：当前行高=14px*1.5（父行高设为1.5能让子标签的行高设置灵活变动。行高可+（/不+）单位。）
语法：font：24px/1.5 '楷体'； 或font：24px/50px '楷体'；
8.选择器优先级：权重虽会叠加，但是不会产生进位
1.选择器优先级顺序按大到小排列：
!important > 行内样式选择器 style=" " > id选择器 > 类选择器/伪类选择器 > 元素（标签）选择器 > 通配符（*）选择器/继承选择器
2.复合选择器有权重叠加问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择器优先级顺序按大到小排列：
!important > 行内样式选择器 style=“" > id选择器 > 类选择器/伪类选择器 > 元素（标签）选择器 > 通配符（*）选择器/继承选择器 */
div {
color: royalblue !important;
/*属性值后面添加了 !important 则优先级最高 */
}
#demo {
color: salmon;
}
.one {
color: seagreen;
}
/*复合选择器的权重值比较*/
li {
color: slategrey;
/* 权重最大：0,0,1,0 */
}
ul li {
color: teal;
/* 权重值：0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
}
.nav li {
color: wheat;
/* 权重值：0,0,1,0 + 0,0,0,1 = 0,0,1,1 目前最大*/
}
</style>
</head>
<body>
<div class="one" id="demo" style="color: slateblue;">样式优先级顺序</div>
<!--复合选择器的权重值比较-->
<ul class="nav"> <!--ul不可以放id选择器的样式 -->
<li>小桌子</li>
<li>小凳子</li>
<li>小椅子</li>
</ul>
</body>
</html>9.盒子的模型：三要素：边框粗细（border-width）、边框样式（border-style）、边框颜色（border-color）。
1） border-collapse: collapse; /*合并相邻边框，使得相邻边框不重叠*/
注意：边框会撑大盒子大小，如果想要盒子大小不变，现盒子高度、宽度=原大小-边框大小。
2） padding-top/left/bottom/right: ?px; /*padding内边距（文本内容与盒子的距离）*/
注意：内边距会撑大盒子大小，如果想要盒子大小不变，现盒子高度、宽度=原大小-内边距大小。
3）margin:外边距。可以是块级盒子之间有拉开距离。
注意：盒子必须指定宽度；左右外边距都设置为auto（块元素水平居中对齐的设置）。
但是行内块元素和行内元素水平居中对齐需要在其父元素样式里添加text-align：center；
4）外边距合并之嵌套块元素坍塌问题：
父级块元素+子块元素：两个盒子之间嵌套，若是给子元素＋外边距margin，只会使父块元素坍塌，两个边框还是叠合在一块
解决方法：①：给父元素加外边框border ②给父元素加内边距padding ③给父元素加overflow：hidden(常用，不会溢出盒子大小。其他两个会）
div {
height: 500px;
width: 1000px;
border-width: 2px; /*边框粗细*/
border-style: solid; /*边框样式常用：solid实线 dashed虚线 dotted点线 */
border-color: teal; /* 边框颜色 */
/* 边框复合型写法 简写（没有顺序要求）： */
/* border: solid teal 2px; */
}5）清除元素和浏览器自带的默认边框设置。
<head>
<style>
* {
/*通配符选择器：一般不同浏览器有不一样的默认元素边框设置，故为避免后期出现不必要麻烦，直接
设一个通配选择器，把默认情况下的边框设置都清除。 */
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div>看看默认边距</div>
<ol>
<li>也有默认边距</li>
</ol>
<span>没有任何转化的情况下，行内元素没有上下边框，故设置不可以添加上下边框（无效），但转化为行内块元素/块元素的时候就可以。</span>
</body>10.圆角边框：
border-radius：100px/50%
1.正方形边框，变成圆：border-radius：50%；
2.长方形边框，变椭圆：border-radius:高度的一半px;
3.正常边框，不规则圆角：border-radius：10px 20px 30px 40px;顺时针方向的圆角。
也可单独这么写border-top/bottom/left/right:10px；
11.盒子阴影：box-shadow，一般是box-shadow:10px 10px 10px 10px rgba(236, 6, 217, 0.5) ;
盒子阴影不占用空间。
二.css样式的三种引用方法：
1.内部样式表 
2.行内样式表
<span style="font: '楷体'; color: khaki;">遥想星河璀璨，目光所及</span>3.外部样式表（常用）
三、浮动（float）
！！！准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
经典应用：让多个块级元素在同一行显示。
1.浮动特性：
①浮动元素会脱离标准流（脱标）{脱离标准流的控制（浮）移动到指定位置（动）（脱标）；浮动的盒子不再保留原先的位置。}
②浮动元素将会在一行内显示并且顶端对齐。
③任何元素添加浮动，都具有行内块元素特性 {1.块元素没设置宽高，默认和父级元素一样，如果添加了浮动，则宽度=内容宽；；2.浮动的盒子没有间隙，紧挨链接；；3.行内元素，添加浮动约等于行内块元素。}
2、注意：浮动的元素只会影响后面的标准流，不会影响前面的标准流。（标准流就是原元素的原本位置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动练习-手机模块页面布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
height: 615px;
background-color: aqua;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: black;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: blueviolet;
}
.right>div {
float: left;
/*向左侧浮动*/
width: 234px;
height: 300px;
background-color: #fff;
margin-left: 14px;
/*单设置浮动，盒子等元素的位置没有任何变化，故设置符合需求的边距大小*/
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左图</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html>3、清除浮动：
1）原因：但是！网页中，很少给父盒子标明高度，而子盒子浮动时又不占有高度，当父盒子高度为0时，会影响下面的标准流。形成以下类似情形（如图），故实际网页应用，基本都会清楚浮动。
2）清除浮动的三种方法 ：1、额外标签法（隔墙法） 2、父级元素加overflow 3、：after伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清楚浮动</title>
<style>
* {
margin: 0px;
padding: 0px;
}
/* 清除浮动方法三： ：after 伪元素（较为常用） 记得将类选择器添加到父盒子的引用中*/
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
/*第三种方法到此才算完整，网易常用*/
/* 清除浮动方法四： 双伪元素 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* 第四种方法到此结束，小米，腾讯常用 */
.box {
/* 清除方法二：父级元素加overflow：hidde */
/* overflow: hidden; */
width: 400px;
border-color: gray;
border-width: 2px;
border-style: solid;
margin: 0px auto;
}
.one {
float: left;
width: 100px;
height: 150px;
background-color: goldenrod;
}
.two {
float: left;
width: 200px;
height: 150px;
background-color: green;
}
/* 清除浮动方法一：额外标签法，与下面的盒子同时存在 */
.clear {
clear: both;
}
.footer {
background-color: green;
height: 150px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="one">1</div>
<div class="two">2</div>
<!--清除浮动之一：额外标签法（隔墙法），在子盒子后面添加一个空白盒子（块元素，只能是块元素） 虽然有效，但是很少应用于实际。-->
<!-- <div class="clear"></div> -->
</div>
<div class="footer"></div>
</body>
</html>四、图层切图
方式：1.图层切图：右击图层---->选快速导出为png（ps，我的版本太低，没有快速导出为png）
2.切片切图
3.插件切图 ：记得去cutterman官网注册一个账号。
五、CSS属性书写顺序
扫一扫
2553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
