css

 

Css语法：

选择符{属性名称：属性值；}

 

1、内部样式表（嵌套到页面中）

     语法：

<style type="text/css">

     css语句

</style>

注：使用style标记创建样式时，最好将该标记写在<head></head>;

2、内联样式（行间样式，行内样式，嵌入式样式）

    语法：

<div style="属性1:值1;属性2:值2;属性3:值3;……"> </div>

3、引用外部样式表文件

   (1)  语法：

<link href="目标文件的路径及文件名全称"

rel="stylesheet" type="text/css"  />

说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。

      href：css文件的路径及文件名全称

      rel：用于定义文档关联，表示关联样式表；

      type：定义文档类型；

(2)、导入外部样式表

<style type="text/css">

@import  url("目标文件的路径及文件名全称");

</style>

说明：@和import之间没有空格 url和小括号之间也没有空格；括号内部加引号，必须结尾以分号结束；

 

4、css样式表的优先级

内联样式表的优先级别最高

内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

2、css基础语法

CSS语法由两部分组成：选择符、属性

选择符 {属性: 属性值 }   p { color: #ff0000;font-size:12px}

 

6、CSS选择符包括4大类：类型选择符、id选择符、class选择符、和特殊选择符；

常用的选择符有十种左右,Css选择符分类：

类型选择符（标记选择器）,类选择符 （class选择符）,ID选择符 （id选择器）,伪类选择器,群组选择符（集合选择器）,通配符（*）,伪对象选择符

包含选择符（后代选择器）

 

类型选择符（标记选择器）:类型选择符就是以文档对象类型的元素作为选择符，即是用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。

类选择符 （class选择符）:类选择器使用必须要引用才能生效,语法：.class名{属性：属性值;}      

类别选择器说明：

(1)当我们使用类选择符时，应先为每个元素定义一个类名称，

(2)类选择符的语法格式：

        如：<div class="top"></div>

 用法：class选择符更适合定义一类样式；

ID选择符:语法：#id名{属性：属性值;}

说明：

（1）可以给每个元素使用id选择符，但id是元素的唯一标识符，不可出现重复的id名；

      如：<div id="top"></div>

（2）id选择符的语法格式是“#”加上自定义的id名

      如：#box{width:300px; height:300px;}

 (3) 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)

      如：head标记

 (4)一个id名称只能在文档中出现一次，因为id是唯一的

 (5) 最大的用处：创建网页的外围结构。

通配符（*）:语法：*{属性：属性值;}

说明：通配选择符的写法是“*”，其含义就是所有元素；表示该样式适用所有网页元素；

用法：常用来重置样式。

群组选择符（集合选择器）:语法：选择符1，选择符2，选择符3{属性：属性值;}

说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。   做页面居中设置 ：选择符{margin:0 auto;}

包含选择器(后代选择器):

语法：选择符1  选择符2{属性：属性值;}

选择符父级  选择符子级{属性：属性值;}

子代选择器 语法: 选择符父级>选择符子级{属性:属性值;}(子代选择器只能写两輩,多余两輩无效)

说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

伪类选择器:

a:link {color: #FF0000}          /* 未访问的链接 */

a:visited {color: #00FF00}     /* 已访问的链接 */

a:hover {color: #FF00FF}  /* 鼠标移动到链接上 */

a:active {color: #0000FF}   /* 选定的链接 */