css笔记 | 易学教程

注释: /* */
1、css和html的结合方式
(1)用(每个)html标签上的style属性结合
(2)使用html的<style>标签
(3)在style标签里使用语句 @import url(css文件路径);(某些浏览器不支持)
(4)使用头标签link引入外部css文件
2、css的选择器(* 代表所有)
(1)标签选择器

使用标签名作为选择器名称：标签名{css属性}

(2)class选择器

每个html标签都有个class属性(可以有多个class属性,用空格隔开)
- - [标签].class名{css属性}

(3)id选择器

每个html标签都有个属性id
- - [标签]#id名{css属性}

(4)属性选择器

选择具有指定属性值的标签
- - 选择器[id='abc']{css属性}

优先级：

style属性 > id选择器 > class选择器 > 标签选择器

3、css的扩展选择器
(1)关联选择器

指定嵌套标签里面的样式(标签1中的标签2)
- - 标签1 标签2{css属性}

(2)组合选择器

把不同标签设置成相同的样式
- - 标签1,标签2{css属性}}

(3)伪元素选择器

css里面提供了一些定义好的样式,可以定义元素在不同条件下的样式
超链接(顺序不能变)
- 状态：原始状态(:link)，鼠标放上去(:hover)，点击还没释放(:active)，点击后(:visited)　　
- - a:状态{css属性}}

(4)相邻兄弟选择器

标签1 + 标签2{css属性}
- 标签2紧邻标签1之后,有同一个父元素

4、css属性(冒号设置)
定位

float：指出对象是否及如何浮动(可以使元素飘起来)(当浮动时必须指定宽)
clear: 规定元素不被浮动元素覆盖(使普通元素不被浮动元素覆盖)
display: 规定如何显示该元素(隐藏(不占位置),内联, 块状等)
visibility: 规定元素是否可见(隐藏时占页面位置)
position: 定位类型, 作用于 top 等属性
相对定位(相对于正常位置,原来的位置不会被其它元素占用),绝对定位(相对于父元素位置,不占用其它元素位置,会盖在其它元素上)等
用绝对定位时,父元素要有 position 属性,否则会一直向上找,直到body
top: 设置相对于顶部偏移(buttom:下, left:左, right:右)
z-index: 设置元素的堆叠顺序(当使用绝对定位时使用,当多个绝对定位元素重叠时,此值大的会在上面)
overflow: 规定当子元素内容溢出时的处理

盒子

margin: 外边距(margin-top:上,margin-right:右,margin-bottom:下,margin-left:左)
padding: 内边距(内边距不算在元素大小中)(padding-top:上,padding-right:右,padding-bottom:下,padding-left:左)
border: 设置边框属性(border-top:上...)(边框宽度不算在元素宽度中)
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
  - border-width: 设置边框宽度, 当 border-style 不为 none 时有效　　　　
  - border-style: 设置边框样式　　　　
  - border-color: 设置边框颜色(red/#000000)　　　　
border-radius: 设置圆角边框　　
- border-bottom-left-radius: 设置左下　　
- border-bottom-right-radius: 设置右下　　
- border-top-left-radius: 设置左上　　
- border-top-right-radius: 设置右上　　
border-image: 将图片作为边框
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
  - border-image-source: 图片的路径　　　　
  - border-image-slice: 图片切片位置(那部分显示为边框)　　　　
  - border-image-width: 图片边框的宽度　　　　
  - border-image-outset: 边框图像区域超出边框的量　　　　
  - border-image-repeat: 图像边框如何显示　　　　
box-shadow: 给边框添加阴影　　
width: 元素宽度
height: 元素高度
background: 背景样式
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
  - background-color: 背景颜色(red/#000000)　　　　
  - background-position: 背景图像的位置　　　　
  - background-size: 规定背景图片的尺寸　　　　
  - background-repeat: 规定如何重复背景图像　　　　
  - background-attachment: 规定背景图像是否固定　　　　
  - background-image: 规定要使用的背景图像　　　　
opacity: 规定元素的透明程度
cursor: 规定鼠标放上时鼠标的形状
columns: 规定子元素分成几列以及列的宽度

变化

transform: 对元素进行转换(旋转,缩放,移动,倾斜等)
cursor: 定义光标形状
transition-delay: 设定当状态改变(伪类选择器)时,几秒后属性变化
transition-duration: 设定改变状态(伪类选择器)要经过几秒(当此值为0时, 没有过度效果)
transition-timing-function: 设定状态改变(伪类选择器)的速率
transition-property: 设定应用过渡效果的属性(当指定属性变化时,过渡效果开始)
animation: 设定动画

文本

text-indent: 设置文本块首行的缩进(段落效果)
text-align: 规定水平对齐方式(靠左,居中等)
text-decoration: 设置文本的装饰效果(下划线等)
text-transform: 控制文本大小写
text-shadow: 设置文字投影效果(阴影等)
line-height: 行高(行高与块高相同实现文字上下居中)
letter-spacing: 控制字符间距
color: 字体颜色(red/#000000)
font-style: 设置字体样式(斜体等)
font-family: 设置字体(用逗号隔开,会依次查找能用的字体)
font-weight: 设置字体粗细
word-spacing: 设置单词间距
letter-spacing: 设置字符间距
white-space: 设置如何处理元素中的空白

列表

list-style-type: 设置列表标记的类型(实心圆,空心圆等)
list-style-image: 将图片作为列表的标记
list-style-position: 设置标记的位置

表格

border-collapse: 设置表格边框是否为单一边框
border-spacing: 相邻表格边框的距离(必须设置 border-collapse:separate; 否则会忽略)
empty-cells: 空单元格是否显示边框(必须设置 border-collapse:separate; 否则会忽略)

5、自定义规则
字体(供 font-family 属性使用):

@font-face    /*自定义字体*/
{
    font-family: myFirstFont;    /*自定义字体名*/
    src: url('Sansation_Light.ttf'),    /*字体路径*/
    url('Sansation_Light.eot'); /* IE9 */
}