简单的CSS样式

样式分为三种

    **内部样式**：写在html文件里的样式叫内部样式

    **内联样式**：写在需要的标签中

    **外部样式**：写在外部css文件里

可以通过不同的选择器来选择设置指定组件的样式：

        <style>
            /* 写在html文件里的样式叫内部样式 */
            /* 选择器 */
            /* ID选择器 */
            #boxa{
                height: 100px;
                width: 100px;
                background-color: skyblue;
                
                /* 字体颜色 */
                color:green;
                /* 字体大小 */
                font-size: 30px;
                /* 字体加粗 数值达到600或bold*/
                font-weight: 800;
                /* 字体居中 */
                text-align: center;
                /* 单行文本垂直居中  行高等于容器的高度*/
                line-height: 100px;
            }
            /* 标签选择器 元素选择器 */
            div{
                height: 100px;
                width: 100px;
            }
            /* 类选择器 */
            .bgred{
                background-color: red;
                /* 不显示 */
                display: none;
            }
        </style>

选择器

    **ID选择器**：用井号 **# **标识，设置指定 id 的样式

    **标签选择器**：选择对应的标签类型

   ** 类选择器**：用点 **.** 表示选择指定的 class

    <body>
        <!-- 内联样式 -->
        <div style="width: 100px;height: 100px;background-color: pink"></div>
        <div id="boxa">你好</div>
        <div class="bgred"></div>
        <div class="bgred"></div>
    </body>

创建css文件

在外部css文件中设置几种标签和类的样式：块的宽度和高度；几种背景色

十六进制颜色表示

这里提供一个获取不同颜色十六进制颜色值的网站：ColorDrop

里面有很多好看的颜色搭配，点击即可复制颜色值

div{
    height: 100px;
    width: 100px;
}

.red{
    background-color: red;
}

.blue{
    background-color: #89CFF0;
}

.green{
    background-color: #A7FC00;
}

.pink{
    background-color: #F2B5D4;
}

在html文件中声明引入css样式

    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 声明引入css文件 -->
        <link rel="stylesheet" href="css/float.css" />
    </head>

浮动 float

CSS中的浮动样式（float）是一种布局属性，用于控制元素在页面中的位置。通过设置浮动属性，可以使元素沿着其容器的左侧或右侧浮动，并且其他内容将围绕在该元素的周围。

要使用浮动样式，可以为元素添加以下属性：

float: left; - 元素向左浮动。
float: right; - 元素向右浮动。

浮动属性将元素从正常的文档流中移除，并使其从其容器的左侧或右侧浮动。其他内容将沿着浮动元素之后重新排列。

.float{
    float: left;
}

需要注意的是，浮动元素的父级元素也会受到影响。如果一个父级元素包含一个或多个浮动元素，父级元素的高度将坍塌，导致无法包含浮动元素的高度。为了解决这个问题，可以在父级元素中添加一个属性来清除浮动

/*清空浮动*/
.clear-box:after{
    clear: both;
    content: "";
    display: block;
}

    <body>
        <div class="red float"></div>
        <div class="green float"></div>
        <div class="blue float"></div>
        
        <div class="pink" style="width: 500px;height: 300px;"></div>
    </body>

浮动之后的div悬浮于原本的页面之上，不占据空间，同时实现了横向排列

子代选择器

用 > 表示其内部的组件，其中的** :hover 表示鼠标移入的效果**

/* 子代选择器 */
#menu>li:hover{
    background-color: #B5B9F1;
}

同时设置多个标签的样式用逗号

下面的CSS代码中的，**

list-style: none;

**将列表项的默认样式（通常是项目符号或数字）设置为无。这意味着列表项将没有任何可见的项目符号或数字。

ul,ol,li{
    list-style: none;
    margin: 0;
    padding: 0;
}

列表浮动可以实现横向展示，注意在浮动之后清空浮动，否则会与下方元素产生重叠

列表元素中嵌套列表可实现二级菜单的效果

        <ul id="menu" class="clear-box">
            <li class="float">首页</li>
            <li>新闻</li>
            <li>娱乐</li>
            <li>学习
                <ul class="child">
                    <li>Java</li>
                    <li>Python</li>
                    <li>C++</li>
                </ul>
            </li>
            <li>奥运</li>
        </ul>

将二级菜单设置为隐藏，并在鼠标移入时显示

.child{
    display: none;
    position: absolute;
    left: 0;
}
.child>li{
    padding: 10px 25px;
    width: 60px;
}

.child>li:hover{
    background-color: #89CFF0;
}

#menu>li:hover .child{
    display: block;
}

定位 position

四个属性含义参照物是否占空间absolute绝对定位参照物是第一个非static定位的父组件，如果找不到，参照物就是html/body；不占空间relative相对定位参照物是自身原来的位置；占据原来的空间fixed窗口定位参考物是窗口；不占空间static流布局不定位

        <div class="red"></div>
        <div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div>
        <div class="pink" style="position: relative;left: 20px;top: 20px;"></div>
        <div class="blue" style="position: absolute;left: 50px;top: 10px;"></div>
        <div class="red"></div>

