CSS2_基础学习

news2025/4/6 20:29:33

CSS2_基础学习

  • 一、css基础知识
  • 二、css选择器
    • 2.0 选择器的优先级
    • 2.1 CSS基本选择器
    • 2.2 复合选择器
      • 2.2.1. 交集选择器
      • 2.2.2. 并集选择器
      • 2.2.3. 后代选择器(加空格)
      • 2.2.4. 子代选择器
      • 2.2.5. 兄弟选择器
      • 2.2.6. 属性选择器
      • 2.2.7. 伪类选择器
      • 2.2.8. 伪元素选择器

一、css基础知识

优先级规则:行内样式>内部样式=外部样式

  • 行内样式
<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>
  • 内部样式
<style>
  h1{
    color:red;
    font-size:40px;
    }
</style>
  • 外部样式
    1.新建一个扩展名为.css的样式文件,把所有CSS代码都放入此文件中。
    2.在html文件中引入.css文件。
<link rel="stylesheet" href="./xxx.css">

css语法:选择器+声明块
选择器+声明块

二、css选择器

2.0 选择器的优先级

行内样式>ID选择器>类选择器>元素选择器>通配选择器

2.1 CSS基本选择器

  • 通配选择器
*{ 属性名:属性值; }
  • 元素选择器
标签名{ 属性名:属性值;}
  • 类选择器
.类名{ 属性名:属性值;}
  • ID选择器
#id值{ 属性名:属性值;}

2.2 复合选择器

2.2.1. 交集选择器

语法:选择器1选择器2选择器3…选择器n{}

2.2.2. 并集选择器

语法:选择器1,选择器2, 选择器3,…选择器n{}

2.2.3. 后代选择器(加空格)

语法:选择器1 选择器2 选择器3…选择器n{}

2.2.4. 子代选择器

语法:选择器1>选择器2>选择器3>…选择器n{}

2.2.5. 兄弟选择器

  • 相邻兄弟选择器:(+)
    作用:选中指定元素后,符合条件的相邻兄弟元素。(简记:睡在我下铺的兄弟。)
    语法:选择器1+选择器2{}
  • 通用兄弟选择器:(~)
    作用:选中指定元素后,符合条件的所有兄弟元素。(简记:睡在我下铺的所有兄弟)
    语法:选择器1~选择器2{}

2.2.6. 属性选择器

作用:选中属性值符合一定要求的元素。语法:
1 [属性名] 选中具有某个属性的元素。
2 [属性名=“值”] 选中包含某个属性,且属性值等于指定值的元素。
3 [属性名^=“值”] 选中包含某个属性,且属性值以指定的值开头的元素。
4 [属性名$=“值”] 选中包含某个属性,且属性值以指定的值结尾的元素。
5 [属性名*=“值”] 选择包含某个属性,属性值包含指定值的元素。

2.2.7. 伪类选择器

  • 动态伪类
    :link——超链接未被访问的状态。
    :visited——超链接访问过的状态。
    :hover——鼠标悬停在元素上的状态。
    :active——元素激活的状态。
    :focus——获取焦点的元素。(表单输入框类使用)
  • 结构伪类
    :first-child——所有兄弟元素中的第一个。
    :last-child——所有兄弟元素中的最后一个。
    :nth-child(an+b)——所有兄弟元素中的第an+b个。
    :first-of-type——所有同类型兄弟元素中的第一个。
    :last-of-type——所有同类型兄弟元素中的最后一个。
    :nth-of-type(an+b)——所有同类型兄弟元素中的第an+b个。
  • 否定伪类
    :not(选择器)——排除满足括号中条件的元素。
  • UI伪类
    :checked——被选中的复选框或单选按钮。
    :enable——可用的表单元素。
    :disabled——不可用的表单元素
  • 目标伪类
    :target——选中锚点指向的元素。
  • 语言伪类:
    :lang()——根据指定的语言选择元素

2.2.8. 伪元素选择器

::first-letter——选中元素中的第一个文字
::first-line——选中元素中的第一行文字
::selection——选中被鼠标选中的内容
::placeholder——选中输入框的提示文字
::before——在元素最开始的位置,创建一个子元素(必须用content属性指定内容)
::after——在元素最后的位置,创建一个子元素(必须用content属性指定内容)

