CSS学习笔记(2)

21、CSS样式的优先权：当样式有冲突时，听谁的？

      a、四种方式的优先权：内联式[行内样式]--->内嵌式[内部式]--->链接式[外部式]--->@import导入式

            CSS优先权：就近原则

            作用范围越小，优先权越高

            离要修饰目标越近的样式优先权越高。

      b、选择符优先权：行内>id>class>标签选择符

            我们可以采用 !important语法来提升重要性[优先权]

            p{

                    background-color:#FFCCCC !important;IE6不支持该语句

                    background-color:#66CCCC;

              }

22、CSS控制字体

              功能                                语法

              设置字体样式                  font-style:normal[正常] italic[斜体]

              修饰文字                         text-decoration:none[正常] underline[下划线] overline[上划线] line-through[删除线]

              字符间距                         letter-spacing:normal[默认] length[长度单位]

              单词间距                         word-spacing:normal[默认] length[长度单位]

        CSS控制文本

              功能                                语法

             设置对象中文本缩进        text-indent:2em  可以为负值

             文本水平对齐方式            text-align:left[左] right[右]

             对象中空白处理               white-space:normal[自动换行] pre[换行和空白受保护] nowrap[强制在同一行显示]

             文本大小写控制               text-transform:none[正常大小] capitalize[每个单词的第一个字母转换成大写]

                                                                            uppercase[转换成大写] lowercase[转换成小写]

             元素的垂直对齐方式       vertical-align:sub[设置文字为下标] super[设置文字为上标] top[把元素的顶端与行中最高元素的顶

                                                                          端对齐] text-botton[把元素的底端与父元素字体的底端对齐]

      CSS控制链接---CSS伪类

             状态                                语法

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

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

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

            鼠标按下链接                  a:active{color:#0000FF}

       如果鼠标放上效果不起作用，请修改链接状态的顺序 L--V--H--A

       自定义链接的CSS

            a.类名称:状态

              CSS伪类用于向某些选择器添加特殊的效果

              语法： 选择符:伪类名称{属性:值}

               例如：

                        a:hover{color:#FF00FF}

                       :focus设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式（IE6/7不支持）

      CSS伪类语法：

            元素名称:伪类名称{属性:值}

            例如：超链接的鼠标经过状态

23、在应用CSS样式时，一定要注意它的默认值，因为不同的浏览器它的CSS默认值不同。

24、CSS选择符命名

       规范的命名也是web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义两个 div ，一个id

命名为“div1”，另外一个命名为“news”，肯定第二个比较容易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效

率。为了达到这种效果我们就要规范化命名（语义化命名）！

      关于CSS命名法，和其他的程序命名差不多，主要有三种：驼峰，帕斯卡，匈牙利法。

驼峰命名法：除第一个单词首字母小写外，其余所有单词首字母都大写。例如：#headerBlock, .navMenuRedButton

帕斯卡命名法：与驼峰相似，区别就是所有单词首字母都大写。例如：#HeaderBlock, .NavMenuRedButton

匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀。例如：#head_navigation, .red_navMenuButton

前两种比较常用，其实CSS命名就一个原则"容易理解，方便协同工作"。

      页面模块的常用CSS命名

      头：header                           热点：hot

      内容：content                       新闻：news

      尾：footer                             下载：download

      导航：nav                             广告：banner

      侧栏：sidebar                      页面主题：main

      栏目：column                      子导航：subnav

      左中右：left center right      子菜单：submenu

      登录条：loginbar                 版权：copyright

      标志：logo                          友情链接：friendlinks

     页面外围控制整体布局宽度：wrapper       菜单：menu

25、CSS盒子模型

      1)、W3C组织建议把所有网页上的对象都放在一个盒子(box)中----盒子模型

      2)、设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层<div>。

      3)、盒子模型主要定义四个区域：内容(content)、填充(padding)、边框(boder)和边界(margin)。

            a、盒子的内容 content

            b、盒子的边框 border

            c、盒子的边框与内容之间的距离称为--padding，内边框(内部丁)

           d、多个盒子存在，盒子与盒子之间的距离称为边界--nargin，外边距(外补丁)

      4)、这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内部丁

      5)、整个盒子模型在页面中所占的宽度是由：左边界+左边框+左填充+内容+右填充+右边框+右边界组成

