• html、css 教程

    目录

    html

    CSS

    css写在哪里？

    css的选择器

    元素（标签）选择器

    类选择器

    id选择器

    通配符选择器*

    派生选择器

    伪类选择器

    伪元素选择器

    选择器的优先级

    css背景的相关属性

    css文字的相关属性

    css布局定位

    简介

    float 浮动布局

    flex 弹性布局

    position 定位布局

    grid 网格布局

    水平垂直居中

    css 常用属性

    html

    • meta标签
      • 自结束标签
      • 可以提供该网页相关信息,元数据
      • charset="utf-8"：中文的网页需要用到的声明编码，否则会出现乱码
      • name="keywords" content="静夜思,诗词"：提供搜索网页的关键字，关键字用,隔开
      • name="Description"：描述网页的信息
      • name="viewport"：网页开发移动端页面适配

    加粗：strong

    斜体：em

    表格：table

    table：HTML 表格

    • tr：元素定义表格行
    • th：数据中的表头单元格
    • td：表示单元格

    table元素里常用的属性

    • border(边框)
    • cellspacing(规定单元格之间的空白)
    • cellpadding(规定单元边沿与其内容之间的空白)
    • colspan(用于合并列)
    • rowspan(用于合并行)

    块级标签

    ,

    ,

      , ,

      行内标签

      ,

      , , ,

      CSS

      • css写在哪里？

      方式一：内部样式表
              写在元素的style标签里面的

              示例：

      1. <style>
      2.     /* 这里写css样式 */
      3. style>

      方式二：内联样式表
              写在styles属性里面的

              示例：

      <div style="width: 100px;">div>

      方式三：外部样式表

              link标签将css资源引⼊

              示例：

      <link rel="stylesheet" href="./index.css">

      • css的选择器

      元素（标签）选择器

      1. <style>
      2.     /* 直接使用 标签 编写 css 样式 */
      3.     div {
      4.         color: red;
      5.     }
      6.     /* 元素选择器的组合使用，多个标签使用相同的样式，用英式逗号分隔 */
      7.     div, p {
      8.         color: blue;
      9.     }
      10. style>
      11. <body>
      12.     <div>Hellodiv>
      13.     <p>worldp>
      14. body>

      类选择器

      1. <style>
      2.     /* 样式中通过 英式 .类名 的方式获取到指定的标签 */
      3.     .test {
      4.         color: red;
      5.     }
      6. style>
      7. <body>
      8.     
      9.     <div class="test">Hellodiv>
      10. body>
      1. <style>
      2.     /* 2：样式如果想指定只有特定的标签使用此样式，可以选择组合的方式 */
      3.     div.test {
      4.         color: red;
      5.     }
      6. style>
      7.  
      8. <body>
      9.     
      10.     <div class="test">Hellodiv>
      11.     <p class="test">worldp>
      12. body>
      1. <style>
      2.     /* 2： 可以使用一个类名设置样式，也可以使用链接多个类名的方式设置样式
      3.             链接多个类名的时候，必须保证这些类名在同一个标签中都存在样式才生效
      4.     */
      5.     .test1.test2 {
      6.         color: red;
      7.     }
      8. style>
      9. <body>
      10.     
      11.     <div class="test1 test2">Hellodiv>
      12. body>

      id选择器

      注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆

      1. <style>
      2.     /* 样式中通过 #名称 的方式获取到指定的标签 */
      3.     #test {
      4.         color: red;
      5.     }
      6. style>
      7. <body>
      8.     
      9.     <div id="test">Hellodiv>
      10. body>

      通配符选择器*

      1. <style>
      2.     /* 使用 星号，设置全局样式，但是优先级低 */
      3.     * {
      4.         color: red;
      5.     }
      6. style>
      7. <body>
      8.     <div>Hellodiv>
      9. body>

      派生选择器

      • 后代选择器
      1. <style>
      2.     /* 标签里面包裹的标签，通过 标签拿到指定的后代(儿子、孙子)标签 */
      3.     div i {
      4.         color: red;
      5.     }
      6. style>
      7. <body>
      8.     <div>
      9.         <p>
      10.             <i>helloi>
      11.         p>
      12.     div>
      13. body>
      • 子元素选择器
      1. <style>
      2.     /* 标签里面包裹的标签，通过 标签顺序拿到指定的儿子标签， 注意要按照标签顺序，且只能是下一级儿子级别的标签*/
      3.     div>p>i {
      4.         color: red;
      5.     }
      6. style>
      7. <body>
      8.     <div>
      9.         <p>
      10.             <i>helloi>
      11.         p>
      12.     div>
      13. body>
      • 相邻兄弟选择器
      1. <style>
      2.     /* 先找到第一个p兄弟，是第二个p，那么第二个p就生效了。+p 继续找第二个p的兄弟，就找到了第三个p,那么第三个也生效了
      3.         注意，相同的元素(哥哥是p，弟弟也是p) 一个+号的时候是循环，例如 p+p。超过一个+号的时候，是指定位置的地方开始找下面的兄弟
      4.     */
      5.     p+p {
      6.         color: red;
      7.     }
      8. style>
      9. <body>
      10.     <div>
      11.         <p>1p>
      12.         <p>2p>
      13.         <p>3p>
      14.         <p>4p>
      15.         <p>5p>
      16.     div>
      17. body>

      伪类选择器

      :first-child {} //第一项
      :last-child {} //最后一项
      :nth-child(n) {} //第n项
      :nth-child(2n+1) {} //奇数项
      :nth-child(2n) {} //偶数项
      :not(:nth-child(n)) //否定伪类 除了第n项

      a:link {color:#FF0000;} /*未访问的链接*/
      a:visited {color:#00FF00;} /*已访问的链接*/
      a:hover {color:#FF00FF;} /*鼠标移动到链接上*/
      a:active {color:#0000FF;} /*点击时链接*/

      伪元素选择器

      ::first-letter //第⼀个
      ::first-line //第⼀⾏ 只能⽤于块级元素
      ::selection //选中
      ::before //在开始位置新增
      ::after //在结束位置新增

      选择器的优先级

      1：!important                // 最高

      2：⾏内样式        

      3：id选择器        

      4：类选择器

      5：标签选择器

      6：通配符选择器          // 最低

      margin的外边框折叠问题

      • 上下两个兄弟盒子的margin都为正取大，都为负取小，一正一负相加
      • 父子元素盒子的margin（假设没有内边距或边框把外边距分隔开），也会合并（意思是修改父的盒子属性子的也会生效，修改子的盒子属性父的也会生效）；只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并 
        1. // 解决父子边距合并：
        2. 父元素{
        3.  overflow:auto;
        4. }
        5. 父元素::before{
        6.  display: table;
        7.  content: "";
        8. }

      • css背景的相关属性

      1. background-image         // 设置背景图片，取值 url("")
      2. background-repeat        // 设置背景图片的平铺方案
      3.                                * repeat	背景图像将向垂直和水平方向重复。这是默认
      4.                                * repeat-x	只有水平位置会重复背景图像
      5.                                * repeat-y	只有垂直位置会重复背景图像
      6.                                * no-repeat	background-image 不会重复
      7. background-size          // 设置背景图片的大小
      8. background-position      // 设置背景图片的起始位置
      9. background-color         // 设置背景颜色，取值 #fff

      • css文字的相关属性

      1. font-size	// 字体大小，最小12px
      2. font-weight	// 是否加粗，取值
      3.                     * normal	默认值。定义标准的字符。
      4.                     * bold	    定义粗体字符。
      5.                     * bolder	定义更粗的字符。
      6.                     * lighter	定义更细的字符。
      7.                     * 100-900   越小越细，越大越粗
      8. font-style	// 是否斜体，取值
      9.                     * normal	默认值。浏览器显示一个标准的字体样式。
      10.                     * italic	浏览器会显示一个斜体的字体样式。
      11.                     * oblique	浏览器会显示一个倾斜的字体样式。
      12. font-family	// 字体
      13. text-indent	// 文本缩进
      14. text-align	// 文本水平(左右)对齐，取值
      15.                     * left	把文本排列到左边。默认值：由浏览器决定。
      16.                     * right	把文本排列到右边。
      17.                     * center	把文本排列到中间。
      18.                     * justify	实现两端对齐文本效果
      19. text-height // 字体行高

      • css布局定位

      简介

              正常元素怎么布局？

      • 默认，一个块级元素的内容宽度就是其父元素的100%，他的高度和其内容高度一致
      • 行内元素它的宽度和高度度都是根据内容决定的(无法设置行内元素的宽高)

              可设置display属性，定义元素的类型(css3定义布局)，给行内元素设置宽高

      1.     span {
      2.         /* 行内元素，设置成行内块级元素，不独占一行，这样就可以设置宽高了 */
      3.         display: inline-block;  
      4.         /* 行内元素，设置成块级元素，独占一行，这样就可以设置宽高了 */
      5.         display: block;
      6.     }

      float 浮动布局

      • 使用

      float: none;    //默认值，元素不浮动
      float: left;    //元素向左浮动
      float: right;    //元素向右浮动

      • 特点
      • 浮动元素会脱离文档流，不再占据文档流空间
      • 浮动元素彼此之间是从左往右排列，宽度超过一行自动换行
      • 在浮动元素前面元素不浮动时，浮动元素无法上移
      • 块级元素和行内元素浮动之后都变成行内块级元素
      • 浮动元素不会盖住文字，可以设置文字环绕效果   // 浮动设计之初的目的

      清除浮动

      1. div::after {
      2.     clear: both;
      3.     content: '';
      4.     display: block;
      5. }

      flex 弹性布局

      • 使用
      • 父元素属性

      /* 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
      display: flex;

      /* 决定主轴的方向（即子元素的排列方向）row：横向排版，row-reverse：横向排版颠倒

      column：纵向排版，column-reverse：纵向排版颠倒 */
      flex-direction: row | row-reverse | column | column-reverse

      /* 是否换⾏，父元素宽度固定的话，多个子元素超出父元素宽度那么子元素会等分父元素的宽度，子元素的宽度将失效，如果想让子元素的宽度生效，就要指定换行， */

      flex-wrap: nowrap | wrap | wrap-reverse;

      /* 定义⽔平⽅向对⻬⽅式(父元素要有宽度才生效)   flex-start：默认从左向右排版， flex-end：正序从右向左排版，center：正序居中排版，space-between：间隔均分父元素宽度排版，两侧紧挨父元素左右两侧，space-around：间隔均分父元素宽度排版，中间的间距是两侧的间距的两倍*/

      justify-content: flex-start | flex-end | center | space-between | space-around;

      /* 定义垂直方向对齐方式 flex-start：默认原效果，flex-end：放在下面，center：放在中间，baseline：以子元素中的内容的基线水平对齐的方式排版，stretch：子元素没有设置高度的话，使用父元素的高度*/
      align-items: flex-start | flex-end | center | baseline | stretch;

      /* 定义多个轴线（多行/多列）对齐方式，flex-start：父元素设置高度的话，第二行紧挨第一行排着，没有此参数的话，会均分父元素高度排，flex-end：从底部排，center：排在中间，space-between：垂直均分间隔，上下紧贴父元素， space-around：垂直均分间隔，上下距离父元素的高度是中间间距的一半*/
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;

      • 子元素属性

      /* 定义子元素的排列顺序，默认为0，数字越小排列越前，数字越大排列越后 */
      order: -10 | -1 | 0 | 1 | 10;

      /* 定义子元素的放大比例，默认为0，1：默认占据剩余的空间，2：是其他元素少的总和的2倍 */
      flex-grow: 0 | 1 | 2 | 3;


      /* 定义子元素是否可以缩小，默认为1可以缩小，0不可以 */
      flex-shrink: 0 | 1;


      /* 定义了在分配多余空间之前，子元素占据的主轴空间 */
      flex-basis: | auto;


      /* flex-grow, flex-shrink 和 flex-basis的简写 */
      flex: 0 1 auto;

      position 定位布局

      • 使用
      • 父元素属性

      /* 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素 */

      position: relative (相对绝对) 

      /* 当页面滚动时，设置此属性的元素不跟着滚动，始终显示在固定的页面位置，"left", "top", "right"，"bottom"指定位置*/
      position: fixed (固定定位) 

      /* 当页面滚动时，设置此属性的元素滚动到指定的位置时，不再滚动，"left", "top", "right"，"bottom"指定位置 */
      position: sticky (粘性定位) 

      • 子元素属性

      /* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right"，"bottom"属性进行移动 */

      position: absolute (绝对定位)

      • 相关属性

      /* 当定位的盒子重叠在一起，有遮挡住的时候可以使用，值越大图层放在越上面 */
      z-index

      grid 网格布局

      • 使用

      /* 网格布局 */
      display: grid;
      /* 显示几列，几个值就是几列，数字是列宽 */
      grid-template-columns: 10px 10px 10px;
      /* 显示几行，几个值就是几行，数字是行高 */
      grid-template-rows: 10px 10px 10px;


      /* 百分比的方式 */
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      grid-template-rows: 33.33% 33.33% 33.33%;


      /* repeat()函数简化 */
      display: grid;
      grid-template-columns: repeat(3, 33.33%);        // 第一个参数显示几列，第二个列宽
      grid-template-rows: repeat(3, 33.33%);              // 第一个参数显示几行，第二个行高

      • 水平垂直居中

      行内块元素

      1.

      line-height：取height相同的值
      text-align: center
      2.

      display: flex;
      justify-content: center;
      align-items: center;

      块级元素

      1. position + margin 清楚子元素的宽高
      父元素 {
          position: relative;
      }
      子元素{
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -50px;
          margin-left: -50px;
      }
      2. position + transform 不清楚子元素的宽高
      父元素 {
          position: relative;
      }
      子元素{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      3. flex
      父元素{
          display: flex;
          justify-content: center;
          align-items: center;
      }

      • css 常用属性

      VH单位

      /* css中高度不好获取，使用vh单位表示可以看到的页面的高度 */

      height: 100vh;        // 表示可看到的页面的百分百高度

      圆角

      /* 四个值的顺序是：左上角，右上角，右下角，左下角 */

      border-radius: 10px 10px 10px 10px;        border-radius: 50% // 圆形

      阴影

      /* 

      h-shadow       必需的。水平阴影的位置。允许负值
      v-shadow       必需的。垂直阴影的位置。允许负值
      blur                可选。模糊距离
      spread           可选。阴影的大小
      color              可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

      */

      box-shadow: h-shadow v-shadow blur spread color

      渐变

      /* 从上到下，颜色可以写多个（默认情况下）*/
      background-image: linear-gradient(#e66465, #9198e5);
      /* 从左到右 */
      background-image: linear-gradient(to right, red , yellow);
      /* 对角 */
      background-image: linear-gradient(to bottom right, red, yellow);

      /* 透明度 rgb是颜色，a 是是否透明，1不透明，0透明*/

      background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))

      文本阴影

      /* 

      h-shadow       必需的。水平阴影的位置。允许负值
      v-shadow       必需的。垂直阴影的位置。允许负值
      blur                可选。模糊距离
      color              可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

      */

      text-shadow: 5px 5px 5px #FF0000

      文本溢出

      • 显示一行，超出部分显示省略号

      {

              /* 不让换行 */

              white-space: nowrap;

              /* 溢出的部分隐藏 */

              overflow: hidden;

              /* 溢出的部分显示... */

              text-overflow: ellipsis;

      }

      • 显示指定几行，超出的部分显示省略号

      {

              /* 溢出的部分隐藏 */

              overflow: hidden;

              /* 溢出的部分显示... */

              text-overflow: ellipsis;

              /* 指定显示行数 */

              -webkit-line-clamp: 3;

              display: -webkit-box;

              -webkit-box-orient: vertical;

      }

      文本换行

      /* 长文本换行 */
      word-wrap:break-word;
      /* 单词拆分换行 */
      word-break: break-all;

      鼠标移动到图片上放大

      img:hover { 
          transform: scale(1.1);        // 放大1.1倍
          transition: 0.5s ease;        // 0.5秒动画
      }

      // 如果不想超出父元素 overflow: hidden 设置溢出的图片隐藏

      设置盒子宽度width参数取值：长度、百分比、auto(默认父级的宽度)
      设置盒子高度height参数取值：长度
      设置文本颜色

      color: #000

      		参数表示：指定字体颜色
      设置背景颜色

      background-color: #aaa

      		参数表示：指定背景颜色
      盒子设置边框border: 5px solid red

      参数分别表示：边框宽度、边框的样式、边框的颜色
      样式的选择分别有：solid 实线、dotted 点、dashed 虚线 outset 立体

      盒子设置填充大小padding
      • padding:10px 5px 15px 20px;
        • 上填充是 10px
        • 右填充是 5px
        • 下填充是 15px
        • 左填充是 20px
      • padding:10px 5px 15px;
        • 上填充是 10px
        • 右填充和左填充是 5px
        • 下填充是 15px
      • padding:10px 5px;
        • 上填充和下填充是 10px
        • 右填充和左填充是 5px
      • padding:10px;
        • 所有四个填充都是 10px
      盒子设置外边距大小margin 
      • margin:10px 5px 15px 20px;
        • 上边距是 10px
        • 右边距是 5px
        • 下边距是 15px
        • 左边距是 20px
      • margin:10px 5px 15px;
        • 上边距是 10px
        • 右边距和左边距是 5px
        • 下边距是 15px
      • margin:10px 5px;
        • 上边距和下边距是 10px
        • 右边距和左边距是 5px
      • margin:10px;
        • 所有四个边距都是 10px
      怪异盒子模型box-sizing:border-box标准盒子模型，设置后会增加原有标签的大小，如果不想改变大小，就要指定成怪异盒子模型
      设置盒子的排版
      方式一：兄弟div之间float

      浮动布局

      取值：

      left：浮动在左侧
      right：浮动在右侧
      inherit：继承父级的浮动方式

      方式二：兄弟div之间，需要有父级divposition

      定位布局

      父元素取值：

      relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

      子元素取值：

      absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right"，"bottom"属性进行移动。

      方式三：兄弟div之间，需要有父级divdisplay:flex

      弹性布局

      指定弹性布局后，默认横向从左到右排列

      指定为弹性布局后，取值can：cnblogs.com/wywblogs/p/15403479.html

      盒子中的内容过多超出盒子外overflow

      取值：

      hidden：超出的部分隐藏，不带滚动，

      scroll：超出的部分隐藏，滚动，

      auto：默认值scroll

    • 相关阅读:
      第四天：gec6818开发板串口蓝牙模块的使用与配置
      【多目标进化优化】 Pareto 最优解集的构造方法
      RabbitMQ如何保证消息不丢
      R语言使用econocharts包创建微观经济或宏观经济图、indifference函数可视化无差异曲线（indifference curve）
      基于单片机智能加湿器控制系统仿真设计
      layUI带搜索的选择框样式和官网显示不一致
      ThreadLocal类与synchronize关键字区别----一个简单示例
      从暗黑3D火炬之光技能系统说到-Laya非入门教学一~资源管理
      Android设计模式--工厂模式
      【机器学习】21天挑战赛学习笔记（一）
    • 原文地址：https://blog.csdn.net/a1053765496/article/details/126843702