前端---认识CSS

文章目录

  • 什么是CSS?
  • CSS在HTML中的位置
    • 内联样式
    • 内部样式
    • 外部样式
  • CSS的选择器
    • 普通选择器
      • 标签选择器
      • 类选择器
      • id选择器
      • 通配符选择器
    • 复合选择器
      • 后代选择器
      • 子选择器
      • 并集选择器
      • 伪类选择器
  • CSS的样式

什么是CSS?

就像我们前面说的:CSS是用来描述页面样式的。它本身是一个“层叠样式表”,能够对网页中特定元素的排版进行像素级精确控制,实现美化页面的效果。

CSS在HTML中的位置

内联样式

<div style="color:green">使用内联样式直接改变元素的颜色</div>

注:使用style属性设置样式,只针对当前元素生效。

内部样式

<style>div {color: red;}
</style>
<div>使用内部样式改变元素颜色</div>

注:将style标签和要修饰的元素拆分出来,并且都放在body里

外部样式

//创建外部的一个.css文件
div {color: red;
}<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部样式</title><link rel="stylesheet" href="style.css">
</head>
<body><div>使用外部样式改变元素的颜色</div>
</body>

注:

  1. 在外部创建一个.css文件
  2. 使用link标签在head里引入css

CSS的选择器

只有在选中了元素之后才能为其设置样式,CSS的选择器就是让你来选中页面中的哪个/哪些元素,{}里面的样式就是针对这些元素生效的。

普通选择器

标签选择器

		div {color: red;font-size: 100px;}

注:通过标签名进行选择,就是表示当前页面中所有相同的标签都要被选中。

类选择器

		.one {color: red;font-size: 100px;}

注:

  1. 此处写的one是类名,所有的HTML元素都可以指定类名
  2. 不同元素可以指定相同的类名
  3. 通过“.”加类名来选中元素,表示类名相同的元素都要被选中

id选择器

		#two {color: green;font-size: 100px;}

注:

  1. 此处写的two是id,所有的HTML都可以指定id
  2. 在同一个页面内id是唯一的,不同的元素不能使用相同的id
  3. 通过“#”加id来选中元素,表示要选中指定id的元素,只能选中一个。

通配符选择器

		* {color: blue;font-size: 100px;}

注:通过“*”来选中元素,表示页面内的所有元素都被选中

复合选择器

复合选择器:就是把多个基础选择器给组合起来了

后代选择器

       后代选择器:元素1 元素2 {样式声明}ul li {color: red;font-size: 100px;}

注:

  1. 后代选择器:就是在指定的元素中去筛选后代元素
  2. 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间有一个空格
  3. 可以把元素1后代里所有的元素2筛选出来,不管隔了几代都可以筛选出来

子选择器

       子选择器: 元素1>元素2 { 样式声明 }ol>li {color: red;font-size: 100px;}

注:

  1. 子选择器:就是在指定的元素中去筛选子代元素,不能筛选孙子代,更不能筛选更后代的
  2. 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间用 > 连接

并集选择器

		并集选择器:元素1, 元素2 { 样式声明 }h1,h2 {color: white;font-size: 100px;}

注:

  1. 并集选择器:就是用于选择多组标签
  2. 元素1和元素2可以是标签选择器、类选择器、id选择器,元素1和元素2之间用 , 连接

伪类选择器

		伪类选择器:是选中元素的不同状态选择未被访问过的链接a:link {color: orange;font-size: 100px;}选择已经被访问过的链接a:visited {color: purple;}选择鼠标悬停的链接a:hover {color: blue;}选择鼠标按下的链接a:active {color: red;}

注:使用 : 连接左右俩边

CSS的样式

CSS的样式纷繁多样,为了让大家思路更加清晰,特地单独总结了一篇文章来介绍。CSS样式汇总

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

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

相关文章

易基因:综合全基因组DNA甲基化和转录组学分析鉴定调控骨骼肌发育潜在基因 | 研究进展

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 DNA甲基化是骨骼肌发育中关键的表观遗传调控机制。但胚胎鸭骨骼肌发育中负责DNA甲基化的调控因子仍然未知。 2023年10月23日&#xff0c;南京农业大学动物科技学院于敏莉副教授团队在《…

无防御香港服务器如何防CC

虽然相对于DDos攻击&#xff0c;CC攻击的防护危害性相对没有那么大&#xff0c;但是像香港地区普遍对内地的网络比较小的话&#xff0c;CC攻击还是 蛮让人头痛的&#xff0c;实际上对CC的防护尤其是一些小体量的网站&#xff0c;租用高防服务器是划不来的&#xff0c;如果服务器…

核心!华为自研系统鸿蒙趋势

鸿蒙系统的推出引起了全球的关注&#xff0c;毕竟这是华为自主研发的操作系统。这个系统有一些特点很独特。首先&#xff0c;它的自主可控性是一大特色。因为是自家研发的&#xff0c;所以更容易适应外界变化。其次&#xff0c;它采用了分布式架构&#xff0c;这样不同设备之间…

GitHub Universe 2023:AI 技术引领软件开发创新浪潮

GitHub 是全球领先的软件开发和协作平台&#xff0c;数百万开发者和企业在此分享、学习和创建卓越的软件。同时 GitHub 处在 AI 技术前沿&#xff0c;通过其先进的 AI 技术增强开发者体验并赋能未来软件开发的使命。在今天的文章中&#xff0c;我们将一起看看在 GitHub 年度大会…

Azure 机器学习:MLOps - 使用 Azure 机器学习进行模型管理、部署和监视

本文介绍如何在 Azure 机器学习中应用机器学习运营 (MLOps) 做法&#xff0c;以管理模型的生命周期。 应用 MLOps 做法可改善机器学习解决方案的质量和一致性。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff…

