css
层叠样式表
css3：css最新版本
语法：选择器{属性：属性值}
css引入形式
内联式
<元素 style=“属性：属性值”>内容</元素>
内部式
<head>
<style> 选择器{属性：属性值；}
</style>
</head>
外链式
1.新建一个以.css为后缀的css文件
2.在head中建立
3.在css文件中按照css基本语法写代码
<head>
<link rel="stylesheet" href="css文件路径">
</head>
导入样式
使用 @import url() 引入CSS文件
在CSS文件中直接使用 @import url()
@import url(文件.css);
在HTML文件中需要在 <style></style> 标签中使用 @import url()
<style>
@import url(文件.css);
</style>
在HTML初始化时，@import url() 导入的CSS会被直接
导入到 HTML 或 CSS 文件中，成为文件的一部分
选择器：是一种匹配模式；主要用于选中做样式的元素
1.通用选择器 *{}
2.标签选择器 标签名{}
<标签名>内容</标签名>
3.类选择器 .{}
<标签名 class="类">内容</标签名>
4.id选择器 #id{}
<标签名 id="名">内容</标签名>
注：id选择器具有唯一性，文件中只出现一次
5.组合选择器
1.后代选择器：选择该元素后代元素 父元素 子元素
2.子代选择器：该元素第一级元素 父元素>子元素
3.相邻选择器：该元素之后相邻第一个元素 元素+元素
4.兄弟选择器：该元素之后同级元素 元素~元素
6.伪类选择器 标签名:hover
<标签名>内容</标签名>
注:伪类常见于a标签，使用时注意顺序
a:link {
color: skyblue;
}
a:hover {
color: pink;
}
a:active {
color: red;
}
a:visited {
color: blue;
}
css优先级判定规则
权重之和；和越大；越优先；和一样；越靠后；越优先
!important>行内样式>id>类选择器>标签选择器>通用选择器>继承>默认
浮动
浮动：是一种布局属性；主要用于一行多列
语法：float:left(左浮动)和float:right(右浮动)
注：浮动会让元素脱离文档流
清除浮动
为何清除浮动：如下代码时可以看到父元素黑色边框为2px；
而不是102px;也就是父元素的高度塌陷了
<style>
.box1 {
width: 100px;
border: 1px solid black;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
这是测试文字
解决
1.直接给父元素设置宽高
2.给父元素加浮动
3.overflow:hidden
注：BFC规范，但会对子元素想溢出有影响
4.display:inline-block;
注：BFC规范；也对后面元素有影响
5.设置空标签
6.after伪类：推荐使用如：
<style>
.box1 {
width: 100px;
border: 1px solid black;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.clear:after{
content:"";clear:both;display:block;
}
</style>
</head>
<body>
<div class="box1 clear">
<div class="box2"></div>
</div>
这是测试文字
</body>
盒子模型
盒子模型：是一种思维模型；主要用于实现布局效果
1.尺寸
设置宽度 width：值px或%
设置高度height:值px或%
2.边框
border:边框的粗度 线形 颜色；线形有：solid 实线 dashed 虚线
3.内边距：盒子内容和边框之间的间距
padding:*px
复合值对应规则从上顺时针如：
padding:10px 20pxp 30px 40px(边距上10px 右20px
下30px 左40px)
padding:10px 20px(边距上下10px 左右20px)
<style>
div{
width:300px;
height:200px;
border-top:10px dashed red;
border-right:10px dotted blue;
border-bottom:10px solid yellow;
border-left:10px solid green;
}
</style>
<body>
<div></div>
</body>
4.外边距:盒子边框和之外的东西的间隔
margin:值px；
规则同padding
注:可内可外边距用内边距
盒子水平居中 margin:0 auto
