css基础1

/ [随笔分类]HTML/CSS / 没有评论 / 157 浏览

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>
&lt;/style&gt;

</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;
        }
&lt;/style&gt;
&lt;meta charset="utf-8" /&gt;

</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窗体固定在某一位置的意思。即使页面上下拉动,它也始终固定在一个地方。

 

下面是运行效果:

今天就先总结到这里!88

        </div>