zoukankan      html  css  js  c++  java
  • H5-基础-day01

    类选择器和ID选择器
     

    相同点:可以应用于任何元素
    不同点:

    1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
    2.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表
    <span class="stress bigsize> 正确
    <p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p> 错误
     

    请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
    >作用于元素的第一代后代,空格作用于元素的所有后代
     

    通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

    * {color:red;}
     

    更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

    a:hover{color:red;}
    
    
     
    上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
     

    CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。
    p{color:red;}
    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
     
    可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
    p{border:1px solid red;}
    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
    在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。

    关于权值:
              标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 — 浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
    p{color:red;} /*权值为1*/
    p span{color:green;} /*权值为1+1=2*/
    .warning{color:white;} /*权值为10*/
    p span.warning{color:purple;} /*权值为1+1+10=12*/
    #footer .note p{color:yellow;} /*权值为100+10+1=111*/
     
    我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决
    p{color:red!important;}
    p{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

    每个中文字或者字母的字间距

    /*h1{*/
    /*    letter-spacing:50px;*/
    /*}*/
    单词之间的字间距,不是每个字母,中文无效
    h1{
        word-spacing:50px;
    }

     
    元素分类
    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素内联元素(又叫行内元素)内联块状元素
    常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
     
    块级元素特点:
    1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
    2、元素的高度、宽度、行高以及顶和底边距都可设置。
    3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
     
    常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
              a在默认的时候是内联元素,内联元素是不可以设置的。
    内联块状元素(inline-block就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。
    inline-block 元素特点:
     
    1、和其他元素都在一行上;
    2、元素的高度、宽度、行高以及顶和底边距都可设置
    常用的内联块状元素有:<img>、<input>
     

    设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

    a{display:block;}
     

    盒模型
    div{
        border:2px  solid  red;
    }
    div{
        border-2px;
        border-style:solid;
        border-color:red;
    }
     
    1、border-style(边框样式)常见样式有:
    dashed(虚线)| dotted(点线)| solid(实线)。
     
    2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
    border-color:#888;//前面的井号不要忘掉。
     
    3、border-width(边框宽度)中的宽度也可以设置为:
    thin | medium | thick(但不是很常用),最常还是用象素(px)

    //设置4个边

    div{border-bottom:1px solid red;}
    border-top:1px solid red;
    border-right:1px solid red; 
    border-left:1px solid red;

    padding和margin的区别,padding在边框里,margin在边框外。
     

    层模型--绝对定位
    如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口
     
     
    盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左
    margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
    margin:10px 20px 30px 20px;
    可缩写为:
    margin:10px 20px 30px;
    padding、border的缩写方法和margin是一致的。
     
    颜色值缩写
    当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
    p{color: #336699;}
    p{color: #369;}
     

    字体缩写

    网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:

    body{
        font-style:italic;
        font-variant:small-caps; 
        font-weight:bold; 
        font-size:12px; 
        line-height:1.5em; 
        font-family:"宋体",sans-serif;
    }
    这么多行的代码其实可以缩写为一句:
    body{
        font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
    }

    1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

    2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
    body{
        font:12px/1.5em  "宋体",sans-serif;
    }
    只是有字号、行间距、中文字体、英文字体设置。
  • 相关阅读:
    打造自己的图表控件5
    打造自己的图表控件4
    打造自己的图表控件3
    打造自己的图表控件2
    打造自己的图表控件1
    仿《雷霆战机》飞行射击手游开发--子弹、跟踪导弹和激光
    仿《雷霆战机》飞行射击手游开发--新手引导
    仿《雷霆战机》飞行射击手游开发--防破解
    仿《雷霆战机》飞行射击手游开发--飞机(含源码库地址)
    仿《雷霆战机》飞行射击手游开发--GameObject
  • 原文地址:https://www.cnblogs.com/somethingWithiOS/p/6542087.html
Copyright © 2011-2022 走看看