课程回顾
表单:
下拉选<select name><option value selected> <textarea name rows表示行 cols表示列 placeholder占位文本> 按钮: <input type="submit/reset/button" value="显示文本"> <button>按钮</button>
实体引用: & nbsp ; & lt ; & gt ;
分区标签: div独占一行 span共占一行 h5新增标签:header footer section nav article
CSS:层叠样式表 美化页面
三种引入方式:
内联: 在标签内部添加style属性 不能复用
内部: 在head标签里面添加style标签,标签体内写样式代码, 可以当前页面复用
外部: 在单独的css文件中写样式代码 在html页面中通过link标签引入,可以多页面复用,还可以将html和css代码分离
选择器
div{}
#id{}
.class{}
div,#id{},.class{}
input[type=‘text’]{}
*{}
div span{}
div>span{}
a:hover/link/active/visited{}
颜色赋值
red
#ff0000
#f00
rgb(255,0,0)
rgba(255,0,0,0-1)
背景图片
background-image:url();
background-size:200px 300px;
background-repeat:no-repeat;禁止重复
background-position:横向百分比 纵向百分比
显示方式display
block:块级元素, 独占一行,可以修改宽高,包括:div h1-h6 p等
inline:行内元素,共占一行,不能修改宽高,包括:span,b,i,small等
inline-block:行内块元素,共占一行,也能修改宽高,包括:img,input等
文本和字体相关
文本修饰 text-decoration: overline/underline/line-through/none
文本阴影 text-shadow: 颜色 x偏移值 y偏移值 浓度(值越小越清晰)
文本颜色 color:red;
行高 line-height:20px; 可以通过行高控制垂直居中
字体大小 font-size:20px;
加粗 font-weight: bold/normal(去掉加粗效果);
斜体 font-style:italic;
字体设置 font-family:xxx,xxx,xxx; font:30px xx,xxx,xxx;
CSS的三大特性
继承性:元素可以继承上级元素的文本和字体相关样式. 部分元素自身效果不受继承影响比如:h1-h6的字体大小,超链接字体颜色.
层叠性:多个选择器有可能选择到同一个元素,如果添加的样式不同会全部层叠生效,如果添加的样式相同则由优先级决定
优先级:作用范围越小,优先级越高. id>class>标签名>继承(属于间接选中)
盒子模型
盒子模型=外边距+边框+内边距+宽高
宽高: 用来控制元素显示大小
边框: 控制元素的边框效果
外边距: 控制元素显示位置
内边距: 控制元素内容的位置
盒子模型之宽高
赋值方式:两种
像素,单位是px
上级元素的百分比
如果只设置宽度高度会等比例缩放
行内元素不能修改宽高
盒子模型之外边距margin
什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距
赋值方式:
单独给某一个方向赋值: margin-left/right/top/bottom:10px;
四个方向赋值: margin:50px;
上下和左右赋值: margin:10px 20px;
元素水平居中 margin:0 auto;
(注意这是让元素自身居中,text-align:center是让元素里面的文本在元素内部居中)
上右下左赋值: margin:10px 20px 30px 40px; 顺时针
上下相邻两个元素的外边距取最大值,左右相邻求和
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连显示异常,给上级元素添加overflow:hidden解决,给上级元素添加边框也可以解决(修改了元素原来的样子,不推荐)
h1,p,body这些元素自带外边距,使用时需要注意.
盒子模型之边框border
赋值方式:
单独给某一个边添加边框 border-left/right/top/bottom: 粗细 样式 颜色;
给四个方向添加边框 border:粗细 样式 颜色;
圆角: border-radius: 10px; 值越大越圆 超过宽高的一半时会变为圆形(前提是正方形)
盒子模型之内边距padding
什么是内边距: 元素边缘距内容的距离称为内边距.
赋值方式和外边距类似:
单独给某一个方向赋值: padding-left/right/top/bottom:10px;
四个方向赋值: padding:50px;
上下和左右赋值: padding:10px 20px;
上右下左赋值: padding:10px 20px 30px 40px; 顺时针
修改元素的内边距会影响元素的宽高
如果需要移动元素内的子元素有两种方式:
给大元素添加内边距去移动里面的小元素,这种方式会改变大元素的尺寸(不推荐使用)
给小元素添加外边距即可.
