美文网首页
HTML5权威指南 | 第三部分 CSS篇

HTML5权威指南 | 第三部分 CSS篇

作者: 夏海峰 | 来源:发表于2018-11-14 11:41 被阅读13次

十六、理解CSS

CSS(Cascading Style Sheet, 层叠样式表)包含大量功能。W3C并不想创建一个单一标准,因此将CSS3分割成了多个模块,并允许每个模块根据自身需要进行更新。目前CSS3模块还没有达到标准化的最后阶段,主流浏览器在实现这些新特性时,为其添加了特有的浏览器前缀,如Chrome、Safari的 -webkit-,Opera的 -o-,Firefox的 -moz-,Internet Explorer的 -ms-。

CSS中的一个基本概念是盒模型(box model),可见元素在页面中占据一个矩形区域,该区域就是元素的盒子,它由外边距、边框、内边距和元素内容这4个部分组成。父元素的内容盒子,被称为子元素的块容器。

学习CSS的重点之一就是CSS选择器,灵活地使用CSS选择器是必须的。其次是数十个常用的CSS样式属性,包括边框和背景属性、盒模型属性、布局类属性、文本类属性、过渡动画变换属性等。如果你想在自己的项目中使用CSS特性,那么搞清楚这些CSS属性所定义的版本是非常有必要的,因为CSS3模块还不稳定,浏览器之间的实现并没有那么广泛。

十七、CSS选择器(上)

通配符选择器、元素选择器:

        * {
            border:thin black solid;
            padding: 4px;
            text-decoration: none;
        }
        a {
            font-size: 18px;
        }
        a.api {
            color: red;
        }

属性选择器:

        [href] {
            background-color: #eee;
        }
        [class~="class2"] {
            border: 2px solid red;
        }
        [lang|="en"] {
            padding: 10px;
        }

并集选择器:

        a, p, [class] {
            font-size: 20px;
            cursor: pointer;
        }

后代选择器:

        body span {
            display: block;
        }
        #mytable td{
            border: thin black solid;
            padding: 4px;
        }

子代选择器:

        body>table, tr>td{
            border: 2px solid red;
        }

相邻兄弟选择器

         table+div {
            width: 500px; height: 50px;
            background-color: red;
            margin-top: 20px;
            border: none;
         }

         table+div>div {
            display: inline-block;
            width: 50px; height: 20px;
            background-color: green;
            margin-left: 10px;
         }

伪元素选择器:

         p.text::first-line {
            background-color: grey;
            color: white;
         }
         p::first-letter {
            background-color: blue;
            color: white;
            border: thin black solid;
            padding: 4px;
         }

         .mi::before {
            content: "click me to ";
         }
         .mi::after {
            content: " !";
         }

CSS计数器:

         body {
            counter-reset: paracount 3;     /*计数器名称*/
         }
         p::before {
            content: counter(paracount) ". ";   /*要插入的内容*/
            counter-increment: paracount 2;     /*计数器的增量*/
         }

十八、CSS选择器(下)

匹配根元素:

        :root {
            border: thin red solid;
            padding: 4px;
        }

子元素选择器:

        body>p:first-child {
            border: thin blue solid;
            padding: 4px;
        }
        body>#box>span:first-child {
            color: red;
        }
        :last-child {
            font-size: 20px;
        }
        :only-child {
            background-color: grey;
        }

nth-child选择器:

        body>p:nth-child(3){
            color: red;
        }

UI伪类选择器:

        :enabled {
            padding: 10px;
            border: 1px solid yellow;
            display: inline-block;
            background-color: yellow;
        }
        :checked + span {
            background-color: red;
            color: white;
            padding: 5px;
            border: medium solid black;
        }
        :defalut {
            outline: medium solid red;
        }
        :invalid {
            outline: medium solid red;
        }
        :valid {
            outline: medium solid green;
        }
        :required {
            border: 5px solid #45ee80;
        }

动态伪类选择器:

        :link {
            text-decoration: none;
            color: red;
        }
        :visited {
            color: black;
        }
        p:hover {
            background-color: grey;
        }
        p:active {
            background-color: yellow;
        }

取反选择器:

        p:not([class]){
            font-size: 36px;
        }

        div:empty {
            width: 800px;
            height: 55px;
            margin: 20px auto;
            background-color: #aa5609;
        }
        :target {
            font-size: 80px;
        }

十九、边框与背景样式

