CSS
样式三种书写方式:行间样式、内部样式表、外部样式表
<link rel="stylesheet" type="text/css" href="css/index.css"/><!--外部样式写法-->
基本样式:
文本颜色:设置文本颜色、只针对文字,三种表示法:英文(red)、十六进制(#666)、rgb三元色( rgb(255,0,0) )
color:red;
行高:文本行 与 文本行 之间的距离,想要文本上下居中可以设置为父级的高度或者自身的高,但不能大于父级的高度
line-height:20px;
字体大小:浏览器默认16px,最小10px
font-size:12px;
字体加粗:bold 加粗、normal不加粗
font-weight:bold;
字形:谷歌浏览器默认微软雅黑、IE默认宋体
font-family:'宋体';
字体倾斜:italic;
font-style:italic;
文本下划线underline,上划线overline,删除线line-through,取消下划线none
text-decoration:line-through;
边框border:边框是占像素的,大小、颜色、线型(solid实线、dashed虚线)
border:10px blue solid;
边框可以单边设置(right 右、left 左、top 上、bottom 下):border-left:右边框
border-left:10px blue solid
首行缩进:(可以用2em,也可以用像素)
text-indent:2em;
文本左右对齐:text-align:right;(right 右、center 中、left 左)
text-align:right;
字符间距:字符左右的间隙
letter-spacing:2px;
有文字和图片的时候,设置文本和图片上下对齐方式 (默认baseline 基线对齐、top 上、bottom 中间)
vertical-align:baseline;
选择器:通配符 * < 标签 < 类class < ID < 行间
后代选择器 用空格隔开
.box p{
}
子代选择器 >
.box>p>span{
}
交集选择器
div.box2{
}
并集选择器
.box3,box4{
}
继承性color、text-系列 : 比如text-decoration:underline;、font-系列: 比如font-size:30px;
浮动:float(right 右、left 左 ),浮动会使元素脱离标准文档流
float:left;
外边距:margin 可设置单独一边(1个值表示四边,2个值(第一个表示上下,第二个表示左右),3个值(第一个上,第二个左右,第三个下),4个值表示(上右下左) )
margin:10px;//四边
margin:10px,20px;//上下10px,左右20px
margin:10px,20px,30px;//上下10px,左右20px,下30px
margin:10px,20px,30px,40px;//上下10px,右20px,下30px,左40px
内边距:padding 用法跟外边距一样,自身加大(一般会回过去减去宽高),背景不收影响,内容受影响 也可设置单独一边 top left right bottom
外边距应用:居中margin:0px auto; auto会拿到父级的宽度-自己的宽度,再平均左右设置
脱标三种方法:浮动、绝对定位、固定定位
设置平铺方式:background-repeat:no-repeat; 不平铺 repeat-x 横向平铺
设置图片位置:background-position: xpx ypx; x方向 y向方 left左 right右 center中 bottom下 top上
背景图片大小:background-size:contain 碰到第一条边停止
背景图片固定:background-attachment:fixed;
background复合写法:url(相对路径) no-repeat center center
元素转换:
块转行内:display:inline;
行内转块:display:block;
转行内块:display:inline-block;
常用:行内转块,为了设置宽高
显示隐藏:
display:none;
定位:相对定位、绝对定位、固定定位
脱标:浮动、绝对定位、固定定位
定位4个方向:left top bottom right
相对定位:position:relative;
脱标:没有脱标 参照:以自己的00点参照绝对
绝对定位:position: absolute;
脱标:脱标 参照:以最近一个有定位属性(只要定位就行)的父级作参照,如果父级没有定位就一层一层往上找,直到找到有定位的父级的父级...如果 都没有就会以body做为参数!
固定定位:position:fixed;
脱标:脱标 参照:以浏览器窗口作为参照
定位属性的层级:默认后面的大于前面的!可以手动自己设置层级大小
手动设置: z-index: 10; z-index: 9; z-index: 8;......必须设置任意定位,否则无效
溢出隐藏:overflow:hidden;内容超出范围则隐藏;overflow:scroll;加滚动条
圆角属性:border-radius:50%;
鼠标形状:cursor:pointer; pointer手势 wait等待 hele问号
浮动的元素不能撑高父级元素,解决办法:用伪元素
父级元素{
content:'';
display:block;
clear:both;
}