CSS样式

最新推荐文章于 2025-06-01 00:32:15 发布
最新推荐文章于 2025-06-01 00:32:15 发布
阅读量110 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51120880/article/details/119570961
版权
本文介绍了CSS中的各种选择器，包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器、组合选择器，以及它们在实际网页布局和样式控制中的应用。通过实例展示了边框样式、文本样式、表格布局、元素显示方式和盒子模型的使用，同时探讨了登录页面的样式设计，涵盖了背景图片、表单样式、按钮和超链接的美化等技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*元素选择器*/
        div{
            color: red;
        }

        /*类选择器*/
        .cls{
            color: blue;
        }

        /*id选择器*/
        #d1{
            color: green;
        }

        #d2{
            color: pink;
        }
    </style>
</head>
<body>
    <div>div1</div>

    <div class="cls">div2</div>
    <div class="cls">div3</div>

    <div id="d1">div4</div>
    <div id="d2">div5</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        [type]{
            color: red;
        }

        [type=password]{
            color: blue;
        }
    </style>
</head>
<body>
    用户名：<input type="text"/> <br/>
    密码：<input type="password"/> <br/>
    邮箱：<input type="email"/> <br/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a{
            text-decoration: none;
        }

        /*未访问的状态*/
        a:link{
            color: black;
        }

        /*已访问的状态*/
        a:visited{
            color: blue;
        }

        /*鼠标悬浮的状态*/
        a:hover{
            color: red;
        }

        /*已选中的状态*/
        a:active{
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器*/
        .center li{
            color: red;
        }

        /*分组选择器*/
        span,p{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="top">
        <ol>
            <li>aa</li>
            <li>bb</li>
        </ol>
    </div>

    <div class="center">
        <ol>
            <li>cc</li>
            <li>dd</li>
        </ol>
    </div>

    <span>span</span> <br/>
    <p>段落</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框样式演示</title>
    <style>
        #d1{
            /*设置所有边框*/
            /*border: 5px solid black;*/

            /*设置上边框*/
            border-top: 5px solid black;
            /*设置左边框*/
            border-left: 5px double red;
            /*设置右边框*/
            border-right: 5px dotted blue;
            /*设置下边框*/
            border-bottom: 5px dashed pink;

            width: 150px;
            height: 150px;
        }

        #d2{
            border: 5px solid red;
            /*设置边框的弧度*/
            border-radius: 25px;

            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <br/>
    <div id="d2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式演示</title>
    <style>
        div{
            /*文本颜色*/
            color: /*red*/ #ff0000;

            /*字体*/
            font-family: /*宋体*/ 微软雅黑;

            /*字体大小*/
            font-size: 25px;

            /*下划线  none：无  underline：下划线  overline：上划线  line-through：删除线*/
            text-decoration: none;

            /*水平对齐方式  left：居左  center：居中  right：居右*/
            text-align: center;

            /*行间距*/
            line-height: 60px;
        }


        span{
            /*文字垂直对齐  top：居上   bottom：居下  middle：居中   百分比*/
            vertical-align: 50%;
        }
    </style>
</head>
<body>

    <div>
        我是文字
    </div>
    <div>
        我是文字
    </div>

    <img src="../img/wx.png" width="38px" height="38px"/>
    <span>微信</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签演示</title>
</head>
<body>
    <!--
        表格标签：<table>
        属性：
            width-宽度
            height-高度
            border-边框
            align-对齐方式

        行标签：<tr>
        属性：
            align-对齐方式

        单元格标签：<td>
        属性：
            rowspan-合并行
            colspan-和并列

        表头标签：<th> 自带居中和加粗效果

        表头语义标签：<thead>
        表体语义标签：<tbody>
        表脚语义标签：<tfoot>
    -->
    <table width="400px" border="1px" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>数学</th>
                <th>语文</th>
            </tr>
        </thead>

        <tbody>
            <tr align="center">
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>23</td>
                <td colspan="2">90</td>
                <!--<td>90</td>-->
            </tr>

            <tr align="center">
                <td>李四</td>
                <!--<td>男</td>-->
                <td>24</td>
                <td>95</td>
                <td>98</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="4">总分数：</td>
                <!--<td></td>
                <td></td>
                <td></td>-->
                <td>373</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式演示</title>
    <style>
        /*背景图片重复  no-repeat：不重复  repeat-x：水平重复  repeat-y：垂直重复   repeat：水平+垂直重复*/
        body{
            background: url("../img/bg.jpg");

            background-repeat: repeat;
        }

        /*轮廓控制 double：双实线   dotted：圆点   dashed：虚线   none：无*/
        input{
            outline: none;
        }

        /*元素显示  inline：内联元素(无换行、无长宽)   block：块级元素(有换行)  inline-block：内联元素(有长宽)  none：隐藏元素*/
        div{
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    用户名：<input type="text"/> <br/>

    <div>春季</div>
    <div>夏季</div>
    <div>秋季</div>
    <div>冬季</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型演示</title>
    <style>
        .wai{
            border: 1px solid red;
            width: 200px;
            height: 200px;

            /*设置内边距,会导致外框的变化*/
            /*padding: 50px;*/
        }

        .nei{
            border: 1px solid blue;
            width: 100px;
            height: 100px;

            /*设置外边距*/
            /*margin-top: 50px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 50px;*/

            /*margin: 50px;*/

            /*上、右、下、左*/
            /*margin: 70px 35px 30px 65px;*/
        }
    </style>
</head>
<body>
    <div class="wai">
        <div class="nei">

        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../css/login.css"/>
</head>
<body>
    <!--顶部公司图标-->
    <div>
        <img src="../img/logo.png"/>
    </div>

    <!--中间表单-->
    <div class="center">
        <form action="#" method="get" autocomplete="off">
            <table width="100%">
                <thead>
                    <tr>
                        <th colspan="2">账&nbsp;密&nbsp;登&nbsp;录<hr/></th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>
                            <label for="username">账号</label>
                        </td>
                        <td>
                            <input type="text" id="username" name="username" placeholder=" 请输入账号" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="password">密码</label>
                        </td>
                        <td>
                            <input type="password" id="password" name="password" placeholder=" 请输入密码" required/>
                        </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td colspan="2">
                            <button type="submit">确&nbsp;定</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>

    <!--底部页脚-->
    <div class="footer">
        <br/><br/>
        登录/注册即表示您同意&nbsp;&nbsp;
        <a href="#" target="_blank">用户协议</a>&nbsp;&nbsp;
        和&nbsp;&nbsp;
        <a href="#" target="_blank">隐私条款</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" target="_blank">忘记密码?</a>
    </div>
</body>
</html>

/*背景图片*/
body{
    background: url("../img/bg.png");
}

/*中间表单样式*/
.center{
    background: white;      /*背景色*/
    width: 40%;             /*宽度*/
    margin: auto;           /*水平居中外边距*/
    margin-top: 100px;      /*上外边距*/
    border-radius: 15px;    /*边框弧度*/
    text-align: center;     /*文本水平居中*/
}

/*表头样式*/
thead th{
    font-size: 30px;    /*字体大小*/
    color: orangered;   /*字体颜色*/
}

/*表体提示信息样式*/
tbody label{
    font-size: 20px;    /*字体大小*/
}

/*表体输入框样式*/
tbody input{
    border: 1px solid gray; /*边框*/
    border-radius: 5px;     /*边框弧度*/
    width: 90%;             /*输入框的宽度*/
    height: 40px;           /*输入框的高度*/
    outline: none;          /*取消轮廓的样式*/
}

/*表底确定按钮样式*/
tfoot button{
    border: 1px solid crimson;  /*边框*/
    border-radius: 5px;         /*边框弧度*/
    width: 95%;                 /*宽度*/
    height: 40px;               /*高度*/
    background: crimson;        /*背景色*/
    color: white;               /*文字的颜色*/
    font-size: 20px;            /*字体大小*/
}

/*表行高度*/
tr{
    line-height: 60px;  /*行高*/
}

/*底部页脚样式*/
.footer{
    width: 35%; /*宽度*/
    margin: auto;   /*水平居中外边距*/
    font-size: 15px;    /*字体大小*/
    color: gray;    /*字体颜色*/
}

/*超链接样式*/
a{
    text-decoration: none;  /*去除超链接的下划线*/
    color: blue;            /*超链接颜色*/
}
Li.ve
关注
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
css 样式面板,关于 CSS 样式面板
weixin_42363501的博客
08-03 3735
使用“CSS 样式”面板可以跟踪影响当前所选页面元素的 CSS 规则和属性(“当前”模式)，也可以跟踪文档可用的所有规则和属性(“所有”模式)。使用面板顶部的切换按钮可以在两种模式之间切换。使用“CSS 样式”面板还可以在“所有”和“当前”模式下修改 CSS 属性。有关“当前”模式和“所有”模式下“CSS 样式”面板的信息，请参阅下面两部分。当前模式下的 CSS 样式面板在“当前”模式下，“CSS...
CSS样式规则
Liyunhao_haoge的博客
10-03 7313
CSS样式规则 使用HTML时，需要遵从一定的规范。CSS也是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：选择器 {属性:属性值;属性:属性值;}如：h1 {color:red; font-size:20px;} 在上面的规则中: 1、选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。 2、属性和属性值以“键值对”的形式出现。 3...
CSS 样式书写规范,css样式书写规范
weixin_42535703的博客
08-04 5087
在工作当中css样式是非常重要的，但是咋样书写css样式更重要。一、css书写规范1、定位属性：position display float left top right bottom overflow clear z-index2、自身属性：width height padding border margin background3、文字样式：font-fami...
CSS样式表
全栈攻城狮JSON的博客
05-02 4829
目录 一、基础概念 二、CSS使用 1、行内样式 2、内部样式 3、外部样式 4、CSS语法 5、CSS注释 三、基本选择器 1、id选择器 2、class选择器 3、元素选择器/标签选择器 4、选择器优先级 5、样式表的优先级 四、CSS常用样式 1、color：字体颜色 2、width height：宽高 3、背景样式 4、文本样式 5、列表样式 6、边框样式 6、HTML&&CSS调试器 五、盒子模型 1、盒子的宽高 2、设置宽度=.
常用CSS样式
qq_51593012的博客
07-19 4122
CSS(层叠样式表)在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS样式穿透方法
MDCG99的博客
08-05 3326
CSS样式穿透通常在使用组件库或第三方组件时遇到，由于组件库封装了组件的样式，难以直接修改组件内部的样式。都是Vue特定的选择器，如果项目使用了CSS预处理器（如Sass、Less等），需要在选择器前面加上。是它的现代替代方案。在使用它们时，可以通过选择器深入到组件的子组件中，并覆盖它们的样式。伪选择器（Vue 2.6.0+）：为了替代过时的。是一种过时的样式穿透选择器，而。选择器，Vue引入了。
CSS样式穿透
weixin_44293690的博客
08-02 4472
CSS样式穿透
CSS样式覆盖
qq_17355709的博客
07-24 2003
CSS样式覆盖的方法
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
清除修改删除Vue自带的CSS样式
03-17
清除删除修改Vue自带的CSS样式，在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的，只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
Qt css样式大全+详细书签pdf.zip
12-05
本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料，旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先，"Qt css样式大全(整理版） - wang13342322203的博客 - 优快云博客.html"是王...
Terminal-CSS:模拟旧式终端的 CSS 样式
06-15
【Terminal-CSS】是一种独特的CSS样式，其设计灵感源自旧时代的计算机终端，旨在为现代网页带来复古风格的视觉体验。这种样式通过纯CSS技术，能够将网页元素转化为类似早期ASCII字符终端的显示效果，营造出一种仿佛...
使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果
最新发布
m0_46335150的博客
06-01 313
这篇文章介绍了一个纯CSS实现的3x3彩色格子网格交互效果。当鼠标悬停任意格子时，所在行和列会放大显示。主要技术点包括：CSS Grid布局构建基础网格，SASS循环生成9种不同颜色，利用:has()选择器监听悬停状态，结合SASS数学模块和列表操作动态调整行列比例。整个效果仅需少量HTML和SASS代码，无需JavaScript，但需注意:has()在Firefox的兼容性问题。该方案展示了现代CSS结合预处理器的强大表现力。
【前端】CSS面试八股
Lifelong learning.
05-30 628
Q：回流和重绘回流reflow：计算元素的几何，引发layout重绘repaint：更新元素可见样式，引发paint回流的成本比重绘高得多，因为它涉及重新计算元素的几何属性和页面布局。Q：transform、opacity、filter、will-change创建动画A：既不会触发reflow也不会repaint，当使用transform或opacity时，跳过layout和paint阶段，直接在GPU中处理变换，浏览器只需要composite已有图层而非render页面。
【手搓一个原生全局loading组件解决页面闪烁问题】
西洼工作室的博客
05-31 276
添加了 <global-loading> 自定义元素。 引入了 global-loading.js 文件以支持组件功能。 创建了一个新的 Web Component GlobalLoading。 在组件中定义了 loading 动画的 HTML 和 CSS。 实现了 init 方法，监听 window 的 load 事件并在页面加载完成后隐藏 loading 动画。 将 loading 动画的样式封装在组件内部，避免污染全局样式。
一篇学习CSS的笔记
2301_78933228的博客
05-28 1143
Cascading Style Sheets简称CSS，中文翻译为层叠样式表。当HTML被发明出来初期，不同的浏览器提供了各种各样的样式语言给用户控制网页的效果，HTML包含的显示属性并不是很多。但是随着各种使用者对HTML的需求，HTML添加了大量显示功能，以至于变得十分臃肿。随后CSS便诞生了。CSS是一种用来表现HTML等文件样式的计算机语言。仅有HTML的网页显示效果往往简陋不堪到难以入目。
实用的Gridview与Css样式实例解析
标题：“Gridview+Css样式实例，效果极好”指的是通过结合Gridview控件和CSS（层叠样式表）样式来展示一个实际操作的示例，说明该示例具有非常好的视觉效果和实用性。Gridview通常用于数据的表格展示，它是一种在很...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值