CSS复习(一)

已于 2023-04-14 16:44:41 修改
阅读量484 收藏 2
点赞数
分类专栏： 前端 文章标签： css 前端 html
于 2023-01-02 22:29:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Blue_Pepsi_Cola/article/details/128507205
版权

CSS复习

1.前言

首先补充一下部分相关知识：

  1. 分区标签自身没有显示效果，可以理解成是一个容器，对多个有相关性的标签进行统一管理。
  2. 一个页面一般分为三大区
<div>头</div>
<div>体</div>
<div>脚</div>

html5中新增了几个分区标签，作用和DIV一样，只是为了提高代码可读性。

<header>头</header>
<article>文章/正文</article> <section>块/区域</section>
<footer>脚</footer>

2. CSS介绍

CSS全称 Casecading层叠 Style样式 Sheet表: 层叠样式表
作用：用于美化页面(装修)

2.1 CSS的引入方式

三种方式引入：

  1. 内联样式：在标签的style属性中添加样式代码 <h1 style="color:red">今天贼冷</h1>
  2. 内部样式：在head标签里面添加style标签,在标签体内添加样式代码, 好处可以复用, 弊端: 只能在当前页面复用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 通过选择器先选择到标签再添加样式 */
        /*  标签名选择器  */
        h1{
            background-color: green;
        }
    </style>
</head>
<body>
        <h1>今天贼冷</h1>
        <h1 style="color:red">peace&love</h1>
</body>
</html>
  1. 外部样式：在单独的css文件中写样式代码,在html页面中通过link标签引入该样式文件, 好处:支持多页面复用。
    外部样式工作中使用频率最高, 但是学习过程中内部样式用的多
    引入方式的优先级: 内联优先级最高,内部和外部优先级相同 后执行覆盖先执行的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 内部样式    -->
    <style type="text/css">
        /* 通过选择器先选择到标签再添加样式 */
        /*  标签名选择器  */
        h1{
            background-color: green;
        }
    </style>

    <!-- 外部样式 引入css文件 rel关系 -->
    <link rel="stylesheet" href="first.css">
</head>
<body>
        <h1>今天贼冷</h1>
        <h1 style="color:red">peace&love</h1>
        <p>又该吃饭了</p>
        <p>吃点啥？</p>
</body>
</html>

2.2 选择器

当使用内部或者外部样式时，需要先通过选择器选择元素再添加样式。

  1. 标签名选择器
    格式：标签名{样式代码}
    选择 页面中所有该标签名的标签 ，比如写个h1所有的h1都会受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 内部样式    -->
    <style type="text/css">
        /* 通过选择器先选择到标签再添加样式 */
        /*  标签名选择器  */
        h1{
            background-color: green;
        }
        p{
            color: aqua;
        }
    </style>

    <!-- 外部样式 引入css文件 rel关系 -->
    <link rel="stylesheet" href="first.css">
</head>
<body>
        <h1>今天贼冷</h1>
        <h1 style="color:red">peace&love</h1>
        <p>又该吃饭了</p>
        <p>吃点啥？</p>
</body>
</html>
  1. id选择器
    html页面中的所有标签都可以添加id属性, 每个标签的id属性需要是唯一的。
    格式: #id{样式代码}
    选择 页面中id值为xxx的某一个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* id选择器 */
        #d1{
            color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p id="d1">p2</p>
    <p>p3</p>
</body>
</html>
  1. class选择器(类选择器)
    格式: .class{样式代码}
    选择页面中所有class值为xxx的多个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* id选择器 */
        #d1{
            color: red;
        }

        /* class选择器 */
        .c1{
            color: blue;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p id="d1">p2</p>

    <p class="c1">p2</p>

    <p>p3</p>
    <h3 id="d2">h3_1</h3>
    <h3 id="d3">h3_2</h3>

    <h3 class="c1">h3_3</h3>

    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li class="c1">li_3</li>
    </ul>
</body>
</html>
  1. 分组选择器
    将多个选择器合并成一个选择器
    格式: #id,.class,h1{样式代码}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* id选择器 */
        #d1{
            color: red;
        }

        /* class选择器 */
        .c1{
            color: blue;
        }

        /* 分组选择器 */
        #d1,.c1,li{
            background-color: green;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p id="d1">p2</p>

    <p class="c1">p2</p>

    <p>p3</p>
    <h3 id="d2">h3_1</h3>
    <h3 id="d3">h3_2</h3>

    <h3 class="c1">h3_3</h3>

    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li class="c1">li_3</li>
    </ul>