26、CSS盒子的相关属性

      1)、内容属性：内容本身的宽=width，内容本身的高=height

      2)、内填充属性：内容与边界之间的距离 padding

          **在定义盒子的宽度时，要考虑到内填充、边框、边界的存在。如果增加了内填充，整个盒子的宽度值要在减去增加的内填充

      的值。

      CSS控制元素的尺寸

            功能                                                         语法

            设置元素宽度                                           width:100px;

            设置元素告诉                                           height:100px;

            设置元素某一个方向外边距                      margin-top/right/bottom/left:10px;

            通知参数个数不同来设置元素的外边距    margin:10px; 上下左右4个方向

                                                                             margin:10px 20px; 上下  左右

                                                                             margin:10px 20px 30px; 上  左右  下

                                                                             margin:10px 20px 30px 40px;上  下  左  右

           设置元素的内边距                                     padding:上  右  下  左

      CSS控制边框属性

           功能                                                          语法

           设置边框粗细                                            border-top-width:12px;

           设置边框样式                                            border-top-style:solid[实线] dashed[虚线]

           设置边框颜色                                            border-top-color:#00000

           设置某一边框属性的简捷方式                   border-边框位置:线宽 线型 颜色

           设置某一元素四条边框属性的简捷方式[仅限于四条边框属性完全相同]       border:线宽 线型 颜色

      边框属性说明：

           CSS语法：border:border-width || border-style || border-color

                  根据语法，推理出它的使用方法：

                      如果只写border，则后面要跟着的是，三个不同的子属性，第一个  粗细   第二个 样式  第三个  颜色

           边框样式：粗细为两个像素   实线  蓝色

            border：2px   solid   blue

            padding：参数简写方式

                         如果一个参数时：表示上 右 下 左 四个方向

                                padding:20px;

                         如果两个参数时：第一个参数表示上下，第二个表示左右

                                 padding:20px 50px;

                         如果三个参数时：第一个参数表示上，第二个表示左右，第三个表示下

                                  padding:20px 30px 50px;

                        总结：padding参数中，如果没有值，就去对面找

27、注意：在使用外边距，要注意浏览器的兼容性。除了只为0的情况下，所有的非零的值后面都要加单位。

       由于各个浏览器存在着，内外边距的默认值，而且还不同。我们需要将所有浏览器的默认内外边距，都从零开始计算。为了提

高效率，用到哪些元素，就把哪些元素的默认值归零。

      CSS属性，虽然有继承的特点，但是并不是所有的属性都有继承。

28、关于列表的属性：（存在兼容性问题，一般：list-style:none 不要列表符号）

list-style：list-style-image---列表的图片

                 list-style-postion---列表符号位置

                 list-style-type---列表的样式

29、CSS小技巧

a、让盒子，水平居中。将对象的左右边界设置为auto；

b、让盒子中的内容垂直居中，设置行高=盒子的高度，但是不要换行。

30、CSS中的元素分类

       我们在布局页面的时候，会将HTML标签（元素）分成两种，块状元素和内联元素（我们平时用到的标签div和p就是块状元素，

链接标签a 就是内联元素），可以通过CSS修改元素的类型。

      a、块状元素：{display:block}

                  一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)和高度

           (height)起作用。常见块状元素为div、p、body、h1~h6等。（块状元素很霸道：能设宽和高！独占一行！）

      b、内联元素{display:inline}

                内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)和高度(height)不起作用。

            常见内联元素为a、em、span等。

            内联元素很温柔：

                   不能设宽和高！

                  不影响换行！

              （就像橡皮筋包住字）

31、CSS控制背景

        功能                              语法

        背景                              background:颜色 图片 平铺方式 固定方式 位置

        背景颜色                       background-color:#CCC

        背景图像                       background-image:url(背景图片的位置及全称)

        背景图像的重复方式     background-repeat:[repeat、no-repeat、repeat-x、repeat-y]

        背景图像的位置            background-position:top[left center right]   center[left center right] bottom[left center right]，x坐标 y坐标

                                                                              [第一个值水平位置，第二个值是垂直位置。左上角是0 0。单位是像素(0px 0px)]

        背景图像的依附方式     background-attachment:[scroll、fixed]

      a、背景图片默认情况下是进行水平与垂直方向上的平铺。

      b、默认背景图片在元素的左上角显示

      c、背景图片的依附方式：固定的含义，将突破固定在屏幕（可视区域）的某个位置。兼容性 IE6只有html与body两个元素支持

           这个属性值。

32、CSS Sprites（CSS精灵）

      制作翻转按钮效果的两种方法：

      第一种：我们需要两张图片，一张正常状态的图片，一张鼠标经过图片，做这种按钮思路就是，设置链接 a 的背景为第一张图片

                    a:hover 的背景为第二张图片

      第二种：将上面两张图片合并成一张图片、设置成按钮的背景，然后将 a:hover 的背景向上移动相应的像素即可

      CSS精灵技术：主要是为了减少http请求。

33、CSS布局方式：

      1）、默认文档流方式

               以默认的html元素的结构顺序显示

      2）、浮动布局方式

               通过设置html元素的float属性显示

      什么是浮动？浮动（float）是CSS实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。浮动是将块元

素，霸道属性独占一行的行为取消，允许别人与他一行。浮动其实是这个块从原来的文档流模式中分离出来，它后面的对象，就视

它不存在。兼容性：当IE6父元素中的子元素的高度超过了父元素的高度，IE6 默认会把父元素的高度自动增加。

      值：

          none：不浮动

          left：对象向左浮动，而后面的内容流向对象的右侧

          right：对象向右浮动，而后面的内容流向对象的左侧

     3）、定位布局方式

           通过设置html元素的position属性显示

34、常用的布局效果，例如，一行并列式，就是在一行中显示几个块元素。

35、ul与li 默认情况下是块元素，要想让他们在一行显示，就要用到浮动。