2018-03-23 CSS样式表

2018-03-23  本文已影响0人  缪丽丽

CSS样式表
样式表的基本结构
<style>:样式风格标签;放在head头部,是一个双标签
属性:type="text/css"

A:标签选择器:标签名{属性名:属性值}

文本属性:color,font-family,font-size
<style type="text/css">
p{color:red}

<html>
    <head>
        <title></title>
        <style type="text/css">
            p{color: red}
        </style>
    </head>
    <body>
        <p>段落1</p>
        床前明月光
        <p>段落2</p>
        疑是地上霜
    </body>
</html>

B:类选择器: .类名{属性名:属性值}

.blue{color:blue}
.red{color:red}

<html>
    <head>
        <title></title>
        <style type="text/css">
            .blue{color: blue}
            .red{color: red}
        </style>
    </head>
    <body>
        <p class="blue">段落1</p>
        床前明月光
        <p class="red">段落2</p>
        疑是地上霜
    </body>
</html>

A和B同时设定时类>标签

另一种可以设置CSS样式表运用到HTML中,在头部head中输入

<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="abc.css">
    </head>
    <body>
        <p class="blue">段落1</p>
        床前明月光
        <p class="red">段落2</p>
        疑是地上霜
    </body>
</html>

<link reel="stylesheet" href="abc.css " type="text/css">

C:id选择器:#id

属性:position:absolute,left,top,width,height,z-index:1(第一层)
<div>:属性:id=''层数''

<html>
    <head>
        <title></title>
        <style type="text/css">
        #id1{
            position: absolute;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 300px;
            z-index: 1;
            background-color: blue
        }
        #id2{
            position: absolute;
            left: 50px;
            top: 150px;
            width: 200px;
            height: 200px;
            z-index: 2;
            background-color: red
        }
        #id3{
            position: absolute;
            left: 50px;
            top: 250px;
            width: 200px;
            height: 100px;
            z-index: 3;
            background-color: pink
        }
        </style>
    </head>
    <body>
        <div id="id1"></div>
        <div id="id2"></div>
        <div id="id3"></div>
    </body>
</html>
上一篇下一篇

猜你喜欢

热点阅读