</body>
</html>
  1. 属性选择器
    格式: 标签名[属性名=‘值’]{样式代码}
    通过元素的属性去做选择条件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* id选择器 */
        #d1{
            color: red;
        }

        /* class选择器 */
        .c1{
            color: blue;
        }

        /* 分组选择器 */
        #d1,.c1,li{
            background-color: green;
        }

        /* 属性选择器 */
        input[type='password']{
            background-color: darkslateblue;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p id="d1">p2</p>

    <p class="c1">p2</p>

    <p>p3</p>
    <h3 id="d2">h3_1</h3>
    <h3 id="d3">h3_2</h3>

    <h3 class="c1">h3_3</h3>

    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li class="c1">li_3</li>
    </ul>

    <input type="text">
    <input type="password">
</body>
</html>

在这里插入图片描述

  1. 子孙后代选择器
    格式: div p{样式代码}
    匹配div里面的所有p标签(子元素和所有后代元素)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        div div p{
            background-color: red;
        }
    </style>
</head>
    <body>
        <p>p1</p>

        <div>
            <p>p2</p>
            <div>
                <p>p3</p>
            </div>
            <div>
                <p>p4</p>
                <div>
                    <p>p5</p>
                </div>
            </div>
        </div>
    </body>
</html>

在这里插入图片描述

  1. 子元素选择器
    格式: div>p{样式代码}
    匹配div里面子元素里面的p标签(只包含子元素)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        /* 子孙后代选择器 */
        /*div div p{*/
        /*    background-color: red;*/
        /*}*/

        /* 子元素选择器 */
        body>div>div>p{
            color: blue;
        }
    </style>
</head>
    <body>
        <p>p1</p>

        <div>
            <p>p2</p>
            <div>
                <p>p3</p>
            </div>
            <div>
                <p>p4</p>
                <div>
                    <p>p5</p>
                </div>
            </div>
        </div>
    </body>
</html>

在这里插入图片描述

  1. 伪类选择器
    选择元素的状态: 未访问状态 访问过状态 悬停状态 点击状态
    格式: a:link未访问/visited访问过/hover悬停/active点击{样式代码}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 访问过 */
        a:visited{
            color: red;
        }

        /* 未访问 */
        a:link{
            color: yellow;
        }

        /* 点击状态 */
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <a href="Java并发知识图谱.png">超链接1</a>
    <a href="Linux常用命令.png">超链接2</a>
    <a href="ElasticSearch数据结构.png">超链接3</a>
    <a href="MySQL基本语法.png">超链接4</a>
</body>
</html>
  1. 任意元素选择器
    匹配页面中所有的元素
    格式: *{样式代码}

在这里插入图片描述

2.2 颜色的赋值方式

  1. 颜色赋值方式
    三原色：红绿蓝 rgb red green blue 每个颜色取值范围0-255
    颜色单词赋值 red/blue/pink/green等等
    6位16进制赋值 #ff0000
    3位 16进制 #f00
    3位10进制赋值 rgb(255,0,0)
    4位10进制赋值 rgba(255,0,0,0~1) a= alpha 透明值，值越小越透明

3. 补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1{
            color:rgba(255,0,0,0.5);
        }

        #d1{
            /* 整个占用的尺寸 width height */
            width: 400px;
            height: 400px;
            background-color: red;
            /* 设置图片 */
            background-image: url("Linux常用命令.png");
            /* 设置图片尺寸 */
            background-size: 200px 200px;
            /* 禁止重复 */
            background-repeat: no-repeat;
            /* 控制位置 */
            background-position: 30% 50%;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <h1>颜色测试</h1>
</body>
</html>
  • background-image: url(“路径”);
  • background-size: 宽度 高度; 要有单位px
  • background-repeat: no-repeat; 禁止重复
  • background-position: 横向百分比 纵向百分比;
    在这里插入图片描述

4.display

  1. block: 块级元素,独占一行,可以修改宽高,包括:h1-h6,p,div
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        div{
            background-color: green;
            width: 100px;
            height: 100px;

        }
        span{
            background-color: blue;
        }
        img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<img src="../ElasticSearch数据结构.png">
<img src="../Java并发知识图谱.png">
<img src="../Linux常用命令.png">
<div>div1</div>
<span >span1字体<b>加粗</b></span>
<span>span2字体<i>斜体</i></span>
<span>span3字体<small>小字</small></span>

</body>
</html>

在这里插入图片描述

  1. inline: 行内元素, 共占一行,不能修改宽高,包括:span(分区元素), b加粗,i斜体,small小字体

  2. inline-block:行内块元素,共占一行并且可以修改宽高, 包括:img

4.1 盒子模型

盒子模型=宽高+外边距+边框+内边距
在这里插入图片描述
在这里插入图片描述

用于控制元素的显示效果,宽高用于控制元素的显示大小,外边距控制元素的显示位置,边框控制边框效果,内边距控制元素内容的位置。

4.1.1 盒子模型之宽高

通过width/height修改宽高
赋值方式:

  1. 像素
  2. 上级元素的百分比
盒子模型之外边距

什么是外边距: 元素距离上级元素或相邻兄弟元素的距离称为外边距。
赋值方式

margin:10px; 四个方向10
margin:10px 20px; 上下10 左右20
maring: 0 auto; 居中
maring:10px 20px 30px 40px 上右下左 顺时针
maring-left/right/top/bottom: 10px; 单独的某一个方向赋值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  body {
    /* 去掉body自带8个像素的外边距 */
	margin: 0;
}
  #d1{
  /*   margin-top: 50px;
       margin-left: 50px; 某一个方向添加外边距 */
      /*margin: 50px;  四个方向50px */
      /*margin: 50px 100px;  上下50 左右100 */
      /*margin: 0 auto; 居中 */
    /* 上右下左 顺时针 */ 
    /* margin: 10px 20px 30px 40px; */
  }
  #d2{
      /* 与上部的兄弟距离50px */
      /*margin-top:50px;*/

    margin: 50px 0 0 50px;
  }
