css总结

css总结

css中文手册：http://css.doyoe.com/

一、字体属性

1.字体系列：font-family

h2 {
    font-family: '宋体';
}

p {
    font-family: '微软雅黑';
}

2.字体大小：font-size

body {
            font-size: 20px;
        }
 /*标题标签比较特殊，需要单独指定字体大小*/

3.字体粗细：font-weight

.bold {
            font-weight: bold;/*或者100-900的数字，注意不要加单位px,更提倡用数字*/
        }
 <p class="bold">未来</p>

4.字体斜体：font-style

.italic {
            font-style: italic;
        }

5.复合写法

div {
            font: font-style   font-weight  font-size/line-height  font-family
    }

div {
            font: italic 700 16px '宋体'
        }

二、文本属性

1.文本颜色：color

方法一：英文字母
方法二：16进制 #fff000
方法三：rgb(200,0,0)

2.文本水平对齐：text-align

1.左对齐    left（默认）
2.居中对齐  center
3.右对齐    right

3.文本装饰：text-decoration

none:            没有线(默认)
underline:       下划线(a链接自带)
over-line:       上划线
line-through:    删除线

4.文本段落缩进：text-indent

p {
            text-indent: 20px;
   }
p {
            text-indent: 2em;/*相对当前文字大小的2个文字*/
   }

5.行间距：line-height

(上间距+文字高度+下间距)

三、css引入方式

1.内部样式表（嵌入式）

在一个html页面里面写style标签中
范围：当前html页面

2.行内样式表

在body里面的标签中
 <div style="color: red;  font-size: 12px;">123</div>

3.外部样式表

单独写道css文件中
html中引入
<link rel="stylesheet" href="">

四、选择器

1.基础选择器

标签选择器
id选择器...

2.复合选择器

1.后代选择器(重要)
    ol li a {
        color: pink;
    }
2.子选择器
    .nav>a {
         color: pink;
    }
3.并集选择器
    div,p {
         color: pink;
    }
4.伪类选择器
    a:link     选择所有未被访问的链接
    a:visited  选择所有已被访问的连接
    a:hover    选择鼠标指针位于其上的连接
    a:active   选择活动链接（鼠标按下未弹起的链接）
    要按顺序写LVHA
5.focus选择器
    input:focus {
        background-color: pink;
    }
...

五、元素显示模式

1.块元素

div、h....
可以设置宽度和高度
独占一行

2.行内元素

span、a...
不可以设置宽高
在一行中显示

3.行内块元素

可设置高度
可在一行显示
img、input、td

4.转换

转换为块元素：    display:block;
转换为行内元素：  display:inline;
转换为行内块：    display:inline-block;

5.单行文字垂直居中

让文字的行高等于盒子的高度
line-height等于height

六、背景属性

1.背景颜色

background-color: transparent(透明)/color

2.背景图片

background-image: none/url(url)

3.背景平铺

background-repeat: repeat/no-repeat/repeat-x/repeat-y

4.背景位置

background-position: x y;(方位名词/精确数字)

5.背景固定

background-attachment: scroll(滚动)/fixed(固定)

6.背景色半透明

background: rgba(0,0,0,0.3);

七、css三大特性

1.层叠性

选择器相同时样式冲突：就近原则
样式不冲突的不会重叠

2.继承性

子标签继承父标签的一些样式
父标签行高不加单位时，代表父标签和子标签行高分别为当前文字大小的多少倍

3.优先级

选择器不同时，根据选择器权重（权重大，优先级大）

八、盒子模型

1.边框：border

border-width:边框宽度
border-style:边框样式（实线、虚线...）
border-color:边框颜色
border-collapse:collapse;合并相邻边框

2.内容： content

3.内边距：padding

padding-left
padding-right
padding-top
padding-bottom

复合写法：

4.外边距： margin

margin-left
margin-right
margin-top
margin-bottom

外边距可以让块级盒子水平居中：(盒子必须设置了宽度)
margin-left:auto;
margin-right:auto;
margin:auto;
margin:0 auto;

外边距合并：
对于两个嵌套关系的块级元素父元素有外边距子元素也有外边距，父元素会出现塌陷问题
解决方案：
1.可以为父元素添加上边框
2.可以为父元素添加上内边距
3.可以问父元素添加  overflow:hidden

5.有些盒子会有默认的内外边距

清除网页元素的内外边距：
* {
    margin: 0;
    padding: 0;
    }

未待完续~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~