(前端基础)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:字体颜色

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

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

相关文章

CASAIM与韩国DOOSAN集团达成合作,开启工业制造自动化检测新篇

近日&#xff0c;CASAIM与韩国知名跨国企业斗山集团&#xff08;DOOSAN&#xff09;达成战略合作&#xff0c;联合打造CASAIM全自动化智能检测系统&#xff0c;助力斗山集团全面提升产品质量检测精度与效率&#xff0c;完成智能化检测升级&#xff0c;保持在全球市场竞争中的领…

矛盾(WEB)

##解题思路 打开靶场就是一段自相矛盾的代码&#xff0c;既要num是数字类型&#xff0c;又要判断为1 这种情况我们会想到弱类型的编程语言&#xff0c;插件查看过后&#xff0c;php就是弱类型的语言&#xff0c;此处并非是严格相等&#xff0c;只是 因此可以根据弱类型编程语言…

[AI]docker封装包含cuda cudnn的paddlepaddle PaddleOCR

封装,启动时需要在GPU服务器上 显卡驱动 cuda等下载需要注册账号 环境Ubuntu 24.04 LTS镜像uvicorn-gunicorn-fastapi:python3.8显卡支持版本CUDA Version: 12.5cuda版本cuda_12.4.0_550.54.14_linux.runcudnn版本PaddlePaddle-GpuPaddleOCR 启动进入容器 docker run --gpus …

idea连接gitee(使用idea远程兼容gitee)

文章目录 先登录你的gitee拿到你的邮箱找到idea的设置选择密码方式登录填写你的邮箱和密码登录成功 先登录你的gitee拿到你的邮箱 具体位置在gitee–>设置–>邮箱管理 找到idea的设置 选择密码方式登录 填写你的邮箱和密码 登录成功

VisionTransformer(ViT)与CNN卷积神经网络的对比

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

Java并发编程面试题:锁(17题)

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

Jeesite5:Star24k,Spring Boot 3.3+Vue3实战开源项目,架构深度拆解!让企业级项目开发效率提升300的秘密武器

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 企业级应用开发的需求日益增长。今天&#xff0c;我们要介绍的是一个在GitHub上广受好评的开源项目——Jeesite5。这不仅是一个技术框架&#xff0c;更…

Python OpenCV图像去模糊实战:离焦模糊的修复原理与Python实现

针对因焦距未调好导致的彩色图像模糊问题,结合OpenCV的锐化处理和色彩空间转换技术,推荐以下分步解决方案: 一、YUV色彩空间锐化(保留颜色信息) 原理: YUV色彩空间:YUV色彩空间将图像分为亮度(Y)和色度(U和V)分量。通过仅处理亮度通道(Y),可以有效避免对颜色信…

深度学习算法优化如何实现?

深度学习算法优化是一个复杂而多维的过程&#xff0c;旨在提高模型的性能、准确性和效率。以下是一些实现深度学习算法优化的关键步骤和方法&#xff1a; 一、数据预处理与增强 数据清洗&#xff1a;去除重复、错误或无效的数据&#xff0c;确保数据集的准确性和一致性。数据增…

Windows平台的小工具,功能实用!

今天给大家分享一款超实用的Windows平台监控工具&#xff0c;堪称“桌面小管家”&#xff0c;能帮你轻松掌握电脑的各种运行状态&#xff0c;比如网速、下载速度、内存和CPU占用率等常用参数&#xff0c;让你的电脑运行情况一目了然。 TrafficMonitor 网速监控悬浮窗软件 这款…

【JavaEE进阶】MyBatis通过XML实现增删改查

目录 &#x1f38d;前言 &#x1f340;配置连接字符串和MyBatis &#x1f343;写持久层代码 ​&#x1f6a9;添加mapper接口 &#x1f6a9;添加UserInfoMapper.xml &#x1f6a9;单元测试 &#x1f332;查(Select) &#x1f6a9;结果映射 &#x1f334;增(Insert&…

