一、CSS样式
1.引入方式
-
有标签样式(直接写在标签里)
-
有内部样式(写在里的style,也包括标签样式,写在html文件内部的样式)
-
有外部样式(通过 href=“” 引入)
-
行内样式
- 优点:权重高,精准
- 缺点:代码冗余,效率低下,不可复用,扩展性差,难以优化
-
内部样式:
- 写在style标签中
- 少量样式代码时使用
- 优先级整体比外部高
-
外部样式:
- 创建一个.css的文件
- 写入的内容:选择器{属性:属性值;。。。}
优先级:行内>内部>外部
使用方式
选择器{
属性:属性取值;
}
2.常用的css属性
- font-size: 40px 字体大小
- color: red; 字体颜色的设置
- background-color:red; 背景颜色的设置
- border:10px blue solid; 边框的设置
- width:100px 设置宽
- height:100px; 设置高
- display:inline-block; 元素类型转化
3.背景属性
- background-image:url(); 背景图
- background-repeat:no-repeat;是否重铺
- background-repeat: repeat-x;在x轴上重铺
- background-repeat:repeat-y;在y轴上重铺
- background-position: 100px 100px; 设置背景图片的位置
- background-size:cover; 设置背景图片的尺寸,取值为cover铺满元素
- background-attachment:scroll;背景图片是否固定
二、选择器
1.基础选择器
例子:
<div class="a" id="b">
</div>
<style>
标签选择器:
div{
}
类选择器
.a{
}
id选择器
#b{
}
</style>
2.后代子代选择器
例子:
<div class="a" id="b">
<span></span>
</div>
<style>
后代选择器
.a span{
}
子代选择器
.a>span{
}
</style>
3.伪目标选择器
:first-child
用法:
<div>
<span>我是长女</span>
<span>我是次子</span>
<span>我是老幺</span>
</div>
div span:first-child{
font-size: 50px;
}
4.伪目标选择器
:nth-child
div :nth-child(7){
font-size: 40px;
}
div :nth-of-type(3){
font-size: 40px;
}
5.子代选择器
>
header>div>span{
}
6.后代选择器
空格
header div span{
}
id命名和类名命名时的规范
- 不能是纯数字
- 也不能是数字开头
- 不能有#.
- 可以有-_
- 建议用英文,也可以用拼音
- 可以多个词组合比如:header-left、main_nav、wrapCenterMain
三、盒子模型
1.标准盒子
实际大小=内容大小(设置的宽高)+内边距+边框
属性有以下
border: 10px solid; 边框
padding: 20px; 内边距
margin: 160px; 外边距
margin
:
/* 外边距取一个值:上下左右都是此值 */
/* margin: 200px; */
/* 取四个值:上、右、下、左 */
/* margin: 0 200px 0 200px; */
/* 取两个值:上下、左右。auto自动分配剩余空间 */
margin: 0 auto ;
padding
同上
border
: 圆角 圆形 三角形
/* 圆角边框 */
/* border-radius: 50px; */
/* 取两个值时,对应左上右下、右上左下*/
当border-radius值等于或大于宽高的一半时,变成圆形,前提是正方形(宽高相等)
三角形:
width: 0px;height:0px;
border: 20px solid;
border-color: transparent transparent red transparent;
嵌套型外边距塌陷的解决方法
- 设置内边距 padding
- 设置边框 border
- 设置溢出隐藏 overflow:hidden