边框样式:

    #pid {
        line-height: 5em;
        border-width:thick;
        border-style: inset;
        border-color:red;
        border-bottom-style: dashed;
        border-right: dashed thick red;
    }

圆角边框:

    #box {
        width: 200px; height: 50px;background-color: red;
        border-top-left-radius:5px 10px;
        border-radius:5px / 10px;
        border-radius:50% 20px 25% 5em / 25% 15px 40px 55%;
    }

图像边框:

    #box1 {
        width: 90px; height: 90px; background-color: red; padding: 20px;
        -webkit-border-image: url(images/bordergrid.png) 25/ 30px;
    }

图像背景:

    #box2 {
        width: 200px; height: 200px;
        background-color: lightgray;
        background-image: url(images/banana.png);
        background-size: 45px 60px;
        background-repeat:no-repeat;
        background-position: center;
    }
    body {
        background-image: url(images/triathlon.png);
        background-size: 800px 300px;
        background-repeat: no-repeat;
        /*background-position: center;*/
        background-attachment: fixed;
        background-position: 50px 100px;
    }

背景起始位置和裁剪:

    #box3 {
        width: 200px; height: 100px;
        background-color: red;
        padding: 50px;
        border: 10px black; margin: 20px;
        background-origin: border-box;
        background-clip: content-box;
    }

盒子阴影:

    #text {
        border:10px double red; padding: 25px;
        box-shadow: 5px 10px 10px 2px green , 10px 15px 20px 2px yellow; /*内阴影  外阴影*/
    }

轮廓样式:

    .p3 {
        width: 30%;
        padding: 5px;
        border: medium double black;
        background-color: lightgray;
        margin: 2px;
        float: left;
    }
    #ppp {
        outline: 20px solid red;
    }

在脚本中使用”轮廓“样式:

<script>
    var btns = document.querySelectorAll(".btn");
    var oP = document.getElementById("ppp");
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function(e){
            if(e.target.innerHTML == "Outline Off"){
                oP.style.outline = "none";
            }else if (e.target.innerHTML == "Outline On") {
                oP.style.outlineColor = "green";
                oP.style.outlineWidth = "100px";
                oP.style.outlineStyle = "solid";
            }
        }
    }
</script>

二十、盒模型

内边距:

<p id="papa">只有坦然,才能让人变的从容,才能把心推向阳光,才能让心微笑向暖。</p>
<style>
    #papa {
        border: 10px double red;
        background-color: lightgray;
        background-clip: content-box;
        padding-top: 5em;
        padding-bottom: 3em;
        padding-left: 6em;
        padding-right: 8em;
    }
</style>

内边距:

<p class="pp">也许心再阳光,也难免忧伤,路再宽广,也难免彷徨。</p>
<style>
    .pp {
        border: 10px solid red;
        background-color: lightgray;
        border-radius: 1em 4em 1em 4em;
        padding: 5px 25px 5px 40px;
    }
</style>

外边距:

<img src="images/banana.png" alt="banana" class="pic">
<img src="images/banana.png" alt="banana" class="pic">
<style>
    img.pic {
        border: 4px solid red;
        background-color: lightgray;
        padding: 4px;
        margin: 20px 100px;
    }
</style>

元素尺寸:

<div id="box">
    <img src="images/banana.png" alt="banana" class="pic1">
    <img src="images/banana.png" alt="banana" class="pic2">
</div>
<style>
    #box {
        width: 75%;
        height: 200px;
        border: thick solid black;
    }
    #box img {
        background-color: lightgray;
        border: 4px solid black;
        margin: 2px;
        height: 50%;
    }
    .pic1 {
        box-sizing: border-box;
        width: 50%;
    }
    .pic2 {
        box-sizing: content-box;
    }
</style>

最大/最小尺寸:

<img src="images/banana.png" alt="banana" class="banana">
<style>
    .banana {
        background-color: lightgray;
        border: 4px solid red;
        margin: 2px;
        box-sizing: border-box;
        min-width: 100px;
        width: 50%;
        max-width: 200px;
    }
</style>

处理溢出内容:

<p id="over1">其实人生的困难,是遇到的困难时,我们学会去面对和解决它的过程,而不是困难的本身。</p>
<p id="over2">正如你丢了一大笔钱,而你失去这笔钱,你未来的日子会很困难。</p>
<style>
    #over1, #over2 {
        display: inline-block;
        width: 200px; 
        height: 100px;
        border: medium solid red;
        margin-left: 50px;
        vertical-align: top;
        padding: 10px;
    }
    #over1 {
        overflow: hidden;
    }
    #over2 {
        overflow: scroll;
    }
