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

(前端基础)CSS(一)

了解

Cascading Style Sheet:层叠级联样式表

CSS:表现层(美化网页)如:字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动

css优势: 

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO,容易被搜索引擎收录

CSS的四种导入方式

行内样式

在需要设置的标签后面加style。优先级最高

css内部样式

可在html文件中的head标签中写如下:

<style>
  选择器{
        声明1;

        声明2;

        声明3;
    }
</style>

链接式外部样式

在文件恰当位置添加一个css文件

在需要引用样式的HTML文件的head标签中添加link标签

<link rel="stylesheet" href="css文件位置">

 内部样式与外部样式优先级一致,从上到下,谁先写,谁的优先级就高。

导入式外部样式(了解)

先在head标签中添加style标签

<style>
    @import "css路径";
</style>

选择器

作用: 选择页面上的某一个或者某一类元素

标签选择器

会选择到页面上所有的这个标签的元素(选择一类标签)标签选择器优先级最低

标签选择器{

        声明1;

        声明2;

}

类选择器class

在标签后加class,class属性值为自定义,class值相同的为一组,可以复用,类选择器优先级>标签选择器(选择所有class属性值一致的标签)

<h1 class="类名称"></h1>

样式引用时,格式如下:

.类名{

        声明1;

        声明2

}

id选择器

在标签后加id,id属性值为自定义,id全局唯一,优先级最高

<h1 id="id名称"></h1>

样式引用时,格式如下:

#id名{

        声明1;

        声明2

}

优先级对比:id选择器>类选择器>标签选择器

层次选择器

根据以下框架,写HTML文件的body结构

红色为类选择器紫色为id选择器

HMTL如下:

后代选择器

在某个元素的后面,eg:body后面的所有p标签

标签1  标签2{

        声明1;

}

body后面的p标签全部设置为红色

 

类tex后面的p标签全部设置为黄色背景

子选择器

某个标签(选择器)的子标签,eg:body标签后面的p标签,该处p标签不包含无序列表中的p标签

标签1>标签2{

        声明1;

}

body后面的第一轮子标签p字体全部设置为红色,类标签tex下的p标签背景为黄色

相邻选择器

某个标签(选择器)的相邻(下一个元素),eg:类选择器action的相邻标签 

选择器+标签{

        声明;

}

li的相邻li标签设置为红色字体

id选择器的同级p设置为蓝色背景,tex选择器的同级p设置为黄色背景,action的同级p设置为红色字体

通用选择器

选中元素的向下的所有兄弟元素

选择器+标签{

        声明;

}

类选择器action的相邻p(所有下一个)元素,设置为橙色

结构伪类选择器

伪类选择器格式:

标签:参数{

        声明;

 }

first-child:第一个元素 

last-child:最后一个元素

标签:nth-child()选择当前p元素的父级下的第几个元素,根据顺序选择

nth-of-type(2):选择父元素下的p标签的第几个,根据类型选择

扩展:hover,鼠标移动改变效果

属性选择器 

设置10个标签,每个标签中包含许多属性,为a标签设置默认样式,如下

<p class="demo"><a href="http://baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item "  >3</a><a href="images/123.png" class="links item "  >4</a><a href="images/123.ipg" class="links item "  >5</a><a href="abc" class="links item "  >6</a><a href="/a.pdf" class="links item "  >7</a><a href="/abc.pdf" class="links item "  >8</a><a href="abc.doc" class="links item "  >9</a><a href="abcd.doc" class="links item last"  >10</a>
</p>

默认样式:

<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: red;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}</style>

a标签中存在id属性的元素

标签:[属性名]{

        声明;

}

选择id属性中属性为first的元素 

标签:[属性名=属性值]{        //=是绝对等于

        声明;

}

class属性中属性值包含link的元素 

标签:[属性名*=属性值]{        //*=是包含这个元素

        声明;

}

 选中以href属性中以http属性值为开头的元素 

标签:[属性名^=属性值]{        //^=是以这个属性值开头

        声明;

}

 选中以href属性中以pdf属性值为结尾的元素 

标签:[属性名$=属性值]{        //$=是以这个属性值结尾

        声明;

}

