css学习笔记

1.css的长度单位1）px2) em2.css的选择器1）常用选择器*标签 span*id #id*类 .class*关联 #div1 span  div1中的span标签*组合 div,h1,p,apan 关联的都选，逗号隔开2）基本选择器:first-child:first-letter:first-line:last-child:nth-child3）层级选择器a b (a中孩子b)a>b (a下的b1)a+b (a下的第一个b)4）伪类选择器:hover (鼠标经过):focus (获得焦点)::selection (鼠标选中的元素)5）属性选择器[id] 所有有id属性的元素[id=user] 所有id=user的元素2. 样式1）字体与颜色font-family 字体类型（宋体|楷体|黑体）font-size 字体大小 （30px|2em）font-style 字体样式 (normal|italic)font-weight 字体加粗 (bold)用于在网站中加载字体@font-face{    font-family:fzm;    src:url('fzm.ttf');}2）背景属性background:#ccc url('x.png') no-repeat fixed 50% 50%;background-colorbackground-imagebackground-repeat:no-repeatbackground-attachment:fixed|scroll;只能用在body上background-position(1)left  center  right  top  center  bottom(2)50px  50px(3)-50px  -50px(4)50%  50%3）文本属性letter-spacing  字间距word-spacing    词间距text-decoration 下划线text-align      对齐text-indent     缩进line-height     行高color           颜色word-break：break-all        折行可以有半个单词text-shadow：1px 1px 5px #ccc        文本阴影word-wrap:break-word折行没有半个单词4）边框属性border:2px solid #f00;border-style:none|hidden|dotted|solid|double|groove|ridge|inset|outsetborder-width:30pxborder_color:#f00;overflow:auto;5）鼠标光标属性cursor:pointercrosshair 十字形状pointer 小手形状text文本形状wait 等待形状default 默认形状help 帮助形状6）列表样式(list-style-type):nonedisccirclesquaredecimallower-romanupper-romanlower-alphaupper-alphaul{    list-style-type:none;    padding-left:0px;    overflow:hidden;隐藏超出的东西}<div style='clear:both'></div><table border='1px' width='1000px' cellspacing='0'>border-collapse:collpase;border-spacing:10px;7）定位属性position:absolute;绝对定位left:200px;top:200px;position:relative;相对定位z-index:图片的高度（父定位，子绝对就可以实现子的绝对定位）块标签屏幕居中position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;8）内外边距marginpadding9）浮动和清除浮动float:left|rightclear:leftclear:rightclear:both防止盒子回缩10）滚动条overflow:hidden;overflow:auto;11）显示和隐藏display:block|inline|nonevisibility:visible|hidden12)边框样式border-radius:50px；边框圆角上左下右box-shadow：5px,5px,5px,5px #999 inset;前两个定位，三个模糊，四向外扩充，五颜色，内阴影。border-image：url('b.png') 30 30 stretch|round|repeat;13）背景样式background-size:100%;background-origin:padding-box|content-box|border-box;14）2D样式transform:translate(10px,20px);transform:rotate(30deg);transform:scale(2,4);15）3D样式transform:roateX(100deg);transform:roateY(100deg);16) 多栏样式column-count:3;column-gap:40px;column-rule:3px outset #ff0000;17)过渡动画18）轮廓样式outline:2px solid red;outline-offset:15px;