css学习笔记

1.css的长度单位
1）px
2) em
2.css的选择器
1）常用选择器
*标签 span
*id #id
*类 .class
*关联 #div1 span  div1中的span标签
*组合 div,h1,p,apan 关联的都选，逗号隔开
2）基本选择器
:first-child
:first-letter
:first-line
:last-child
:nth-child
3）层级选择器
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-color
background-image
background-repeat:no-repeat
background-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|outset
border-width:30px
border_color:#f00;
overflow:auto;

5）鼠标光标属性
cursor:pointer
crosshair 十字形状
pointer 小手形状
text文本形状
wait 等待形状
default 默认形状
help 帮助形状

6）列表样式(list-style-type):
none
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
ul{
    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）内外边距
margin
padding
9）浮动和清除浮动
float:left|right
clear:left
clear:right
clear:both防止盒子回缩
10）滚动条
overflow:hidden;
overflow:auto;

11）显示和隐藏
display:block|inline|none
visibility:visible|hidden

12)边框样式
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;