字体样式

span标签:重点突出的字,使用span标签

  • font-family:字体样式
  • font-size:字体大小
  • font-weight:字体粗细
  • color:字体颜色

相关文章:

(前端基础)CSS(一)

了解 Cascading Style Sheet&#xff1a;层叠级联样式表 CSS&#xff1a;表现层&#xff08;美化网页&#xff09;如&#xff1a;字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动 css优势&#xff1a; 内容和表现分离网页结构表现统一&#xff0c;可以实现复用…...

Redis数据类型全景解析:从底层编码到应用反模式

一、核心数据类型矩阵 1.1 基础类型对比表 类型底层结构最大容量时间复杂度典型场景StringSDS/Embstr/Raw512MBO(1)读写缓存/计数器ListQuickList(ziplist)2^32-1元素头尾操作O(1)消息队列Hashziplist/hashtable2^32-1键值对O(1)平均对象存储Setintset/hashtable2^32-1成员O(…...

(蓝桥杯——10. 小郑做志愿者)洛斯里克城志愿者问题详解

题目背景 小郑是一名大学生,她决定通过做志愿者来增加自己的综合分。她的任务是帮助游客解决交通困难的问题。洛斯里克城是一个六朝古都,拥有 N 个区域和古老的地铁系统。地铁线路覆盖了树形结构上的某些路径,游客会询问两个区域是否可以通过某条地铁线路直达,以及有多少条…...

TypeScript跟js,es6这些的区别

TypeScript 一、TypeScript 是什么 想象 JavaScript 是一个自由奔放的艺术家&#xff0c;它在创作&#xff08;编写代码&#xff09;时不受太多约束&#xff0c;非常灵活&#xff0c;但有时也容易犯错且难以调试。而 TypeScript 就像是给这位艺术家配备了一套精确的工具和规范…...

flink-cdc同步数据到doris中

1 创建数据库和表 1.1 数据库脚本 这样直接创建数据库是有问题&#xff0c;因为后面发现superset连接使用doris://root:12345610.101.12.82:9030/internal.eayc?charsetutf8mb4 -- 创建数据库eayc create database if not exists ods_eayc; -- 创建数据表2 数据同步 2.1 f…...

Kubernetes:EKS 中 Istio Ingress Gateway 负载均衡器配置及常见问题解析

引言 在云原生时代&#xff0c;Kubernetes 已经成为容器编排的事实标准。AWS EKS (Elastic Kubernetes Service) 作为一项完全托管的 Kubernetes 服务&#xff0c;简化了在 AWS 上运行 Kubernetes 的复杂性。Istio 作为服务网格领域的佼佼者&#xff0c;为微服务提供了流量管理…...

Golang教程

1. go 环境与命令 1.1 go 环境搭建 SDK 安装 Go 官网&#xff1a;golang.orgGo 中文社区&#xff1a;https://studygolang.com/dlGo API文档&#xff1a;https/golang.org 或 https://studygolang.com/pkgdoc 目录 api &#xff1a;api 存放bin&#xff1a;go命令src&#…...

AI 百炼成神:线性回归,预测房价

我们开始第一个项目——线性回归:预测房价。这是一个经典的机器学习入门项目,可以帮助你理解如何使用线性回归模型来预测连续的数值。 第一个项目:线性回归预测房价 项目目标 学习线性回归的基本概念。使用历史房价数据建立一个预测模型。理解如何评估模型的性能。项目步骤…...

企业软件合规性管理:构建高效、安全的软件资产生态

引言 在数字化转型的浪潮下&#xff0c;企业的软件使用方式日益多元化&#xff0c;涉及云端、订阅制、永久授权及浮动许可等多种模式。然而&#xff0c;随着软件资产的增多&#xff0c;企业面临着合规性管理的严峻挑战&#xff1a;非法软件使用、许可证管理不当、软件资产闲置…...

每日一题——编辑距离

编辑距离 参考资料题目描述示例 解题思路动态规划&#xff08;DP&#xff09;方法 代码实现复杂度分析示例详解示例1&#xff1a;"nowcoder" → "new"示例2&#xff1a;"intention" → "execution" 总结与心得 参考资料 建议先参考下…...

TensorFlow项目GPU运行 安装步骤

以下是在 Linux 系统 下搭建完整 GPU 加速环境的详细流程&#xff08;适配 CUDA 11.2 和 Python 3.9&#xff09;&#xff1a; 1. 前置检查 1.1 验证 NVIDIA 驱动 # 检查驱动版本&#xff08;需 ≥ 450.80.02&#xff09; nvidia-smi 输出示例&#xff1a; CUDA Version: 11.2…...

c++进阶———继承

1.引言 在一些大的项目中&#xff0c;我们可能要重复定义一些类&#xff0c;但是很麻烦&#xff0c;应该怎么办呢&#xff1f;举个简单的例子&#xff0c;我要做一个全校师生统计表&#xff0c;统计学号&#xff0c;教师编号&#xff0c;姓名&#xff0c;年龄&#xff0c;电话…...

FreeSwitch的mod_translate模块详细,附带场景案例及代码示例

mod_translate 模块详细介绍 mod_translate 是 FreeSWITCH 中的一个拨号计划应用程序模块&#xff0c;用于对电话号码或字符串进行格式转换和翻译。它可以根据预定义的规则对输入的内容进行匹配和转换&#xff0c;常用于号码格式化、路由选择、号码屏蔽等场景。 主要功能 号码…...

前端504错误分析

前端出现504错误(网关超时)通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案: 1. 确认错误来源 504含义:代理服务器(如Nginx、Apache)在等待后端服务响应时超时。常见架构:前端 → 代理服务器 → 后端服务,问题通常出在代理与后端之间。…...

在 .NET 8/9 中使用 AppUser 进行 JWT 令牌身份验证

文章目录 一、引言二、什么是 JSON Web 令牌&#xff1f;三、什么是 JSON Web 令牌结构&#xff1f;四、设置 JWT 令牌身份验证4.1 创建新的 .NET 8 Web API 项目4.2 安装所需的 NuGet 软件包4.3 创建 JWT 配置模型4.4 将 JWT 配置添加到您的 appsettings.json 中4.5 为 Config…...

基于python实现机器学习的心脏病预测系统

以下是一个基于 Python 实现的简单心脏病预测系统代码示例&#xff0c;我们将使用 Scikit - learn 库中的机器学习算法&#xff08;这里以逻辑回归为例&#xff09;&#xff0c;并使用公开的心脏病数据集。 步骤&#xff1a; 数据加载与预处理&#xff1a;加载心脏病数据集&a…...

使用 NVM 随意切换 Node.js 版本

安装nvm https://github.com/coreybutler/nvm-windows/releases nvm安装详细教程&#xff08;卸载旧的nodejs&#xff0c;安装nvm、node、npm、cnpm、yarn及环境变量配置&#xff09;-CSDN博客 验证 NVM 是否安装成功-查看版本 nvm --version安装指定版本的 Node.js nvm i…...

【Prometheus】prometheus结合pushgateway实现脚本运行状态监控

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…...

SpringBoot 项目配置动态数据源

目录 一、前言二、操作1、引入依赖2、配置默认数据库 13、定义数据源实体和 Repository4、定义动态数据源5、配置数据源6、定义切换数据源注解7、定义切面类8、使用注解切换数据源 一、前言 通过切面注解方式根据不同业务动态切换数据库 二、操作 1、引入依赖 <dependen…...

CSS基本选择器

1. 通配选择器 作用&#xff1a;可以选中所有的 HTML 元素。 语法&#xff1a; * { 属性名: 属性值; } 举例&#xff1a; <!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"UTF-8"><meta name"viewport" …...

五一乡村采摘低效?巨有科技智慧采摘系统解锁增收新场景

五一假期&#xff0c;乡村采摘成为亲子游、家庭游的热门选择&#xff0c;成为乡村景区增收的重要业态&#xff0c;但多数乡村采摘项目陷入“低效运营、体验不佳”的困境&#xff0c;难以抓住五一文旅红利。一、痛点直击&#xff1a;乡村采摘“体验差、增收弱”&#xff0c;错失…...

YOLOv13涨点改进| TGRS 2026 |全网创新首发、Conv卷积改进篇 | 引入SFEM空间-频率特征增强模块,同时建模空间域和频域信息,助力YOLOv13遥感小目标检测,小目标分割高效涨点

一、本文介绍 🔥这篇论文作者使用YOLO模型发SCI一区!喜提TGRS 2026顶刊!做遥感小目标检测任务。 本文给大家介绍利用SFEM空间-频率特征增强模块改进YOLOv13网络模型,SFEM 是一种面向 RGB 分支的空间–频域特征增强模块,主要作用是提升复杂场景下 RGB 特征的表达能力与稳…...

手把手教你用AC620开发板在NIOS II上跑通LWIP以太网(含IPv6和HTTP服务器)

从零构建AC620开发板的LWIP以太网通信系统&#xff1a;IPv6与HTTP服务器实战指南 当FPGA遇上嵌入式网络协议栈&#xff0c;会碰撞出怎样的火花&#xff1f;本文将带你深入探索如何在小梅哥AC620开发板上&#xff0c;基于NIOS II软核处理器搭建完整的LWIP通信系统。不同于简单的…...

如何用Boss-Key实现Windows窗口的智能隐藏与隐私保护?

如何用Boss-Key实现Windows窗口的智能隐藏与隐私保护&#xff1f; 【免费下载链接】Boss-Key 老板来了&#xff1f;快用Boss-Key老板键一键隐藏静音当前窗口&#xff01;上班摸鱼必备神器 项目地址: https://gitcode.com/gh_mirrors/bo/Boss-Key 你是否曾因突然有人走近…...

告别模拟器!在Windows上直接安装APK文件的终极指南

告别模拟器&#xff01;在Windows上直接安装APK文件的终极指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否厌倦了笨重的安卓模拟器&#xff1f;想要在Window…...

快速构建微服务:Phi-3-mini辅助SpringBoot项目初始化与API设计

快速构建微服务&#xff1a;Phi-3-mini辅助SpringBoot项目初始化与API设计 1. 微服务开发的新助力 最近在Java后端开发圈里&#xff0c;有个新趋势越来越明显——开发者们开始借助AI模型来加速项目初始化阶段的工作。作为一名常年和SpringBoot打交道的工程师&#xff0c;我发…...

3种格式Cookie安全导出:Get cookies.txt LOCALLY浏览器扩展完全指南

3种格式Cookie安全导出&#xff1a;Get cookies.txt LOCALLY浏览器扩展完全指南 【免费下载链接】Get-cookies.txt-LOCALLY Get cookies.txt, NEVER send information outside. 项目地址: https://gitcode.com/gh_mirrors/ge/Get-cookies.txt-LOCALLY 在Web开发和数据采…...

Canzona框架:分布式训练中矩阵优化器的高效实现

1. 项目概述在大型语言模型&#xff08;LLM&#xff09;训练领域&#xff0c;矩阵优化器&#xff08;如Shampoo、Muon&#xff09;因其利用二阶信息加速收敛的特性而备受关注。然而&#xff0c;这类优化器的全局更新需求与分布式训练框架中的张量分片策略存在根本性冲突。传统同…...

SMOTE算法解析与Python实战:解决不平衡分类问题

## 1. 不平衡分类问题的现实挑战在真实世界的数据分析中&#xff0c;我们经常会遇到类别分布极不均衡的数据集。比如信用卡欺诈检测中正常交易占99.9%&#xff0c;医疗诊断中健康样本远多于患病样本。这类情况下&#xff0c;如果直接用传统分类算法&#xff0c;模型会倾向于预测…...

百万组内码永不重复:EV1527学习码编码芯片让遥控器更“聪明”

引言&#xff1a;遥控器的“身份危机”与学习码的诞生你有没有遇到过这样的尴尬&#xff1a;车库门遥控器不小心摔坏了&#xff0c;去配一个新的&#xff0c;结果发现原来的那个还能用&#xff0c;两个遥控器同时“打架”&#xff1f;或者&#xff0c;邻居家买了同款电动门&…...