css[属性补充]

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量242 收藏
点赞数
分类专栏： Java前端基础 文章标签： html css visual studio code css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SkillWeak/article/details/105759405
版权

css属性补充

1，overflow（溢出裁剪 边框 盒子阴影）

  • overflow:hidden;
  • border:1px solid red;
  • box-shandow:5px 5px 5px red;
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>溢出裁剪</title>
  <style>
    body,html{
      min-width: 700px;
      max-width: 1600px;
    }
    div{
      width: 300px;
      height: 300px;
      /* border: 1px solid red; */
      border-width:5px ;
      border-style: dashed;
      border-color: black;
      /* 边框圆角 */
      border-radius: 5px;
      /* 超出容器范围的部分隐藏 */
      overflow: hidden;
      /* 盒子阴影 水平偏移 垂直偏移 阴影的模糊程度*/
      box-shadow: 5px 5px 10px  gray;
    }
  </style>
</head>
<body>
  <div>
    <img src="images/daf4d1caa2266b3e.png" alt="">
  </div>
  <H3>OVERFLOW</H3>
</body>
</html>

2，背景

  • 背景颜色：background-color
  • 背景图片：background-img
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景</title>
  <style>
    body{
      /* background-color: aqua; */
      background-image: url("images/daf4d1caa2266b3e.png");
      /* 取消图片平铺 */
     /*  background-repeat: no-repeat; */
     /*  严x轴平铺 */
      background-repeat: repeat-x;
       /* 背景固定 */
       background-attachment: fixed;
    }
    div{
      margin: 0 auto;
      width: 600px;
      height: 1200px;
      background: lightcoral;
     
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

2.1，精灵图的使用

  • backgroud-position
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
           width: 120px;
           height: 120px;
           margin: 0 auto;
           background: url("../images/inde_icon.png");
           background-position: -547px -120px;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

在这里插入图片描述
使用精灵图之后

在这里插入图片描述

  • 背景固定：background-attachment:fixed;
  • 背景图片的大小：
    • auto 自己适应
    • contain 一个方向的值去填充
    • cover 完全填充
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      background: url("images/daf4d1caa2266b3e.png");
      width: 600px;
      height: 600px;
      /* contain 包含 他是自己根据某个放向的值去适应 
        cover 完全填充
      */
      background-size:cover;
    }
  </style>
</head>
<body>
  <div>

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

3，颜色

  • 颜色名称
  • 十六进制色值
  • rgb
  • rgba
<style>
    p{
      /* color是文字的颜色: 
      1. 颜色的名称red green
      2.RGB三原色 red green blue
      3. 16进制的颜色值
      4. rgba()
      */
     /*  color: rgb(0, 110, 255); */
     /* 十六进制的颜色值 */
     /* color:rgb(109, 46, 46); */
     /* 透明度的值在0-1之间 */
     color:rgb(109, 46, 46,0.5);
    }
    div{
      width: 200px;
      height: 200px;
     /*  background: rgba(200, 100, 20, 1); */
     background-color: red;
     /* 透明度 */
     opacity: 0.4;
    }
  </style>

4，文本

  • text-align 水平位置
  • text-sahndow 文字阴影
  • text-ident 文字缩进
  • line-hight 行高
  • text-decoration 文本装饰
<style>
    div{
      width: 500px;
      height: 200px;
      border: 1px solid red;
      /* 文本的水平位置 center 居中 */
      text-align:center ;
      /*文字阴影  */
      text-shadow: 5px 5px 5px red;
      /* 文字的缩进 */
      text-indent: 10px;
    }
    div a{
      /* 文本装饰 下划线*/
      text-decoration: underline;
    }
    #p1{
      width: 500px;
      height: 50px;
      border: 1px solid red;
      text-align: center;
      /* 行高 */
      line-height: 50px;
    }
  </style>

5，其他属性

  • list-style ：取消列表样式
  • outline 轮廓线
  • cursor 鼠标显示样式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* ul 默认是自带样式的 里面的元素和Ul自身有间距 */
    ul{
      width: 400px;
      height: 50px;
      border: 1px solid red;
      /* 取消列表的样式 */
      list-style: none;
      margin: 0;
      padding: 0;
    }
    ul > li {
      width: 96px;
      height: 50px;
      border: 1px solid green;
      float: left;
    }

    input{
      width: 150px;
      height: 35px;
      background: lawngreen;
      /* 外部的轮廓线 */
      outline:none ;
      /* border: 1px solid lawngreen; */
      border: none;
    }
    input:hover{
      /* 鼠标的样式 pointer*/
      cursor: wait;
    }
  </style>
</head>
<body>
  <ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
  </ul>

<br>
  <input type="button" value="">
</body>
</html>

6，过渡

  • transition:
    • ease 平滑过渡
    • ease-in由慢到快
    • ease-out又快到慢
    • ease-in-out