project打开文件时,显示无法识别此文件格式?

环境&#xff1a; Win 10 专业版 project 2021 问题描述&#xff1a; project打开文件时&#xff0c;显示无法识别此文件格式&#xff1f; 解决方案&#xff1a; 1.测试新建文件&#xff0c;打开都是这样&#xff0c;检查文件都不是旧版本创建&#xff08;未解决&#xff…

Linux之输入输出重定向和管道

一、是什么 linux中有三种标准输入输出&#xff0c;分别是STDIN&#xff0c;STDOUT&#xff0c;STDERR&#xff0c;对应的数字是0、1、2&#xff1a; STDIN 是标准输入&#xff0c;默认从键盘读取信息STDOUT 是标准输出&#xff0c;默认将输出结果输出至终端STDERR 是标准错误…

做作业用台灯好还是不用台灯?高口碑护眼台灯分享

相信大家在生活着也遇到过这个问题&#xff0c;就是孩子在写作业时需不需要使用台灯。有些家长可能认为家里室内的亮度已经很足了&#xff0c;没必要使用台灯。 其实这个想法是错误的&#xff0c;孩子在书写作业时是需要使用台灯的&#xff01;室内灯源照到书桌时时远远不够的&…

UDP主要丢包原因及具体问题分析

一、主要丢包原因 1、接收端处理时间过长导致丢包&#xff1a;调用recv方法接收端收到数据后&#xff0c;处理数据花了一些时间&#xff0c;处理完后再次调用recv方法&#xff0c;在这二次调用间隔里,发过来的包可能丢失。对于这种情况可以修改接收端&#xff0c;将包接收后存入…

Python【寻找缺失元素】

要求&#xff1a; 给定一个非负整数数组A&#xff0c;该数组的元素都是从1~N的元素组成&#xff0c;现在发现其中缺失一个&#xff0c;请找出这个缺失的元素 代码如下: def find_missing_element(arr):"""找出缺失的元素:param arr: 包含1~N之间的整数的数组&…

试论轮回的证据(欢迎讨论)

这几天看了几个鸟类筑巢的视频&#xff0c;十分惊叹。 一个鸟找个平台或树杈&#xff0c;用几个树枝搭个简陋的窝&#xff0c;这个确实是理所当然的事情&#xff0c;没什么奇怪的。 而有些鸟类的窝&#xff0c;十分的精巧&#xff0c;需要智商和技术。那么这些鸟类是怎么学会的…

jupyter lab配置列表清单

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

数据结构上机实验——图的实现(以无向邻接表为例)、图的深度优先搜索(DFS)、图的广度优先搜索(BFS)

文章目录 数据结构上机实验1.要求2.图的实现&#xff08;以无向邻接表为例&#xff09;2.1创建图2.1.1定义图的顶点、边及类定义2.1.2创建无向图和查找2.1.3插入边2.1.4打印函数 2.2图的深度优先搜索&#xff08;DFS&#xff09;2.3图的广度优先搜索&#xff08;BFS&#xff09…

c/c++反汇编 | 逆向 | 初级小牛犊

c语言&#xff0c;难学不是没有道理的&#xff0c;不过能够更深层次了解底层&#xff0c;也不是没有理论支持的 之前简单的理解为&#xff0c;为什么C/C的程序能效率高&#xff1f;“应用层”我们写的屎山一样的代码&#xff0c;其实在编译的时候&#xff0c;编译器都会帮我们优…

Android的亮灯逻辑辨析

Android手机的亮灯逻辑由三层结构&#xff1a; 1. framework层控制行为逻辑 2. hardware提供HAL接口 3. 驱动层负责亮灯。 首先在/framework/base/core/res/res/values/config.xml中定义了灯的颜色和亮灯阈值 <!-- Display low battery warning when battery level dip…

竞赛 题目:垃圾邮件(短信)分类 算法实现 机器学习 深度学习 开题

文章目录 1 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器 3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器学习的垃圾邮件分类 该项目…

技术贴 | SQL 执行 - 执行器优化

本期技术贴主要介绍查询执行引擎的优化。查询执行引擎负责将 SQL 优化器生成的执行计划进行解释&#xff0c;通过任务调度执行从存储引擎里面把数据读取出来&#xff0c;计算出结果集&#xff0c;然后返回给客户。 在关系型数据库发展的早期&#xff0c;受制于计算机 IO 能力的…

前端JS解构数组对象

// 3. 对象数组解构const arr [{username: 小明,age: 18,agw:19},{username: 小ha,age: 18,agw:19}]arr.map(item>item.age)//js结构数组对象console.log( arr.map(item>{return {aaa:item.age,bbb:item.username}}))

搜维尔科技:【软件篇】TechViz是一款专为工程设计的专业级3D可视化软件

在沉浸式房间内深入研究您自己的 3D 数据 沉浸式房间是一个交互式虚拟现实空间&#xff0c;其中每个表面&#xff08;墙壁、地板和天花板&#xff09;都充当投影屏幕&#xff0c;创造高度沉浸式的体验。这就像您的 3D 模型有一个窗口&#xff0c;您可以在其中从不同角度走动、…

bclinux aarch64 ceph 14.2.10 文件存储 Ceph File System, 需要部署mds: ceph-deploy mds

创建池 [rootceph-0 ~]# ceph osd pool create cephfs_data 64 pool cephfs_data created [rootceph-0 ~]# ceph osd pool create cephfs_metadata 32 pool cephfs_metadata created cephfs_metadata 64 报错 官方说明&#xff1a; 元数据池通常最多可容纳几 GB 的数据。为…