zoukankan      html  css  js  c++  java
  • css day1

    1.  插入样式表

          外部样式表

            <head>

            <link rel="stylesheet" href="xxx.css" type="text/css">

            </head>

          内部样式表

            <head>

              <style type="text/css">xxxx</style>

            </head>

          内联样式

            <a style="color:red">hi</a>

          优先级比较:外部样式表<内部样式表<内联样式表

    2.  选择器

          类选择器

            HTML  <div class="z"></div>

            css    .z{backgroundcolor:red}

          标签选择器

            HTML  <p></p>

            css    p{color:grey}

            调用了此css文件的网页在用到p的时候他的css样式都会得到继承

          id选择器

            HTML  <p id="select"></p>

            css    #select{color:green}

            id选择器在同一个页面内只能被使用一次,id是唯一的。

          派生选择器包括子选择器,后代选择器,相邻兄弟选择器

          

          子选择器

            HTML  <p><strong>haha</strong></p>

                 <p><em>lalala<strong>123</strong></em></p>

                 <p><em>wuwu</em><strong>233</strong></p>

            css    p>strong{color:red}

            此选择器代表strong的上一级必须是p才有效,两者之间不能穿插其他标签

            haha就具有效果,但是123就不具有效果,因为strong的上一级是em

            但是233还是具有效果,因为em和strong标签是同级的。

          

          后代选择器

            HTML  <p><em>haha</em></p>

            CSS   p em{color:red}

            此选择器只要是在p标签中的em都会具有效果,中间穿插其他标签也无妨。

          

          类选择器和ID选择器的派生选择器

            例如类选择器

            HTML  <div class="air><p>red</p></div>

            css    .air p{color:red}

            类名为 air 的比<p>更大的元素内部的p标签里都是红色,air可以使div也可以是其他标签的选择器。

            基于类被选择的元素

            HTML  <p class="ballon">hi</p>

            css    p.ballon{color:red}

  • 相关阅读:
    Row versus Set Processing, Surprise!(集合处理和单行处理数据的差异性)
    SVN导出增量包的方法
    Number of Digit One
    VPS+LNMP+WordPress搭建个人网站
    寻找最小的k个数(大顶堆方法)
    二叉搜索树转化为有序双向链表(C语言)
    LeetCode 345 Reverse Vowels of a String
    LeetCode 278 First Bad Version
    LeetCode 205 Isomorphic Strings
    LeetCode 88 Merge Sorted Array
  • 原文地址:https://www.cnblogs.com/swii/p/5312264.html
Copyright © 2011-2022 走看看