- p上下有间距,title加粗,div和span无样式
- div:换行,块元素eg:h1,p
span:不换行,内联元素eg:b,font,img,input,textarea,a - 查看网页前端代码:F12 elements 左上箭头查看某块代码
- 引入css:
(1)在<head>里面<style type="text/css"></style>
(2)<link rel="stylesheet" type="text/css" href="文件路径">
(3)直接写在标签里面<p style="color:red;"> - 选择器:
(1)标签 div
(2)类名 .one
(3)id #slider
(4)属性选择器input[type='text']
(5)用,隔开选择多个(群组选择器)div,span,.one{ }
(6)a:link{} a:visited{} a:hover{} a:active{} 伪类选择器(img同)
(7)div:first-child means 是div,也是父类的第一个孩子
(8)*{ }全局选择器
优先级:id>类名>标签 - css可以控制的样式
- 背景
background-image:url()
background-repeat:no-repeat/repeat-x/repeat-y
background-position:top/bottom/center/left-top
background-attachment:fixed/enroll
background:。。。 - 文本
text-indent:2em(两个字体大小,默认1em是16px)
text-align:justify/center
text-decoration:line-through/overline/underline
color:
wording-spacing:
letter-spacing:
line-height:
font-size:
font-family:"黑体"
font-style:italic/oblique(倾斜)
font-weight:粗细
font:。。。。。 - 列表
list-style-type:square/none/decimal(有序列表)
list-style-image:
list-style-position:inside/outside 多行之后是否和图标对齐
list-style:。。。
-
盒模型
- margin和padding
计算盒子宽度:width+(border+margin+padding)*2
<body>自带margin和padding
width可以设成百分比,height不行
padding:上右下左
margin:0 auto 相对父元素左右居中
当上下或者父子盒子某边重合时margin按照较大的值显示 - border
border设solid才显示,默认是hidden
可设置样式:border-top-style/border-color/width/style/radius
- 定位
浮动:元素只能左右移动而不能上下移动,一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它,取消方式:浮动元素后面设一个div class="clear" css里面设.clear{clear:both}。浮动元素之前的元素将不会受到影响。
(1)position:static
(2)position:relative
(3)position:absolute
(4)position:fixed