目录
1.外部样式表（External style sheet）（推荐）
1.什么是CSS?
1.css指层叠样式表（Cascading Style Sheets）、级联样式表
2.如果说html:负责页面架构的搭建（结构层）
3.css:就是负责排版、特效（表现层）、将页面结构与表现进行分离（修饰html元素）
4. js:动态效果（特效层）
1.使用css的好处
1.解决了内容于样式分离，页面看起来更加简洁明了
2.外部样式表 极大的提高工作效率,便于开发、维护
3.方便搜索引擎（SEO）
2.如何插入样式表
1.外部样式表（External style sheet）（推荐）
当样式需要应用很多页面时，通过改变一个文件来改变站点的外观 每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：
这样做的好处就是样式和内容分离了，在编写代码时观看更为方便
如图：
html页面引入外联则是：
<!--rel ----->引用外部样式表的格式 -->
<!--href ----->引用外部样式表的路径 -->
<head>
<link rel="stylesheet" href="msytyle.css" type="text/css">
</head>2.行内样式表 在标签内部 书写
3.内部样式表 在head标签内部 添加一个style标签
4.导入式 特点：将样式卸载单独的css文件中，通过@import来导入外部css样式
第一种与第四种的区别：第一种样式运行，它是从上之下，先引入css样式。第四种是全部的html文件生成之后才会执行css样式，可能会出现没有样式的html文件，刷新一下就出现有样式的css样式的情况。如果用第一种则不会出现这样情况。
注意：
行内----仅对单独的标签进行修改样式！不推荐！！！
内联----仅仅对于当前页面的样式 进行修改 不会对其他页面产生影响！！！
外联----提交复用性。
4.样式的优先级
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式后面，则外部样式将覆盖内部样式
3.选择器
选择器：匹配需要修饰的html元素
四个基本选择器
1.统配选择器（*）：匹配页面的所有元素（html）
当你定义一个div铺满整个页面时，总能发现div的周围离页面有一些细小的距离，这是因为div固有的边距，当你将margin 和padding 定义为0时，即可解除该问题，这也是统配选择器的用处之一；
适用于样式初始化
<style type="text/css">
*{
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
/* 假如您需要并排放置两个带边框的框，
可通过将 box-sizing 设置为 "border-box"。
这可令浏览器呈现出带有指定宽度和高度的框，
并把边框和内边距放入框中 */
box-sizing: border-box;
}
</style>2.标签选择器（tagName）:匹配页面指定的某种元素（1-n次）。
a{
}3.id选择器（id名）：匹配具备id属性的元素
#id{
}4.类选择启（类）首选：匹配页面上具备的class属性的元素
.类名{
}选择器的权重
统配<标签<类<ID<(内联样式)
复合类型选择器
5.子代选择器：匹配某个元素下的直系子元素
选择器>选择器{
}.test>li{
border:1px solid red;
}
<ul class="test">grandfather
<li> father
<ol> son
<li>2222</li>
<li>2222</li>
<li>222</li>
<li>
<ul>
<li>3333</li>
</ul>
</li>
</ol>
</li>
<li>1111</li>
<li>1111</li>
</ul>6.复合类型选择器:
7.群组选择器：多个选择器作用同一个样式
8.后代选择器：匹配某个元素的所有后代
9.兄弟选择器： 选择器后面紧挨着的哪个标签
选择器+选择器2{
}10.伪类选择器：捕获客户端一些行为、动作；实现部实现css、特效(辅助类选择器)
跟随在正常选择器后使用
：hover 当鼠标指向时产生的样式
.navbar-link-menu>li:hover{
/* 鼠标移动到该区域变手 */
cursor: pointer;
}
.navbar-link-menu>li:hover a{
/* 鼠标移动到文字的时候变红 */
color: red;
}用于超链接
：link 超链接未访问时的状态
：visited 超链接访问后的状态
：active 激活状态 点击时的状态
11.属性选择器
[属性=值]{
}4.常用的css样式属性：
1.常用单位：
px ------(绝对单位 像素)
rem ------比例
em ------比例
% ------百分比
vw/vh ------比分比
rpx ------小程序单位
2.百分比
浏览器识别的最小字体大小：12px;
浏览器默认字体大小：16px;
1em =16px;
rem:根相对（倍率）
html(响应式布局)
3.文本、字体：
font-size:2em | 32px;
font-weight:bold; ----字体加粗
font-family: ----字体；face
如：font-family: "宋体";
color: ----颜色；
font-style:itailc; i ----字体倾斜
font-decoration: -----字体划线
underline ------下划线
overline -------上划线
line-through -------中划线
text-align:left|right|center |justify -----(两端对齐);水平位置
lettter-spacing -----字体间隙
font-size： ----字体大小；
letter-spacing: 60px; -----设置字体间距
tex-decoration:none; ----可以去掉超链接下划线
文字阴影：
text-shadow:（偏移量X，偏移量Y，模糊程度，阴影颜色）;
overflow: ------溢出效果
字体超出显示效果：
overflow : hidden;
text-overflow:ellipsis;
white-space:nowrap;
4.图片：
1.background-image 背景图像
默认情况下 该属性会在页面的水平或垂直方向平铺
2.背景图片平铺方式
background-repeat: no-repeat; ----图像不平铺
background-repeat:repeat-x; ----图像水平方向平铺、图像沿x轴平铺
3.背景图片位置：
background-position: center; background-position: 0px 0px; ----背景图片居中
background-position: right top; ----背景图片 右端置顶
background-position: right bottom ----背景图片 右下方
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-position ----属性设置背景图像的起始位置。
4.背景图片拉伸比：
background-size: 100% 100%; ---- 按照比例（横向）铺满 ，多余裁剪 1
ackground-size: cover;
ackground-size ----属性规定背景图像的尺寸。
cover ----把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
5.背景图片全铺
background-image:url(./bg.jpg);
background-repeat:no-repeat;
background-size:cover;
back-attachment:fixed;
5.边框
border: 1px （大小）solid（类型） red（颜色）;
border-width ---- 边框宽度
border-style -----边框样式 solid dashed dotted....
border-color -----边框颜色
boeder-image ----边框图片
solid transparent; transparent ----边框透明
6.通用类
width:
height
line-height:行间距(垂直居中效果)
7.元素的显示和透明度
opacity ----透明度（取值范围：0—1）
display:none; ----隐藏元素(不占位)
display:block; ----转换为块（显示）方式
display:inline; ----改为行内显示方式
display:inline-block; ----改为行内状态显示方式
visibility --- 可见性
hidden: -- 不可见 （不可见但是占用页面位置）
容器：
<div></div>
容器在页面实际占位：
margin:外边距（元素的边框外填充的间隙）、视觉效果元素发生位移。
padding：内边距（元素的边框与实际可用区域之间填充的间隙、视觉效果元素被拉伸）
块级元素的特点：
h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
1.默认独占一行
2.宽度、高度、外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素。
行内元素（inlinr-leverl）的特点：:
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
1.一行可以显示多个行内元素
2.宽高不可调整
3.默认宽度是它本身内容的宽度
4.行内元素只能容纳文本或其它行内元素
行内状块元素
<img/> 、<input/>、<td>
和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制
5.盒模型标
盒模型标准占位：（默认）box-sizing:content-box;
width(包含边框+pr+pl)+mr+ml = x
height(包含边框+pt+pb)+mt+mb = y
框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和
盒子阴影：
box-shadow: （偏移量X，偏移量Y，模糊程度，阴影颜色，默认外阴影）;
内阴影inset
由内到外
1.内容层（content）： 由 width/height 决定内容层大小 盒子的内容，显示文本和图像 多媒体元素......
内边距（padding）: 清除内容周围的区域，内边距是透明的。 内容层与盒子之间的边距
定义值的顺序： 上 右 下 左
当值为1个的时候： 四个数值同为一个数值
当值为2个的时候： 上下同为第一个数值 左右同为第二个数值
当值为3个的时候： 上为第一个值 左右同为第二个数值 下为第三个值
当值为4个的时候： 上右下左
仅仅设置一边: padding-top padding-right padding-bottom padding-left
边框（border）： 围绕在内边距和内容外的边框。
10px solid red
第一个值：表示 边框的宽度（粗细）
第二个值：表示 边框的样式 solid实线 dashed虚线
第三个值：表示 边框的颜色
仅仅设置一边: border-top border-right border-bottom border-left
外边距（margin）: 清除边框外的区域，外边距是透明的。 元素与元素/浏览器之间的边距
定义值的顺序： 上 右 下 左
当值为1个的时候： 四个数值同为一个数值
当值为2个的时候： 上下同为第一个数值 左右同为第二个数值
当值为3个的时候： 上为第一个值 左右同为第二个数值 下为第三个值
当值为4个的时候： 上右下左
仅仅设置一边: margin-top margin-right margin-bottom margin-left
z-index :层级
.father::after{
content:" ";
height:0;
display:block;
clear:both;
zoom:1;
} 溢出隐藏:
overflow:hidden|auto;
overflow-y:auto|hidden;
定位：
flex 弹性盒模型：
清除浮动:
方法1、增加挡板元素
.clearFix{
clear:left|right|both;
zoom:1;
}
<div class="clearFix"></div>
方法2、为父元素增加代码段:
(1):overflow:hidden;(溢出隐藏效果保留)
zoom:1;
(2):为父元素增加伪元素:(万能清除)
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
