美文网首页
HTML 5_CSS 3_JavaScript讲义（五）-级联样

HTML 5_CSS 3_JavaScript讲义（五）-级联样

作者: android小菜鸡一枚 | 来源:发表于2017-12-12 09:40 被阅读0次

    （1）.CSS样式单基本使用

    1.引入外部样式文件：

    <link type="text/css" rel="stylesheet" href="CSS样式文件的URL">

    2.导入外部样式单：

    <style type="text/css">
    @import "outer.css"
    @import url("mycss.css")
    </style>

    3.使用内部CSS样式:

    <style type="text/css">
    样式单文件定义
    </style>

    <!DOCTYPE html>
<html>
<head>
  <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
  <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
  <title> 内部样式单 </title>
  <style type="text/css">
      table {
          background-color: #003366;
      }
      td {
          background-color: #FFFFFF;
          font-family: "楷体_GB2312";
          font-size: 20pt;
          text-shadow: -8px 6px 2px #333;
      }
      .title {
          font-size: 18px;
          color: #60C;
          height: 30px;
          width: 200px;
          border-top: 3px solid #CCCCCC;
          border-left: 3px solid #CCCCCC;
          border-bottom: 3px solid #000000;
          border-right: 3px solid #000000;
      }
  </style>
</head>
<body>
<div class="title">
疯狂Java体系图书：
</div><hr />
<table>
  <tr>
      <td>疯狂Java讲义</td><td>轻量级Java EE企业应用实战</td>
  </tr>
  <tr>
      <td>疯狂Android讲义</td><td>经典Java EE企业应用实战</td>
  </tr>
  <tr>
      <td>疯狂Ajax讲义</td><td>疯狂XML讲义</td>
  </tr>
</table>
</body>
</html>
    image.png

    4.使用内联样式

    style="property1:value1;property2:value2;"

    （2）CSS选择器

    1.元素选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 元素选择器 </title>
    <style type="text/css">
        /* 定义对div元素起作用的CSS样式 */
        div{
            background-color: grey;
            font: italic normal bold 14pt normal 楷体_GB2312;
        }
        /* 定义对p元素起作用的CSS样式 */
        p{
            background-color: #444;
            color:#fff;
            font: normal small-caps bold 20pt normal 宋体;
        }
    </style>
</head>
<body>
<div>div内的文字</div>
<p>p内的文字</p>
</body>
</html>
    元素选择器

    2.属性选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 属性选择器 </title>
    <style type="text/css">
    /* 对所有div元素都起作用的CSS样式 */
    div {
        width:300px;
        height:30px;
        background-color:#eee;
        border:1px solid black;
        padding:10px;
    }
    /* 对有id属性的div元素起作用的CSS样式 */
    div[id] {
        background-color:#aaa;
    }
    /* 对有id属性值包含xx的div元素起作用的CSS样式 */
    div[id*=xx] {
        background-color:#999;
    }
    /* 对有id属性值以xx开头的div元素起作用的CSS样式 */
    div[id^=xx] {
        background-color:#555;
        color:#fff;
    }
    /* 对有id属性值等于xx的div元素起作用的CSS样式 */
    div[id=xx] {
        background-color:#111;
        color:#fff;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx子字符串的div元素</div>
<div id="xxyy">id属性值以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>
    属性选择器

    3.ID选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>ID选择器</title>
    <style type="text/css">
    /* 对所有div元素都起作用的CSS样式 */
    div {
        width:200px;
        height:30px;
        background-color:#ddd;
        padding:3px;
    }
    /* 对id为xx的元素起作用的CSS样式 */
    #xx {
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>
    ID选择器

    4.class选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>class选择器测试</title>
    <style type="text/css">
    /* 对所有class为myclass的元素都起作用的CSS样式 */
    .myclass {
        width:240px;
        height:40px;
        background-color:#dddddd;
    }
    /* 对class为myclass的div元素起作用的CSS样式 */
    div.myclass {
        border:2px dotted black;
        background-color:#888888;
    }
    </style>
</head>
<body>
<div class="myclass">class属性为myclass的div元素</div>
<p class="myclass">class属性为myclass的p元素</p>
</body>
</html>
    class选择器

    5.包含选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>包含选择器测试</title>
    <style type="text/css">
    /* 对所有的div元素起作用的CSS样式 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* 对处于div之内、且class属性为a的元素起作用的CSS样式*/
    div .a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div><section><div class="a">处于div之内且class属性为a的元素</div></section></div>
<p class="a">没有处于div之内、但class属性为a的元素</p>
</body>
</html>
    包含选择器

    6.子选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 子选择器 </title>
    <style type="text/css">
    /* 对所有的div元素起作用的CSS样式 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* 对处于div之内、且class属性为a的元素起作用的CSS样式*/
    div>.a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div><p class="a">class属性为a、且是div子节点的元素</p></div>
<div><section><p class="a">class属性为a、且处于div内部的元素</p></section></div>
</body>
</html>
    子选择器

    7.兄弟选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> E~F伪类选择器 </title>
    <style type="text/css">
        /* 匹配id为android的元素后面、class属性为long的兄弟节点 */
        #android ~ .long{
            background-color: #00FF00;
        }
    </style>