</style>

元素的可见性 visibility:

<table>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
    </tr>
    <tr id="firstrow">
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
    </tr>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
    </tr>
</table>

<p id="btn">
    <button>Visible</button>
    <button>Collapse</button>
    <button>Hidden</button>
</p>
<script>
    var btns = document.querySelectorAll("#btn button");
    var lines = document.getElementById("firstrow");
    for(var i=0; i<btns.length;i++){
        btns[i].onclick = function(e){
            lines.style.visibility = e.target.innerHTML;
        }
    }
</script>

block 块元素:

<p>从未经历过,<span class="sp">今天你所难过的,</span>叫做成长。</p>
<style>
    .sp {
        display: block;
        border: medium solid red;
        margin: 2px;
    }
</style>

inline 行内元素:

<p class="ins">难免彷徨。</p>
<p class="ins">人生一世,一半欢喜,一半忧伤,无论你是喜还是忧。</p>
<style>
    .ins {
        display: inline;
        border: medium solid red;
        line-height: 2em;
    }
</style>

display="run-in" 插入类型:

<span class="run">路再宽广,也难免彷徨.</span>
<p class="runali">人生一世,一半欢喜,一半忧伤。</p>
<style>
    .run {
        display: run-in;
        border: medium solid red;
    }
    .runali {
        display: inline;
    }
</style>

display="none" 隐藏类型:

<p id="toggle" style="color: blue;">人生于世,倘若能够拥有一付达观的心境。</p>
<input type="button" value="显示"><span> </span><input type="button" value="隐藏">
<script>
    var oBtn = document.querySelectorAll("[type='button']");
    var oPP = document.getElementById("toggle");
    for(var j=0; j<oBtn.length; j++){
        oBtn[j].onclick = function(e){
            if(e.target.value == "显示"){
                oPP.style.display = "block";
            }else{
                oPP.style.display = "none";
            }
        }
    }
</script>

浮动:

<p class="tog" style="color: red;">喜欢你,已经很久很久了。</p>
<p class="tog" style="color: green;">一份沉默的爱,既是一种无言的沧桑。</p>
<p style="color: blue;">爱情,是美好的,也是忧伤的,它是这个世上最折磨人的东西。</p>
<button class="bbb">left</button>
<button class="bbb">right</button>
<button class="bbb">none</button>
<style>
    p.tog {
        border: medium solid black;
        width: 40%;margin: 2px;
        padding: 5px;
    }
</style>
<script>
    var oBBB = document.querySelectorAll(".bbb");
    var oPPP = document.querySelectorAll(".tog");
    for(var i=0; i<oBBB.length;i++){
        oBBB[i].onclick = function(e){
            for(var j=0; j<oPPP.length; j++){
                oPPP[j].style.cssFloat = e.target.innerHTML;
            }

        }
    }
</script>

清除浮动:

<div class="dd ee"></div>
<div class="dd cc"></div>
<p>绿萝拂过衣襟,青云打湿诺言.</p>
<button class="bbb" value="left">左浮动</button>
<button class="bbb" value="right">右浮动</button>
<button class="bbb" value="none">不浮动</button>
<style>
    .dd {
        width: 50px; height: 50px;
        background-color: red;margin: 5px;
        float: left;
    }
    .cc {
        clear: left;  /*该元素的左侧不能与其它浮动元素挨着*/
    }
</style>
<script>
    var obbb = document.querySelectorAll(".bbb");
    var oppp = document.querySelectorAll(".dd");
    for(var i=0; i<obbb.length; i++){
        obbb[i].onclick = function(e){
            for(var j=0; j<oppp.length; j++){
                oppp[j].style.cssFloat= e.target.value;
            }
        }
    }
</script>

二十一、创建布局

position 定位类型:

<p>有风香百里,无风香九楼,我不由地要去寻觅.</p>
<p>轻抚我的肌肤,轻诉着她的心事。</p>
<img src="images/banana.png" alt="banana" class="ban">
<img src="images/apple.png" alt="apple" class="app">
<p>绵绵秋风绵绵雨,一阵秋雨一阵凉。</p>
<p>我在纱帐里闻香,在纱帐里遐想。</p>
<p>
    <button class="btn">static</button>
    <button class="btn">relative</button>
    <button class="btn">absolute</button>
    <button class="btn">fixed</button>
