CSS的基本操作 - 877599949yan－IT工程師數位筆記本

文章出處

<html>
    <!--
        1. 給整個頁面填一個一個背景
        2. 給em添加一個樣式樣傾斜效果消失
        3. 改變第一層UL的樣式為藍色，16px
        4. 改變第二層的UL的樣式為紅色 14px
        5. 改變body下面的ul下面的li下面的ol下面的li為#f8f8f8
    -->

    <head>
            <title>網頁設計課程</title>
            <style type="text/css">
                body{background-color:#0af;}
                ul .li1{color:blue;font-size:16px;}
                ul .li1 #id1{color:red;font-size:14px;}
                ul .li1 #id1 li{color:black;}
                ul .li1 ol li{color:#f8f8f8}
                h2 em{font-style:normal}
            </style>
    </head>
    <body>
        <h2><em>網頁設計課程</em></h2>
        <p>歡迎大家學習網頁設計課程</p>
        <ul>
            <li class="li1">在這里，你可以學到：
                <ul>
                    <li id="id1">HTML</li>
                    <li id="id1">CSS
                        <ul>
                            <li>CSS初級</li>
                            <li>CSS中級</li>
                            <li>CSS高級</li>
                        </ul>
                    </li>
                    <li id="id1">JavaScript</li>
                </ul></li>
            <li class="li1">你還可以學習到：
                <ol>
                    <li>fireworks</li>
                    <li>flash</li>
                    <li>dreamweaver</li>
                </ol>
            </li>
        </ul>
    </body>
</html>

1.行內式

<h1 style=“color:white; background-color:blue”>這是一行文本/h1>

2.嵌入式

h1{

color:white;

LINE-HEIGHT: 90%; MARGIN-TOP: 5.76pt; TEXT-INDENT: -0.38in; unicode-bidi: embed; DIRECTION: ltr; MARGIN-BOTTOM: 0pt; MARGIN-LEFT: 0.38in; VERTICAL-ALIGN: baseline; language: zh-CN; mso-line-break-override: restrictions; punctuation-wrap: simple"> }

</style>

3.導入式

　@import"mystyle.css";

</style>

4.鏈接式

CSS的選擇器

1.標記選擇器

2.類別選擇器

3.ID選擇器

4.“交集”選擇器

5.“并集”選擇器 p,.p1{xxxxxx}

6.“后代”選擇器 p .p1{ xxxxx }