</style>
</head>
<body>
 
<div id="d1">div1</div>
<div id="d2">div2</div>
<div>div3</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <style type="text/css">
     body>div{
      width: 200px;
      height: 200px;
      background-color: green;
      /* 解决粘连问题 */
      overflow: hidden;
      /* 边框 */
      border: 5px solid red;
      /* 圆角  值越大越圆 */
      border-radius: 50px;
     }
     div>div{
      width: 50px;
      height: 50px;
      background-color: red;
      margin-left: 50px;
      margin-top: 50px;
     }
   </style>
</head>
<body>
<div>
  <div></div>
</div>
</body>
</html>

粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,通过给上级元素添加overflow:hidden解决

盒子模型之边框

赋值方式:
border-left/right/top/bottom: 边框粗细 样式 颜色;
border: 边框粗细 样式 颜色;
圆角:
border-radius:20px; 值越大越圆

盒子模型之内边距
  • 什么是内边距: 元素边框距内容的距离,称为内边距,用于控制元素内容的位置
  • 赋值方式: 和外边距类似
    padding-left/right/top/bottom: 单独某个方向
    padding:10px; 四个方向
    padding:10px 20px; 上下10 左右20px
    padding:10px 20px 30px 40px; 上右下左

4.2 文本问题

  1. 水平对齐方式 text-align:left/right/center;
  2. 文本修饰: text-decoration: overline/underline/line-through/none
  3. 文本颜色: color:red;
  4. 行高: line-height:20px; 可以实现垂直居中
  5. 字体大小: font-size:20px;
  6. 加粗和去掉加粗 : font-weight:bold/normal;
  7. 斜体: font-style:italic;
  8. 字体设置: font-family: xxx,xxx,xxx; font: 20px xxx,xxx,xxx;
    ####CSS的三大特性
  9. 继承性: 元素可以继承上级元素的文本相关样式, 部分标签自带的效果不受继承影响,比如:超链接自带的字体颜色, h1-h6自带的字体大小.
    作用: 可以提高开发效率
  10. 层叠性: 不同的选择器有可能选择到相同的元素,如果作用的样式不同,则样式全部层叠有效,如果作用的样式相同则由优先级决定
  11. 选择器优先级: 作用范围越小优先级越高, 直接选中优先级高于间接选中(继承属于间接选中) id>class>标签名>继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    padding-top: 100px;
    padding-left: 100px;
  }
</style>
</head>
<body>
  <div>又饿了</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #d1{
    width: 150px;
    height: 50px;
    border: 1px solid red;
    /* 水平对齐方式: left/right/center */
    text-align: center;
    /* 文本修饰 
    underline 下划线
    overline 上划线
    line-through 删除线*/
    text-decoration: line-through; 
    /* 文本颜色 */
    color: red;
    /* 行高  可以实现垂直居中 */
    line-height: 50px;
    /* 字体大小 */
    font-size: 20px;
  }
  a{
  /* 去掉超链接自带的下划线*/ 
    text-decoration: none;
  }
  #d2{
    width: 200px;
    height: 100px;
    background-color: green;
    text-align: center;
    line-height: 100px;
    font-size: 15px;
    border: 2px solid blue;
    border-radius: 10px;
    margin: 50px 0 0 50px;
    padding-top: 20px;
    text-decoration: line-through;
  }
  p{
    /* 字体加粗  */
    /* font-weight: bold; */
    /* 字体设置  */
    /* font-family: 黑体; */
    /* 字体大小+字体设置  */
    font: 30px 黑体;
  }
  h1{
    /* 去掉加粗效果 */
    font-weight: normal;
    /* 斜体  */
    font-style: italic;
  }
