1-CSS初识
01-CSS定义
英文全名：cascading style sheets 层叠样式表
WEB标准中的表现标准语言，简单说就是如何修饰 网页信息 的显示样式。
目前推荐遵循的是W3C发布的CSS3.0
1998年5月21日由w3C正式推出的CSS2.0
02-CSS语法
选择器（选择符） { 属性:属性值； 属性:属性值；}
重点注意！！ 花括号{}一定要写 、 属性:属性值——当中的冒号是英文输入法下的冒号 、 分号代表一句声明的结束。
选择器（选择符）—— 如果你想将CSS样式应用于 特定的HTML元素 ，首先需要找到 该目标元素 ，在CSS中， 执行这一任务的样式规则部分 被称为选择器，有的地方也会叫选择符。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIJZzAIe-1642169603946)(D:\LAN\日常笔记\笔记图片\选择器（选择符）)]
找到目标元素——第一个段落，执行 文字变黄的样式规则 即（声明）
{ 属性:属性值； 属性:属性值；} —— 属性:属性值；即（声明：声明又分为属性和属性值。）属性：是指想要修饰的样式属性，比如宽度、高度、颜色等；每个属性都有一个值，这个值就是属性值，例如：400px,red等。
03-CSS的引入方式
内部样式、外部样式、行内样式
内部样式：
<head>
<style type="text/css"> —————— 第二步：在head里面书写标签style
（style标签最好写在head里面，type属性可加可不加）
p{
color:red; /* color设置字体颜色 */ —————— CSS中的注释格式
font-size:30px; /* font-size 设置文字大小 */
/* 在书写CSS的时候，如果没有特殊规定，数值必须带单位 px 像素 */
}
div{
font-size:80px;
color:orange;
}
</head>
<body>
<p>我是第一个段落</p> —————— 第一步：在HTML结构中创建对象元素
<p>我是第二个段落</p> —————— 结构创建对象 <!-- HTML中的注释格式 -->
<div>我是尾部</div> —————— 结构创建对像
<div>我是底部</div> —————— 结构创建对象
</body>
外部样式：
第一步：创建想要修饰的对象
<body>
<!--1/创建想要修饰的对象 -->
<div>看最美风景</div>
<div>我都愿意去爱你</div>
<p>嫌弃</p>
<p>期待没发生的事情到来</p>
</body>
第二步：建立外部CSS文件
/* 在CSS文件中，不再需要style标签了 */
div{
color:blue;
font-size:0.625rem
}
p{
color:red;
font-size:0.9375rem
}
第三步：建立两者关联
<!-- 方式1、用link链接 rel-relation定义关联性 stylesheet 样式表 type可写可不写 重点掌握方法一-->
<link rel="stylesheet" href="02CSS外部样式.css" type="text/css"/>
<!-- 方式2、用import导入 -->
<style>
@import url('02CSS外部样式.css')
</style>
行内样式、内联样式、嵌入式样式
<!-- 行内样式、嵌入式样式、内联样式 -->
<!-- 1、先创建想要修饰的对象 -->
<!-- 2、在标签内部书写style属性-->
<div style="font-size:30px;color:green;">你就这样拥抱着我</div>
<div style="font-size:40px; color:red;">抱着我，抱着我</div>
<div style="font-size:50px;color:pink;">悠着点，别太入戏</div>
<!-- 行内样式知道有就行了，仅作了解，避免大面积去书写-->
<!-- 缺点：会造成很乱的页面结构，修改的时候比较麻烦-->
04-CSS样式表的使用场景：
1、内部样式：适合案例或者短小的页面开发
2、外部样式：适合整站或者比较长的页面开发
3、行内样式：几乎不用
CSS解析规则：
如果对同一个标签同时使用了3种样式表：
1、同时使用内部、外部、行内样式表修饰同一个标签的时候，优先级别最高的是行内样式表。
2、当外部和内部样式表同时使用的时候，解析规则遵循就近原则，哪个CSS样式距离标签近就最终显示哪个样式。
2-CSS选择器
01-选择器的分类
基本选择器、层次选择器、伪类选择器、属性选择器、伪对象选择器
大类还有很多个小类，总计20多个选择器
02-基本选择器
包括类型选择器、Class选择器、id选择器、通配符、群组选择器
<div>美羊羊</div>
<div>懒羊羊</div>
<div>沸羊羊</div>
<div>慢羊羊</div>
<p>红太狼</p>
<p>灰太狼</p>
<p>小灰灰</p>
<p>小灰灰媳妇</p>
需求1：所有的div ，文字大小是20，字体颜色是红色
需求2：所有的p ， 文字大小是30，字体颜色是橘色
需求3：慢羊羊变成绿色 沸羊羊变成蓝色
1、类型选择器（标签选择器）
以HTML中的标签作为选择符
A、什么时候用？
想改变某个元素的默认样式时或者统一文档某个元素的显示效果时
<!--这类选择器使用的时候能达到所有的长成我们想要的样式，但是达不到区分的效果-->
B、语法？
标签{ 属性:属性值； } 例如： div{ color:red; }
满足需求1和2：
<head>
<style>
div{
font-size:20px;
color:red;
}
p{
font-size:30px;
color:orange;
}
</style>
</head>
<body>
<div>美羊羊</div>
<div>懒羊羊</div>
<div>沸羊羊</div>
<div>慢羊羊</div>
<p>红太狼</p>
<p>灰太狼</p>
<p>小灰灰</p>
<p>小灰灰媳妇</p>
</body>
2、Class选择器（类选择器）
A、什么时候用？
想要区分某个或者某些标签的时候，比如想要区分两个div; 开发的时候用
<!--class可以给多个属性值，多个属性值之间用空格隔开。 -->
写在HTML标签内部
例如：<div class="box yang yanglan "></div>
B、语法？
.Class名字{ 属性：属性值； } 例如： .box{ color:green; }
<!-- Class属性值的注意点：
1、不能是纯数字开头
2、不建议使用中文，因为容易造成乱码
3、如果需要符号配合，可以使用-或_,其他符号不可以@￥%
4、建议命名的时候，采用语义化命名
box-盒子 head-头部 foot-尾部
-->
满足需求3：
<head>
<style>
.fyy{
color:blue;
}
.myy{
color:green;
}
</style>
</head>
<body>
<div>美羊羊</div>
<div>懒羊羊</div>
<div class="fyy yy ">沸羊羊</div>
<div class="myy yyy" >慢羊羊</div>
<p>红太狼</p>
<p>灰太狼</p>
<p>小灰灰</p>
<p>小灰灰媳妇</p>
</body>
3、Id选择器
A、什么时候用？
想要区分某个或者某些标签的时候，比如想要区分两个div; JS交互的时候用
<!--注意点：ID有唯一性，属性值只能是1个-->
id写在HTML标签里
<div id="box"></div>
B、语法？
#id名字{ 属性：属性值； } 例如： #box{ color:blue;}
<head>
<style>
#fyy{
color:blue;
font-size:30px;
}
#myy{
color:green;
fontsize:50px;
}
</style>
</head>
<body>
<div>美羊羊</div>
<div>懒羊羊</div>
<div id="fyy">沸羊羊</div>
<div id="myy">慢羊羊</div>
<p>红太狼</p>
<p>灰太狼</p>
<p>小灰灰</p>
<p>小灰灰媳妇</p>
</body>
4、通配符
A、什么时候用？
想让所有的标签同时改变样式的时候
B、语法？
*{ 属性：属性值； } 例如： *{ color:red; }
<head>
<style>
*{
color:yellow;
}
</style>
</head>
<body>
<div>美羊羊</div>
<div>懒羊羊</div>
<div>沸羊羊</div>
<div>慢羊羊</div>
<p>红太狼</p>
<p>灰太狼</p>
<p>小灰灰</p>
<p>小灰灰媳妇</p>
</body>
5、群组选择器
A、什么时候用？
当几个元素样式一样的时候。可以共同调用一个声明，元素之间用逗号分隔
B、语法？
选择器1,选择器2,选择器3{ 属性：属性值； } 例如： .box,#xyy,p{ color:red; }
<head>
<style>
div,.htl,#xhh{
color:red;
}
</style>
</head>
<body>
<div>美羊羊</div>
<div>懒羊羊</div>
<div>沸羊羊</div>
<div>慢羊羊</div>
<p class="htl,tl">红太狼</p>
<p>灰太狼</p>
<p id="xhh">小灰灰</p>
<p>小灰灰媳妇</p>
</body>
CSS权重（特殊性）
A、什么是权重？
权重类似人的体重，是用来衡量CSS代码优先级的一个参考值，权重值越大，代表优先级越高，权重值越小，优先级越低。
B、表达方式？
CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0 ——默认为四个0
| 个数 | 选择器 | 权重，CSS中用四位数字表示权重 |
|---|---|---|
| 1 | 类型选择器（元素） | 0001 |
| 2 | Class选择器 | 0010 |
| 3 | id选择器 | 0100 |
| 4 | 内联样式 | 1000 |
| CSS选择器解析规则1： | 当不同选择符得到样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式 | |
| CSS选择器解析规则2： | 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式 |
案例模拟敲写代码——搭建页面布局
每一部分的页面 居中位置叫做版心（安全区）
03-层次选择器
1、后代选择器（也叫 包含选择器）
语法： 选择符1（空格）选择符2 { 属性:属性值； } /*选择符个数无限制*/
书名：含义就是选择符1 中包含的所有 后代选择符2；
<div class="third">
<div class="third-center">
<ul>
<li class="third-nav"><a href="#">导航1</a></li>
<li class="third-nav"><a href="#">导航1</a></li>
<li class="third-nav"><a href="#">导航1</a></li>
<li class="third-nav"><a href="#">导航1</a></li>
</ul>
需求：选择到所有的li
1 .third li{}
2 .third .third-center ul li{}
3 .third-center li{}
4 .third .third-center li{}
5 ul li{}
这五种都可以
2、子选择器
3、相邻兄弟选择器
4、通用兄弟选择器
3-CSS属性
float浮动属性
页面布局：页面布局的时候使用的div盒子经常都是竖着排列的，但是有时候也需要横向排列，想要 竖着排列的盒子横着过去就需要用到浮动
浮动属性：float
属性值：left 从左往右边开始浮动、 right 从右边往左开始浮动、 none 默认值，不浮动
正常文档流：竖向排列，独占一行
/* 一个盒子给了浮动之后，该盒子会悬空不占位置，这个现象叫脱离网页文档流，浮动之后的盒子与其他不浮动的元素会发生重叠；但是不会与文字发生重叠，文字会环绕浮动元素显示。*/
当一个元素不再在文档流中占据空间，而是漂浮在文档流的上方的时候，这个现象叫做脱离文档流。
浮动会脱离网页文档，与其他不浮动的元素发生重叠；但是不会与文字发生重叠，文字会环绕浮动元素显示。
文字环绕效果，网页开发中比较少见。
实践知识点：
margin- 外间距 padding- 内间距
整个网页书写结构完毕后发现最上面有个外间距 是body标签的
margin属性
页面中间距设置：用margin或者padding
间距是在盒子外面的时候，就用margin；间距是在盒子里面的时候，就用padding
外间距：
margin-外间距
使用场景：页面中需要设置间距，且间距对于容器来说是外面的时候用
用法：
单独设置
margin-top 外上间距 margin-bottom 外下间距 margin-left 外左间距
margin-right 外右间距
简写
margin:10px 20px 30px 40px; 上 右 下 左
margin:10px 30px 10px; 上 左右 下
margin:20px 40px; 上下 左右
margin:20px; 四个方向
另外一种用法：
margin:auto; /* 一个有宽度的元素在浏览器中横向居中 */
/* margin属性值是auto的时候，暂时只支持左右间距自动调整，上下不支持 */
版心居中，可以用margin：auto；实现
margin的属性值可以给负数
margin-left: 100px;
/* 当给了margin-left后，该盒子是在原来的位置基础上向右移动了100px*/
margin-left:-100px;
/* margin支持负数，给负数的结果，就是在正数的基础上，反向进行位置移动，现在盒子是向左移动了100px */
margin遇见的问题：
margin-top的传递问题
现象：默认情况下给子元素添加了margin-top之后，浏览器解析的时候，会把这个上间距也传递给父元素，导致父元素也会下来。
解决方法：A、给最近的父元素添加border-top
B、给父元素添加overflow:hidden；(溢出隐藏)
.box1 {
background-color: red;
/* border-top:1px solid transparent; */ 方法一
/* border-top上边框 solid实线 transparent透明色 */
overflow: hidden; 方法二
}
.box1-center {
background-color: purple;
height: 100px;
width: 100px;
margin-top: 100px;
}
<div class="box1">
<div class="box1-center">我是小盒子</div>
</div>
margin外间距重叠问题
现象：默认的情况下，两个相邻的盒子，给一个盒子添加了margin-top。另外一个盒子添加margin-bottom之后，这两个垂直的间距会重叠，显示最大数值的间距。
解决办法：A、给下面的盒子添加父元素。且添加声明overflow:hidden(溢出隐藏)
.box3 {
background-color: yellow;
margin-bottom: 100px;
}
.bos {
overflow: hidden;
}
.box4 {
background-color: green;
margin-top: 50px;
}
<div class="box3">111</div>
<div class="bos">
<div class="box4">111</div>
</div>
padding属性
内间距
padding-内间距/填充/补白
使用场景：页面中需要设置间距，且间距对于容器来说是里面的时候用
用法：
单独设置
padding-top 内上间距 padding-bottom 内下间距
padding-left 内左间距 padding-right 内右间距
简写
padding:10px 20px 30px 40px; 上 右 下 左
padding:10px 30px 10px; 上 左右 下
padding:20px 40px; 上下 左右
padding:20px; 四个方向
Padiing没有auto和负数的写法
注意点：padding是添加在盒子大小之上的，所以会把盒子给撑大
解决方法：从宽度或者高度上减去添加的padding值
4-控制台差错
书写的css代码没有显示
1、基础性错误导致
单词写错或者单位没带—浏览器控制台有黄色报错
冒号没有写或者写错—黄色报错，但是后面会有多余的符号补充
分号没有结尾—黄色报错，同时后面的代码也会一起报错
{}前出错，在控制台上看不到写过的CSS代码
css语法不对，带的点没有带或者写成了#
css语法不对，名字不一致，下面写的box，上面写成了box1
{}少了}，那么控制台上会有很多报错
2、因为权重导致的
权重是否相同，如果是权重造成的代码不显示，控制台是没有黄色报错，只有代码被划掉
权重相同，跟css代码的书写顺序有关，谁的代码距离html代码近就解析谁（就近原则）
权重不同，高权重覆盖低权重的css样式
5-css文本相关属性
| 属性 | 描述 | 说明 |
|---|---|---|
| font-size | 字体大小 | 单位可以是px，pt，em等 3pt=4px 1em=16px 浏览器默认是16px，设计图常用字号是12px |
| color | 颜色 | color:red; color:#ff0; color:rgb(255,0,0) 0-255 r - red红色 g - green绿色 b - blue蓝色 rgb取值范围是0-255 alpha - 透明程度 取值是0-1 0全透明 1不透明 rgba(255,0,0,0.5) |
| font-family | 字体 | 当字体是中文字体，英文字体中有空格是，需加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推 |
| font-weight | 加粗 | font-weight:bolder（更粗的）/bold（加粗）/normal（常规） font-weight:100-900; 100-500不加粗 600-900加粗 数字不加单位，不为小数 |
| font-style | 倾斜 | font-style:italic（斜体字）/oblique（倾斜的文字）/normal（常规显示） |
| text-align | 文本水平对齐 | text-align:left; 水平靠左 text-align:right; 水平靠右 text-align:center; 水平居中 text-align:justify; 水平两端对齐，只对多行起作用 text-align-last:justify; 单行文本两端对齐 |
| line-height | 行高 | 行高指的是2行文字基线到基线之间的垂直距离 line-height得到数据=height的数据，可以实现单行的文本垂直居中 |
| font | 文字简写 | font是font-style font-weight font-size / line-height font-family的简写。 font:italic bold 50px/50px “宋体”; 顺序不能改变，必须同时指定font-size 和 font-family属性时才起作用 |
| text-decoration | 文本修饰 | text-decoration:none没有/underline下划线/overline上划线/line-through删除线 |
| text-indent | 首行缩进 | text-indent可以取负值； text-indent属性只对第一起作用 |
属性
/* font-size-字体大小 */
单位可以是px，pt，em等 3pt=4px 1em=16px 浏览器默认是16px，设计 图常用字号是12px
/* color-颜色 */
color:red; color:#ff0; color:rgb(255,0,0) rgba(255,0,0,1)
r - red红色 g - green绿色 b - blue蓝色 rgb取值范围是0-255 alpha - 透明程度 取值是0-1 0全透明 1不透明
/* font-family-字体 */
当字体是中文字体，英文字体中有空格是，需加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推
/* font-weight-加粗 */
font-weight:bolder（更粗的）/bold（加粗）/normal（常规） font-weight:100-900; 100-500不加粗 600-900加粗 数字不加单位，不为小数
/* font-style-倾斜 */
font-style:italic（斜体字）/oblique（倾斜的文字）/normal（常规显示）
/* text-align-文本水平对齐 */
text-align:left; 水平靠左 text-align:right; 水平靠右 text-align:center; 水平居中 text-align:justify; 水平两端对齐，只对多行起作用 text-align-last:justify; 单行文本两端对齐
/* line-height行高 */
行高指的是2行文字基线到基线、顶线到顶线、中线和中线之间的垂直距离
也是字号大小+上间距+下间距的距离，这里的上间距、下间距就是半行间距。
line-height的数据<height的数据，可以实现单行的文本垂直靠上对齐
line-height的数据=height的数据，可以实现单行的文本垂直居中
line-height的数据>height的数据，可以实现单行的文本垂直靠下对齐
当line-height:1; 是字号大小的1倍 不带单位的时候
当line-height:100%; 是字号大小的1倍 单位是%的时候
/*当line-height:1;和line-height:100%;可以清除文字自带的垂直间距*/
/* font文字简写 */
font是font-style font-weight font-size / line-height font-family的简写。
font:italic bold 50px/50px "宋体";
顺序不能改变，必须同时指定font-size 和 font-family属性时才起作用
/* text-decoration文本修饰*/
text-decoration:none没有/underline下划线/overline上划线/line-through删除线；
/* text-indent首行缩进*/
text-indent可以取负值； text-indent属性只对第一起作用
去除列表符号样式的css属性
list-style:none;
有超链接a 就要给它做CSS属性字体颜色
行高示意图：
半行间距示意图
6-css列表属性
/* list-style-type 定义列表符号样式*/
list-style-type:disco(实心圆)/circle(空心圆)/square（实心方块）/none（去掉符号）；
/* list-style-image 将图片设置为列表符号样式*/
缺点：能显示小图片，但是大小和位置调整不了
list-style-image:url(图片的路径);
可以用：background(背景)
background:url(1.jpg) no-repeat(不要平铺) left（水平靠左）center（垂直居中）;
/* list-style-position 设置列表项标记的放置位置*/
list-style-position:outside;列表li的外面 默认值
list-style-position:inside;列表li的里面
/* list-style 简写以上属性，顺序可乱，之间用空格隔开*/
list-style:inside url(2.jpg);
list-style:inside square;
7-css边框属性
/* border-width 设置边框的宽度*/
/* border-color 设置边框的颜色*/
/* border-style 设置边框的线形*/
border-style:solid(实线)/dashed(虚线)/double(双线)/dotted(点状线)；
/* border 简写以上属性，顺序可乱，之间用空格隔开*/
单边框 border-top border-bottom border-left border-right
/* 单边框也可以简写以上属性，规则同border */
/* 边框书写三角形：注意每行代码书写的顺序不能变！*/
.box10{ /* 对的顺序*/
border:10px transparent solid;
border-top:10px red solid;
width:0;
height:0;
}
.box9{ /* 顺序错了 显示不出来三角形 */
border-top:10px red solid;
border:10px transparent solid;
width:0;
height:0;
}
8-css背景相关属性
/* background-color 背景颜色*/
background-color:red;
/* background-image 背景图片*/
background-image:url();背景图片不占位置且是平铺显示的
/* background-repeat 背景图片的平铺*/
background-repeat:no-repeat/repeat/repeat-x（横向平铺）/repeat-y（纵向平铺）;
/* background-position 背景图片的定位*/
background-position:水平位置 垂直位置；可以给负值（轴坐标） 水平位置：left、right、center 垂直位置：top、center、bottom
/* background-attachment 背景图片的固定*/
background-attachment:scroll(滚动)/fixed（固定，固定在浏览器窗口里面，显示范围为容器；固定之后就相对于浏览器窗口了）
/* background简写以上属性，顺序随便*/
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