</head>
<body>
<div>
    <div>疯狂Java讲义</div>
    <div class="long">轻量级Java EE企业应用实战</div>
    <div id="android">疯狂Android讲义</div>
    <p class="long">经典Java EE企业应用实战</p>
    <div class="long">JavaScript权威指南</div>
</div>
</body>
</html>
    兄弟选择器

    8.组合选择器

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 选择器组合 </title>
    <style type="text/css">
    /* div元素、class属性为a的元素、id为abc的元素都起作用的CSS样式 */
    div,.a,#abc {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<p class="a">class属性为a的元素</p>
<section id="abc">id为abc的元素</section>
</body>
</html>
    组合选择器

    （3）伪元素选择器

    :first-letter

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :first-letter </title>
    <style type="text/css">
        span {
            display:block;
        }
        /* span元素里第一个字母加粗、变蓝
        由于span是内联元素，因此需要先把span的display设为block
        */
        span:first-letter{
            color:#f00;
            font-size:20pt;
        }
        /* section元素里第一个字母加粗、变蓝 */
        section:first-letter{
            color:#00f;
            font-size:30pt;
            font-weight:bold;
        }
        /* p元素里第一个字母加粗、变蓝 */
        p:first-letter{
            color:#00f;
            font-size:40pt;
            font-weight:bold;
        }
    </style>
</head>
<body>
<span>abc</span>
<section>其实我是一个程序员</section>
<p>疯狂Java讲义</p>
</body>
</html>
    first-letter

    :first-line

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :first-line </title>
    <style type="text/css">
        span {
            display:block;
        }
        /* span元素里第一行文字的字体加大、变红
        由于span是内联元素，因此需要先把span的display设为block
        */
        span:first-line{
            color:#f00;
            font-size:20pt;
        }
        /* section元素里第一行文字的字体加大、变蓝 */
        section:first-line{
            color:#00f;
            font-size:30pt;
        }
        /* p元素里第一行文字的字体加大、变蓝 */
        p:first-line{
            color:#00f;
            font-size:30pt;
        }
    </style>
</head>
<body>
<span>abc<br/>xyz</span>
<section>去年今日此门中，<br/>
人面桃花相印红。</section>
<p style="width:160px">疯狂Java讲义</p>
</body>
</html>
    first-line

    :before
    :after

    1.内容相关的属性

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> content </title>
    <style type="text/css">
        /* 指定对于div元素内部的前端插入content属性对应的内容 */
        div>div:before{
            content: 'CrazyIt:';
            color:blue;
            font-weight:bold;
            background-color:gray;
        }
    </style>
</head>
<body>
    <div>
    <div>疯狂Java讲义</div>
    <div>疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    </div>
</body>
</html>

    2.插入图像

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> content </title>
    <style type="text/css">
        /* 指定对于div元素内部的尾端插入content属性对应的内容 */
        div>div:after{
            content: url("wjc.gif");
        }
    </style>
