css美化html网页
1内联样式表
控制精确,可用性比较差。比如<p style="font-size:14px">内联样式表</p>
2内嵌式
一个独立区域嵌在网页里,但是要写在head标签里。
3外部样式表
新建一个css样式表,用<link type="text/css" rel="stylesheet" href="css样式表"/>
注意不用style标签
4选择器(选择器用在head里面或者外联css样式表里面)
1标签选择器
div{样式}
2class选择器
用 .加class名开头
3id选择器
用 #加id名开头
4属性选择器
命名一个属性 。 然后,
5复合选择器
,表示并列 空格表示后代
6 样式表属性
6.1
background-color: 背景色
background-img:url(路径) 背景图片
background-attachment:fixed;背景是固定的,不随字体滚动
background-attachment:scroll; 背景不是固定的,随着字体移动
background-repeat:no repeat;不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺。
background-position:right top;背景图放在右上
background-position:left 100px top 100px ;背景图离左边和上边100px
6.2字体
font-family: 字体
font-size:字体大小,可用像素,百分比等
font-weight:bold,加粗
font-style:italic 倾斜 normal正常
text-decoration:underline;下划线 。overline 上划线; line-through,删除线 none,去掉下划线。
text-align:center 居中对齐 left是左 right是右 水平对齐
vertical-align:middle 居中对齐 top是上 botton是下 垂直对齐
text-indet: 首行缩进,后面跟像素
line-height:24px 行高,
display:none none为不显示,inline-block,显示为块,不自动换行;block显示为块,但是自动换行。inline的宽高不能设置
visibility:hidden 可视性 hidden为隐藏 visible为显示。
6.3边界和边框
border(表格边框)
border:1px solid blue 1像素蓝色实线边框,也可写为 border-width:1px;border-style:solid;border-color:blue。(四边框,可设置单独某一边的border-top:)
margin(外边框边距)
margn:1px 四边的边框是1像素,auto是居中 可在margin后面添加四个像素(margin:1px 1px 1px1px),表示四边框顺序为 上-右-下-左
padding (内容与边框的间距)用法和margin相似