当前位置: 首页 > news >正文

css简介

一.css-网页的美容师

css也是一种标记语言,主要用于设置HTML页面中的文本内容(字体大小对齐方式),图片外形(宽高 边框样式 边距等)以及版面的布局和外观显示样式

二.css语法规范

css规则由两个主要的部分构成:选择器以及一条或多条声明。

写在head标签中

  • 选择器是用于指定css样式的html标签,花括号内是对该对象设置的具体样式
  • 属性和属性值以"键值对'的形式出现
  • 属性是对指定的对象设置样式属性,如字体大小,文本颜色等
  • 属性和属性值之间英文":"分开
  • 多个"键值对"之间用英文";"进行区分

三.css基础选择器

3.1css选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选择出来就是选择器的作用。简单来说,就是选择标签用的 。

css做了两件事:

  1. 找到所有h1标签,选择器(选对人)
  2. 设置这些标签的样式,比如颜色为红色(做对事)。

3.2选择器分类

选择器分为基础选择器复合选择器两个大类。 

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括:标签选择器 类选择器 id选择器 通配符选择器

3.3标签选择器

标签选择器(元素选择器)是指用html标签名称作为选择器,按标签名分类,为页面中某一类标签指定统一的css样式。 

语法 

标签名 {

        属性1:属性值1;

        属性2:属性值2;

 

优点

能快速为页面中同类型的标签设置统一样式。

缺点

不能设计差异化样式,只能选择全部的当前标签。 

3.4类选择器

如果想要差异化选择不同的标签,单独选择一个或者几个标签,可以使用类选择器

语法 

.类名 {

        属性1:属性值1;

}

例如将所有red类的html元素变为红色

.red{

       color:red;

}

 结构需要用class属性来调用class类的意思

<div class="red"> 变红色</div>

总结

  1. 类选择器使用"."(英文)进行标识,后面紧跟类名(自己定义)。
  2. 长名称或词组可以使用中文横线来为选择器命名。例如star—sing
  3. 不用使用纯数字 中文等命名,尽量使用英文字母来表示  

 3.5类选择器-多类名

我们可以给一个标签指定多个类名,从而达到更多选择的目的。这些类名都可以选出这个标签,加单理解就是一个标签有多个名字。

3.51多类名的使用方式

<div class="red font20"> 亚瑟</div>

  1. 标签class属性中写多个类名
  2. 多个类中间必须用空格分开

 

3.52多类名的使用场景

  1. 可以把标签相同元素的样式(共同的部分)放到一个类里面(类似封装了一个函数,提高代码复用率)

这里假设要画三个格子

不使用多类名

 使用多类名

同样的效果,但把共同的功能封装起来,提高了代码复用率

3.6 id选择器

语法

#id名 {

        属性1:属性值1

}

例如,将id为nav的元素内容设置为红色

#nav{

color:red;

}

这时候可以看到他的使用方式和class非常相似,那他们的区别是什么呢?

3.53id选择器和类选择器的区别

  1. 类选择器(class)好比人的名字,同个名字可以被多个人使用,即类似公共属性
  2. id选择器好比身份证,一个人只能有一个,即类似私有属性
  3. 所以id选择器只能被调用一次
  4. 类选择器在修改样式中的最多id选择器一般用于页面唯一性的元素上,和JavaScript搭配使用

3.7通配符选择器

在css中,通配符选择器使用"*"定义,它表示选取页面中所有元素(标签)。

语法 

* {

        属性1:属性值1;

}

  •  通配符选择器不需要调用,自动就给所有的元素使用样式
  • 特殊情况才使用,后面讲解使用场景(以下是清楚所有的元素标签的内外边距,后期讲)