7，转换(transform)

  • translate
  • rotate
  • 3D
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>转换</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      background: lightblue;
      margin: 100px auto;
    }
    div:hover{
      /* 水平移动5px */
      transform: translateX(-5px) translateY(-5px);
      box-shadow: 0px 0px 15px black;
      transition: 1s ease;

    }
    div:nth-child(2){
      width: 300px;
      height: 300px;
      margin: 50px auto;
      background: lightcoral;
    }
    div:nth-child(2):hover{
      /* 旋转 deg 角度单位 */
      transform: rotate(45deg) scale(1.5);
      transition: 2s ease-in-out;
      /* scale 缩放 */
    /*   transform: scale(1.5); */
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>
</html>
  • 转换前

在这里插入图片描述

  • 转换后

在这里插入图片描述

  • 3D效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D效果</title>
    <style>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            /* background: lawngreen; */
            border: 1px solid red;
            margin: 200px auto;
            /* 转换为3d效果 x y z */
            transform-style: preserve-3d;
            transform: rotateX(-60deg) rotateY(60deg);
        }

        .front,
        .top,
        .left,
        .right,
        .back,
        .bottom {
            position: absolute;
            width: 200px;
            height: 200px;
        }

        .front {
            background-image: url("../images/3.png");
            transform: translateZ(100px);
        }

        .back {
            background-image: url("../images/3.png");
            transform: translateZ(-100px) rotateY(180deg);
        }

        .left {
            background-image: url("../images/3.png");
            transform: translateX(-100px) rotateY(-90deg);
        }

        .right {
            background-image: url("../images/3.png");
            transform: translateX(100px) rotateY(90deg);
        }

        .top {
            background-image: url("../images/3.png");
            transform: translateY(-100px) rotateX(90deg);
        }

        .bottom {
            background-image: url("../images/3.png");
            transform: translateY(100px) rotateX(-90deg);
        }

        .box:hover {
            transform: rotateX(-360deg) rotateY(360deg);
            transition: 10s ease;
        }

        /* 爆炸效果 */
        .box:hover .front {
            background-image: url("../images/3.png");
            transform: translateZ(200px);
        }

        .box:hover .back {
            background-image: url("../images/3.png");
            transform: translateZ(-200px) rotateY(180deg);
        }

        .box:hover .left {
            background-image: url("../images/3.png");
            transform: translateX(-200px) rotateY(-90deg);
        }

        .box:hover .right {
            background-image: url("../images/3.png");
            transform: translateX(200px) rotateY(90deg);
        }

        .box:hover .top {
            background-image: url("../images/3.png");
            transform: translateY(-200px) rotateX(90deg);
        }

        .box:hover .bottom {
            background-image: url("../images/3.png");
            transform: translateY(200px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">前面</div>
        <div class="back">后面</div>
        <div class="left">左面</div>
        <div class="right">右面</div>
        <div class="top">上面</div>
        <div class="bottom">下面</div>
    </div>


</body>

</html>

在这里插入图片描述

8，动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: lightcoral;
            /* 动画名称，时间，速度，死循环![在这里插入图片描述](https://img-blog.csdnimg.cn/20200425235910977.gif#pic_center)
 */
            animation: temp 3s ease infinite;
        }

        @keyframes temp {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(200px, 0) rotate(60deg);
                background: red;
            }

            50% {
                transform: translate(200px, 200px) rotate(60deg);
                background: green;
            }

            75% {
                transform: translate(0, 200px) rotate(60deg);
                background:blue;
            }

            100% {
                transform: translate(0, 0) rotate(0);
                background: lightseagreen;
            }
        }
    </style>
</head>

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

</html>

在这里插入图片描述

9，响应式和自适应页面布局（了解）

  • 媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 媒体查询: 查询当前设备浏览器的大小 -->
  <style>
    /* 我们根据浏览器的不同决定他的大小 */
    @media screen and  (min-width: 1200px){
      .nav{
        width: 1516px;
        height: 400px;
        background: lawngreen;
      }
    }



    @media screen and  (max-width: 1200px) and (min-width: 768px){
      .nav{
        width: 1516px;
        height: 200px;
        background: lightseagreen;
      }
    }
    @media screen and  (max-width: 768px){
      .nav{
        width: 1516px;
        height: 300px;
        background: lightcoral;
      }
    }
  </style>
</head>
<body>
  <div class="nav">hello</div>
