HTML和CSS(二)
1.基本概念
Cascading Style Sheets层叠样式表
2.CSS与html结合的方式
1.内联样式(不推荐使用)
2.内部样式
在head标签内定义style标签,style标签的内容就是CSS代码
<style>
div{
color:blue;
}
</style>
3.外部样式
1.定义CSS资源
2.在head标签内定义link标签,引入外部的资源文件
如
a.css文件
div{
color:green;
}
<link rel = "stylesheet" href = "css/a.css">
3.css语法
格式
选择器{
属性1:属性值1;
属性2:属性值2;
...
}
选择器筛选具有相似特征的元素
注意:
每一对属性需要使用;隔开,最后一对属性可以不加
4.选择器:
分类
1.基本选择器
1.id选择器:选择器具体的id属性值的元素,建议在一个html页面中id值唯一
语法:#id{属性值}
2.元素选择器:选择具有相同标签名称的元素
语法:标签名称{}
注意:id选择器优先级高于元素选择器
3.类选择器 :选择具有相同class属性值的元素
语法:.class{属性值}
注意:类选择器优先于元素选择器
2.扩展选择器
1.选择所有元素:
语法: *{ }
2.并集选择器
语法:选择器1,选择器2{}
3.子选择器 筛选选择器1元素下的选择器2
语法:选择器1 选择器2{}
4.父类选择器 筛选选择器2的父元素选择器2
语法:选择器1 > 选择器2{}
5.属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称[属性名 = ‘属性值’]{ }
6.伪类选择器:选择一些具有的状态
语法:元素:状态{ }
如<a>
link:初始化的状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮的状态
5.属性:
1.字体、文本
font-size:字体大小
color:文本颜色
text-align:对其方式
line-height:行高
2.背景
background
3.边框
border 设置边框 复合属性
4.尺寸
width 宽度
height 高度
5.盒子模型 控制布局
margin 外边距
padding 内边距
默认情况下内边距会影响整个盒子的大小
box-sizing :border-box;设置盒子的属性,让width和height就是最终盒子的大小
float 浮动
left
right