web前端3--css

注意(本文一切代码一律是在vscode中书写)

1、书写位置

1、行内样式

//<标签名 style="样式声明">
<p style="color: red;">666</p>

2、内嵌样式

1、style标签 里面写css代码 css与html之间分离 

2、css属性:值(控制书写显示的效果)

    <style>p{color: red;}</style>

3、外联样式表

新建css文件 通过link引用
        <link rel="stylesheet" href="1.css">
解释:rel 引入文件资源类型  href 引入资源的路径 

2、css选择器

1、标签选择器

通过具体的标签名称来匹配文档内所有同名的标签

    <style>p{color: red;}</style>

 2、类选择器

根据标签class属性找到具体的html标签
类选择器的定义需要用到一个英文的句号. 后面跟着class属性的值

命名规范:
1. 类名应该反映元素的用途或内容,而不仅仅是样式。这有助于提高代码的可读性。
2. 推荐使用连字符而不是驼峰命名法来分隔单词,因为连字符在HTML和CSS中更为普遍。
3. 类名不应以数字开头。

一个标签可以同时有多个类名,类名之间以空格隔开。

使用场景:将一些标签相同的样式放在一个类里面,从而节省css代码的书写

```css.text-bule{color: aqua;font-size: 30px;}.text-box{font-size: 30px;/* 字体大小 */}
```<div class="text-bule text-box">666</div>

 3、ID选择器

1、用来找到HTML文档中具有指定ID属性的标签

2、ID选择器的定义需要用到井号`#`,后面紧跟ID属性的值。

注:
1、 ID选择器的使用方式和类选择器的使用方式类似,但ID选择器的主要作用是结合js用于确定页面上的唯一元素。
2、单个标签不允许拥有多个id名,同页面中不存出现重复的id名(id重名会影响js代码获取标签)。
#text-red{color: red;
}
<div id="text-red">red</div>

 4、通配符选择器

通配符选择器用星号`*`表示,不匹配某个特定的HTML元素,而是匹配 HTML文档中的每个元素。

<!-- 我们通常使用通用选择器来清除HTML元素中默认的内外边距。 -->*{color: red;}<p>这是p</p>
<a href="">这是a</a>
<div>这是div</div>

 5、组合选择器

组合选择器: 两个或两个以上的选择器配合使用

1、后代选择器

- 结构:`选择器1 选择器2 {css属性名:属性值;}`
- 在选择器1所找到标签的后代(后代包括:儿子、孙子、重孙子……)中,找到满足选择器2的标签,设置样式

```cssdiv p{color: red;/* 找到div里面的p标签 */}
```

2、子代选择器

- 结构:`选择器1 > 选择器2 {css属性名:属性值;}`
- 在选择器1所找到标签的子代(子代只包括:儿子)中,找到满足选择器2的标签,设置样式

```cssdiv > p{color: red;}```

3、相邻兄弟选择器

- 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素,这两个元素拥有同一个父级元素并且不存在嵌套关系。
- 相邻兄弟选择器的定义需要用到加号`+`,加号两边为相邻的两个元素,选择器会!!!匹配加号后面的元素!!!
 <style>h1 + p{color: red;}<style>

4、通用兄弟选择器

- 通用兄弟选择器同样会匹配同一父级元素下的兄弟元素,但兄弟元素之间无需紧邻
- 定义通用兄弟选择器需要用到波浪号`~`,波浪号两边为同一父级元素下的两个元素,选择器会匹配波浪号后面的元素
<style>p ~ a{color: aqua;}<style>

5、分组选择器

- 结构:`选择器1,选择器2 {css属性名:属性值;} `

- 同时选择多组标签,设置相同的样式

- 通过 **,** 分隔

- 通常一行写一个,提高代码的可读性