</p>
<style>
    img.ban {
        top: 50px;
        left: 150px;
        border: medium solid red;
    }
</style>
<script>
    var oBTN = document.querySelectorAll(".btn");
    var oIMG = document.querySelector(".ban");
    for(var i=0; i<oBTN.length; i++){
        oBTN[i].onclick = function(e){
            oIMG.style.position = e.target.innerHTML;
        }
    }
</script>

z-index 层叠顺序:

<style>
    img.app {
        position: relative;
        top: 0px;
        left: -90px;
        width: 170px;
        z-index: -1;
        background-color: grey;
        border: medium solid green;
    }
</style>

多列:

<p id="col">有时候两个人的距离离得越来越远了,心却靠的越来越近了。
    <img src="images/apple.png" alt="app" width="100" class="pic">
    周围的观众无不唏嘘,为之鼓掌,我们为这样的爱情而感动。
    <img src="images/banana.png" alt="ban" width="100" class="pic">
    今生,相携相伴,与你在灵魂里一起皈依!
</p>

<style>
    .pic {
        border: medium double red;
        background-color: lightgray;
        padding: 2px;
        margin: 5px;
        float: left;
    }
    #col {
        column-count: 3;
        column-width: 10em;
        column-fill:balance;
        column-rule:medium solid black;
        column-gap:1.5em;
    }
</style>

创建 弹性盒模型 flex :

<div id="container">
    <p id="first">喜欢养花,并不是因为花香的味道醉心。</p>
    <p id="second">每一株花都是含笑的精灵,每一种花都是一个故事。</p>
    <p id="third">而我的双手,捧起的难道不是自己和每一个精灵的家吗?</p>
</div>
<style>
    #container {
        display: flexbox;   /*把容器变成弹性盒子*/
        display: -webkit-box;
        -webkit-box-align:center;  /*垂直空间的分配方式*/
        -webkit-box-pack:center;   /*处理水平方向上的多余空间*/
    }
    #container p {
        width: 150px;
        border: medium double green;
        background-color: lightgray;
        margin: 5px;
        max-width: 250px;  /*指定元素的最大宽度*/
    }
    #container #second {
        box-flex:1;
        -webkit-box-flex:1;  /*把元素变成弹性元素*/
    }
    #container #first {
        box-flex:2;
        -webkit-box-flex:2;  /*把元素变成弹性元素*/
    }
</style>

CSS表格布局:

<div id="table">
    <div class="row">
        <p>于是不可救药的爱上了养花。</p>
        <p>一直相信,喜欢养花的女人,骨子是软的。</p>
        <p>每一株花都是含笑的精灵。</p>
    </div>
    <div class="row">
        <p>没由来的感动。<img src="images/banana.png" width="100"></p>
        <p>起起落落的感动。<img src="images/apple.png" width="100"></p>
        <p>沏一壶茶坐在阳台。</p>
    </div>
</div>
<style>
    #table {
        display: table;   // 表格布局
    }
    #table div.row {
        display: table-row;
        background-color: lightgray;
    }
    #table p {
        display: table-cell;
        border: thin solid red;
        padding: 15px;
        /*margin: 15px;*/
    }
    #table p img {
        float: left;
    }
</style>

二十二、文本样式

对齐文本:

<p id="ps">有些花草爱热闹,纷纷杂杂的生出许多小生命.</p>
<p id="btns">
    <button class="btns">start</button>
    <button class="btns">end</button>
    <button class="btns">left</button>
    <button class="btns">right</button>
    <button class="btns">justify</button>
    <button class="btns">center</button>
</p>
<style>
    #ps {
        width: 500px;
        margin: 50px auto;
        padding: 10px;
        border: medium solid red;
        background-color: lightgray;
    }
    #btns {
        width: 500px;
        margin: 0 auto;
    }
    #btns button {font-size: 16px;padding: 5px;margin-left: 10px;}
</style>
<script>
    var btns = document.querySelectorAll(".btns");
    var oP = document.getElementById("ps");
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function(e){
            oP.style.textAlign = e.target.innerHTML;
        }
    }
</script>

whitespace 处理文本中的空白:

