前端学习笔记:CSS的引入,元素选择器

news2024/11/15 7:34:28

这是本人学习的总结,主要学习资料如下

  • 马士兵教育

目录

  • 1、引入CSS
    • 1.1、引入CSS的方式
    • 1.2、优先级
  • 2、元素选择器
    • 2.1、基本选择器
      • 2.1.1、选择器
      • 2.1.2、优先级
    • 2.2、关系选择器
      • 2.2.1、优先级
    • 2.3、属性选择器
    • 2.4、伪类选择器


1、引入CSS

1.1、引入CSS的方式

第一个是内联样式,直接作为标签内部的属性设置样式。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--
                        书写方式:内联样式(行内样式)
                        在标签中加入一个style属性,CSS的样式作为属性值
                        多个属性值之间用;进行拼接
                -->
                <h1 style="color: deeppink;font-family: '宋体';">这是一个h1标题</h1>
        </body>
</html>



第二个是内部样式,将样式定义在<head>标签中,定义整个页面的样式。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <!--
                        书写方式:内部样式:
                        head标签中加入一个style标签,在里面定位到你需要修饰的元素,然后在{}中加入你要修饰的样式。
                -->
                <style type="text/css">
                        h1{
                                color: royalblue;
                                font-family: 宋体;
                        }
                </style>
        </head>
        <body>
                <h1>这是一个标题</h1>
        </body>
</html>




最后是外部样式,在外部专门定义一个CSS文件,HTML页面引入这个CSS文件即可。

h1{
        color: red;
        font-family: 宋体;
}
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <!--引入外部CSS资源:link-->
                <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
        </head>
        <body>
                <h1>这是一个标题</h1>
        </body>
</html>

1.2、优先级

原则是就近原则,离元素最近的发挥作用,即内联样式>内部样式>外部样式



2、元素选择器

元素选择器是指通过一定的方式定位到页面元素,给这些元素添加样式。

2.1、基本选择器

2.1.1、选择器

有三种基本选择器,元素选择器,类选择器和id选择器。

  • 元素选择器就是通过元素名选择元素,比如说<h1>等。
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        h1{
                                color: red;
                        }
                        i{
                                color: blue;
                        }
                </style>
        </head>
        <body>
                <h1>我是<i>一个</i>标题</h1>
                <h1>我是一个标题</h1>
        </body>
</html>

请添加图片描述


  • 类选择器,可以将类名当做元素的属性,通过类名找到元素。
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*
                         【2】基本选择器:类选择器
                         应用场合:不同类型的标签使用相同的类型
                         格式:
                         .class的名字{
                         	css样式;
                         }
                         */
                        .mycls{
                                color: green;
                        }
                </style>
        </head>
        <body>
                <h1 class="mycls">我是一个标题</h1>
                <h1>我是一个标题</h1>

                <h2 class="mycls">我是h2标题</h2>
        </body>
</html>

请添加图片描述


  • id选择器。和类选择器类似,只是属性名从class改成id,虽然即使有多个元素的id相同CSS也能生效,但还是建议让元素的id唯一。
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">

                <title></title>
                <style type="text/css">
                        /*
                         【3】基本选择器:id选择器:
                         应用场合:可以定位唯一的一个元素
                         不同的标签确实可以使用相同的id,但是一般我们会进行人为的控制,让id是可以唯一定位到一个元素。
                         格式:
                         #id名字{
                         	css样式;
                         }
                         */
                        
                        #myid{
                                color: purple;
                        }
                </style>
        </head>
        <body>
                <h2 id="myid">我是h2标题</h2>
        </body>
</html>

请添加图片描述

2.1.2、优先级

范围小的大于范围大的。id选择器>类选择器>元素选择器


2.2、关系选择器

关系选择器是可以选择标签A下的子标签。比如<h1>下的所有标签。

这种选择器有两种,一种是所有子标签,另一种是直接子标签,不包括孙子及以后的标签

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*关系选择器:
                         * 后代选择器:只要是这个元素的后代,样式都会发生变化
                         * div下面的所有h1标签样式都会改变
                         */
                        div h1{
                               color: red;
                        }
                        /*关系选择器:子代选择器
                         只改变子标签的样式*/
                        div>h1{
                                color: royalblue;
                        }
                        span>h1{
                                color: yellow;
                        }
                </style>
        </head>
        <body>
                <div>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <span>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                        </span>
                </div>
                        
        </body>
</html>

2.2.1、优先级

直接子标签>所有子标签div>h1这样的写法优先级比div h1的高。


2.3、属性选择器

通过属性选择元素。比如有元素

<input type="password" value="123123"/>

那我们可以选择input中属性type=password的元素。