<style>
        /* 什么是伪元素? —— 很像元素,但不是元素(element),是元素中的一些特殊位置 */

        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置,随后创建一个子元素 */
        p::before {
            content:"¥";
        }
        /* 选中的是p元素最后的位置,随后创建一个子元素 */
        p::after {
            content:".00"
        }
    </style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1347469.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

zabbix通过自动发现-配置监控项、触发器(小白教程)

自动发现配置参考链接&#xff08;不小白&#xff0c;不友好&#xff09; zabbix-get介绍 1配置 zabbix server&#xff1a;版本7&#xff08;不影响&#xff09;,IP地址&#xff1a;192.168.0.60zabbix agent&#xff1a;版本agent1&#xff08;不影响&#xff09;&#xff…

基于Ubuntu环境Git服务器搭建及使用

基于Ubuntu环境Git服务器搭建及使用 Chapter1 搭建本地git服务器及详细操作步骤1.搭建本地git服务器1.1 环境1.2 服务端配置1.3 创建git专属用户1.4 创建git仓库1.5 配置免密登录基础 2.客户端拉取推送代码2.1客户端创建ssh公钥 2.2 免密配置3.仓库使用&#xff08;拉取及推送代…

如祺出行与腾讯云成立联合创新实验室,聚焦汽车网联及数据安全

12月28日&#xff0c;如祺出行与腾讯云宣布成立“祺盾网络数据安全联合创新实验室”&#xff0c;并签署合作协议。基于联合实验室&#xff0c;双方将共同开展网络数据安全等前沿技术在出行科技、汽车工业等领域的应用研究和实践探索&#xff0c;携手打造行业领先的智能网联汽车…

第九课:机器学习与人工智能、计算机视觉、自然语言处理 NLP及机器人

第九课&#xff1a;机器学习与人工智能、计算机视觉、自然语言处理 NLP及机器人 第三十四章&#xff1a;机器学习与人工智能1、分类 Classification2、做分类的算法 分类器 Classifier3、用于分类的值是特征 Feature4、特征值种类叫做标记数据 Labeled data5、决策边界 Decisio…

Unity坦克大战开发全流程——游戏场景——敌人——移动的敌人

游戏场景——敌人——移动的敌人 制作预制体 将坦克拖拽至场景中进行设置 写代码 让坦克在两点之间不停移动 随机坐标函数 然后在start()中调用即可 坦克要一直盯着玩家 当小于一定距离时&#xff0c;攻击玩家 重写开火逻辑 注意还要将其tag改成Monster&#xff01; 当敌人死…

huggingface的tokenizer解读