<p id="white">人心静了,眼神   柔了,指尖便多了    些梦的  色彩,染蓝了天,染绿了地.</p>
<style>
    #white {
        border: thin solid red;
        padding: 10px;
        background-color: lightgray;
        white-space:pre;
    }
</style>

指定文本方向:

<p class="lf">如此,一株花,一杯茶,一个爱养花的灵魂.</p>
<p class="rt">在尘世间给了我演绎生命最好的回答.</p>
<style>
    .lf {
        direction: ltr;
    }
    .rt {
        direction: rtl;
    }
</style>

字母间距、词间距、行距:

<p class="space">Your people understand your love but can not feel it. You moved too quickly, it brought not only prosperity, growth and confidence but also puzzles, pains, tears and worries. All your people need are to live respectfully, easily, and happily. Their feeling will tell them what is wrong or right.</p>
<style>
    .space {
        border: medium double red;
        padding: 10px;
        background-color: lightgray;
        letter-spacing: 2px;
        word-spacing:10px;
        line-height:30px;
    }
</style>

断词方式:

<style>
    .space {
        word-wrap:normal;
    }
</style>

首行缩进:

<style>
    .space {
        text-indent:4em;
    }
</style>

文本装饰、大小写转换:

<p id="deco">Whatever you do, you should do what you most want to do, and what you're best at.</p>
<style>
    #deco {
        border: medium solid red;
        background-color: lightgray;
        text-decoration: line-through;
        text-transform: uppercase;  
        line-height: 3em;
    }
</style>

创建文本阴影:

 <div id="shadow">
    <h3>So slow down your foot, please.</h3>
    <p>Don’t let the number get you lost.</p>
 </div>
 <style>
    #shadow h3 {
        text-shadow:0.2em 0.1em 2px red;
    }
    #shadow p {
        text-shadow:5px 5px 20px blue;
    }
 </style>

指定字体列表:

 <p class="fon">Their feeling will tell them what is wrong or right.</p>
 <style>
    .fon {
        padding: 5px;
        border: medium solid red;
        background-color: lightblue;
        margin: 2px;
        /*float: left;*/
        font-family: "HelveticaNeue Condensed",sans-serif;
        font-size: larger;
        font-weight: bold;  /*字体粗细*/
        font-style: italic; /*字体样式*/
    }
 </style>

使用Web字体:

 <p class="webfont">Miracles were created one by one in china in last 30 years. </p>
 <style>
    @font-face {
        font-family: "MyFont";  /*自定义字体名称*/
        font-style: normal;
        font-weight: normal;
        src:url("images/MyFont.woff");
    }
    .webfont {
        font-family: 'MyFont';
        padding: 10px;
        border: medium solid red;
        margin: 2px;
        font-size: medium;
    }
 </style>

二十三、过渡、动画和变换

使用 过渡 VS. 反向过渡:

<p id="hov">May you have enough <span>happiness</span> to make you sweet.</p>
<style>
    #hov {
        padding: 10px;
        border: medium double black;
        background-color: lightgray;
        font-family: sans-serif;
    }
    #hov span {
        font-size: large;
        border: medium solid black;
        -webkit-transition-delay:50ms;
        -webkit-transition-duration:1000ms;
    }
    #hov span:hover {
        font-size: x-large;
        border: medium solid white;
        background-color: green;
        color: white;
        padding: 10px;
        -webkit-transition-delay:100ms;
        -webkit-transition-property:background-color,color,padding,font-size,border;
        -webkit-transition-duration:1500ms;
        -webkit-transition-timing-function:ease-out;
    }
</style>

动画:

<p id="ani">There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! </p>
<style>
    #ani {
        padding: 10px;
        border: medium solid red;
        background-color: lightblue;
        font-family: sans-serif;
        font-size: medium;
    }
    #ani:hover {
        -webkit-animation-delay:2s;
        -webkit-animation-duration:200ms;
        -webkit-animation-iteration-count:2;
        -webkit-animation-timing-function:linear;
        -webkit-animation-name:"MyKeyFrames";
        -webkit-animation-direction:alternate;
    }
    @-webkit-keyframes MyKeyFrames {
        from {
            font-size: xx-small;
            background-color: red;
        }
        to {
            font-size: x-large;
            border: thick double blue;
            background-color: lightgray;
            color: black;
            font-weight: bold;
            padding: 10px;
        }
    }
</style>

页面一加载,就使用动画:

