zoukankan      html  css  js  c++  java
  • 任务二:1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系

    1、选择器类型

    标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器

    1、同胞选择器

    相邻同胞标签: 

    h2 + p{ color:red; }

    选择每个h2标签后面的直接相邻的段落

    (其中空格可选。(可选,就是可有可无,意思都一样))

    同胞标签:

    h2 ~ p{ color:red; }

    选择属于h2同胞标签的所有p标签(和h2同一级的所有p)

     (~表示选择h2的所有同胞标签。其中空格可选)

    2、属性选择器

    img[title]  如

    <a href="#" class="sinaweibo"><img src="images/sina.png"></a>的css可以这样

    a[ href=”#”]{ color:red; }

    a[href^=”fttp://”]  ^表示以……开始

    a[href$=”.pdf”]  $表示以……结束

    2、    组合选择器 

    (组合选择了不同类型的选择器,如下面的组合使用类选择器和类型选择器)

    .architec .project em{ color:red; }  表示值选择在architec 这个类下面的project类中的 em元素

    3、    子选择器

       body > h1 将选择body标签子标签里面的所有h1标签(注意子标签的定义)

    (伪类选择器)

    :first-child

    :last-child

    :nth-child (有着强大的功能)可以将表格隔行设置不同的样式,可以设置不同列表项目的不同样式

    设置表格行颜色交替

    tr: nth-child(odd){ background-color: #993366; }  (偶数行)

    tr: nth-child(even){ background-color: #993366; }  (奇数行)

    tr: nth-child(3n+2){ background-color: #993366; }  (从第2个元素开始,没3个元素选择一次)

     

    2、链接状态的顺序

    链接可能出现多种状态,并且晚出现的会覆盖前面的规则所以要注意多种状态出现的顺序,按照下面的顺序规则:link visited focus hover active  (缩写为LVFHA)

    未完成任务:(周四完成,并更新上来)

    1、  盒模型在IE goole等不同浏览器的使用和区别

    2、  浮动的用法,原理

     (今天没完成。在改第一个页面。2016-01-07)

    (补 之前没完成的任务  2016-01-17)

    1 、盒模型在IE 等不同浏览器的使用和区别

    (图片传不上来)

    IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度,所以在ie中盒子会比标准的多两个像素。

    2、基本的浮动原理

    任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动,事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。
    任何申明为 float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。

    浮动"从流程中被移除出来", 但是与绝对位置的元素不同,浮动是在他们前面的最后一个块元素之后直接被显示出来(就像盒子一样)。如果该浮动是在一个“行块”中,该浮动的上边界被放置在行块顶部的水平上。当除此以外,浮动与绝对元素相似,原先的块盒会完全忽略浮动。那些静态的块盒知识保持一个接一个地”跟随“,就好像没有浮动不在那里一样。

  • 相关阅读:
    [bzoj1934][Shoi2007]Vote 善意的投票
    [bzoj1834][ZJOI2010]network 网络扩容
    [bzoj2127]happiness
    [bzoj3876][Ahoi2014]支线剧情
    [bzoj1927][Sdoi2010]星际竞速
    [bzoj3223]Tyvj 1729 文艺平衡树
    [bzoj3224]Tyvj 1728 普通平衡树
    FJOI2017 RP++
    [bzoj3529][Sdoi2014]数表
    异步ajax请求数据处理
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5107484.html
Copyright © 2011-2022 走看看