css :cascading Style sheets 层叠样式表
是用于控制页面布局和样式的
css好处:功能强大,将html页面和样式进行分离
降低耦合度,开发效率更高
css和htnl使用
1内联样式<div style = "color="red"></div> //不推荐
2内部样式 --较为常用
<style>
div{
color:red;
}
</style>
<div><div>
外部样式
在head标签定义link属性
<link rel="stylesheet" href="css/a.css">
css选择器 语法
选择器 {
属性名1:属性值1
属性名2:属性值2
}
什么是选择器:是筛选具有相同特征的元素
选择器分类
基础选择器
1类选择器
.类名 {}
2id选择器
#选择器名{}
3元素选择器器
元素名{}
4并集选择器
选择器1,选择器2....{}
扩展选择器
选择所有元素
*{}
后代选择器
选择器1 选择器2{}
子选择器
选择器1>选择器2{
}
属性选择器
元素名称[属性名=属性值]{}
伪类选择器
元素:元素状态 {}
a:link{}
属性:
字体文本
font-size
color:文本
algin:对齐方式
line-height 行高
背景
background
边框
boder
尺寸
width 宽度
height 高度
盒子模型:
mangin 外边距
padding 内边距
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
float 浮动
left 左浮动
right:右浮动