CSS

admin8868

墨衍会员 · AI 创作全网分发码龄12年

关注

转载最新推荐文章于 2026-07-09 11:18:32 发布 167 阅读 AI 写同款· GEO 优化 ›

css解释

css样式:

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。

存在方式有三种： 元素内联、页面嵌入和外部引入

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'

在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式

引入外部css文件

优先级：标签>页面镶入>外部，这个仅限同样的样式冲突是才有用

元素内联：

直接在标签上应用：代码如下

        <p style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">
            这是一个段落
        </p>

页面嵌入

在头部写好css样式然后应用：代码如下

<head>
    <meta charset="UTF-8">
    <title>css_study</title>
    <!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
    <style>
        .css_test{
            background-color: darkorchid;
        }
    </style>
</head>
<body>
    <div>
        <p class="css_test">
            <!--这里应用指定好的CSS样式名即可-->
            这是一个段落
        </p>
    </div>
</body>

外部引用

写一个独立的文件存储css样式代码如下：建议（在样式文件里加上标注防止出现遗忘）

html代码如下：

<head>
    <meta charset="UTF-8">
    <title>css_study</title>
    <!--这里通过link导入样式，有点类似与python导入模块中的import *-->
    <link rel="stylesheet" href="study_html_css.css">
</head>
<body>
    <div>
        <p class=page_color>
            <!--这里直接应用指定好的CSS样式名即可-->
            这是一个段落
        </p>
    </div>
</body>

CSS样式应用中通过class应用CSS样式即可，还有两种知道即可代码如下：

id应用，"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> #name意思就是所有id为name的都会使用这个Css样式，代码如下：

<head>
    <meta charset="UTF-8">
    <title>luotianshuai_study</title>
    <style>
        #name{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p id="name">
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            段落1
        </p>
        <p id="name">
            段落2
        </p>
    </div>
</body>

显示如下：

标签应用，为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式，代码如下

<head>
    <meta charset="UTF-8">
    <title>luotianshuai_study</title>
    <style>
        p{
            background-color: lightskyblue;
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            段落1
        </p>
        <p>
            段落2
        </p>
    </div>
</body>

CSS常用属性

background 【背景】

background-color 背景颜色代码如下：

    <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
        Hello,html
    </div>

显示效果：

background-image 背景图片代码如下：

<div style="background-image: url(logo.png);height: 80px;background-position: center top" >
   </div>

显示效果如下：

首先确认，div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：

<div style="background-image: url(logo.png);height: 80px;background-repeat:no-repeat" >
</div>

显示效果如下图：

border 【边框】

设置边框，效果图如下图：

代码如下：

    <!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
    <!--第一种：线的粗细为1像素，实线、红色-->
    <div style="border:1px solid red;height:10px" ></div>
    <!--第二种：线的粗细为1像素，点、蓝色-->
    <div style="border:1px dotted blue;height:10px" ></div>
    <!--第三种：线的粗细为1像素、虚线、紫色-->
    <div style="border:1px dashed purple;height:10px" ></div>

边框可以单独的设置一边的边框、上、下、左、右

    <!--在左边设置边框，3px、实线、红色-->
    <div style="border-left: 3px solid red">Luotianshuai</div>

效果图如下：

Display

代码如下：

<!--display 为none将隐藏标签-->
<div style="display: none;">none</div>
<!--display 为inline会将块级别标签调为内联标签-->
<div style="display:inline">inline1</div>
<div style="display:inline">inline2</div>
<!--display 为block会将内联标签调为块级别标签-->
<a style="display:block">block1</a>
<a style="display:block">block2</a>

实际效果如下：

cursor 鼠标停放所显示的效果

代码如下（实际效果自己写看）：

    <div style="cursor:pointer">停放在这里显示小手(pointer)</div>
    <div style="cursor:help">停放在这里显示问号(help)</div>
    <div style="cursor:wait">停放在这里显示转圈(wait)</div>
    <div style="cursor:move">停放在这里显示移动(move)</div>
    <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

浮动 float （用的比较多，用来布局使用）

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_study</title>
    <style>
        .float-left{
            width:20%;
            background-color:red;
            height: 500px;
            float: left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
        .float-right{
            width: 80%;
            background-color:blue;
            height: 500px;
            float:left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
    </style>
</head>
<body>
    <div class="float-left"></div>
    <div class="float-right"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>luotianshuai_study</title>
    <style>
        .float-left{
            width:20%;
            background-color:red;
            height: 500px;
            float: left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
        .float-right{
            width: 80%;
            background-color:blue;
            height: 500px;
            float:left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
    </style>
</head>
<body>
    <div class="float-left"></div>
    <div class="float-right"></div>
</body>
</html>

注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：