CSS基础知识学习笔记

1.css基本样式讲解

1.1 css背景
background-attachment：背景图像是否固定或者随着页面的其余部分滚动
background-color：设置元素的背景颜色
background-image：把图片设置为背景
background-position：设置背景图片的起始位置
background-repeat：设置背景图片是否及如何重复
background-size：规定背景图片的尺寸
background-orgin：规定图片的定位区域
background-clip：规定背景的绘制区域
1.2 css文本
color ：文本颜色
direction :文本方向
line-height :行高
letter-spacing: 字符间距
text-align :对齐元素
text-decoration :向文本添加修饰
text-indent :缩进元素中文本首行
text-transform :元素中的字母
unicode-bidi :设置文本方向
white-space :元素中空白的处理方式
word-spacing :字间距
text-wrap：自动换行
text-shadow：向文本添加阴影
1.3 css字体
font-family :设置字体系列
font-size :设置字体尺寸
font-style :设置字体风格
fongt-variant: 以小型大写字体或正常字体显示文本
font-weight: 设置字体的粗细
1.4 css链接
a:link 普通的、未被访问的链接
a:visited 用户已经访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
text-decoration：这个属性大多用于去掉链接中的下划线
background-color：背景颜色
1.5 css列表
CSS列表属性可以灵活的放置、改变标志，或者将图像作为列表项标志
list-style :简写列表项
list-style-image :列表项图像
list-style-position: 列表项标志位置
list-style-type :列表类型
1.6 css表格
表格边框:

#tb,th,td,tr{
    border: 1px solid blue;
}

折叠边框:

#tb{
    border-collapse: collapse;
}

1.7 css轮廓
outline :设置轮廓属性
outline-color :设置轮廓的颜色
outline-style :设置轮廓的样式
outline-width :设置轮廓的宽度

2.css盒子模型

内边距:
内容外部，边框内部
padding 设置所有边距
padding-bottom、left、right、top 单独设置某个方向的边距
边框：
可以创建出效果出色的边框，并且可以用于任何元素
border-style：定义了10种样式
border-(top,bottom,left,right)-style:定义单边样式
border-width：边框宽度设置
border-（top，bottom，right，left）-width 单边框宽度
border-color 边框颜色
border-（top，left，bottom，right）-color 单边框颜色
CSS3边框：
border-radius 圆角边框
box-shadow 边框阴影
border-image 边框图片
外边距：
margin 整体外边距
margin-（top，bottom，left，right） 单边外边距
外边距合并：就是一个叠加的概念

3.css定位与浮动

css定位：
position：static、relative、absolute、fixed；
top
left
right
bottom
overflow
….
css浮动：
float属性：left，right，none，inherit
clear属性：去掉浮动属性
left，right：去掉左右浮动
both：左右两侧浮动均去掉
inherit：从父级继承来clear值

4.css选择器

派生选择器：

li strong{
    color：red；
}

具体制定列表项里的strong标签效果，已经被定义好的效果是不会被覆盖。

id选择器：

#id {
    color:red;
}

id选择器可以和派生选择器组合使用，id选择器不好与id组合使用

类选择器：

.pclass{
    color:red;
}

类选择器也可以和派生选择器进行组合使用

属性选择器：
缺省属性选择器：

[title]{
    color:red;
}   

带名字的属性选择器:

[title=te]{
    color:red;
}

在IE6及更低版本，不支持属性选择器
属性选择器必须完全匹配才会起作用

子元素选择器：
采用>符号，只是只能用一级一级定位

相邻兄弟选择器：
标签+标签的形式，这个只要做一个简单的了解即可