一、CSS概述

• 是层叠样式表，作用是将内容和样式分离开，更方便修改样式而不会影响内容；
• 基本语法如下：（最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号）

                    

二、CSS样式添加

• 方法一：行内  例：<p style=" color.red;">
• 方法二：内嵌样式  例：<style type="text/css"></style>
• 方法三：单独文件  例：<link rel="stylesheet" href="css/style.css"/>
• 优先级：行内样式>内嵌样式>链接样式>浏览器默认样式

三，CSS选择器

• 标签选择器   例：body{ }   h1{ }
• 类别选择器   例：.one{ }      ( class="one" )
• ID选择器       例：#one{ }   ( id="one")
• 嵌套说明  例： p span{ } ( <p><span>你</span>是对的</p>)  注：空格
• 集体声明  例：h1,p{ }
• 全局声明  例：*{ }
• 混合：1.多个class选择器混用，用空格分开 例：<div class=" one yellow left">...</div>  2.id 和class混用<div  id="my" class="one yellow left">   注意：id选择器只可以引用一次；

四.CSS样式

• 单位

1. px 像素    
2. 1em—— 一个字符    2em ——两个字符 自动适应用户所使用的字体，比如：当前所使用的字体自号为12像素大小，那2em就是12*2=24px
3. %  百分比  是相对的，看 继承关系

• 颜色

1. red,blue,green
2. rgb(x,x,,x)  0-255
3. rgb(x%,x%,x%)  0%-100%
4. rgba(x,x,x,x)   a表示透明度，
5. #rrggbb  十六进制数

• 文本

1. color  文本颜色  red #f00
2. letter-spacing  字符间距  2px  -3px 
3. line-height   行高  14px  1.5em  120%  使用场景：垂直方向上垂直居中
4. text-align  对齐  center   left  right  justify(两端对齐)
5. text-decoration  装饰线   none  overline（上）  underline（下）  line-through（作为删除线贯穿文本之中）
6. text-indent  首行缩进   2em

• 字体

1. font  在一个声明中设置所有的字体属性  font：bold  18px  '幼圆'
2. font-family 字体系列 
3. font-size    字号   14px  120%
4. font -style   斜体  italic
5. font-weight  粗体  bold

• 背景属性

1. background-color  背景颜色
2. background-image  背景图片
3. background-repeat   背景分量(棋盘格式填充 repect ,横向填充一行用repeat-x ,纵向填充一列用repect_y,只想让一副很大的图片作为背景图片出现只显示一次 就用no-repeat）
4. background:颜色  图片  repeat

• 超链接（伪类选择器）

1. a:link    普通的，未被访问的链接
2. a:visited  用户已访问的链6
3. a:hover  鼠标指针位于链接的上方悬停
4. a:active  链接被点击的时刻
5. a:hover必须位于a:link和a:visited之后；a:active 必须位于a:hover之后   记忆技巧：LOve&HAte

         

   6.练习：使鼠标停在上面的时候字体变成1.2倍？

           

• 列表

1. list-style   所有用于列表的属性，设置于一个声明
2. list-style-image 为列表项标志设置图像 ； list-style-image：url("images/bullet.gif");
3. list-style-position  标志的位置

  4.list-style-type  标志的类型

• CSS表格

1. 表格大小：属性  width height   
2. 表格边框：属性 border     例：table,td,th{border:1px solid #eee; }
3. 表格border-collapse属性  (border-collapse:collapse;叠加或者坍缩)
4. 奇偶选择器   ：nth-child(odd|even)

 

 

---