CSS基本使用复习(2)

最新推荐文章于 2022-09-19 17:40:16 发布

每件事做到极致

最新推荐文章于 2022-09-19 17:40:16 发布

阅读量306

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/persistentA/article/details/51935294

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css当中的样式属性详解
Css当中的属性非常多，大体上可以分为以下几类：字体、背景
文本、位置、边缘、列表
1）、字体
字体的属性注意包括文字的字体、大小、颜色、显示效果等基本样式，下面是各种字体属性的详细
介绍。
Font-family:该属性用于设置字体系列
Font-size:该属性定义字体的大小，可以使用度量单位来设置字体的小，也可以使用一个
相对的字体大小。还可以使用绝对的大小标记符。
绝对大小的设置为：xx-small、x-small、small、medium、large
x-large、xx-large中的任意一个。Xx-small为最小，xx-large为最大。
font-style该属性用于定义字体样式Normal、Italic或者Oblique（斜体）。
text-decoration
该属性用于在文本中条件下划线、上划线、中划线、闪烁效果
font-weight
该属性用于设置粗体字的磅值

该属性的值有：normal、bold、border、lighter、100~900

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #p1{
            font-family: fantasy;
        }
        #p2{
            font-size: xx-small;
        }
        .p3{
            font-style: italic;
            border-top: dashed;
            border-left: dotted;
            border-bottom: double;
        }
        .p4{
            font-weight: bold;
        }
    </style>
</head>
<body>
<p id="p1">待我长发及腰</p>
<p id="p2">待我长发及腰</p>
<p class="p3">待我长发及腰</p>
<p class="p4">待我长发及腰</p>
</body>
</html>

文档流：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
        }
        div.div1{
            background-color: red;
            top: 100px;
            left: 100px;
            position: absolute;/*绝对定位，定到哪儿就是哪儿*/
            z-index: 3;
        }
        div.div2{
            background-color: yellow;
            top: 130px;
            left: 130px;
            position: absolute;/*绝对定位，定到哪儿就是哪儿*/
            z-index: 2;
        }
        div.div3{
            background-color: green;
            top: 160px;
            left: 160px;
            position: absolute;/*绝对定位，定到哪儿就是哪儿*/
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            right: 0px;
            bottom:0px;
            position: fixed;
            background-color: red;
            height: 300px;
            width: 300px;
        }
    </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/>
</body>
</html>

文本属性：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .p1{
            word-spacing: 20px;
            letter-spacing: 20px;
        }
        .p2{
            text-align: left;
            text-indent: 15px;
            line-height: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
<p class="p1">CSS是Cascading Style SHeet</p>
<p class="p2">今天天气不错</p>
</body>
</html>

padding和margin

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
        }
        .div1{
            width: 300px;
            height: 300px;
            background-color: red;
            padding: 20px;
        }
        .p1{
            height: 30px;
            background-color: green;
            padding:5px ;
        }
    </style>
</head>
<body>
<div class="div1"><p class="p1">我是一个p标签</p> </div>
</body>
</html>

布局：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .divIndex{
            width: 900px;
            height: 800px;
            background-color: yellow;
            margin: 0px auto;
        }
        .divLogo{
            width: 900px;
            height: 100px;
            background-color: red;
        }
        .divContent{
            width: 900px;
            height: 300px;
            background-color: green;
        }
        .divPicture{
            height: 300px;
            width: 300px;
            background-color: blue;
            float: left;
        }
        .divText{
            height: 300px;
            width: 600px;
            background-color: purple;
            float: left;
        }
    </style>
</head>
<body>
<div class="divIndex">
    <!--logo-->
    <div class="divLogo">
        <img src="chen.png"height="100px" width="900px">
    </div>
    <!--Content-->
    <div class="divContent">
        <div class="divPicture"></div>
        <div class="divText"></div>
    </div>
</div>
</body>
</html>

表格制作：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0px;
            font-size: 12px;
        }
        div.divIndex{
            height: 380px;
            width: 290px;
            background-color: #F8F8F8;
            margin: 0px auto;
        }
        div.div1{
            width: 290px;
            height: 35px;
            background-color: blue;
            font-size: 18px;
            color: white;
            text-align: center;
            padding-top: 0px;
        }
        div.div1 p{
            padding: 8px;
            font-size: 18px;
        }
        #table1{
            width: 290px;
        }
        td.td1{
            font-weight: bolder;
        }
        td.td2{
            color: #246DB2;
            padding: 6px;
            border-bottom: 1px dashed #cccccc;
        }
        td.td3{
            font-weight: bolder;
            color: red;
            border-bottom: 1px dashed #cccccc;
            text-align: right;
        }
        td.td4{
            font-weight: bolder;
            color: blue;
            border-bottom: 1px dashed #cccccc;
            text-align: right;
        }
        div.divTable{
        }
    </style>
</head>
<body>
<div class="divIndex">
    <table id="table1">
        <tr>
            <td><div class="div1"><p>可以开始了</p可以开始了></div> </td>
        </tr>
        <tr>
            <td>
                <div class="divTable">
                <table width="290px">
                    <tr>
                        <td class="td1">.Net基础班</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td3">预约报名中</td>
                    </tr>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td4">爆满已开班</td>
                    </tr>
                    <tr>
                        <td class="td2">广州</td>
                        <td class="td3">预约报名中</td>
                    </tr>
                    <tr>
                        <td class="td2">广州</td>
                        <td class="td4">爆满已开班</td>
                    </tr>
                    <tr>
                        <td class="td1">.Net就业班</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td3">预约报名中</td>
                    </tr>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td4">爆满已开班</td>
                    </tr>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td3">预约报名中</td>
                    </tr>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td4">爆满已开班</td>
                    </tr>
                    <tr>
                        <td class="td1">.Net远程班</td>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td3">预约报名中</td>
                    </tr>
                    <tr>
                        <td class="td2">北京</td>
                        <td class="td4">爆满已开班</td>
                    </tr>
                    </tr>
                </table>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

导航

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
        }
        div{
            background-color: yellow;
            height: 30px;
            width: 800px;
            margin: 0px auto;
        }
        ul li{
            float: left;
            list-style: none;
            width: 150px;
            line-height: 30px;

        }
        A:hover{
            font-size: x-large;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="">公司简介</a></li>
        <li><a href="">企业文化</a></li>
        <li><a href="">产品介绍</a></li>
        <li><a href="">交易大厅</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
</div>
</body>
</html>

html页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="divIndex">
    <!---->
    <div class="divLogo"></div>
    <div class="divNav"></div>
</div>
</body>
</html>

test.css

*{
    margin: 0px;
}
div.divIndex{
    height: 1200px;
    width: 800px;
    background-color: yellow;
    margin: 0px auto;/*居中*/
}
div.divLogo{
    width: 800px;
    height:110px;
    background-color: pink;
}
div.divNav{
    height: 30px;
    width: 800px;
    background-color: blue;
}