• css高级 使用

    目录

    css样式

    css选择器 

    伪类

    伪元素

    css优先级 

    常见单位

     

    css样式

    内联样式

    1. 写在标签的内部，使用标签的style属性；
    2. 属性值，写在style属性的引号里面，每个样式结束后加分号；
    3. 内联样式，复用性差，优先级比较高。
    1. <body>
    2.     <div>div>
    3.     
    4.     <h1 style="color: beige;">内部修改，一般多用于修改组件库里面的内置样式h1>
    5.     <p style="color: aliceblue;">bluep>
    6. body>

    内部样式

    1. 写在head标签中，创建style，写css语法渲染样式；
    2. 复用性高，只能渲染当前页面样式。

    外部样式（推荐）

    1. 单独创建一个文件后缀名为.css的文件；
    2. 在head标签中，通过link引入；
    3. 复用性高，多页面使用一套样式，多次请求对服务器承载能力比较大。
    2.     8">
    3. 	高级css
    4. 	.css">

    css选择器 

    1. 通用选择器：所有元素；
    2. 标签选择器：选中相同标签名的元素；
    3. 类选择器：所有拥有相同类名的元素都可以使用统一样式，类属性可以有多个值。
    1. <marquee style="width: 100vw;height: 20vh;background-color: aliceblue;line-height: 20vh;" behavior=""
    2. 			direction="">滚动文字<span style="color: darkred;">属性span>
    3. marquee>
    4. <h4 class="red-bgc blue-color">h4文本h4>
    5. <span class="red-bgc green-color">span文本span>
    6. <style>
    7. .red-bgc {
    8.     background-color: red;
    9.  }
    10.  
    11. .green-color {
    12.     color: green;
    13. }
    14.  
    15. .blue-color {
    16.     color: blue;
    17. }
    18. style>
    19.  
    20.
    1. id选择器： 同一个页面中，id是唯一的。
    2. 群组选择器：用逗号链接多个选择器，多个选择器使用相同的样式。
    3. 后代选择器：祖先元素的选择器 空格 链接后代元素选择器。
    1. /* 后代选择器 */
    2. .main img {
    3.     width: 100%;
    4. }
    5. /* 子代选择器 */
    6. .main>img {
    7.     width: 100%;
    8. }
    1.  兄弟选择器：使用~连接，该选择器只选弟弟不选哥哥，指后面的所有弟弟。
    2. 相邻兄弟选择器：使用符号 + 连接；该选择器只选择紧紧挨着哥哥的弟弟，+：弟弟元素。

    伪类

    1. hover：鼠标停留在元素上的时提供关联的样式，鼠标移入；
    2. link：元素未访问状态
    3. active：被激活的元素，鼠标被按下；
    4. visited：用户已经访问过的元素；
    5. focus：用户以获取焦点的元素；

    伪类遵循的LVHA先后顺序：:link-:visited-:hover-:active

    伪元素

    伪元素：

    1. 是一个附加到选择器末的关键词，允许对选择的元素制定自定义样式修改；
    2. 行内元素，内容写在content属性中；
    3. ：：before 指在元素内容最开始之前插入内容。
    4. ：：after指在元素内容最开始之后插入内容。

    css优先级 

     原则：

    顺序读取：

    1. 相同选择器，不同的值，后面的值优先；
    2. 不同选择器，不同值，比较选择器权重值，高的优先。

    继承：

    有继承性的样式属性，写在祖先元素

    权重值比较

    1. 0级:通配符选择器，子代>相邻兄弟
    2. 1级:权重1，标签选择器和伪元素
    3. 2级：权重10 类选择器
    4. 3级 权重100，id选择器
    5. 4级 权重1000，内联样式，使用style属性写在标签中
    6. 五级 权重10000，最高，！import

    常见单位

    1. 长度单位，像素px；
    2. 尺寸单位百分比%
    3. 适配尺寸vw，vh，
    4. 时间和角度
    5. 秒s，毫秒ms，1s = 1000ms
    6.  角度deg，0deg~360deg
    7. 颜色色值
    8. 元素的默认背景颜色transparent 透明
    9. 十六进制颜色，三原色（红，绿，蓝）##rrggbb，取值范围0-9，a-f
    10. rgb颜色，rgb（红，绿，蓝）取值0-255。

  • 相关阅读:
    Python批量获取高校基本信息
    [OC学习笔记]KVO原理
    Python中Mock和Patch的区别
    【Python】代码风格约定_摘自开源项目FreeCAD
    MySQL 在线模式迁移工具gh-ost用法
    文字表达细化的提示词的学习笔记
    深入理解指针：【探索指针的高级概念和应用二】
    复盘：智能座舱系列文三- 它背后的5种交互技术之触觉
    关于 registerForActivityResult()的使用方法，不能说详细，只能说略懂得例子
    使用 SMI 指标增强股票分析:amCharts JS Crack
  • 原文地址：https://blog.csdn.net/weixin_49739911/article/details/126699346