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 默认情况下是块元素,要想让他们在一行显示,就要用到浮动。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。