文章目录 前言一、huggingface的tokenizer含义1、含义2、整体概括 二、加载lmsys/vicuna-7b-v1.5模型的tokenizer三、调用tokernizer方法四、字符串的tokens应用1、tokenizer应用2、tokenizer进行token分词(tokenizer.tokenize)3、tokens转模型识别ids(tokenizer.convert_token…

Spring Cloud + Vue前后端分离-第9章 大文件断点续与极速秒传

源代码在GitHub - 629y/course: Spring Cloud Vue前后端分离-在线课程 ​​​​​​Spring Cloud Vue前后端分离-第9章 大文件断点续与极速秒传 作为一个视频网站&#xff0c;一个文件小则几十M&#xff0c;大则上G&#xff0c;上传一个大文件受网络影响很大&#xff0c;文…

vue-springboot基于JavaWeb的汽配汽车配件销售采购管理系统

过对知识内容的学习研究&#xff0c;进而设计并实现一个基于JavaWeb的汽配销售管理系统。系统能实现的主要功能应包括&#xff1b;汽车配件、销售订单、采购订单、采购入库等的一些操作&#xff0c;ide工具&#xff1a;IDEA 或者eclipse 编程语言: java 数据库: mysql5.7 框架&…

PyTorch中常用的工具(4)Visdom

文章目录 前言3.2 Visdom 前言 在训练神经网络的过程中需要用到很多的工具&#xff0c;最重要的是数据处理、可视化和GPU加速。本章主要介绍PyTorch在这些方面常用的工具模块&#xff0c;合理使用这些工具可以极大地提高编程效率。 由于内容较多&#xff0c;本文分成了五篇文…

修改jenkins的目录(JENKINS_HOME)

默认JENKINS_HOME是/var/lib/jenkins/ 现要修改为/home/jenkins_data/jenkins 最开始 sudo cp -a /var/lib/jenkins/ /home/jenkins_data/ 然后如下操作&#xff1a; 1、首先 /etc/sysconfig/jenkins&#xff1a;jenkins配置文件&#xff0c;“端口”&#xff0c;“JENKIN…

使用opencv+tesseract识别图片中的表格

描述 在java环境中使用opencv和tesserac识别一个图片表格 环境&#xff1a;opencv和tesseract安装在linux环境下&#xff0c;docker将运行springboot服务 opencv和tesseract的安装和docker加载可参考之前的文章 过程 将图片进行预处理&#xff0c;过滤掉颜色等干扰元素 提…

2023 年四川省职业院校技能大赛“信息安全管理与评估”样题

2023 年四川省职业院校技能大赛&#xff08;高等职业教育&#xff09; “信息安全管理与评估”样题 竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 第一阶段&#xff1a;模块一 网络平台搭建与设…

Windows系统历史版本简介详细版

学习目标&#xff1a; 目录 学习目标&#xff1a; 学习内容&#xff1a; 学习产出&#xff1a; Windows 11的全新用户界面设计&#xff1a;学习新的任务栏、开始菜单、窗口管理等界面元素的使用与操作。 Windows 11的新功能和特点&#xff1a;学习新的虚拟桌面、Microsoft Team…

【MMdetection】MMdetection从入门到进阶

基础环境安装 步骤 0. 从官方网站下载并安装 Miniconda。 步骤 1. 创建并激活一个 conda 环境。 conda create --name openmmlab python3.8 -y conda activate openmmlab步骤 2. 基于 PyTorch 官方说明安装 PyTorch。 pip install torch2.0.1 torchvision0.15.2 torchaudio…

前端--基础 目录文件夹和根目录 VScode打开目录文件夹

目录 目录文件夹和根目录 &#xff1a; 目录文件夹 &#xff1a; 根目录 &#xff1a; VScode 打开目录文件夹 &#xff1a; VScode 打开文件夹 &#xff1a; 拖拽目录文件夹 &#xff1a; 目录文件夹和根目录 &#xff1a; 我们都清楚&#xff0c;在实际的工作中会…

[python]python使用M-LSD直线检测算法onnx部署模型实时检测

介绍 github地址&#xff1a;https://github.com/navervision/mlsd LSD (M-LSD)一种用于资源受限环境的实时轻量线段检测器。它利用了极其高效的 LSD 架构和新颖的训练方案&#xff0c;包括 SoL 增强和几何学习方案。模型可以在GPU、CPU甚至移动设备上实时运行。算法已开源&a…

ChatGPT 对SEO的影响

ChatGPT 的兴起是否预示着 SEO 的终结&#xff1f; 一点也不。事实上&#xff0c;如果使用得当&#xff0c;它可以让你的 SEO 工作变得更加容易。 强调“正确使用时”。 你可以使用ChatGPT来帮助进行关键字研究的头脑风暴部分、重新措辞你的内容、生成架构标记等等。 但你不…

LeetCode每日一题.02(螺旋矩阵||)

螺旋矩阵&#xff1a; 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]] 示例 2&#xff1a; 输入…

HarmonyOS应用程序包快速修复

快速修复概述 快速修复是HarmonyOS系统提供给开发者的一种技术手段&#xff0c;支持开发者以远快于应用升级的方式对应用程序包进行缺陷修复。和全量应用升级软件版本相比&#xff0c;快速修复的主要优势在小、快和用户体验好。在较短的时间内不中断正在运行的应用的情况下&am…

<Icon-ResizER>support

If you get any questions in using app, email me caohechunhotmail.com.