属性
- 宽高
/*只有块级元素才有宽和高*/ 200px; height:200px;
- 字体
- 显示字体
/*后面可以跟多个字体,如果系统中不存在第一个字体,就用第二个以此类推。如果一直到最后都没有那么用系统默认的*/ font-family: "Microsoft Yahei","微软雅黑","Arial";
- 字体大小
font-size:10px
- 字重(粗细)
font-weight: bold 粗体 bolder 更粗 相对于父标签的字体,比父标签更粗 lighter 更细 相对于父标签的字体,比父标签更细 100 100~900设置具体粗细 400=normal 700=bold inherit 继承父元素字体粗细值
- 文本颜色
color: 颜色名称:white 十六进制:#FFFFFF RGB形式:rgb(255,255,255) RGB形式:rgba(255,255,255,0.4) 0.4表示透明度
- 文字对齐
text-align: left :左对齐默认值 right :右对齐 center :居中 justify:两端对齐
- 文字装饰
text-decoration: none:默认 underline:文本下一条线 overline:文本上一条线 line-through:穿过文本的一条线 inherit:继承父元素的text-decoration
- 首行缩进
text-indent: 32px 缩进32像素,可以根据字体大小来设置首行缩进两个字符
- 显示字体
- 背景属性
- 背景颜色
background-color:red;
- 背景图片
background-image:url('1.jpg')
- 背景样式
background-repeat: repeat 默认背景图片平铺满整个网页,背景重复 repeat-x 背景图片只在水平方向上平铺 repeat-y 背景图片只在垂直方向上平铺 no-repeat 背景图片不平铺
- 背景位置
background-position: right top 200px 200px
- 背景图片动作
background-attachment: scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时,背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。
- 背景颜色
- 边框
border全部边框 border-top上边框 border-bottom下边框 border-left 左边框 border-right 右边框 a.宽度 border- b.样式 border-style: solid 实线 dashed 方块虚线 dotted 圆点虚线 c.颜色 border-color: c.圆角边框 border-radius:设置50%就会变成圆
- 显示效果
display: none 不显示,不占位置 block 默认占满整个页面宽度,如果设置了宽度剩下的会用margin填充剩下的部分 inline 按行内元素显示,设置width,height,margin-top,margin-bottom,float属性无效 inline-block 同时具有块元素和行内元素的特点 visibility: hidden; 不显示但是还占位置
- 盒子模型
padding:内容跟边框的距离 margin: 两个标签之间的距离
- 浮动
浮动可以往左浮动,或者往右浮动,直到他遇到包含框,或者另一个浮动框的边框 由于浮动框不在文档的普通流中,所以文档流中的普通块框,表现得就像浮动框不存在一样 flot: left 左浮动 right右浮动 none 不浮动 clear:用于撑开包含浮动元素的父标签 left 表示左侧不允许有浮动元素 right 表示右侧不允许有浮动元素 both 表示两侧不允许有浮动元素 none 默认值,表示允许两侧有浮动元素 inherit 从父级继承clear的值
使用伪元素撑开父级元素的方法,给父级元素加入prop类就可以 .clearfix:after{content: "";clear: both;display: block} - 阴影
box-shadow(x方向阴影大小,y方向阴影大小,将阴影模糊成多大(一般式阴影大小*2),阴影颜色)
- 透明度
opacity
选择器
- 伪类选择器
/*======================伪类选择器=====================*/ /* 未点击的样式*/ a:link { color: red } /* 已访问的样式 */ a:visited { color: black } /* 鼠标移上去,不止是a标签,其他标签也可以使用*/ span:hover { color: coral } /* 鼠标点中但是还没有弹起状态,不止是a标签,其他标签也可以使用*/ span:active { color: red } /* 获取焦点*/ input:focus { border: salmon solid 1px; } /*======================伪元素选择器=====================*/ /* 段落首字母*/ p:first-letter{font-size: 10px;color: coral;} /* 在标签内部第一个位子加入内容*/ p:before{content: 'hahah';color: salmon} /* 在标签最后加入内容*/ p:after{content: 'heiheihei';color: salmon}
- 基本选择器
/*======================普通选择器=====================*/ /* 标签选择器*/ div{color: red} /* ID选择器*/ #d2{color: green} /* 类选择器*/ .a{color: aliceblue} /* 通用选择器*/ *{color: brown;} /*======================组合选择器=====================*/ /* 后代选择器,从div子子孙孙中找span*/ div span{color: red} /* 儿子选择器*/ #d5>span{color: blue} /* 毗邻选择器 只影响后面的标签,前面标签不变*/ p+*{color: aqua} /* 弟弟选择器 选择p标签后面同级的span标签,中间是否隔着其他标签不影响*/ p~span{color: yellow} /*======================属性选择器=====================*/ /* 找到abc属性等于“999”的标签 class属性可以简写 例:div.c1表示找class有c1的div*/ [abc="999"]{color: coral} /* 找到有abc属性的标签*/ [abc]{color: gray} /* 找到有abc属性的span标签*/ span[abc]{color: gray} /* 找到abc属性以9开头的标签*/ [abc^="9"]{color: #000;} /* 找到abc属性以9开头的标签*/ [abc$="9"]{color: #000;} /* 找到abc属性包含9开头的标签*/ [abc*='9']{color: coral} /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/ [title~="hello"] {color: green;} /*======================分组和嵌套=====================*/ /*同时为div和p设置属性*/ div,p{color:red}
- 定位
/* 相对定位: relative 相对于自己原来的位置移动,但是在文档流中占得位置还是原来的位置 绝对定位: absolute 元素从文档流中删除(相当于浮动),位置移动相对于祖先元素,如果没有祖先元素则相对于body 固定定位: fixed 元素脱离原来的文档流,相对于窗口的位置定位,滚动页面位置也不移动 */ .c2{ /*相对定位*/ background-color: green; position: relative; left: 100px; } .c3{ /*绝对定位*/ background-color: blue; position: absolute; left: 200px; top:0 }
- 溢出
/*==================溢出 */ /* 溢出 overflow 水平和垂直方向均设置、overflow-x 设置水平方向、overflow-y 设置垂直方向: visible 默认值,内容不会被修剪,会曾现在元素框之外 hidden 内容会被修剪,并且其余内容是不可见的 scroll 内容会被修剪,但是浏览器会显示滚动条,以便查看其余内容 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容 inherit 规定应该从父元素继承overflow属性的值 */