首页 > 代码库 > 9月9日午教学内容

9月9日午教学内容

样式表
分类
内联
写在标签里面
style="样式"
控制精确,代码重用性差
内嵌
嵌在页面的head里面
<style type="text/css"></style>
控制没有内联的精确,代码重用性好
外部
单独的样式文件
引入:右键-CSS样式表-附加样式表
引入:<link href="http://www.mamicode.com/test.css" rel="stylesheet" type="text/cs
控制没有内联的精确,代码重用性最好
选择器
样式表用来选取元素的
标签
根据标签名选中元素
class. (点)
根据class名来筛选元素
id# (井号)
根据id名来筛选出唯一元素
复合
逗号并列
div,span
空格后代
#list li
点筛选
div.s
样式
大小
width
宽度
height
高度
背景
background-color
背景色
background-image
背景图片
background-repeat
背景图的平铺方式
background-position
背景图片位置
background-attachment
设置背景图片是否滚动
background-size
背景图的大小 200px 200px
字体
font-family
字体样式
font-size
字体大小 12px 14px
font-style
italic倾斜
font-weight
bold加粗
text-decoration
underline下划线
overline上划线
line-through删除线
none没有,用来去掉超链接的下划线
color
字体颜色
对齐方式
text-align
水平对齐方式
vertical-align
垂直对齐方式,配合行高使用
line-height
行高
text-indent
缩进 单位像素
边界边框
margin
外边距 上右下左
padding
内边距 上右下左
如果加了内边距,该元素会相应的变大
border
1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
列表方块

9月9日午教学内容