下面是示例。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*属性选择器*/
                        input[type="password"]{
                                background-color: red;
                        }
                        input[type="text"][value="zhaoss1"]{
                                background-color: yellow;
                        }
                        
                </style>
        </head>
        <body>
                <form>
                        用户名:<input type="text" value="zhaoss1" />
                        用户名2:<input type="text" value="zhaoss2" />
                        密码:<input type="password" value="123123" />
                        <input type="submit" value="登录" />
                </form>
        </body>
</html>

在这里插入图片描述


2.4、伪类选择器

伪类选择器是在其他选择器的基础上,添加事件。

比如说下面是基础选择器,<h1>标签都变红色。

h1 {
	color: red
}

我们可以添加事件,变成只有鼠标在这个标签上时标签才变成红色。

h1:hover{
	color: red
}

事件有四个:linkhoveractivevisited。分别是静止,悬浮,触发,完成。

就是正常状态(鼠标不在元素上),鼠标在元素在元素上, 鼠标点击后事件处理中,鼠标点击后事件处理完。

下面是示例,一个超链接,刚开始是黄色,鼠标放上去变红色,点击超链接且没跳转到链接前变蓝色,跳转链接后变绿色。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*设置静止状态*/
                        input:link{
                                color: yellow;
                        }
                        /*设置鼠标悬浮状态*/
                        input:hover{
                                color: red;
                        }
                        /*设置触发状态*/
                        input:active{
                                color: blue;
                        }
                        
                        /*设置完成状态*/
                        input:visited{
                                color: green;
                        }
                </style>
        </head>
        <body>
                <a href="index.html">超链接</a>
                <input type="text"/>
        </body>
</html>

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

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

相关文章

互斥锁深度理解与使用

大家好&#xff0c;我是易安! 我们知道一个或者多个操作在CPU执行的过程中不被中断的特性&#xff0c;称为“原子性”。理解这个特性有助于你分析并发编程Bug出现的原因&#xff0c;例如利用它可以分析出long型变量在32位机器上读写可能出现的诡异Bug&#xff0c;明明已经把变量…

SpringCloud--gateway 网关

在Spring Cloud中&#xff0c;使用Gateway网关访问服务可以有多种好处&#xff0c;包括但不限于以下几点&#xff1a; 统一入口管理&#xff1a;Gateway作为统一的服务入口&#xff0c;可以对所有的请求进行统一管理和控制&#xff0c;实现微服务集中管理。 动态路由&#xff…

056:cesium 七种方法设置颜色

第056个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中设置颜色,这里用到了7种方法,查看API,还有很多种方法 直接复制下面的 vue+cesium源代码,操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码(共115行)相关API参考:专栏目标示例效果 配置…

深入理解Go语言中的接口编程【17】

文章目录 接口接口接口类型为什么要使用接口接口的定义实现接口的条件接口类型变量值接收者和指针接收者实现接口的区别值接收者实现接口指针接收者实现接口下面的代码是一个比较好的面试题 类型与接口的关系一个类型实现多个接口多个类型实现同一接口接口嵌套 空接口空接口的定…

TCP教程:详解TCP连接过程

目录标题 一 、简述二 、TCP建立连接协议&#xff08;三次握手&#xff09;2.1 概述及目的2.2 第一次握手&#xff1a;客户端发送SYN报文2.3 第二次握手&#xff1a;服务器回应SYN-ACK报文2.4 第三次握手&#xff1a;客户端回应ACK报文2.5 顾客预定座位场景2.6底层原理2.7 TCP …

嵌入式之Samba服务器搭建

在嵌入式系统开发应用平台中&#xff0c;tftp、nfs和samba服务器是最常用的文件传输工具 tftp和nfs是在嵌入式Linux开发环境中经常使用的传输工具 samba则是Linux和Windows之间的文件传输工具。 下面演示在linux上搭建Samba服务器 sudo apt-get install samba chmod -R 77…

会场安排问题——算法实现(C实现)

问题描述&#xff1a;加入要在足够多的会场里安排一批活动&#xff0c;并希望使用尽可能少的会场。设计一个有效的贪心算法进行安排。&#xff08;这个问题实际上是著名的图着色问题。若每个活动作为图的一个顶点&#xff0c;不相容活动之间用边相连。使相连顶点着有不同颜色的…

数据库原理容易出错的点

一个数据库只存在一个内模式和一个模式&#xff0c;可以存在多个外模式除了删除表或视图的使用的是DELETE以外其他数据库对象均是使用DROP遵守两段封锁的协议的并发事务一定是可串行化的哪些情况下不适合创建索引&#xff1a; 对于查询过程中很少使用或参考的列对于那些只有很少…

【无人车】用于无人地面车辆的路径跟踪算法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

CMIP6数据处理:WRF模式动力降尺度、单点降尺度、统计方法区域降尺度、SWAT数据、Biome-BGC数据制备