</style>
</head>
<body>
<h1>这是h1</h1>
<p>这是个p</p>
<a href="http://doc.tedu.cn">超链接</a>
<div id="d1">今天吃点儿啥?</div>
<!-- 给d2添加样式:
  宽高 200*100   背景绿色  水平和垂直都居中
  字体大小15px 边框2px蓝色
   圆角10px 上左外边距各50px
  上内边距20px  添加删除线  
 -->
<div id="d2">写完吃饭!</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  body>div{
    width: 611px;
    height: 376px;
    background-color: #e8e8e8;
    background-image: url("http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img1.png");
    background-size: 318px 319px;
    background-repeat: no-repeat;
    background-position: 90% 50%;
    overflow: hidden;/* 解决粘连问题 */
  }
  div>div{
    width: 245px;
    height: 232px;
    margin: 68px 0 0 36px;
  }
  .p1{
    font-size: 32px;
    color: #333;
    /* 去掉上外边距32 把下外边距改成12px */
    margin: 0 0 12px 0;
  }
  .p2{
    font-size: 12px;
    margin-bottom: 24px;
    color: #666;
  }
  .p3{
    font-size: 24px;
    color: #0aa1ed;
    font-weight: bold;
    margin-bottom: 12px;
  }
  a{
    background-color: #0aa1ed;
    display: block;/* 为了修改宽高 */
    width: 132px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: white;
    font-size: 20px;
    border-radius: 3px;
  }
</style>
</head>
<body>
<div>
  <div>
    <p class="p1">灵越 燃7000系列</p>
    <p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
英特尔HD显卡620含共享显卡内存</p>
    <p class="p3">￥4999.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  body{
    font: 12px "simhei", Arial, Helvetica, sans-serif;
    color: #666;
  }
  body>div{
    width: 375px;
    height: 376px;
    background-color: #e8e8e8;
    background-image: url("http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img2.png");
    background-size: 292px 232px;
    background-repeat: no-repeat;
    background-position: 80% 90%;
    overflow: hidden;
  }
  div>div{
    width: 253px;
    height: 232px;
    margin: 39px 0 0 25px;
  }
  .p1{
    font-size: 32px;
    margin: 0 0 12px 0;
    color: #333;
  }
  .p2{
    margin-bottom: 24px;
  }
  .p3{
    color: #0aa1ed;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px;
  }
  a{
    display:block;
    width: 132px;
    height: 40px;
    background-color: #0aa1ed;
    text-align: center;
    line-height: 40px;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 20px;
  }
</style>
</head>
<body>
<div>
  <div>
    <p class="p1">颜值 框不住</p>
    <p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
英特尔HD显卡620含共享显卡内存</p>
    <p class="p3">￥6888.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  body>div{
    width: 198px;
    height: 233px;
    background-color: #e8e8e8;
    text-align: center;
  }
  .p1{
    font-size: 12px;
    margin: 0 0 6px 0;
  }
  .p2{
    font-size: 12px;
    font-weight: bold;
    color: #0aa1ed;
    margin: 6px 0;
  }
  a{
    display: block;
    width: 100px;
    height: 24px;
    background-color: #0aa1ed;
    margin: 0 auto;
    text-decoration: none;
    color: white;
    font-size: 12px;
    border-radius: 3px;
    line-height: 24px;
  }
</style>
</head>
<body>
<div>
  <img src="http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img3.png">
  <p class="p1">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
  <p class="p2">￥4600.00</p>
  <a href="">查看详情</a>
