CSS学习笔记1

CSS学习笔记

                  Day one

在ＨＴＭＬ中如何注释：

＜！－－注释的内容－－＞

在ｃｓｓ中如何注释：
＜／＊注释的内容＊／＞

Chapter eleven css样式基础知识

CSS的用途：进行网页排版和风格设计，还可以进行格式设置

12.1 CSS样式表的类别

分为三类：外部，内部和内嵌样式表

外部样式表：
语法结构：

＜ｈｅａｄ＞
<link href=“填写外部样式文件的链接名”ｒｅｌ＝＂ｓｔｙｌｅｓｈｅｅｔ＂　ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ＂＞

＜／ｈｅａｄ＞

注意：ｒｅｌ和ｔｙｐｅ属性是固定的格式，意味着他们的属性值也是一样的，同时ｌｉｎｋ在一个ＨＴＭＬ文件中可以多次使用,同时rel和type 属性是一定要用的

内部样式表：

他只作用于当前的ＨＴＭＬ其他的ＨＴＭＬ文件不能够引用
语法结构

　＜ｈｅａｄ＞

　　　＜ｓｔｙｌｅ　ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ＂＞　　

　　　＜！－－

　　　　　内容

　　　－－＞

　　　＜／ｓｔｙｌｅ＞

　＜／ｈｅａｄ＞

注意：这里的type属性可写可不写浏览器都可以读出来但是为了规范还是写一下，现在的<!-- -->这个虽然没写还是可以运行但是为了规范依旧还是要写的

，并且规范是没写了一个设置就要写一个<!-- -->

内嵌样式表：
它只作用于它定义的区域之内，他用ｓｔｙｌｅ属性来说明

语法结构：
＜ｂｏｄｙ＞

　＜标签　　ｓｔｙｌｅ＝＂　＂　＞

　　　内容

＜／标签＞
＜／ｂｏｄｙ＞

它与前两者的主要的区别在于它在ｂｏｄｙ里面而前两者在ｈｅａｄ里面；ｓｔｙｌｅ作为一个属性里面有很多东西可以设定，参看第十一章的内容ｄｉｖ中就可以用到这个内嵌样式表

１２.２选择器

类型有三种：派生选择器，ＩＤ选择器，类选择器

派生选择器的语法结构：
＜ｈｅａｄ＞

　　　＜ｓｔｙｌｅ　ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ＂＞　　

　　　＜！－－

　　　　标签名｛各种设置

　　　　　　　　｝

         （例如：h1  p{

             Font-size:14px;

              }

           这种相互嵌套的标签也是可以的

           )

　　　－－＞

　　　＜／ｓｔｙｌｅ＞

　＜／ｈｅａｄ＞

id选择器：根据body之中的标签对相应的ID进行设置
＜ｈｅａｄ＞

　　　＜ｓｔｙｌｅ　ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ＂＞　　

　　　＜！－－

　　　　　#ID名字｛各种设置

　　　　　}

　　　－－＞

　　　＜／ｓｔｙｌｅ＞

　＜／ｈｅａｄ＞

注意他只会对Body之中ID名字对应的内容进行设置，因为一般来说ID的名字都是不同的所有他只能够运用一次

类选择器：根据body之中的标签对相应的类（class）进行设置
＜ｈｅａｄ＞

　　　＜ｓｔｙｌｅ　ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ＂＞　　

　　　＜！－－

　　　　　. 类名字｛各种设置

　　　　　}

　　　－－＞

　　　＜／ｓｔｙｌｅ＞

　＜／ｈｅａｄ＞

注意：他会对body中标记的class的属性值相同的标签进行设置

ID选择器和类选择器的最大的区别就在于一个使用”#“，一个使用”. ”

12.3CSS优先级

1，样式表的优先级：
从高到低：内嵌样式表，内部样式表，外部样式表

2.选择器优先级：
从高到低：ID选择器，类选择器，派生选择器

 

 

Chapter thirteen CSS属性值

13.1背景属性
背景颜色：  background-color:颜色名；

背景图片：  background-image：url(图片的链接地址）；

注意：使用背景图片的时候一定要设置width 和height 属性 

重复背景图片： background-repeat：no-repeat/repeat/repeat-x/repeat-y;

分别表示：不重复出现；重复出现在水平和竖直方向都铺满；重复出现但是只是在水平的方向铺满；重复出现但是只是在竖直的方向铺满；

固定背景图片： background-attachment：他的属性值只有两种一个是fixed (表示固定背景图片，让他不随着网页的滚动而滚动）另一个是scroll(表示不固定背景图片，让他随着网页的滚动而滚动）

背景图片位置：他有两种用法：

第一种：表示 背景图片相对于元素的位置

background-position：x  y

其中x的属性值只有：left，right，center

Y 的属性值只有：top，bottom，center

第二种：表示图片相对于框架的距离

background-position：左边距离 右边距离

13.2CSS文本属性

字体颜色： color：字体颜色；

字符间距： letter-spacing：间距的数值；

行间距： line-height：间距值；

文本对齐方式：text-align：left/right/center/justify;

说明：第一个表示左对齐，第二个是右对齐，第三个是居中对齐，最后一个是两端对齐

修饰文本：text-decoration:underline/line-through/overline;

说明：第一个表示下划线，第二个表示删除线，第三个表示上划线

文本缩进：text-indent：缩进的距离；

转换大小写：text-transform：capitalize/uppercase/lowercase

说明：第一个表示每个英文单词的第一个字母变成大写，第二个表示每个英文单词都变成大写，第三个表示每个英文单词都变成小写

控制文本换行：white-space:normal/pre/nowrap;

说明：第一个就是按照浏览器自己的方式，第二个强制控制不换行，第三个遇到换行符才换行

注意：在现在的版本中虽然强制了不换行，但是这只是在没有换行符的情况下，如果加了换行符那么他的效果和nowpre是一样的

字体大小：font-size：大小的值；

注意：字体的值不要使用单号，因为 IE浏览器无法识别

选择字体:   font-family:字体风格；