css基础1-阿里云开发者社区

Css（实现了页面和样式的彻底分离）

写入样式表的三种方式：

内联样式表，嵌入样式表，外部样式表。

内联样式表的优先级高于嵌入样式表。嵌入式样式表的优先级大于外部样式表

样式表的选择器（通过选择器帮我们获得页面上要获得样式的元素）

写什么标签就拿到了什么标签。（当页面中所有标签都用同一种样式的时候用html选择器）

什么时候用id选择器什么时候用类选择器：

当同一个页面中某些元素显示同一个样式的时候一般用类选择器，id选择器一般是唯一的。

Css当中属性非常多，大体上可以分为以下几类：字体，背景，文本，位置，布局，边缘，列表。

下面是一些关于样式表的例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <!--外部样式表-->
    <link href="test.css" rel="stylesheet" type="text/css" />
    <!--嵌入样式表-->
    <style type="text/css">
        p {
            background-color:yellow;
            font-size:xx-small;
        }
    </style>
</head>
<body>
    <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p>
    <!--内联样式表-->
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <h1>呵呵</h1>
    <tt>窗前明月光，你是第上传</tt>
</body>
</html>

选择器的分类：

class类选择器，HTML选择器，ID选择器，关联选择器,伪元素选择器，组合选择器。

下面是class类选择器的例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        p.pp1 {
            background-color:red;
        }
        tt.tt1 {
            background-color:yellow;
        }
    </style>
</head>
<body>
    <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p>
    <!--内联样式表-->
    <p class="pp1">今天天气好晴朗，处处好风光</p>
    <p class="pp1">今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <h1>呵呵</h1>
    <tt class="tt1">窗前明月光，你是第上传</tt>
</body>
</html>

HTML选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style>

    </style>
</head>
<body>
    <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p>
    <!--内联样式表-->
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <h1>呵呵</h1>
    <tt>窗前明月光，你是第上传</tt>
</body>
</html>

ID选择器：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {
            background-color:black;
        }
        #p2 {
            background-color:blue;
        }

    </style>
    <meta charset="utf-8" />
</head>
<body>
    <p id="p1">今天天气很好</p>
    <p id="p1">今天天气很好</p>
    <p id="p2">今天天气很好</p>
    <p id="p3">今天天气很好</p>
    <p id="p4">今天天气很好</p>
</body>
</html>

关联选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        p em {
            background-color:red;
        }
    </style>
</head>
<body>
   
    <p><em>今天天气好晴朗，处处好风光</em></p>
    <em>haha</em>
    <em>haha</em>
    <em>haha</em>
    <em>haha</em>
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <p>今天天气好晴朗，处处好风光</p>
    <h1>呵呵</h1>
    <tt>窗前明月光，你是第上传</tt>
</body>
</html>

伪元素选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <!--伪元素选择器是对同一个html元素的各种状态和其所在的部分内容的一种定义形式,例如,对于超链接标签的正常状态,访问过的状态,选中的状态,光标移到超链接上的状态-->
    <style type="text/css">
        a:active {
            text-decoration:none;
        }
        a:hover {
            font-size:xx-large;
        }
        p::first-line {
            font-size:xx-small;
        }
        p::first-letter {
            background-color:red;
        }
    </style>
</head>
<body>
    <p>晋太原中，武陵人捕鱼为业，缘溪行<br />
        晋太原中，武陵人捕鱼为业，缘溪行</p>
    <a href="#">超链接</a>
</body>
</html>

组合选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        h1,h2,td {
            background-color:yellow;
        }
    </style>
</head>
<body>
    <h1>我是一个大标题</h1>
    <h2>我是一个二号标题</h2>
    <table border="1px" cellpadding="0px" cellspacing="0px">
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
    </table>
</body>
</html>

2.关于文档流：什么是文档流？就是html会将控件从上到下排列，不会出现覆盖的情况。

当用css给div设定位置并把position设置为：absolute时，就可以将div设置在需要固定的位置，使其摆脱文档流的束缚。

其中 z-index是元素在页面中的第多少层，越大越在上面，相当于ps中图层的概念。

下面是一个小例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        div {
            height:300px;
            width:300px;
        }
            div.div1 {
                background-color:rebeccapurple;
                top:100px;
                left:130px;
                position:absolute;/*绝对定位，定在哪儿就在哪儿，脱离文档流的限制*/
                z-index:3;/*确定显示在哪一层*/
            }
            div.div2 {
                background-color:green;
                top:110px;
                left:140px;
                position:absolute;
                z-index:2;
            }
            div.div3 {
                background-color:yellow;
                top:120px;
                left:150px;
                position:absolute;
                z-index:1;
            }
    </style>
</head>
<body>
<div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

效果如图所示：

在很多网页中会弹出那种恭喜你，被QQ抽中中奖的广告的弹窗怎么实现的呢？用css也能轻松实现。

下面是一个小例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        .div1 {
            right:0px;
            bottom:0px;
            position:fixed;/*absolte当页面拉动时跟着动，fixed是页面拉动的时候不动*/
            height:300px;
            width:300px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="div1"></div><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
</body>
</html>

其中，position的fixed的意思是把那个div窗体固定在某一位置的意思。即使页面上下拉动，它也始终固定在一个地方。

下面是运行效果：