Cloud之快照存储(Cloud Snapshot Storage)

Cloud之快照存储 一、什么是快照 1. 快照的定义 快照&#xff08;Snapshot&#xff09;是一种记录某一时刻数据状态的技术。在计算机存储和虚拟化环境中&#xff0c;快照能够将文件系统或虚拟机的状态保存下来&#xff0c;以便以后能够回溯到某一特定时间点。快照通常用于备…

nlp|微调大语言模型初探索(2),训练自己的聊天机器人

前言 上篇文章记录了具体的微调语言大模型步骤&#xff0c;以及在微调过程中可能遇见的各种报错&#xff0c;美中不足的是只是基于开源数据集的微调&#xff0c;今天来记录一下怎么基于自己的数据集去微调大语言模型&#xff0c;训练自己的智能机器人&#xff01;&#xff01;&…

剑指 Offer II 025. 链表中的两数相加

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20025.%20%E9%93%BE%E8%A1%A8%E4%B8%AD%E7%9A%84%E4%B8%A4%E6%95%B0%E7%9B%B8%E5%8A%A0/README.md 剑指 Offer II 025. 链表中的两数相加 题目描述 给定两个 非…

numpy(02 数据类型和数据类型转换)

numpy(01 入门) 目录 一、Python NumPy 数据类型 1.1 NumPy 基本类型 1.2 数据类型对象 (dtype) 1.3 具体实例 二、Numpy数据类型转换 2.1 浮点数据转换 2.2 整型数据转换 2.3 浮点数转整数 一、Python NumPy 数据类型 1.1 NumPy 基本类型 下表列举了常用 NumPy 基…

python: SQLAlchemy (ORM) Simple example using SQLite

领域层&#xff08;Domain&#xff09;&#xff1a;定义了 School 实体类和 SchoolRepository 抽象基类&#xff0c;明确了业务实体和数据访问的契约。基础设施层&#xff08;Infrastructure&#xff09;&#xff1a;通过 SQLAlchemy 实现了 SchoolRepository 类&#xff0c;负…

MySQL数据库入门到大蛇尚硅谷宋红康老师笔记 高级篇 part 1

第01章_Linux下MySQL的安装与使用 首先在vmware中下载centos7&#xff0c;实际上8更好一点&#xff0c;不过centos已经是时代的眼泪了&#xff0c;我之前已经教过了&#xff0c;不过是忘了&#xff0c;所以重新说一遍&#xff0c;看文档即可 2.开机前修改mac地址 &#xff0…

谈谈 ES 6.8 到 7.10 的功能变迁(1)- 性能优化篇

前言 ES 7.10 可能是现在比较常见的 ES 版本。但是对于一些相迭代比较慢的早期业务系统来说&#xff0c;ES 6.8 是一个名副其实的“钉子户”。 借着工作内升级调研的任务东风&#xff0c;我整理从 ES 6.8 到 ES 7.10 ELastic 重点列出的新增功能和优化内容。将分为 6 个篇幅给…

Vue前端开发-Vant组件之Button组件

Vant 有丰富的UI组件&#xff0c;而基础组件是全部组件的核心&#xff0c;基础组件中将常用的元素做了二次的开发&#xff0c;封装成Vant格式组件&#xff0c;如按钮、图片和布局等&#xff0c;这些封装后的Vant组件&#xff0c;提供了更多面向实际应用的属性和事件&#xff0c…

《机器学习数学基础》补充资料:求解线性方程组的克拉默法则

《机器学习数学基础》中并没有将解线性方程组作为重点&#xff0c;只是在第2章2.4.2节做了比较完整的概述。这是因为&#xff0c;如果用程序求解线性方程组&#xff0c;相对于高等数学教材中强调的手工求解&#xff0c;要简单得多了。 本文是关于线性方程组的拓展&#xff0c;供…