样式表
今天学习了样式表,学习了很多内容,很多的小的内容,需要大量的记忆,对今天的学习,我做了以下的总结:
一:首先是“内敛”是写在标签里面的,style="样式” 劣势:控制准确,代码重用性。
“内嵌”是嵌在页面head里面,<style type=“text/css”></style>优点:控制虽然没有内联的精确,但是代码重用性好。
“外部”单独的样式文件,引入:右键-css样式表-附加样式表。引入:<link href="text.css" rel="stylesheet" type="text/css">控制没有内联的精确,但是重用性好。
选择器
样式表用来选取元素的
标签
根据标签名选中元素
class
. (点)
根据class名来筛选元素
id:
# (井号)
根据id名来筛选出唯一元素
复合
并列div,span
div,span
class="第一种 第二种"
后代 #list li
#list li
点筛选:div.s
大小:width 宽度 height 高度
背景:
background-color:背景色
background
rgb(x,x,x)
rgba(x,x,x,x)最后一个是透明度 1为不透明 0为全透明
url(图片的相对路径)
不平铺:no-repea
background-image:背景图片
background-repeat:背景图的平铺方式 no-repeat,不平铺,repeat平铺,repeat-x横向平铺,repeat-y纵向平铺。
background-position:center;背景图片位置,设置背景图片时,repeat必须为no-repeat.
background-attachment:设置背景图片是否滚动,fixed背景是固定的,不随字体滚动。scroll背景随字体滚动。
background-size:200px 200px;背景图片的大小。
字体:
font-family:字体样式。
font-size:14px 15px;字体大小
font-style:italic倾斜
font-weight:bold加粗
text-decoration:underline下划线 overline上划线 overline上划线 line-through删除线 none没有,用来去掉超链接的下划线。
color。字体颜色
对齐方式:
text-align:水平对齐方式
vertical-align 垂直对齐方式,配合行高使用
line-height 行高
text-indent 缩进 单位像素
边界边框:
margin:
外边距 上右下左
padding:
内边距 上右下左 ,如果加了内边距,该元素会相应的变大
border:
1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
列表方块
list-style
none将列表前面的序号去掉
list-style-image
可以将前面的序号变为图片
格式与布局
位置
position
fixed固定 相对于浏览器边框位置固定
absolute绝对位置
相对于父级元素(浏览器,绝对定位的上级)
relative相对位置
相对于自身应该出现的位置
top 距离上边的距离
right 距离右边的距离
bottom 距离下边的距离
left 距离左边的距离
今天学习的内容很多,需要加强记忆的东西。课下多努力,多背,多记。加油吧!