CSS

1.CSS层叠样式表，简单的说就是来美化页面的、修饰网页的一门技术

　　通过CSS可以实现将设置样式的CSS代码和展示数据的HTML代码进行分离。增强网页的展示能力。

2.css总共有三种标签，非别是div、span、p

这三个元素的区别：

div和p是块级元素，独占一行，而span是行内元素，<!DOCTYPE html>

3. css样式：

　　A通过标签上的 style 属性给div设置样式

　　B通过style标签给span设置样式

　　C通过Link标签引入外部的css文件

4：使用style属性定义样式

<html>
    <head>
        <meta charset="UTF-8">
        <title>css</title>
    </head>
    <body>
        
        <!--  geox给下面的div/span/p加上css样式 -->

        <div id="" style="border: 2px solid red;font-size: 25px;
            font-family: '微软雅黑';font-style: italic;
            font-weight: bolder;">
            div111
        </div>
        <div id="" style="border: 2px solid red;font-size: 25px;
            font-family: '微软雅黑';font-style: italic;
            font-weight: bolder;">
            div111
        </div>
        
        <span style="border: 3px solid blue;
            font-size: 25px;font-style: italic;">
            span222
        </span>
        <span style="border: 3px solid blue;
            font-size: 25px;font-style: italic;">
            span222
        </span>
       
        <p style="background: blueviolet;font-size: 30px;
            font-style: italic;font-weight: bolder;">p333333</a></p>
        <p style="background: blueviolet;font-size: 30px;
            font-style: italic;font-weight: bolder;">p333333</a></p>
        
    </body>
</html>

使用link标签引入外部css样式和style标签定义样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span{
                border: 3px solid red;
                font-size: 50px;
                font-weight: bolder;
                background: green;
            }
            div{
                border: 1px solid red; font-size: 40px;
            background: pink;
            }
            
        </style>
        <!--href：引入文件路径
            rel：引入文件的样式
        -->
        <link rel="stylesheet" href="002.css" />
    </head>
    <body>
        <div>
            这是一个DIV
        </div>
        <span>
            这是另一个sapn
        </span>
        <span>
            这是另一个sapn
        </span>
        <p>pppppp</p>
        <p>pppppp</p>
        <p>pppppp</p>
        
    </body>
</html>

css:

p{
    border: 10px solid blue;
    font-size: 30px;
    font-weight: bolder;
    font-style: italic;
    background: burlywood;
}

5标签选择器

5.1标签名选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <style type="text/css">
            /*标签名选择器*/
            span{
                border: 3px solid red;
                font-size: 40px;
                font-weight: bolder;
            }
        </style>
    </head>
    <body>
        <span>111</span>
        <span>222</span>
        <span>3333</span>
    </body>
</html>

5.2类或id选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        
        <style type="text/css">
            .p1{
                border: 3px solid red;
                font-size: 40px;
                font-weight: bolder;
            }
            #aa{
                border: 3px solid #FF0000;
                font-size: 40px;
                font-weight: bolder;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <span class="p1">111</span>
        <span id="aa">222</span>
        <span>3333</span>
    </body>
</html>

若是标签名、类、id同时被选中，起效果先后顺序为：id>类>标签名

6.后代选择器

div span{}    div内部的所有span元素

div>span{}    div内部所有span子元素

div,span,p{}    分组选择器

*[class]{}   选中所有具有class属性的元素

input[type='text']{}    选中input标签内属性type='text'的标签

#p1+p{}　　相邻兄弟选择器，选择id为p1后面的兄弟元素

div a:hover{}　　当鼠标移入时

7.盒子模型

margin：外边距

div{

　　margin-top:1px　　上编辑

　　margin-left:1px　　左边距

　　margin-bottom:1px　　下边距

　　margin:1px 1px 1px  1px　　上 右 下 左

　　margin:1px 1px 1px　　上 左右 下

　　margin:1px 1px 1px　　上下 左右

垂直方向的外边距（上下）相遇是，会有一个外边距合并的现象，合并的结果，是取较大者！！！

border：边框　　

padding：内边距（同上）

posted @ 2019-08-17 14:58 我爱si搬砖阅读(224) 评论(0) 收藏举报

我爱si搬砖

CSS

公告