</head>
<body>
    <div>
    <div>疯狂Java讲义</div>
    <div>疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    </div>
</body>
</html>
    image.png

    3.只插入部分元素

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> new document </title>
    <style type="text/css">
        /* 指定对于class属性为no的div元素内部的尾端插入content属性对应的内容 */
        div>div.no:after{
            content: url("buy.gif");
        }
    </style>
</head>
<body>
    <div>
    <div class="no">疯狂Java讲义</div>
    <div class="no">疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    </div>
</body>
</html>
    image.png

    4.配合quotes属性执行插入

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加符号 </title>
    <style type="text/css">
        /* 定义open-quote为<<，close-quote为>> */
        div>div{
            quotes: "<<" ">>";
        }
        /* 指定为div的子div的前端插入open-quote */
        div>div:before{
            content: open-quote;
        }
        /* 指定为div的子div的尾端插入close-quote */
        div>div:after{
            content: close-quote;
        }
    </style>
</head>
<body>
    <div>
    <div>疯狂Java讲义</div>
    <div>疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    </div>
</body>
</html>
    image.png

    5.配合counter-increment属性添加编号

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加编号 </title>
    <style type="text/css">
        /* 为div的子div元素定义了一个计数器：mycounter */
        div>div{
            counter-increment: mycounter;
        }
        /* 在div的子div元素的前端插入mycounter计数器和一个点  */
        div>div:before{
            content: counter(mycounter) '.';
            font-size: 20pt;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
    <div>疯狂Java讲义</div>
    <div>疯狂Android讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    </div>
</body>
</html>
    image.png

    （4）CSS3.0新增的伪类选择器

    1.结构性伪类选择器

    :root 匹配HTML文档的根元素<html>

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :root伪选择器 </title>
    <style type="text/css">
        :root {
            background-color: #ccc;
        }
        body {
            background-color: #888;
        }
    </style>
</head>
<body>
疯狂Java讲义<br/>轻量级Java EE企业应用实战<br/>
疯狂Ajax讲义<br/>疯狂XML讲义<br/>
经典Java EE企业应用实战<br/>疯狂Android讲义<br/>
</body>
</html>
    image.png

    :first-child 父元素的第一个子节点
    :last-child 父元素的最后一个子节点
    :nth-child 父元素的第n个子节点
    :nth-last-child 父元素倒数第n个子节点
    :only-child 父元素唯一的子节点

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :child </title>
    <style type="text/css">
        /* 定义对作为其父元素的第一个子节点的li元素起作用的CSS样式 */
        li:first-child {
            border: 1px solid black;
        }
        /* 定义对作为其父元素的最后一个子节点的li元素起作用的CSS样式 */
        li:last-child {
            background-color: #aaa;
        }
        /* 定义对作为其父元素的第2个子节点的li元素起作用的CSS样式 */
        li:nth-child(2){
            color: #888;
        }
        /* 定义对作为其父元素的倒数第2个子节点的li元素起作用的CSS样式 */
        li:nth-last-child(2){
            font-weight: bold; 
        }
        /* 定义对作为其父元素的唯一的子节点的span元素起作用的CSS样式 */
        span:only-child {
            font-size: 30pt;
            font-family: "隶书";
        }
    </style>
</head>
<body>
<ol>
    <li>www.crazyit.org</li>
    <li>www.fkjava.org</li>
    <li>www.facejava.org</li>
    <li>疯狂Java联盟</li>
    <li>疯狂软件教育中心</li>
</ol>
<ul>
    <li id="java">疯狂Java讲义</li>
    <li id="javaee">轻量级Java EE企业应用实战</li>
    <li id="ajax">疯狂Ajax讲义</li>
    <li id="xml">疯狂XML讲义</li>
    <li id="ejb">经典Java EE企业应用实战</li>
    <li><span id="android">疯狂Android讲义</span></li>
</ul>
<span>疯狂Java联盟</span>
</body>
</html>
    image.png

    :nth-child(odd/even)
    :nth-last-child(odd/even)

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :nth-child </title>
    <style type="text/css">
        /* 定义对作为其父元素的奇数个子节点的li元素起作用的CSS样式 */
        li:nth-child(odd) {
            margin: 10px;
            border: 2px dotted black;
        }
        /* 定义对作为其父元素的偶数个子节点的li元素起作用的CSS样式 */
        li:nth-child(even) {
            padding: 4px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<ul>
    <li id="java">疯狂Java讲义</li>
    <li id="javaee">轻量级Java EE企业应用实战</li>
    <li id="ajax">疯狂Ajax讲义</li>
    <li id="xml">疯狂XML讲义</li>
    <li id="ejb">经典Java EE企业应用实战</li>
    <li id="android">疯狂Android讲义</li>
</ul>
</body>
</html>
    image.png

    :nth-child(xn+y)
    :nth-last-child(xn+y)

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> child </title>
    <style type="text/css">
        /* 定义对作为其父元素的倒数第3n+1个（1、4、7）子节点
            的li元素起作用的CSS样式 */
        li:nth-last-child(3n+1) {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<ul>
    <li id="java">疯狂Java讲义</li>
    <li id="javaee">轻量级Java EE企业应用实战</li>
    <li id="ajax">疯狂Ajax讲义</li>
    <li id="xml">疯狂XML讲义</li>
    <li id="ejb">经典Java EE企业应用实战</li>
    <li id="android">疯狂Android讲义</li>
</ul>
</body>
</html>
    image.png

    :first-of-type 同级元素第一个
    :last-of-type 同级元素最后一个
    :nth-of-type 同级元素第n个
    :nth-last-of-type 同级元素倒数第n个
    :only-of-type 同级元素唯一一个元素

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :type </title>
    <style type="text/css">
        span {
            display: block;
            padding: 5px;
        }
        /* 匹配span选择器，且是与它同类型、同级的兄弟元素中的第一个的CSS样式 */
        span:first-of-type{
            border: 1px solid black;
        }
        /* 匹配span选择器，且是与它同类型、同级的兄弟元素中的最后一个的CSS样式 */
        span:last-of-type {
            background-color: #aaa;
        }
        /* 匹配span选择器，且是与它同类型、同级的兄弟元素中的第2个的CSS样式 */
        span:nth-of-type(2){
            color: #888;
        }
        /* 匹配span选择器，且是与它同类型、同级的兄弟元素中的倒数第2个的CSS样式 */
        span:nth-last-of-type(2){
            font-weight: bold; 
        }
    </style>
</head>
<body>
<div>www.crazyit.org</div>
<span>www.fkjava.org</span>
<span>www.facejava.org</span>
<span>疯狂Java联盟</span>
<span>疯狂软件教育中心</span>
<hr/>
<div>
    <div id="java">疯狂Java讲义</div>
    <div id="javaee">轻量级Java EE企业应用实战</div>
    <span id="ajax">疯狂Ajax讲义</span>
    <span id="xml">疯狂XML讲义</span>
    <span id="ejb">经典Java EE企业应用实战</span>
    <span id="android">疯狂Android讲义</span>
    <div id="struts">Struts 2.1权威指南</div>
</div>
</body>
</html>
    image.png

    :nth-of-type(odd/even)
    :nth-last-of-type(odd/even)
    :nth-of-type(xn+y)
    :nth-last-of-type(xn+y)

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :nth-of-type </title>
    <style type="text/css">
        span {
            display: block;
            padding: 2px;
        }
        /* 匹配span选择器，且是与它同类型、同级的兄弟元素中
            的2n+1（1、3、5...）个的CSS样式 */
        span:nth-of-type(2n+1){
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div>
    <div id="java">疯狂Java讲义</div>
    <div id="javaee">轻量级Java EE企业应用实战</div>
    <span id="ajax">疯狂Ajax讲义</span>
    <span id="xml">疯狂XML讲义</span>
    <span id="ejb">经典Java EE企业应用实战</span>
    <span id="android">疯狂Android讲义</span>
    <span>疯狂Java联盟</span>
    <div id="struts">Struts 2.1权威指南</div>
</div>
</body>
</html>
    image.png

    :empty 要求元素是空元素，不能包含子节点，也不能包含文本内容，空格也不允许

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :empty </title>
    <style type="text/css">
        /* 定义对空元素起作用的CSS样式 */
        :empty {
            border: 1px solid black;
            height: 60px;
        }
    </style>
</head>
<body>
<img src="wjc.gif" alt="crazyit.org"/>
<div></div>
<div> </div>
</body>
</html>
    image.png

    2.UI元素状态伪类选择器

    ：hover
    : active
    :focus
    :enabled
    :disabled
    :checked
    :default

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> UI元素状态的伪类选择器 </title>
    <style type="text/css">
        td {
            border:1px solid black;
            padding:4px;
        }
        /* 为处于鼠标悬停状态的表格行定义CSS样式 */
        tr:hover {
            background-color: #aaa;
        }
        /* 为处于激活状态的input元素定义CSS样式 */
        input:active {
            background-color: blue;
        }
        /* 为得到焦点的任意元素定义CSS样式 */
        :focus {
            text-decoration: underline;
        }
        /* 为可用的任意元素定义CSS样式 */
        :enabled{
            font-family: "黑体";
            font-weight: bold;
            font-size:14pt;
        }
        /* 为不可用的任意元素定义CSS样式 */
        :disabled{
            font-family: "隶书";
            font-size:14pt;
        }
        /* 为处于勾选状态的任意元素定义CSS样式 */
        :checked {
            outline: red solid 5px;
        }
        /* 为页面打开时处于勾选状态的任意元素定义CSS样式 */
        :default {
            outline: #bbb solid 5px;
        }
    </style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
    <tr>
        <td>疯狂Java讲义</td><td>109</td>
    </tr>
    <tr>
        <td>轻量级Java EE企业应用实战</td><td>89</td>
    </tr>
    <tr contentEditable="true">
        <td>疯狂Android讲义</td><td>89</td>
    </tr>
</table>
<button disabled>不可用的按钮</button>
<input type="text" disabled value="不可用的文本框"/>
<button>可用的按钮</button>
<input type="text" value="可用的文本框"/>
男：<input type="radio" value="male" name="gender"/>
女：<input type="radio" value="female" name="gender"/>
未知：<input type="radio" checked value="unknown" name="gender"/>
</body>
</html>
    image.png

    :read-only
    :read-write

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> UI元素状态的伪类选择器 </title>
    <style type="text/css">
        td {
            border:1px solid black;
            padding:4px;
        }
        /* 为处于只读状态的元素设置背景色 */
        :read-only {
            background-color: #eee;
        }
        /* 为处于读写状态的元素设置背景色 */
        :read-write {
            background-color: #8e8;
        }
        /* 专为基于Gecko内核浏览器指定CSS样式：
        为处于只读状态的元素设置背景色 */
        :-moz-read-only {
            background-color: #eee;
        }
        /* 专为基于Gecko内核浏览器指定CSS样式：
        为处于读写状态的元素设置背景色 */
        :-moz-read-write {
            background-color: #8e8;
        }
    </style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
    <tr>
        <td>疯狂Java讲义</td><td>109</td>
    </tr>
    <tr>
        <td>轻量级Java EE企业应用实战</td><td>89</td>
    </tr>
    <tr contentEditable="true">
        <td>疯狂Android讲义</td><td>89</td>
    </tr>
</table>
<input type="text" readonly value="只读的文本框"/>
<input type="text" value="可读写的文本框"/>
</body>
</html>
    image.png

    3.浏览器专属的属性

    -ms- Microsoft
    -moz- Mozilla
    -o- Opera
    -webkit- Webkit
    ::selection 用于匹配指定元素中被选中的内容

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> UI元素状态的伪类选择器 </title>
    <style type="text/css">
        td {
            border:1px solid black;
            padding:4px;
        }
        /* 为有内容被选择的元素设置CSS样式 */
        ::selection {
            background-color: red;
            color: white;
        }
        /* 专为基于Gecko内核浏览器指定CSS样式：
        为有内容被选择的元素设置CSS样式 */
        ::-moz-selection {
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
    <tr>
        <td>疯狂Java讲义</td><td>109</td>
    </tr>
    <tr>
        <td>轻量级Java EE企业应用实战</td><td>89</td>
    </tr>
    <tr contentEditable="true">
        <td>疯狂Android讲义</td><td>89</td>
    </tr>
</table>
<input type="text" readonly value="只读的文本框"/>
<input type="text" value="可读写的文本框"/>
</body>
</html>
    image.png

    :target 要求元素必须是命名锚点的目标

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :target </title>
    <style type="text/css">
        :target{
            background-color: #ff0;
        }
    </style>
</head>
<body>
<p id="menu">
    <a href="#java">疯狂Java讲义</a> | 
    <a href="#ee">轻量级Java EE企业应用实战</a> | 
    <a href="#android">疯狂Android讲义</a> | 
    <a href="#ejb">经典Java EE企业应用实战</a>
</p>
<div id="java">
    <h2>疯狂Java讲义</h2>
    <p>本书详细介绍了Java语言各方面的内容。</p>
</div>
<div id="ee">
    <h2>轻量级Java EE企业应用实战</h2>
    <p>本书详细介绍Struts 2、Spring 3、Hibernate三个框架整合开发的知识</p>
</div>
<div id="android">
    <h2>疯狂Android讲义</h2>
    <p>本书详细介绍了Android应用开发的知识。</p>
</div>
<div id="ejb">
    <h2>经典Java EE企业应用实战</h2>
    <p>本书详细介绍JSF 、EJB 3、JPA等Java EE相关的知识</p>
</div>
</body>
</html>
    image.png

    :not

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :child </title>
    <style type="text/css">
        li:not(#ajax) {
            color: #999;
            font-weight: bold;
        }
    </style>
</head>
<body>
<ul>
    <li id="java">疯狂Java讲义</li>
    <li id="javaee">轻量级Java EE企业应用实战</li>
    <li id="ajax">疯狂Ajax讲义</li>
    <li id="xml">疯狂XML讲义</li>
    <li id="android">疯狂Android讲义</li>
</ul>
</body>
</html>
    image.png

    （5）.在脚本中修改样式

    obj.style.属性名 = 属性值
    obj.className = class选择器

    1.随机改变页面的背景色

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>随机改变页面背景色</title>
    <script type="text/javascript">
    function changeBg()
    {
        // 将背景色的值定义成空字符串
        var bgColor="";
        // 循环6次，生成一个随机的六位数
        for (var i = 0 ; i < 6 ; i++)
        {
            bgColor += "" + Math.round(Math.random() * 9);
        }
        // 将随机生成的背景颜色值赋给页面的背景色。
        document.body.style.backgroundColor="#" + bgColor;
    }
    // 为页面的单击事件绑定事件处理函数
    document.onclick = changeBg;
    </script>
</head>
<body>
</body>
</html>

    2.动态增加立体效果

    <!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>立体效果</title>
    <script type="text/javascript">
    function chg()
    {   
        document.getElementById("up").className="solid";
    }
    </script>
    <style type="text/css">
    /* 对所有class属性值为solid的元素起作用的CSS定义 */
    .solid {
        width:160px;
        text-align:center;
        border-right: #222 3px solid; 
        border-top: #ddd 3px solid; 
        border-left: #ddd 3px solid; 
        border-bottom: #222 3px solid;
        background-color: #ccc;
    }
    </style>
</head>
<body>
    <input type="button" onclick='chg();' value="增加立体效果" />
    <div id="up">有立体效果的层</div>
</body>
</html>
    image.png

    相关文章

      网友评论

          本文标题：HTML 5_CSS 3_JavaScript讲义（五）-级联样

          本文链接：https://www.haomeiwen.com/subject/lfbiixtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|HTML 5_CSS 3_JavaScript讲义（五）-级联样|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！