盒模型

CSS的盒模型是用于描述HTML元素在页面中的布局和尺寸的模型。它将每个HTML元素看作一个矩形盒子，由四个部分组成：内容区域、内边距、边框和外边距。

padding 内边距

margin 外边距

border 边框

** padding: 10px 20px 30px 40px; 四个参数：上、右、下、左
padding: 10px 20px 40px; 三个参数：上、左右、下
padding: 10px 25px; 两个参数：上下、左右**

** padding: 10px; 一个参数：四周**

注：两个相邻盒子的纵向外边距会合并，取最大值

没有任何内容的div计算外边距时只保留一侧

        <div style="margin:100px ;height: 100px; background-color: #F2B5D4;"></div>
        <div style="margin: 40px; background-color: #89CFF0;">
            <div style="margin: 20px;background-color: #A7FC00" ></div>
        </div>
        <div style="margin:100px ;height: 100px; background-color: #F4CBAA;"></div>

练习：登录界面

包含组件：背景图、大标题、用户名输入框、密码框、记住密码复选框、登录按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/login.css" />
    </head>
    <body>
        <div class="background"></div>
        <div class="loginbox" >
            <div class="title">Easy管理系统</div>
            <div class="item">
                <label class="float" for="username">用户名</label>
                <div class="line float">
                    <input name="username" type="text" id="username"/>
                </div>
            </div>
            <div class="item">
                <label class="float" for="userpass">密码</label>
                <div class="line float">
                    <input name="userpass" type="password" id="userpass"/>
                </div>
            </div>
            <div class="rememberbox">
                <input type="checkbox" name="remember" id="remember" value="true"/>
                <label for="remember">记住密码</label>
            </div>
            
            <div class="btnbox">
                <a href="./index.html">
                    <button type="button">登录</button>
                </a>
            </div>
        </div>
    </body>
</html>

CSS文件样式大致包含以下内容：

文本**字体 font-family: 微软雅黑;**

** 字号大小 font-size: 30px;**

** 文本居中 text-align: center;**

** 字体加粗 font-weight: bold;**

** ****颜色 **color: #457B9D;

组件**高度 height: 30px;**

** ****宽度 **width: 60px;

** 背景色 background-color: #89CFF0;**

** 边界 border: 4px solid #3B89C7;**

** 圆角 border-radius: 8px;**

** 隐藏边框 outline: none;**

定位**绝对定位 position: absolute;**

** 距左侧 left: 50%;**

** 距顶部 top: 30%;**

** 移动自身单位 transform: translate(-50%,-50%); 可实现绝对居中**

** 内边距 padding: 5px;**

** 外边距 margin: 10px 0px;**

图片**导入背景图 background-image: url("../image/background.jpeg");**

** 背景窗口占比 background-size: 100%;**

.loginbox{
    border: 2px solid #89CFF0;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 30%;
    /* 绝对居中 */
    transform: translate(-50%,-50%);
    background-color: #F1FAEE;
}

.background{
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url("../image/background.jpeg");
    background-size: 100%;
}

.float{
    float: left;
}

.clear-box:after{
    clear: both;
    content: "";
}

.loginbox>.title{
    color: #457B9D;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    padding: 20px 0px;
}

.loginbox label{
    color: #3B89C7;
    font-family: 微软雅黑;
    width: 60px;
    text-align: center;
    display: inline-block;
    padding: 10px;
    margin: 10px 0px;
}

.loginbox input{
    position: relative;
    height: 30px;
    width: 200px;
    font-size: 20px;
    border: none;
    outline: none;
}

.line{
    border: 4px solid #3B89C7;
    border-radius: 5px;
    padding: 5px;
    margin: 10px 0px;
}

.loginbox>.item{
    margin: 10px 40px 0px;
}

.rememberbox{
    margin: 5px 40px;
}

.rememberbox>input{
    transform: translate(20%,20%);
    width: 20px;
    height: 15px;
}

.rememberbox>label{
    font-size: 15px;
    padding: 10px 0px;
}

.loginbox button{
    width: 100px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    border: none;
    background-color: #89CFF0;
    border-radius: 5px;
}

.loginbox button:hover{
    background-color: #457B9D;
}

.loginbox .btnbox{
    text-align: center;
    padding: 0px 0px 30px 0px;
}

标签： css 前端

本文转载自: https://blog.csdn.net/qq_63161848/article/details/140738162
版权归原作者 小北534 所有，如有侵权，请联系我们删除。

样式分为三种

选择器

创建css文件

十六进制颜色表示

浮动 float

定位 position

盒模型

练习：登录界面

发表评论

“简单的CSS样式”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航