</body>
</html>
SkillWeak
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS - CSS案例和额外属性补充
老司机的后备箱
05-23 564
writing-mode writing-mode定义了文本水平或垂直排布以及在块级元素中文本的行进方向 属性值 说明 horizontal-tb 文本水平排版，内容从上往下排列 — 默认值 vertical-lr 文本垂直排列，从左往右进行排列 vertical-rl 文本垂直排列，从右往左进行排列 .box { width: 100px; height: 100px; background-color: skyblue; padding: 10px; ma
表格的css属性
YiLin_Classics的博客
04-01 1213
表格的css属性表格的css属性行分组标签表格标题列分组标签表格的CSS属性标签table的常用属性标签td的常用属性表单的补充input类型下拉菜单textarea类型 表格的css属性 行分组标签 标签 含义 thead 表格的头部 tbody 表格的主体 tfoot 表格的尾部 只允许有一个头部，一个尾部，但是可以有多个主体。如果没有分组标签的话，浏览器会默认创建一个tbody 表格标题 标签：caption 属性 属性值 text-align 调整表格标题
CSS属性大全
大剑师兰特的GIS世界
04-21 1614
1. 盒模型与布局属性 2. 文本样式属性 3. 背景与渐变 4. 列表与生成内容 5. 伪类与伪元素 6. 其他常见属性 7. 容器与定位 8. 多列布局 9. CSS Grid布局补充 10. Flexbox布局补充 11. 媒体查询与响应式设计 12. 用户界面样式 13. 弹性盒模型 14. 进阶选择器与组合器 15. 动画与关键帧
css属性书写顺序规范
RayShyy的博客
04-21 367
小shy刚开始写前端css样式的时候总是想到什么样式就写什么样式，完全不注重css书写顺序，后来才了解到正确的css样式顺序，其实会提升浏览器渲染dom的性能；所以小shy觉得css样式顺序正确的书写也是每一个前端开发人员不可或缺的技能。 (1) 定位属性：display / position / float / left / top / right / bottom / overflow / clear / z-index (2) 自身属性：width / height / margin / p.
Css display 属性详解
热门推荐
HaoNanEr1989的博客
06-20 2万+
Css display属性详解
css属性
淘淘桃的博客
04-14 6330
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。# 它能够对颜色和字体进行透明。# 只能对颜色进行透明。
深入研究 CSSfloat属性
分享身边生活经验blog
10-13 1714
CSSfloat是一种定位属性，它将元素放置在其容器的左侧或右侧，并允许内联元素环绕它。过去，float它因被滥用于页面布局而声名狼藉。这导致一些开发人员质疑它现在是否已弃用，还是应该完全避免！CSSfloat仍然是相关的。我们应该在正确的上下文中使用它！本文讨论了 CSS 浮动的历史，并展示了float可用于现代网页设计的几种方法，以实现创意文本布局和令人惊叹的设计元素。
css中div属性及类型
qq_52648305的博客
04-12 1915
文档流 首先谈一下文档流: 浏览器会根据 元素的排列方式 块元素 从上到下排列行元素和行内块 从左到右排列 如果空间不足 自动换行我们称为流式布局 有了文档流,我们知道了div标签属于标准的块元素,而盒模型又分为标准盒模型和怪异盒模型 盒模型 1.标准盒模型 盒模型(box moldel),是w3c规定一个浏览器如何渲染,显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型 盒子组成 = content+padding+border+margin 补充:父盒子宽高设置,子盒子未设置宽高时子盒
CSS之属性与选择器 (三)：CSS文本属性、CSS字体属性、CSS常见选择器
Good Good Study,Day Day Up!
03-31 706
按照一定的规则选出符合条件的元素，为其添加CSS样式。
【CSS】11.CSS补充属性white-space和text-overflow
kakaai77的博客
04-20 411
white-space用于设置空白处理和换行规则。
css入门学习笔记补充 补充了一些选择器
05-25
`calc()` 函数允许我们在CSS属性值中进行计算，比如 `width: calc(100% - 80px);` 可以计算出元素宽度为100%减去80像素。 7. **CSS过渡**： `transition` 属性用于创建平滑的过渡效果，常与`:hover`结合使用。...
css的应用特殊的属性
08-29
让我们一起探讨一下这些特殊的CSS属性。 1. **`clip-path`**： `clip-path`属性允许我们为元素定义一个剪裁区域，超出该区域的部分将不显示。它可以使用polygon()、circle()、ellipse()或者inset()函数来创建各种...
《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践
01-11
1. **选择器增强**：CSS3引入了更多的选择器，如类选择器、属性选择器、伪类和伪元素，使得样式应用更加灵活精确。 2. **布局模块**：CSS3的Flexbox和Grid布局系统为复杂的网页布局提供了强大的解决方案，无论屏幕...
详解CSS3 Media Queries中媒体属性的使用
09-24
主要介绍了CSS3 Media Queries中媒体属性的使用,文章中还以一个响应式设计的例子作为补充讲解,需要的朋友可以参考下
grid-css-learning
04-23
通过实践，学习者可以更好地理解这些布局系统的应用场景和优缺点，以及它们如何相互补充。例如，当需要创建复杂的网格结构时，CSS Grid可能是最佳选择；而在处理单行或多列灵活布局时，Flexbox可能更为适用。 为了...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1073
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 993
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 397
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 242
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值