web网页搭建：HTML与CSS（三）

CSS基础样式

• 生成css独立文件并在html中引用

       
......

可改为：

       
......

说明：
1.type:文件类型
2.rel==relation：指明链接的文件与html的关系
3.href:文件路径

• 代码格式

1.对元素属性设置

h1,h2{
     font-family: sans-serif;
     color:gray;
     }

2.对类中元素属性设置

h2.green{     //若对类中所有元素设置，则改为： .green
  color: red;
}

说明：
green为类名，h2为该类的一个元素。可为一个元素设置多个类，格式如下：

...

3.属性的继承
将整个html看成一棵树的话，假如对其中某个元素p设置一属性，则p元素中的元素都会从p中继承了这一属性。css总是会优先匹配最特定的设置。

• 字体与颜色

1.字体
字体代码格式：

font-family:verdana,geneva,arial,sans-serif;

说明：后三种字体依次为备用字体，按顺序优先级
自定义字体：

@font-face{
font-family: "new font";      //自定义字体名称
src: url("http://.....");          //url链接
}

字体大小设置技巧（便于缩放，若设置为px格式，缩放会改变格式）：

body{font-size: small; }
h1{font-size: 150%; }     //或 h1{font-size: 1.5em; }   

说明:默认字体为small，其他基于small改变比例，可缩放不变形
2.颜色
css中颜色采用rgb模式，颜色指定方法有：
①直接指定

background-color: silver;

②rgb百分比指定

background-color: rgb(80%,40%,0);

③rgb值指定（0-255）

background-color: rgb(204,102,34);

④十六进制码指定

background-color: #cc6600;  //cc,66,00依次为红蓝绿