默认样式是指浏览器为HTML元素自动应用的预定义样式,以确保页面在没有显式样式表的情况下具有基本的可读性和结构。不同的浏览器对于默认样式的实现可能存在差异,这可能导致在不同浏览器中显示的效果不同。为了确保页面的一致性,通常会使用CSS样式表来覆盖或重置默认样式,并以一致的方式定义页面的外观和布局。[初始化样式文件 ](https://meyerweb.com/eric/tools/css/reset/)。

```css
div,
p{color: red;}
```

6、交集选择器

- 结构:`选择器1选择器2{css属性名:属性值;} `

- 找到页面中**既**能被选择器1选中,**又**能被选择器2选中的标签,设置样式

- 交集选择器中的选择器之间是紧挨着的,没有东西分隔
<style>p.box{color: red;}</style>

7、层叠性与优先级

1、层叠性:所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖。多个选择器给同一个标签设置不同的样式,会共同作用在标签上。

2、优先级:如果同一个标签被多个选择器赋予了相同的属性且值不一样时,会按照选择器的优先级来决定以哪个样式为准,比如:

        - !important > 行内 > id选择器 > 类选择器 > 标签  > 继承

组合选择器权重叠加
两个选择器权重一样 以最后出现的为准

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

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

相关文章

Oracle 创建用户和表空间

Oracle 创建用户和表空间 使用sys 账户登录 建立临时表空间 --建立临时表空间 CREATE TEMPORARY TABLESPACE TEMP_POS --创建名为TEMP_POS的临时表空间 TEMPFILE /oracle/oradata/POS/TEMP_POS.DBF -- 临时文件 SIZE 50M -- 其初始大小为50M AUTOEXTEND ON -- 支持…

Java 大视界 -- Java 大数据中的异常检测技术与应用(61)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…

利用大语言模型(LLM)增强软件测试自动化的最佳实践

在当今迅速变化的科技时代&#xff0c;软件测试行业面临着越来越高的效率和质量要求。作为测试专家&#xff0c;我们都知道&#xff0c;传统的测试方法往往无法满足快速迭代和高效交付的需求。在这种背景下&#xff0c;自动化测试逐渐成为解决方案的一部分。而大语言模型&#…

Anonymous,Github 匿名化工具

一.Github 匿名化工具 Anonymous&#xff0c;会为 github 自动生成一个匿名化的URL&#xff0c;保护隐私和双盲评审 待添加...

Linux(Centos、Ubuntu) 系统安装jenkins服务

该文章手把手演示在Linux系统下如何安装jenkins服务、并自定义jenkins数据文件位置、以及jenkins如何设置国内镜像源加速&#xff0c;解决插件下载失败问题 安装方式&#xff1a;war包安装 阿里云提供的war下载源地址&#xff1a;https://mirrors.aliyun.com/jenkins/war/?s…

不只是mini-react第二节:实现最简fiber

省流|总结 首先&#xff0c;我们编写JSX文件&#xff0c;并通过Babel等转换工具将其转化为createElement()函数的调用&#xff0c;最终生成虚拟 DOM&#xff08;Vdom&#xff09;格式。举个例子&#xff1a; // 原始 JSX const App <div>hi-mini-react</div>;//…

MATLAB中alphanumericsPattern函数用法

目录 语法 说明 示例 从文本中提取字母和数字 匹配所设置数目的字母和数字 匹配不同大小的字母和数字集合 alphanumericsPattern函数的功能是匹配字母和数字字符。 语法 pat alphanumericsPattern pat alphanumericsPattern(N) pat alphanumericsPattern(minCharact…

【数据结构】树的基本:结点、度、高度与计算

树是数据结构中一种重要的非线性结构&#xff0c;广泛应用于计算机科学的各个领域&#xff0c;例如文件系统、数据库索引、编译器等。理解树的各种性质&#xff0c;如结点数、度、高度等&#xff0c;对于解决实际问题至关重要。 本文将会探讨树的基本概念&#xff0c;以及给出几…

Flutter调用HarmonyOS NEXT原生相机拍摄相册选择照片视频

目录 1.项目背景 2.遇到的问题 3.开发准备 4.开发过程 首先创建注册调用鸿蒙原生的渠道 创建并初始化插件 绑定通道完成插件中的功能 5.具体步骤 根据传值判断是相册选取还是打开相机 相册选取照片或视频 相机拍摄照片或视频 调用picker拍摄接口获取拍摄的结果 视频…

MongoDB实训:电子商务日志存储任务

一、实验目的 1. 理解如何通过Java API连接MongoDB数据库。 2. 学习在Java中使用MongoDB进行数据库操作&#xff0c;包括插入数据、查询数据以及数据统计等。 3. 掌握电子商务日志数据在MongoDB中的存储和操作方法。 二、实验环境准备 1. JAVA环境准备&#xff1a;确保…

计算机网络 (59)无线个人区域网WPAN

前言 无线个人区域网&#xff08;WPAN&#xff0c;Wireless Personal Area Network&#xff09;是一种以个人为中心&#xff0c;采用无线连接方式的个人局域网。 一、定义与特点 定义&#xff1a;WPAN是以个人为中心&#xff0c;实现活动半径小、业务类型丰富、面向特定群体的无…

从spec到iso的koji使用

了解一下Linux发行版流程&#xff1a;:从spec到iso的koji使用 for Fedora 41。 Fedora 41有24235个包&#xff0c;我们选择 minimal 的几十个源码包&#xff0c;百多个rpm包构建。 配3台服务器 40C64G 44C64G 80C128G&#xff0c;有点大材小用&#xff0c;一台就够了 &#xf…

【无标题】mysql python 连接

coding:utf8 import os import pymysql import yaml from common.log import logger class Mysql: # 处理.sql备份文件为SQL语句 def __read_sql_file(self,file_path): # 打开SQL文件到f sql_list = [] with open(file_path, ‘r’, encoding=‘utf8’) as f: # 逐行读取和…

激光线扫相机无2D图像的标定方案

方案一&#xff1a;基于运动控制平台的标定 适用场景&#xff1a;若激光线扫相机安装在可控运动平台&#xff08;如机械臂、平移台、旋转台&#xff09;上&#xff0c;且平台的运动精度已知&#xff08;例如通过编码器或高精度步进电机控制&#xff09;。 步骤&#xff1a; 标…

第17篇:python进阶:详解数据分析与处理

第17篇&#xff1a;数据分析与处理 内容简介 本篇文章将深入探讨数据分析与处理在Python中的应用。您将学习如何使用pandas库进行数据清洗与分析&#xff0c;掌握matplotlib和seaborn库进行数据可视化&#xff0c;以及处理大型数据集的技巧。通过丰富的代码示例和实战案例&am…

20250124-注意力机制(5-7)【3/3完结】 ——已复现

Attention Is All You Need&#xff08;注意力就是你所需要的一切&#xff09;&#xff08;5-7&#xff09;【3/3完结】 ——已复现 20250124-注意力机制&#xff08;1-2&#xff09;【1/3】 ——已复现-CSDN博客 20250124-注意力机制&#xff08;3-4&#xff09;【2/3】 ——已…

22_解析XML配置文件_List列表

解析XML文件 需要先 1.【加载XML文件】 而 【加载XML】文件有两种方式 【第一种 —— 使用Unity资源系统加载文件】 TextAsset xml Resources.Load<TextAsset>(filePath); XmlDocument doc new XmlDocument(); doc.LoadXml(xml.text); 【第二种 —— 在C#文件IO…

[JavaScript] ES6及以后版本的新特性

文章目录 箭头函数&#xff08;Arrow Functions&#xff09;为什么需要箭头函数&#xff1f;箭头函数的完整语法箭头函数中的 this实用场景 解构赋值&#xff08;Destructuring Assignment&#xff09;为什么需要解构赋值&#xff1f;数组解构赋值的完整用法对象解构赋值的完整…

C语言进阶——3字符函数和字符串函数(2)

8 strsrt char * strstr ( const char *str1, const char * str2);查找子字符串 返回指向 str1 中第一次出现的 str2 的指针&#xff0c;如果 str2 不是 str1 的一部分&#xff0c;则返回 null 指针。匹配过程不包括终止 null 字符&#xff0c;但会在此处停止。 8.1 库函数s…

C语言小项目——通讯录

功能介绍&#xff1a; 1.联系人信息&#xff1a;姓名年龄性别地址电话 2.通讯录中可以存放100个人的信息 3.功能&#xff1a; 1>增加联系人 2>删除指定联系人 3>查找指定联系人的信息 4>修改指定联系人的信息 5显示所有联系人的信息 6>排序&#xff08;名字&…