查看原文>>>WRF模式、CMIP6数据处理、机器学习气象海洋水文应用、python地球科学 目录 CMIP6月数据、日数据、全球VIPPHEN物候数据、ERA5数据 一、CMIP6中的模式比较计划 二、数据下载 三、基础知识 四、单点降尺度 五、统计方法的区域降尺度 六、基于WRF模式…

助力低碳出行 | 基于ACM32 MCU的电动滑板车方案

前言 随着智能科技的快速发展&#xff0c;电动滑板车的驱动系统也得到了长足的发展。国内外的电动滑板车用电机驱动系统分为传统刷式电机和无刷电机两种类型。其中&#xff0c;传统的刷式电机已经逐渐被无刷电机所取代&#xff0c;无刷电机的性能和寿命都更出色&#xff0c;已…

STM32F4 HAL库使用DMA进行ADC采样实时发送波形到串口显示(包含傅里叶变换)

1.总体逻辑 按下STM32F4的KEY0按键&#xff0c;通过外部中断的方式对按键进行检测&#xff0c;然后开启一次带DMA的固定点数的ADC采集&#xff0c;采集完成后在DMA的中断发送采集到的数据&#xff0c;然后清空数据区准备下一次的按键中断。电脑接受到串口数据后对数据进行简单…

大厂齐出海:字节忙种草,网易爱社交

配图来自Canva可画 随着国内移动互联网红利逐渐触顶&#xff0c;互联网市场日趋饱和&#xff0c;国内各互联网企业之间的竞争便愈发激烈起来。在此背景下&#xff0c;广阔的海外市场就成为了腾讯、阿里、字节、京东、拼多多、百度、网易、快手、B站等互联网公司关注和争夺的重…

算法--前缀和技巧 (蓝桥杯123-灵能传输--求和)

文章目录 什么是前缀和用途什么时候用java的前缀和例题[蓝桥杯 2022 省 A] 求和题目描述思路代码 [蓝桥杯 2021 国 ABC] 123题目描述思路代码 [蓝桥杯 2019 省 B] 灵能传输(蓝桥杯96%&#xff0c;洛谷ac)题目描述思路代码 什么是前缀和 如果一个数组a的元素为 a 1 , a 2 , a 3…

Springboot +Flowable,详细解释啥叫流程实例(一)

一.简介 上一篇中学习了Flowable 中的流程模板&#xff08;流程定义&#xff09;的部署问题&#xff0c;这一篇来学习什么叫流程实例。 部署之后的流程模板&#xff0c;还不能直接运行&#xff0c;例如我们部署了一个请假流程&#xff0c;现在 张三想要请假&#xff0c;他就需…

WhatsApp多开攻略,低成本高效率多开账号聊单的方法献上~

WhatsApp多开攻略&#xff01;低成本高效率多开账号聊单的方法献上~ WhatsApp多开是指在同一台设备上同时登录多个WhatsApp账号&#xff0c;这种技术通常被跨境电商从业者用于在不同的WhatsApp账号之间切换&#xff0c;以便更好地管理跨境电商业务。 图中工具&#xff1a; ss客…

lazada按关键字搜索商品API接口

lazada按关键字搜索商品 API接口&#xff0c;在 lazada上搜索产品&#xff0c;如果只需要搜索单个产品的话&#xff0c;那么直接在搜索框输入“关键字”即可&#xff0c;如果需要多个产品&#xff0c;那么则需要进行关键字扩展。 lazada按关键字搜索商品 API接口分为两部分&am…

AI 这是要杀疯啦!

ChatGPT 是基于 GPT 系列大模型开发出来的一个对话场景的 Demo&#xff0c;它已经让我们见识到了大模型的威力。 但有些开发者的胃口不满足于此&#xff0c;已经开始尝试“突破” AI 的边界了&#xff0c;本文推荐 5 个人工智能的开源项目。其中前两个项目&#xff0c;让人细思…

《港联证券》股票必须持仓多久才能卖?股票买入多久显示持仓?

有的新手股民在炒股的时候&#xff0c;对股票的了解是不多的&#xff0c;就会在网上搜索材料来进行学习&#xff0c;那么股票有必要持仓多久才干卖&#xff1f;股票买入多久显现持仓&#xff1f;港联证券为我们预备了相关内容&#xff0c;以供参阅。 股票有必要持仓多久才干卖&…

ADAS辅助驾驶之:BSD盲区监测功能

摘要&#xff1a; 盲点监测系统从技术上主要分为影像和雷达2种&#xff0c;2种技术路线各有优劣。 目录 1、车辆盲区监测系统的定义 2、车辆盲区监测系统原理 3、车辆盲区监测系统硬件安装及标定 4、车辆盲区监测系统发展 1、车辆盲区监测系统的定义 盲区监测系统&#x…