<p id="init">May you have enough happiness to make you sweet.</p>
<style>
    #init {
        font-size: large;
        border: medium solid black;
        /*-webkit-animation-delay:200ms;*/
        -webkit-animation-duration:1s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;
        -webkit-animation-timing-function:linear;
        -webkit-animation-name:"MyAni1","MyAni2";
    }
    @-webkit-keyframes MyAni1 {
        to {
            border: medium solid red;
            background-color: green;
        }
    }
    @-webkit-keyframes MyAni2 {
        to {
            color: blue;
            font-size: xx-large;
        }
    }
</style>

停止和启动动画:

<p id="toggle">When you were born,you were crying and everyone around you was smiling.</p>
<button class="btn" value="running">Running</button>
<button class="btn" value="paused">Paused</button>
<style>
    #toggle {
        padding: 10px;
        border: medium double red;
        background-color: lightgray;
        font-family: sans-serif;
    }
    @-webkit-keyframes GS {
        from {
            font-size: large;
            border: medium solid black;
        }
        to {
            font-size: x-large;
            border: medium solid white;
            background-color: green;
            color: white;
            padding: 4px;
        }
    }
    #toggle {
        -webkit-animation-duration:2500ms;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;
        -webkit-animation-timing-function:linear;
        -webkit-animation-name:"GS";
    }
</style>
<script>
    var btns = document.querySelectorAll(".btn");
    var oP = document.getElementById("toggle");
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function(e){
            oP.style.webkitAnimationPlayState = e.target.value;
        }
    }
</script>

变换:

<p id="trans">Please send this message to those people who mean something to you.</p>
<style>
    #trans {
        padding: 10px;
        width: 500px;
        border: medium solid red;
        background-color: lightgray;
        font-family: sans-serif;
        font-size: x-small;
        -webkit-transform:rotate(-45deg) scaleX(1.2); /*旋转45度,沿x轴放大1.2倍*/
        -webkit-transform-origin:right top;  /*指定变换的起点*/
    }
    #trans:hover {
        -webkit-transform:rotate(0deg) scaleX(1); 
        -webkit-transition-duration:1.5s;
        -webkit-transition-property:-webkit-transform; /*把变换作为过渡来处理,动起来*/
        -webkit-transition-delay:200ms;
    }
</style>

二十四、其它CSS属性和特性

color 前景色:

<p id="colo">诗歌是美丽的!</p>
<style>
    #colo {
        color: rgba(222,45,102,0.8);
        font-family: sans-serif;
        font-size: 20px;
    }
    #colo:hover {
        color: blue;
        font-weight: bold;
        text-decoration: underline;
    }
</style>

透明度:

<p id="ip">My house is perfect. By great good fortune I have found a housekeeper no less to my mind.</p>
<style>
    #ip {
        background-color: red;
        color: white;
        font-size: 20px;
        border: 1px double red;
        opacity: 0.4;
    }
</style>

表格相关的CSS样式:

<table border="1" id="tab">
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>
<style>
    #tab {
        /*border-collapse: collapse;*/
        border-collapse: separate;
        text-align: center;
        border-spacing: 10px;
        empty-cells: hide;
    }
    #tab td {
        width: 50px;
    }
</style>
<table id="ta" border="1">
    <caption>标题的位置</caption>
    <tr>
        <td>11</td>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
        <td>11111111111111111111111111111111111111111111111111111111111111</td>
        <td>11</td>
        <td>11</td>
    </tr>
</table>
<style>
    #ta {
        caption-side: bottom;    // 表格标题位置
        table-layout: fixed;
        width: 100%;
    }
    #ta td {padding: 5px;}
    #ta caption {
        background-color: red;
        color: white;
    }
</style>

列表相关样式:

<ol id="olss">
    <li>My house is perfect.</li>
    <li>My house is perfect.</li>
    <li class="haha">My house is perfect.</li>
    <li class="ha">My house is perfect.</li>
    <li>My house is perfect.</li>
</ol>
<style>
    #olss {
        /*list-style-type: lower-alpha;*/
        list-style-image: url(images/banana-vsmall.png);
        list-style-position: inside;
    }
    #olss li.haha {
        list-style-position: outside;
    }
    #olss li.ha {
        list-style-type: upper-alpha;
    }
    #olss li {
        background-color: lightgray;
        cursor: progress;
    }
</style>

第三部分 结束!!!

相关文章

网友评论

      本文标题:HTML5权威指南 | 第三部分 CSS篇

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