0
0

简单的CSS样式

样式分为三种

  1.     **内部样式**：写在html文件里的样式叫内部样式
  3.     **内联样式**：写在需要的标签中
  5.     **外部样式**：写在外部css文件里

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

  1.         <style>
  2.             /* 写在html文件里的样式叫内部样式 */
  3.             /* 选择器 */
  4.             /* ID选择器 */
  5.             #boxa{
  6.                 height: 100px;
  7.                 width: 100px;
  8.                 background-color: skyblue;
  9.                 
  10.                 /* 字体颜色 */
  11.                 color:green;
  12.                 /* 字体大小 */
  13.                 font-size: 30px;
  14.                 /* 字体加粗 数值达到600或bold*/
  15.                 font-weight: 800;
  16.                 /* 字体居中 */
  17.                 text-align: center;
  18.                 /* 单行文本垂直居中  行高等于容器的高度*/
  19.                 line-height: 100px;
  20.             }
  21.             /* 标签选择器 元素选择器 */
  22.             div{
  23.                 height: 100px;
  24.                 width: 100px;
  25.             }
  26.             /* 类选择器 */
  27.             .bgred{
  28.                 background-color: red;
  29.                 /* 不显示 */
  30.                 display: none;
  31.             }
  32.         </style>

选择器

  1.     **ID选择器**：用井号 **# **标识，设置指定 id 的样式
  3.     **标签选择器**：选择对应的标签类型
  5.    ** 类选择器**：用点 **.** 表示选择指定的 class
  1.     <body>
  2.         <!-- 内联样式 -->
  3.         <div style="width: 100px;height: 100px;background-color: pink"></div>
  4.         <div id="boxa">你好</div>
  5.         <div class="bgred"></div>
  6.         <div class="bgred"></div>
  7.     </body>

创建css文件

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

十六进制颜色表示

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

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

  1. div{
  2.     height: 100px;
  3.     width: 100px;
  4. }
  6. .red{
  7.     background-color: red;
  8. }
  10. .blue{
  11.     background-color: #89CFF0;
  12. }
  14. .green{
  15.     background-color: #A7FC00;
  16. }
  18. .pink{
  19.     background-color: #F2B5D4;
  20. }

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

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

浮动 float

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

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

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

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

  1. .float{
  2.     float: left;
  3. }

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

  1. /*清空浮动*/
  2. .clear-box:after{
  3.     clear: both;
  4.     content: "";
  5.     display: block;
  6. }
  1.     <body>
  2.         <div class="red float"></div>
  3.         <div class="green float"></div>
  4.         <div class="blue float"></div>
  5.         
  6.         <div class="pink" style="width: 500px;height: 300px;"></div>
  7.     </body>

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

子代选择器

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

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

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

下面的CSS代码中的，**

  1. list-style: none;

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

  1. ul,ol,li{
  2.     list-style: none;
  3.     margin: 0;
  4.     padding: 0;
  5. }

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

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

  1.         <ul id="menu" class="clear-box">
  2.             <li class="float">首页</li>
  3.             <li>新闻</li>
  4.             <li>娱乐</li>
  5.             <li>学习
  6.                 <ul class="child">
  7.                     <li>Java</li>
  8.                     <li>Python</li>
  9.                     <li>C++</li>
  10.                 </ul>
  11.             </li>
  12.             <li>奥运</li>
  13.         </ul>

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

  1. .child{
  2.     display: none;
  3.     position: absolute;
  4.     left: 0;
  5. }
  6. .child>li{
  7.     padding: 10px 25px;
  8.     width: 60px;
  9. }
  11. .child>li:hover{
  12.     background-color: #89CFF0;
  13. }
  15. #menu>li:hover .child{
  16.     display: block;
  17. }

定位 position

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

  1.         <div class="red"></div>
  2.         <div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div>
  3.         <div class="pink" style="position: relative;left: 20px;top: 20px;"></div>
  4.         <div class="blue" style="position: absolute;left: 50px;top: 10px;"></div>
  5.         <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计算外边距时只保留一侧

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

练习：登录界面

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/login.css" />
  7.     </head>
  8.     <body>
  9.         <div class="background"></div>
  10.         <div class="loginbox" >
  11.             <div class="title">Easy管理系统</div>
  12.             <div class="item">
  13.                 <label class="float" for="username">用户名</label>
  14.                 <div class="line float">
  15.                     <input name="username" type="text" id="username"/>
  16.                 </div>
  17.             </div>
  18.             <div class="item">
  19.                 <label class="float" for="userpass">密码</label>
  20.                 <div class="line float">
  21.                     <input name="userpass" type="password" id="userpass"/>
  22.                 </div>
  23.             </div>
  24.             <div class="rememberbox">
  25.                 <input type="checkbox" name="remember" id="remember" value="true"/>
  26.                 <label for="remember">记住密码</label>
  27.             </div>
  28.             
  29.             <div class="btnbox">
  30.                 <a href="./index.html">
  31.                     <button type="button">登录</button>
  32.                 </a>
  33.             </div>
  34.         </div>
  35.     </body>
  36. </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%;**

  1. .loginbox{
  2.     border: 2px solid #89CFF0;
  3.     border-radius: 8px;
  4.     position: absolute;
  5.     left: 50%;
  6.     top: 30%;
  7.     /* 绝对居中 */
  8.     transform: translate(-50%,-50%);
  9.     background-color: #F1FAEE;
  10. }
  12. .background{
  13.     width: 100%;
  14.     height: 100%;
  15.     position: absolute;
  16.     background-image: url("../image/background.jpeg");
  17.     background-size: 100%;
  18. }
  20. .float{
  21.     float: left;
  22. }
  24. .clear-box:after{
  25.     clear: both;
  26.     content: "";
  27. }
  29. .loginbox>.title{
  30.     color: #457B9D;
  31.     font-weight: bold;
  32.     font-size: 30px;
  33.     text-align: center;
  34.     padding: 20px 0px;
  35. }
  37. .loginbox label{
  38.     color: #3B89C7;
  39.     font-family: 微软雅黑;
  40.     width: 60px;
  41.     text-align: center;
  42.     display: inline-block;
  43.     padding: 10px;
  44.     margin: 10px 0px;
  45. }
  47. .loginbox input{
  48.     position: relative;
  49.     height: 30px;
  50.     width: 200px;
  51.     font-size: 20px;
  52.     border: none;
  53.     outline: none;
  54. }
  56. .line{
  57.     border: 4px solid #3B89C7;
  58.     border-radius: 5px;
  59.     padding: 5px;
  60.     margin: 10px 0px;
  61. }
  63. .loginbox>.item{
  64.     margin: 10px 40px 0px;
  65. }
  67. .rememberbox{
  68.     margin: 5px 40px;
  69. }
  71. .rememberbox>input{
  72.     transform: translate(20%,20%);
  73.     width: 20px;
  74.     height: 15px;
  75. }
  77. .rememberbox>label{
  78.     font-size: 15px;
  79.     padding: 10px 0px;
  80. }
  82. .loginbox button{
  83.     width: 100px;
  84.     height: 50px;
  85.     text-align: center;
  86.     font-size: 20px;
  87.     border: none;
  88.     background-color: #89CFF0;
  89.     border-radius: 5px;
  90. }
  92. .loginbox button:hover{
  93.     background-color: #457B9D;
  94. }
  96. .loginbox .btnbox{
  97.     text-align: center;
  98.     padding: 0px 0px 30px 0px;
  99. }
标签： css 前端
本文转载自: https://blog.csdn.net/qq_63161848/article/details/140738162
版权归原作者 小北534 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。