* {

        margin:0;

        padding:0;

3.8基础选择器总结

基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p{color:red}
类选择器可以选出1个或者多个标签可以根据需求选择非常多

.nav{color:red;

}

id选择器

一次只能选择1个标签id属性在每个HTML文档出现一次一般和js搭配#nav{color:red;}
通配符选择器选择所有标签选择的太多,有部分不需要特殊情况使用*{color:red;}

相关文章:

css简介

一.css-网页的美容师 css也是一种标记语言&#xff0c;主要用于设置HTML页面中的文本内容(字体大小对齐方式)&#xff0c;图片外形&#xff08;宽高 边框样式 边距等&#xff09;以及版面的布局和外观显示样式。 二.css语法规范 css规则由两个主要的部分构成:选择器以及一条…...

GoC题解(21) 725.画迷宫(下册第4课)

题目描述 真观察下面迷宫图。发现它是一个边长逐渐变长的15边回旋图&#xff0c;边长依次为10、20、30....。 参考答案 int main(){int len0;for(int i1;i<15;i){ len10;pen.fd(len).rt(90); }return 0; } 解题思路 使用一个变量来记录每次循环时应该画多长的边&#…...

DDD该怎么去落地实现(3)通用的仓库和工厂

通用的仓库和工厂 我有一个梦&#xff0c;就是希望DDD能够成为今后软件研发的主流&#xff0c;越来越多研发团队都转型DDD&#xff0c;采用DDD的设计思想和方法&#xff0c;设计开发软件系统。这个梦想在不久的将来是有可能达成的&#xff0c;因为DDD是软件复杂性的解决之道&a…...

sql sqlserver的特殊函数COALESCE和PIVOT的用法分析

一、COALESCE是一个返回参数中第一个非NULL值的函数&#xff0c; 列如&#xff1a;COALESCE&#xff08;a,b,c,d,e&#xff09;;可以按照顺序取abcde&#xff0c;中的第一个非空数据&#xff0c;abcde可以是表达式 用case when 加ISNULL也可以实现&#xff0c;但是写法复杂了…...

FPGA简介|结构、组成和应用

Field Programmable Gate Arrays&#xff08;FPGA&#xff0c;现场可编程逻辑门阵列&#xff09;&#xff0c;是在PAL、GAL、CPLD等可编程器件的基础上进一步发展的产物&#xff0c; 是作为专用集成电路&#xff08;ASIC&#xff09;领域中的一种半定制电路而出现的&#xff0c…...

Vue2/Vue3生命周期对比

Vue2的生命周期钩子 beforeCreate 在实例初始化之后&#xff0c;数据观测&#xff08;data&#xff09;和事件配置之前调用。此时无法访问 data、methods 等。 created 在实例创建完成后调用。此时可以访问 data、methods&#xff0c;但 DOM 还未生成。 beforeMount 在挂载…...

Spring Boot 携手 DeepSeek:开启智能交互新时代

前言 在当今数字化浪潮汹涌澎湃的时代,人工智能技术正以前所未有的速度改变着我们的生活和工作方式。大语言模型作为人工智能领域的一颗璀璨明星,凭借其强大的自然语言处理能力,为各个行业带来了新的发展机遇。DeepSeek 作为一款性能卓越的大语言模型,以其高效、准确的文本…...

【Elasticsearch】Mapping概述

以下是Elasticsearch中提到的关于Mapping的各模块概述&#xff1a; --- 1.Dynamic mapping&#xff08;动态映射&#xff09; 动态映射是指Elasticsearch在索引文档时&#xff0c;自动检测字段类型并创建字段映射的过程。当你首次索引一个文档时&#xff0c;Elasticsearch会根…...

国内Ubuntu离线安装和配置Ollama服务

以下是在 Ubuntu 22.04 系统上&#xff0c;安装Ollama 的完整安装和配置步骤&#xff1a; 1. 准备工作 确保你具备 root 权限&#xff0c;并安装了必要的工具&#xff0c;如 tar、systemctl 等。 2. 创建 Ollama 用户和组 创建一个专门的 ollama 用户和组来运行 Ollama 服务…...

极狐GitLab 17.8 正式发布,多项 DevOps 重点功能解读【二】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…...

【开源免费】基于Vue和SpringBoot的旅游管理系统(附论文)

本文项目编号 T 229 &#xff0c;文末自助获取源码 \color{red}{T229&#xff0c;文末自助获取源码} T229&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

Communications link failure异常分析解决

Communications link failure异常分析解决 异常日志分析与解决常见原因解决方法 异常日志 2025-02-05 14:26:58.750 ERROR [aaeae2435a2749ac0c4af65b6e4db68c] [http-nio-9528-exec-6] o.s.t.i.TransactionAspectSupport.completeTransactionAfterThrowing:680 - Application…...

建造者模式构建对象

目录 一、创建类 二、用法 三、完整代码 一、创建类 Builder public class User {private final String name;private final int age;Builder.Default private String address "Unknown";Builder.Default private String email "N/A"; }二、用法 (1…...

2025 (ISC)²CCSP 回忆录

2025.1.20 广州&#xff0c;周一&#xff0c;我一次性通过了CCSP的考试。 为什么要考证&#xff1f; 个人成长所需 职业热情&#xff1a;做一行爱一行&#xff0c;既然我投入了美好的青春年华到网络安全行业当中&#xff0c;那么对于这个行业最有权威的认证&#xff0c;是肯定…...

代码随想录算法训练营第三十九天| 动态规划03

01 背包问题 二维 代码随想录 视频讲解&#xff1a;带你学透0-1背包问题&#xff01;| 关于背包问题&#xff0c;你不清楚的地方&#xff0c;这里都讲了&#xff01;| 动态规划经典问题 | 数据结构与算法_哔哩哔哩_bilibili 注意点&#xff1a; 1. dp[i][j] 表示从下标为[0-i]…...

对正则表达式说不!!!

可能大家都会和我一样&#xff0c;时常会遇到正则表达式&#xff0c;有时候会忘记某些字符而苦恼。今天就帮助大家克服它&#xff0c;虽然不多&#xff0c;但我认为掌握这些足够了&#xff0c;万变不离其宗&#xff0c;以不变应万变。 一、正则表达式内容分类 1. 字符类 [abc…...

制作Ubuntu根文件

系列文章目录 Linux内核学习 Linux 知识&#xff08;1&#xff09; Linux 知识&#xff08;2&#xff09; WSL Ubuntu QEMU 虚拟机 Linux 调试视频 PCIe 与 USB 的补充知识 vscode 使用说明 树莓派 4B 指南 设备驱动畅想 Linux内核子系统 Linux 文件系统挂载 QEMU 通过网络实现…...

工作一个月的经历和总结

目录 背景&#xff1a; 过程&#xff1a; 初来乍到&#xff1a; 小试牛刀&#xff1a; 终结篇&#xff1a; 总结&#xff1a; 背景&#xff1a; 通过朋友介绍&#xff0c;来到秦皇岛戴卡兴龙轮毂有限公司&#xff0c;我的朋友在这已经干了将近2年了&#xff0c;说这里比…...

Linux 更改 SSH 默认端口以提升服务器安全

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …...

C#中反射的原理介绍及常见的应用场景介绍

反射&#xff08;Reflection&#xff09;是C#中的一种机制&#xff0c;允许程序在运行时获取类型信息并动态调用其成员。通过反射&#xff0c;程序可以访问程序集、模块、类型及其成员&#xff08;如方法、属性、字段等&#xff09;&#xff0c;并能在运行时创建对象、调用方法…...

Linux内核中IPoIB驱动的初始化机制深度解析

IP over InfiniBand(IPoIB)是Linux内核中重要的网络协议,允许在InfiniBand(IB)网络上传输IP数据包,广泛应用于高性能计算和存储场景。本文深入分析IPoIB驱动初始化流程,探讨其核心设计及关键技术实现。 一、初始化流程概览 IPoIB驱动的初始化通过ipoib_ndo_init函数入口…...

深度学习框架PyTorch

第一章&#xff1a;机器学习基本概念&#xff08;附代码&#xff09; 第二章&#xff1a;KNN算法&#xff1a;从思想到实现&#xff08;附代码&#xff09; 第三章&#xff1a;决策树算法&#xff1a;从思想到实现&#xff08;附代码&#xff09; 第四章&#xff1a;机器学习简…...

TCP可靠传输的ARQ协议

基本知识 ARQ&#xff08;Automatic Repeat-reQuest&#xff09;协议主要包含&#xff1a;停等ARQ协议、连续ARQ协议&#xff0c;其中连续ARQ协议是为了解决停等ARQ协议信道利用率低的问题&#xff0c;目前传统的连续ARQ协议有回退N帧ARQ协议、选择性重传ARQ协议。 注意&#…...

Windows环境安装Kafka(集群版)

大家好&#xff0c;最近在准备Java面试&#xff0c;复习到Kafka的相关知识&#xff0c;一时兴起&#xff0c;就想在自己的Windows笔记本上安装一个Kafka集群。下面就记录一下安装步骤。 工具分享 Offset Explorer&#xff1a;Kafka可视化工具 下载地址&#xff1a;https://ww…...

服务器虚拟化(详解)

服务器虚拟化是一种技术&#xff0c;通过将物理服务器的硬件资源&#xff08;如CPU、内存、存储、网络等&#xff09;抽象化并分割成多个虚拟机&#xff08;VM&#xff09;&#xff0c;每个虚拟机可以独立运行不同的操作系统和应用程序。虚拟化使得资源使用更加高效&#xff0c…...

今日写题work05

题目&#xff1a;用队列实现栈 思路 队列的特点是先进先出&#xff0c;而栈的特点是后进先出。所以想要用队列实现模拟栈&#xff0c;我们可以使用两个队列&#xff0c;一个队列负责压栈&#xff0c;一个队列负责出栈。压栈很简单就是检空再调用队列的push就好&#xff0c;那出…...

DeepSeek模型架构及优化内容

DeepSeek v1版本 模型结构 DeepSeek LLM基本上遵循LLaMA的设计&#xff1a; 采⽤Pre-Norm结构&#xff0c;并使⽤RMSNorm函数. 利⽤SwiGLU作为Feed-Forward Network&#xff08;FFN&#xff09;的激活函数&#xff0c;中间层维度为8/3. 去除绝对位置编码&#xff0c;采⽤了…...

145,【5】 buuctf web [GWCTF 2019]mypassword

进入靶场 修改了url后才到了注册页面 注测后再登录 查看源码 都点进去看看 有个反馈页面 再查看源码 又有收获 // 检查$feedback是否为数组 if (is_array($feedback)) {// 如果是数组&#xff0c;弹出提示框提示反馈不合法echo "<script>alert(反馈不合法);<…...

Beszel监控Docker安装

一、Beszel Hub安装 #Beszel Hub安装 mkdir -p ./beszel_data && \ docker run -d \--name beszel \--restartunless-stopped \-v ./beszel_data:/beszel_data \-p 8090:8090 \henrygd/beszel#创建账号 账号/密码&#xff1a;adminadmin.com/adminadmin.com 二、Besz…...

Ansible批量配置服务器免密登录步骤详解

一、准备工作 192.168.85.138 安装ansible&#xff0c;计划配置到139的免密 192.168.85.139 待配置免密 1. 生成SSH密钥对 在Ansible控制节点生成密钥对&#xff0c;用于后续免密认证&#xff1a; ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa 全部回车默认&#xff0c;无…...

使用llama.cpp在gpu和cpu上运行deepseek-r1 7b的性能对比

使用deepseek-r1 7b模型的q5km量化版本进行测试, gpu上的token解码速度是cpu的近8倍. 测试环境: ubuntu22.04 x86llama.cpp cpu intel 10750h 4.41 tokens / s model size params backend threads test t/s qwen2 7B Q5_K - Medium 5.07 GiB 7.62 B CPU 6 pp512 …...

1.【BUUCTF】[SUCTF 2019]EasyWeb

进入题目页面如下 给出源码开始代码审计 <?php // 定义一个名为 get_the_flag 的函数&#xff0c;该函数主要处理文件上传逻辑 function get_the_flag(){// 构造用户上传文件的目录&#xff0c;目录名是 "upload/tmp_" 加上客户端 IP 地址的 MD5 哈希值$userdir…...

GMSL 实例1:当 MAX96717 遇上 MAX96724,打通 Camera 视频数据传输

新年伊始&#xff0c;继 Deepseek 在 AI 圈掀起风波之后。比亚迪在2月10日发布会上重磅官宣&#xff1a;全系车型将搭载自研的高阶智驾系统“天神之眼”&#xff0c;覆盖从10万元级入门车型到高端豪华车型的所有范围。此举如一颗重磅炸弹投向当前一卷再卷的新能源汽车赛道&…...

2025有哪些关键词优化工具好用

越来越多的企业和个人开始意识到搜索引擎优化&#xff08;SEO&#xff09;对于网站曝光和业务增长的重要性。在SEO优化的过程中&#xff0c;关键词优化占据着至关重要的地位。关键词是用户在搜索引擎中输入的词语&#xff0c;优化关键词有助于提高网站在搜索结果中的排名&#…...

Python常见面试题的详解6

1. 按字典 value 值排序 要点&#xff1a;对于给定字典&#xff0c;使用 sorted() 函数结合 items() 方法&#xff0c;依据 value 进行排序&#xff0c;也可以定义一个通用函数&#xff0c;支持按 value 升序或降序排序。示例&#xff1a; python d {a: 1, b: 2, c: 3, d: …...

宝塔和docker的区别

宝塔面板 vs Docker&#xff1a;区别、场景与互补使用指南 eepseek回答宝塔和docker的区别 好的&#xff0c;我现在需要回答用户关于宝塔面板和Docker之间的区别的问题。首先&#xff0c;我需要明确这两个工具各自的定义、功能以及它们适用的场景&#xff0c;这样才能准确比较…...

vscode调试redis

系统&#xff1a;ubuntu redis&#xff1a;redis-6.0.3 1.在vs中安装c/c编译插件 2.用vscode打开redis-6.0.3 3.在菜单中找到run->Add Configuration… 4.会在目录中生成一个./vscode目录&#xff0c;里面包含launch.json,修改launch.json中的program:${workspaceFolder}…...

tcp/ip协议设置参数,tcp/ip协议6设置

TCP/IP协议设置参数主要涉及到IP地址、子网掩码、网关地址以及DNS服务器地址等关键参数。这些参数的配置确保了网络设备能够正确地接入互联网并与其他设备进行通信。以下是对这些参数设置的详细说明&#xff1a; 1. IP地址 定义&#xff1a;IP地址是互联网中用于唯一标识每一…...

计算机网络原理试题二

一、单选 1.(单选题,5分)以下关于计算机网络定义的描述中,错误的是 A.以能够相互共享资源的方式互联起来的自治计算机系统的集合 B.计算机资源主要指计算机的CPU、内存和操作系统 C.互联的计算机既可以联网工作&#xff0c;也可以脱网单机工作 D.联网计算机之间的通信必须遵循…...

#渗透测试#批量漏洞挖掘#致远互联AnalyticsCloud 分析云 任意文件读取

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…...

企业文件共享中的权限管理与安全风险防范

在企业的日常运营中&#xff0c;文件共享是必不可少的一项工作。然而&#xff0c;文件共享过程中如果权限管理不当&#xff0c;极易引发安全风险&#xff0c;导致企业敏感信息泄露。因此&#xff0c;加强文件共享中的权限管理与安全风险防范&#xff0c;对于保障企业信息安全至…...

2025智能硬件售后服务管理系统选择的六大标准

2025智能硬件售后服务管理系统选择的六大标准 随着2025年的到来&#xff0c;智能硬件行业正以前所未有的速度发展&#xff0c;产品迭代加速&#xff0c;用户需求日益多样化。在这一背景下&#xff0c;售后服务管理系统的选择成为了智能硬件厂商能否在激烈的市场竞争中脱颖而出…...

C++ references

C复杂在于提供了太多的内存模型 或者说&#xff1a; 提供了两种东西&#xff1a; 1、可以放对象的地方&#xff1a; 堆栈堆全局数据区里 2、提供了很多访问对象的方式 变量是对象指针访问对象引用来访问对象 3 * 3 9 种访问对象的方式 规则 引用一般初始化&#xff0…...

STM32 RCC功能说明 复位和时钟控制RCC

目录 背景 RCC配置时钟主要涉及两方面 程序 第1步、RCC默认初始化 第2步、等待HSE工作稳定 第3步、设置PLL时钟源以及倍频数 第4步、设置AHB总线时钟&#xff08;HCLK&#xff09; 第5步、设置PCLK1(APB1总线) 第6步、设置PCLK2(APB2总线) 第7步、FLASH存储器的配置 …...

2024年终总结和2025年规划

2024年的主线是AI基础的学习和读书&#xff0c;虽然AI学习花费了更多的时间&#xff0c;但是读书长久看来于我是更重要的事情&#xff0c;哈哈哈&#xff0c;因此先简单回顾一下读书记忆&#xff0c;回顾我的2024&#xff0c;再展望一下我的2025. 我的2024年记忆 读万卷书&am…...

Day2 25/2/15 SAT

【一周刷爆LeetCode&#xff0c;算法大神左神&#xff08;左程云&#xff09;耗时100天打造算法与数据结构基础到高级全家桶教程&#xff0c;直击BTAJ等一线大厂必问算法面试题真题详解&#xff08;马士兵&#xff09;】https://www.bilibili.com/video/BV13g41157hK?p4&v…...

新版电脑通过wepe安装系统

官方下载链接 WIN10下载 WIN11下载 微PE 启动盘制作 1&#xff1a;选择启动盘的设备 2&#xff1a;选择对应的U盘设备&#xff0c;点击安装就可以&#xff0c;建议大于8g 3&#xff1a;在上方链接下载需要安装的程序包&#xff0c;放入启动盘&#xff0c;按需 更新系统 …...

分享一个使用的音频裁剪chrome扩展-Ringtone Maker

一、插件简介 铃声制作器是一个简单易用的 Chrome 扩展&#xff0c;专门用于制作手机铃声。它支持裁剪音频文件的特定片段&#xff0c;并将其下载为 WAV 格式&#xff0c;方便我们在手机上使用。无论是想从一段长音频中截取精彩部分作为铃声&#xff0c;还是对现有的音频进行个…...

Managed Lustre 和 WEKA:高性能文件系统的对比与应用

Managed Lustre 和 WEKA&#xff1a;高性能文件系统的对比与应用 1. 什么是 Managed Lustre&#xff1f;主要特点&#xff1a;适用场景&#xff1a; 2. 什么是 WEKA&#xff1f;主要特点&#xff1a;适用场景&#xff1a; 3. Managed Lustre 和 WEKA 的对比4. 如何选择 Managed…...

自己制作网站教程方法

SaaS建站&#xff0c;作为一种创新的网站构建模式&#xff0c;通过将网站建设所需的复杂软硬件资源整合到云端&#xff0c;为用户带来了前所未有的便捷性、高效性和灵活性&#xff0c;彻底颠覆了传统网站建设的固有模式&#xff0c;为用户提供了一个更为理想且适应性强的建站解…...