CSS

最新推荐文章于 2024-06-15 06:21:07 发布

small_py_trade

最新推荐文章于 2024-06-15 06:21:07 发布

阅读量136

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/small_py_trade/article/details/127372591

版权

所有有关修饰的标签都已经淘汰，可以在<head>部分用CSS表示格式。CSS的分类：1，标签样式表；2，类样式表；3，ID样式表；4，组样式表。

CSS从位置上分类可以分为嵌入式样式表、内部样式表、外部样式表。其中外部样式表专门用一个.css文件管理CSS代码。在html文件的<head>标签中使用<link>标签引入：

        <link rel="stylesheet" href="">

一、基础语法

<html>
<head>
    <meta charset="UTF-8">
    <!--把格式写在这里的叫内部样式表-->
    <style type="text/css">
        /*标签样式表*/
    p{
        color: red;
    }
        /*类样式*/
        .f20{
            font-size: 20px;
        }
        /*id样式*/
        #p4{
            background-color: aqua;
            color:green;
            font-size: 20px;
            font-weight: bolder;
            font-family: 华光广告_CNKI;
            font-style: inherit;
        }
        /*组合样式*/
        div p{
            color: blue;
        }
        div .f32{
            font-size: 32px;
        }
    </style>
    <link rel="stylesheet" href="">
</head>
<body>
    <p class="f32">第一段落</p>
    <p class="f20">第二段落</p>
    <p id="p4">第四段落</p>
    <div>
        <!--把style写在标签里面叫嵌入式样式表-->
        <p class="f32"><span style="font-size: 1px;font-weight: bolder;color: yellow">牛皮</span></p>
        <span>CLASS</span>
        <p class="f32">???</p>
    </div>
</body>
</html>
<!--
被style包围的是CSS环境，可以写css代码。
p是标签名称，定义color为red，那所有的段落都遵循这个格式
类样式中定义了一个类，可以在标签中引用
id用法类似于类，在html中id要尽量唯一
在div中的标签就服从组合样式定义的规则，div.f32不能在div外面调用
对于有多个样式表修饰的，它的格式遵从就近原则
-->

二、盒子模型

CSS盒子模型三要素：1，border;2,margin;3,padding

<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #div1{
            height: 400px;
            width: 400px;
            background-color: red;

            /*边框样式*/
            /*border-color: green;
            border-style: dotted;
            border-width: 2px;
            上面的属性可以全部合并*/
            /*border-top等可以分别定义边线*/
            border:2px dotted black;
        }
        #div2{
            height: 200px;
            width: 200px;
            background-color: green;
            border: 1px solid white;
            /*表示距离上下左右都是100像素*/
            margin: 100px;
            /*margin: 100px 0;
            上下是100，左右是0*/
            /*margin:100px 50px 40px 150px;
            遵循上右下左的顺序，顺时针
            如果是三个，第一个上，第二个左右，第三个下
             */
        }

        #div3{
            height: 100px;
            width: 100px;
            background-color: aqua;
            border: #b88cff dot-dash 0.5px;
            margin: 50px;
            /*padding的规则和margin一样*/
            padding: 30px;
        }
        /*设置body标签，使内容都紧贴着浏览器页面的边界*/
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="div1"><div id="div2"><div id="div3">&nbsp;</div></div></div>
</body>
</html>
<!--

-->

Notations:在IE浏览器里面，实际尺寸就是width和height，而在谷歌浏览器中则是width,height加上它们的边框再加padding(填充)的。

三、CSS布局

<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #div1{
           position: absolute;
            left: 100px;
            top: 100px;
            height: 200px;
            width: 200px;
            background-color: aqua;
        }
        #div2{
            height: 200px;
            width: 200px;
            background-color:hotpink;
            position: relative;
            float:left;
            margin: 20px;
            padding: 30px;
        }
    </style>
</head>
<body>
    <div id="div1">&nbsp</div>
    <div id="div2">&nbsp</div>

</body>
</html>
<!--
    position 设置为absolute表示为绝对定位，left和top表示离页面左上角的横竖距离
    设置为relative为相对定位，一般和margin,padding,float配合使用
-->

Notations:在HTML5中height是失效的，一般根据内容的多少来决定高度

四、CSS制作静态页面

<html>
<head>
    <meta charset="UTF-8">
   <link rel="stylesheet" href="2.css">
</head>
<body>
    <div id="div_container">
        <div id="div_fruit">
            <table id="tb_fruit">
                <tr>
                    <th>水果</th>
                    <th>数量</th>
                    <th>单价</th>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>2</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>梨子</td>
                    <td>6</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>榴莲</td>
                    <td>1</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="2">9999</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

2.css中的页面布局代码：

body{
    margin: 0;padding: 0;background-color: grey;
}
div{
    position: relative;
    float: left;
}
#div_container{
    height: 100%;
    width: 80%;
    margin-left: 10%;
    background-color: antiquewhite;
}
#div_fruit{
    width: 100%;
}
#tb_fruit{
    width: 60%;
    margin-left: 20%;
    line-height: 28px;
    margin-top: 200px;
}
/*表示列、行、表头都符合该规则*/
#tb_fruit,#tb_fruit tr,#tb_fruit td,#tb_fruit th{
    border: 1px black solid;
    /*边框合并*/
    border-collapse: collapse;
    /*字体居中*/
    text-align: center;
}

最终效果：

small_py_trade

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS从位置上分类可以分为嵌入式样式表、内部样式表、外部样式表。其中外部样式表专门用一个.css文件管理CSS代码。Notations:在IE浏览器里面，实际尺寸就是width和height，而在谷歌浏览器中则是width,height加上它们的边框再加padding(填充)的。所有有关修饰的标签都已经淘汰，可以在部分用CSS表示格式。CSS的分类：1，标签样式表；Notations:在HTML5中height是失效的，一般根据内容的多少来决定高度。CSS盒子模型三要素：1，border;
复制链接

扫一扫

CSS

“相关推荐”对你有帮助么？