关于CSS的详细内容

2021-02-22 201 0 编辑:深正互联 来源:互联网

CSS的全称是Cascading Style Sheets,层叠样式表 

它用来控制HTML标签的样式,在美化网页中起到非常重要的作用


CSS的编写格式是键值对形式的,比如

color : red 

background-color : blue 

font-size : 20px 

冒号左边的是属性名,冒号右边的是属性值


CSS三种书写方式

行内样式:(内联样式)直接在标签的style属性中书写

<span style="color:red;background-color:red;">123</span>

内页样式:在本网页的style标签中书写

<span>123</span>

<style type="text/css">

    span {

        color:yellow;

        background-color:blue

    }

</style>

外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用 

test.css


span {

        color:yellow;

        background-color:blue

    }

test.html


<span>123</span>

<link rel="stylesheet" herf="test.css">


CSS选择器

选择器的作用

选择对应的标签,为之添加样式


标签选择器 根据标签名找到标签

类选择器 标签可以有多个类

id选择器 id是唯一的,不能一样

选择器组合 中间不留空格,粘在一起

后代选择器 中间一个空格,不管嵌套多少层

相邻兄弟选择器

属性选择器

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        /*标签选择器*/

        p{

            color:red;

        }

        /*类选择器*/

        .first{

            color:red;

        }

        .second{

            color:blue;

        }

        /*id选择器*/

        #first{

            color:yollew;

        }

        #second{

            color:green;

        }

        /*群组选择器*/

        .first, #second, h1{

        }

        /*选择器组合*/

        div.first{

        }

        /*后代选择器*/

        div p{

        }

        /*子标签选择器*/

        div > p{

        }

        /*相邻兄弟选择器*/

        div + p{

        }

        /*属性选择器*/

        div[name]{

        }

        div[name][age]{

        }

        div[name="jack"]{

        }

    </style>

 

</head>

<body>

    <div>

        <p>p1</p>

        <span>

            <p>p2</p>

        </span>

    </div>

    <div name="jack">div1</div>

    <div age="10">div2</div>

    <p>与div相邻的p</p>

 

    <div>123</div>

    <div id="first">123</div>

 

    <p class="first second">123</p>

    <p id="second">123</p>

 

    <h1>hhh</h1>

</body>

</html>

深正互联


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5