CSS学习

最新推荐文章于 2024-09-23 15:32:37 发布

原创最新推荐文章于 2024-09-23 15:32:37 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

Web 专栏收录该内容

30 篇文章

订阅专栏

1.网页主要由三部分组成：
   * 结构（Structure）
   * 表现（Presentation）
   * 行为（Behavior）

2.对应的标准也分三方面：
   * 结构化标准语言主要包括:   XHTML和XML
   * 表现标准语言主要包括:   CSS
   * 行为标准主要包括:        对象模型（如W3C DOM）、ECMAScript等。

3.使用CSS进行网页布局优点:
   * 内容和形式分离
   * 改版网站更简单容易了
   * 搜索引擎更友好，确实能够对SEO起到一定的帮助
   * 保持整个站点视觉的一致性
   * 页面载入得更快

4.CSS去控制HTML页面效果4种方式:
   * 行内方式:   直接对HTML标签使用style=""属性：   <p style="color:#F00; background:#CCC; font-size:12px;"></p>
   * 内嵌方式:   <head></head>之间:   <head><style type="text/css"> </style></head>
   * 链接方式:   在<head></head>之间加上：    <link href="style.css" type="text/css" rel="stylesheet" />
   * 导入方式:   @import url(xxx.css);

5.对@import url（）方式做一下总结：
   * @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
   * @import 是css2里面的，所以古老的ie5不支持。
   * 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css
   * @import url(xxx.css); 有最大次数的限制，经测试IE6的最大次数是31次，第32个import及以后的都不能生效
   * @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

6.CSS选择器:
   * 标签选择器:   决定哪些标签采用相应的CSS样式       p{font-size:12px;}
   * ID选择器:       哪个标签使用相应的CSS样式（建议不要在同一个html页面中多个标签拥有共同的ID，不符合W3C标准）
                   <p id="one">此处为p标签内的文字</p>
                   #one{2.   font-size:12px;}
   * 类选择器：   使页面中的某些标签(可以是不同的标签)具有相同的样式
                   <div class="one">此处为p标签内的文字</div>
                   .one{2.   font-size:12px;}
   * 通用选择器：   *{此处为CSS代码}   他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)

7.标签重置：
   *{margin:0; padding:0;}
   每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，
   但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的
   效果都是一样的，那么我们就需要对HTML标签重置
   没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下：
   body,div,p,a,ul,li{margin:0; padding:0;}

8.选择器的集体声明：
   使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开：
   如：h1,h2,h3,h4,h5,h6{color:#900;}
       #one,#three,.yellow{font-size:14px;}

9.选择器的嵌套：
   选择器也是可以嵌套的，如：
   #div1 p a{color:#900;}   /*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

10.CSS选择器规范化命名：
   * 骆驼命名法：   首字母要小写，后面的词的第一个字母就要用大写：#headerBlock
   * 帕斯卡命名法：首字母要大写，后面的词的第一个字母就要用大写：#HeaderBlock
   * 匈牙利命名法：需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解：#head_navigation

11. 块状元素和内联元素：
   * 块状元素：   一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素
   * 内联元素：   一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”
                   当内联元素，在CSS中定义下列属性中的一种，便具有块元素的特征
                   1）display:block;
                   2）float:left;   （不但具有块元素的特征，同时像左侧浮动）

12.
   margin:20px 0 0 20px;
   其中的数值顺序是：上右下左。
   margin:20px 0;和margin:20px 0 20px 0;是等价的哟~只不过是更加精简而已，这样写CSS加载速度会更快。

13.页面布局
   * 浮动Float
   * 定位Position

14.IE6双倍边距BUG
   只要满足下面3个条件才会出现这个BUG:
   * 要为块状元素；
   * 要左侧浮动；
   * 要有左外边距(margin-left)
   解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;

15.定位Position注意事项：
   * 如果用position来布局页面，父级元素的position属性必须为relative，
   * 而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，
   * 当然你也可以用position，不过到时候计算的时候不要忘记padding的值
   * 布局页面，Float为主，Position为辅

16.CSS Hack
   （1）!important ：   #content{
                           height:960px !important;
                           height:900px;
                           }
                   由于IE6不能识别它：直接解析第二句“height:900px;”将高度定为900px；
                   而对于IE7，FF均能识别：只解析第一句“height:960px !important;”将高度定为960px，而后面的“height:900px;”将不解析，忽略它；
       注意：附加有“!important”的语句一定要在没有附加“!important”的语句的上面，顺序一定不能错！
   （2）*   ：#content{
                      height:960px;
                      *height:900px;
                   }
           IE6、IE7可以识别附加有*的CSS属性语句：先读第一句，将高度定为960px，而后又读第二句“*height:900px;”，将高度从960px修改为900px，所以我们在IE中看到的最终效果就是高度为900px;
           FF不识别*，所以它只读第一句“height:960px;”而忽略第二句
       注意：附加有“*”的语句一定要在没有附加“*”的语句的下面，顺序一定不能错