CSS基础01

一、CSS基础
1.什么是CSS?

CSS[Cascading Style Sheets],层叠样式表

CSS版本号:2.0

2.CSS有什么用?

快速维护页面元素(如文本、图像、链接等)的外观(如字体、字号、颜色等)。

3.HTML属性与CSS样式的使用原则(P59)

W3C建议尽量使用CSS样式取代HTML标记属性。

例如:

图像的src属性就无法用CSS取代，所以图像的

的src属性就必须使用HTML属性实现，但是图像
的width和height属性，也可以通过CSS样式实现,

所以，图像的width和height属性就可以CSS样式
实现。

4.CSS应用方式

4.1链接到外部的CSS文件
    CSS文件的扩展名为.css
    <link type="text/css" rel="stylesheet" media="all|screen|print" href="CSS文件URL"/>
    all,所有媒体介质
    screen,针对屏幕(浏览器)
    print,针对打印机
    操作步骤:
    A.创建CSS文件
    B.链接到CSS文件 
    
4.2 书写于文档头部
     <style type="text/css">
         ...
         ...
     </style>

4.3 书写于标记内部
 <标记名称 style="CSS样式"/>
 <标记名称 style="CSS样式">...</标记名称>
5.CSS语法结构
选择器{
   属性:值;
   属性:值;
   ...
}

二、选择器(哪些对象将使用CSS样式)

1.通配选择器 -- * (能够自动应用于所有元素)
2.元素选择器 -- 标记名称(自动应用于指定的元素)
3.类选择器 -- .类名称
  说明:
  A.在使用CSS类时，需要添加class="类名称"属性
  B.CSS类在声明需要加"点",但在使用时无需"点"。
  C.多个CSS类之间以空格分隔。
  D.变形的用法 
      元素名称.类名称,指只能用于指定元素。
      如:
      td.a3{
     },其代表的意思就是:a3类只能应用给单元格     
     对象。
      .类名称.类名称,指只能同时应用这两个类。
     如:
     .a3.a4{
     },其表示的意思是:只能同时使用a3和a4这两     个类。
   
4.ID选择器 -- #id
  A.只能手动的应用给文档的唯一对象。
  B.使用时添加id="ID"属性。
  C.对象的id除CSS可以使用外，还可以被
     JavaScript或jQuery使用到。
   JavaScript:
   document.getElementById(string id)
   jQuery
   $('#id')
5.群组选择器(实际上具有相同属性的选择器的简捷方式) 
选择器,选择器,...
6.派生选择器(后代选择器)
  选择器 选择器 ...

  说明:前面的选择器至少是后面选择器的父节点。
7.伪类选择器
 
  :link,正常显示的状态
  :hover,鼠标放上的状态
  :active,鼠标按下的状态
  :visited,访问过的状态

三、CSS单位
1.长度
px,像素
%,百分比
em,字号的倍数

2.颜色
A,英文名称,如red,green,blue等
B,完整十六位进制数字,如#ff0000(红色),#00ff00(绿色),#ffffff(白色),#000000(黑色)
C,简写十六位进制数字,如#f00
D,RGB模式,如rgb(0,0,255)
E.百分比RGB模式,如rgb(0%,100%,0%)

3.CSS选择器优先级

inline,IDs,classes,tags

例1:
内联样式其优先级的代码是：1,0,0,0

例2:
#a2{
}
ID选择器的优先级是:0,1,0,0

例3:
.a2{
}

类选择器的优先级是:0,0,1,0

例4:

p{
}

元素选择器的优先级是:0,0,0,1

例5

#a1 #a2 .a3 .a4 p{
 
}

优先级是:0,2,2,1