</div>
</body>
</html>
boy快快长大
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2.CSS复习.zip
01-29
2.CSS复习.zip
css复习内容.zip
12-26
css复习内容.zip
CSS基础
小小前端攻城狮的博客
02-24 1080
前言 之前假期累积的CSS学习笔记终于有时间整理发出来了，本篇文章着重梳理之前所学的CSS基础知识点，由于都是基础就不拆分发出来了，就一篇汇总，有着自己的总结，方便以后的复习，也希望对大家有帮助。???????? pink老师教程传送门 接下一篇 HTML和CSS进阶 CSS构造块 「1. HTML的局限性」 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。 操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐 「2. C
css复习
apaly的博客
10-28 135
1.什么是浮动 浮动是一种布局方式，最初的诞生是为了实现文字环绕图片，后来更多用于标签的同行显示。 2，设置了浮动的元素，会向着指定的方向漂浮，脱离文本流， 层级提高半层，当遇到父元素边缘或同样设置了浮动属性的元素停止，当一行放不下时会自动换行， 居中： 块标签：margin auto； 行，内联块：父几设置text-align：center； 父级弹性盒子 定位居中 ...
CSS复习
小王同学
08-22 227
1.css引入方式： ①行间样式 <div style=""></div> ②页面级css，在head中定义style标签 ③外部css <link rel="stylesheet" type="text/css" href="xxx"> 注意：type和rel属性指的是这是一个css文件，可以不写type 2.装饰div的css方式和顺序 ！important>行间样式>id>class/属性>标签选择器>通...
CSS复习（1）
qq_40740606的博客
04-27 148
CSS复习（1）常见选择器CSS优先级position定位浮动 元素塌陷解决塌陷：盒模型外边距合并 常见选择器 id选择器 #div class选择器 .div 标签选择器 div 后代选择器 div p 子带选择器 div > p 伪类类选择器 :hover 伪元素选择器 ::after 群组选择器 div,p 属性选择器 div[id] 紧邻的兄弟元素 div+p 后边所有的元素 di...
html+css复习
l2298202515的博客
12-28 1223
html css复习
Css复习题.docx
03-11
Css复习题.docx
javascript与CSS复习(二)
10-29
我们接下来讨论元素的可见性，CSS有两种不同的方式可以有效的隐藏元素，它们有各自的特点，会导致不同的结果。
javascript与CSS复习(三)
10-29
呵呵，又弄成了三部曲，这是最后一部分，关于鼠标和浏览器本身显示上的一些属性。
css所有知识点全面复习
weixin_43342105的博客
05-25 8726
文章目录什么是 CSS?id 和 class 选择器id 选择器class 选择器如何插入样式表外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)多重样式多重样式优先级深入概念CSS 背景背景颜色背景图像背景图像 - 水平或垂直平铺背景图像- 设置定位与不平铺CSS 文本格式文本颜色文本的对齐方式文本修饰文本转换文本缩进CSS 字体CSS字型字体样式字体大小用em来设置字体大小CSS 链接CSS列表属性：列表作为列
css复习记录
qq_36874480的博客
07-11 213
css复习全记录 本文只是个人复习记录所用，初学者可以借鉴，会写大部分基础的用法，以及我个人的感悟 初学者如果想快速查询可以直接 ctrl +f 找到你想要的，下面的东西都是实际中用到的。 理论： css 规则由两个主要的部分组成 选择器和一条声明或者多条声明 选择器 ：需要改变的样式的html元素 属性：希望设置的样式属性 声明： 以分号;分开，声明组 以大括号{}括起来 table{ p...
css基础重学（快速复习）
zouhualong007的博客
12-13 658
css初识 什么是css? 层叠样式表 Cascading style sheets css的作用 对html标签进行美化 css的语法规则 选择器 { css属性名: 值; css属性名: 值; css属性名: 值; css属性名: 值; } 复制代码 css引入方式 内嵌式 将css代码写在style标签中 外链式 需要创建一个以.css为扩展名的文件 在css文件中书写css代码 在需要引入的h...
CSS实现一个雨滴滑落效果
云加速
05-28 1309
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
前端面试宝典总结2-CSS（1）
weixin_45511682的博客
05-30 1118
#前端#面试#css#css3
CSS学习笔记：Less
lbcbjtlhmjq的博客
05-28 335
Less是一个CSS预处理器， Less文件后缀是.less扩充了CSS 语言，使CSS具备一定的逻辑性、计算能力可以通俗地理解：Less是一种更好用的CSS。
CSS：cursor作用
2302_79730293的博客
05-29 416
CSS：cursor作用
css实现一个炫酷动画loading(三)
最新发布
weixin_45389051的博客
05-31 505
【代码】css实现一个炫酷动画loading(三)
html和css复习资料
09-20
1. W3Schools：W3Schools是一个非常受欢迎的在线学习平台，提供了关于HTML和CSS的详细教程和示例代码。你可以通过它来学习基本的HTML标签、CSS选择器和样式属性等内容。网站链接：www.w3schools.com 2. MDN Web文档...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

boy快快长大

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值