htm学习l第三天

今天的学习内容有，css的权重问题

相同权重的选择符，哪个选择符最后定义，就采用哪个采用选择符的样式

切记，是css中定义的样式顺序，不是html中使用的顺序

接下来就是今天学的一些很零碎的东西

1、{margin:0 auto;} 这个的作用是让元素整体居中显示，但是这个有两个使用条件

1）只能给块状元素使用

2）使用时必须给块状元素设置高度，这样左右居中显示才有意义

2、有时候在css中写选择符名字时，可以加上div，比如，当我们给一个名字为heade的div设置css样式时，是这样写的

#header{

/* css语句 */

        }

我们也可以这样写

div#header{

/* css语句 */

        }

这两个效果一样

3、<div class=“名字1” “名字2” “名字3”></div>

也就是说，我们可以一次性使用多个样式

我们在之前提到，css的语法是 选择符{属性:属性值;} 其中声明包括属性和属性值

接下来就是一些关于文本的css声明了

1、文字大小

{font-size:value;} value为数字+单位   其中，单位有em  px   pt

1em=16px     0.75em = 12 px = 9pt

当font-size的值设置为0的时候，字体就没有了，就相当于隐藏了

xx-small = 9px;

x-small=11px;

small = 13px;

medium = 16px;

large = 19px;

x-large = 23px;

xx-large = 27px;

谷歌所识别的最小字体是12ppx;

2、文字颜色

{color:颜色;}

颜色可以是十六进制，或者是英语单词

在ps中ctrl+delete 填充背景色

alt+delete填充前景色

三原色是红绿蓝

红色+绿色 = 黄色

红色+蓝色 = 紫色

蓝色+绿色 = 青色

R      G      B

#    00     00      00              由这三原色组成的值是#000000,值可以是0-9之间额数字，也可以是a-f之间的值

3、文字字体

{font-family:"微软雅黑"；}

文字可以写多个字体，例如{font-family:"字体1","字体2","字体3"}，这样，当字体1在电脑中不存在的时候，会找字体2，如果字体2没有的话，会找字体3，如果字体3找不到的话，会按照浏览器默认的字体显示

谷歌默认的中文字体是微软雅黑，英文字体是arial，IE默认的中文字体是宋体或者新宋体，英文字体是arial

如果font-family的值是中文，或者多个英语单词的话，要用双引号引起来，如果只有一个英语单词的话，可以不用引号

4、加粗

{font-weight:normal/bold/bolder/100-900;}

肉眼观察的话，bold 和blder的粗细程度一样，并没有什么区别，所以两者都可以用来加粗使用

对于数字来说，不用加单位，但是100-500之间的效果看起来是一样的，常规显示，600-900效果是一样的 ，是加粗显示

5、倾斜

{font-style:normal/italic/oblique;}

这个和加粗一样，虽然理论上来讲，oblique比italic更倾斜程度，但是，肉眼看上去，依然是一样的 

6、设置小型大写字母

{font-variant:normal/small-caps;}

normal  按照自己写的现实

small-caps  将自己写的小写英文字母转换为大写

注意：只对小写英文字母起作用

7、有关字体的复合式写法

{font:style variant weight size family;}

注意，size和family的位置不能改变

字体和大小的缩写

{font:size family}

{font:文字大小/行高    “字体”}

比如

{font:12px/40px   "宋体"}

表示字体大小12px  行高40px

        注意：此缩写字号和行高必须有，而且中间必须必须用反斜杠

8、水平对齐方式

{text-align:center/left/right/justify;}

对齐是指元素中的内容对齐方式

9、垂直对齐

{vertical-align:top/middle/bottom;}

这个是有使用条件的，以后补充

10、首行缩进

{text-indent:2px;}值可以是负值，

11、文本修饰 

{text-decoration:value}

      value 的值可以是以下任意一种，也可以是下面的所有情况，中间用空格分开

     1）none ，什么都没有（或者是取消下划线）

     2）underline  下划线

     3）overline 上划线

     4）line-through   删除线

12、行高

{line-height:normal/value;}

也可以使用倍行高，如{line-height:2} 表示是字体高度的2倍

13、控制文本大小

{text-transform:none/capitalize/uppercase/lowwercase}

captialize:默认首字母打大写