css基础-认识css

news2025/7/11 17:11:37

什么是css

css是一个样式表,是对html的一种装饰,它决定了浏览器如何显示html元素,例如:

h1 {
		color:blue; //文字颜色是蓝色
		font-size:12px; //字体大小为12像素
}

上段css代码就是对HTML 中 <h1>标签的修饰;所以css主要由两部分组成 :选择器,以及一条或多条声明:
在这里插入图片描述
选择器就是需要进行装饰的HTML元素
声明就是有一个属性 和一个值组成的,用来设置HTML元素的样式,多条申明分号隔开。
CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:
一个HTML中总是有很多个h1标签的,那总不能所有相同的标签都用一个样式吧,所以css选择器的种类有很多,我们可以选择合适的css选择器来找到需要装饰的HTMl元素。

css选择器

1.标签选择器

结构:标签名{css属性名:属性值}
作用:通过HTML标签名,找到页面中所有这类标签,设置样式。跟上面讲到h1标签一样

h1 {
		color:blue; //文字颜色是蓝色
		font-size:12px; //字体大小为12像素
}

2.id选择器

结构 :#id属性值{css属性名:属性值}
作用:通过HTML标签元素的id属性值,找到页面中带有这个di属性值的标签,设置样式。

特别提醒:

  1. 所有的HTML标签都有id属性
  2. id是唯一的,不可重复的
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签
<style>
 #mydiv{
 	color:red;
}
</style>
<body>
    <div id="mydiv">
        id选择器
    </div>
</body>

3.类选择器

结构: .类名{css属性名:属性值;}
作用:通过类名,找到页面中所有的带有这个类名的标签,设置样式

特别提醒:

1.所有的标签上都有class属性,class属性的属性值成为类名(类似于起了一个名)
2.类名可以由数字,字母,下划线,中划线组成,但是不能以数字开头或者中划线开头
3.一个标签中可以同时有多个类名,类名之间用空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签

<style>
    .mydiv{
        color: red;
    }
</style>
<body>
    <div class="mydiv"> div1</div>
    <div class="mydiv"> div2</div>
</body>

4.通配符选择器

结构: *{css属性名:属性值}
作用:找到页面中所有的标签,然后设置样式
注意:在小页面中可能会用于去除页面中默认的margin和padding

<style>
    *{
        margin: 0;
        padding:0;
    }
</style>

5.复合选择器

5.1 交集选择器

语法: 选择器1选择器2{css样式}
作用:选中页面中同时满足过个选择器的标签 紧挨着的
结果:找到标签中既能被选择器1又能被选择器2选中的标签,设置样式
注意:之间没有任何东西隔开,紧挨着的
交集选择器中如果有标签选择器,标签选择器必须放在前面

<style>
    p .one{
        color: red;
    }
</style>
<body>
    <p class="one">
        这个元素会被应用样式
    </p>
    <div>
        这个元素不会被应用样式
    </div>
</body>
5.2 并集选择器

语法: 选择器1,选择器2{css样式}
并集选择器:同时选择多组标签,设置相同的样式
结果:找到选择器1和选择器2选中的标签,设置样式
注意: 选择器与选择器之间用,隔开
可以是基础选择器或者复合选择器
每组选择器通常一行写一个,提高代码的可读性

<style>
    p,div{
        color: red;
    }
</style>
<body>
    <p>
        这个元素会被应用样式
    </p>
    <div>
        这个元素也会被应用样式
    </div>
</body>

6.属性选择器

语法用法
[属性]选中含有指定属性的元素
[属性=属性值]选中含有指定属性和指定属性值的元素
[属性^=属性值]选中含有指定属性和指定属性值开头的元素
[属性$=属性值]选中含有指定属性和指定属性值结尾的元素
[属性*=属性值]选中指定属性名和含有指定属性值的元素

7.关系选择器

语法用法
父亲 > 儿子儿子单个选择
祖先 后代后代全部选择
兄 + 弟相邻兄弟选择(必须是兄弟且严格相邻)
兄~弟全部兄弟选择

8.伪类选择器

8.1 元素选择伪类选择器

: 前有空格代表从子类开始数,无空格代表从所在级数开始。

:first-child 第一个子元素
:last-child 最后一个子元素 :nth-child(n) 选中第n个元素
关于:nth-child( )的特殊值
n 第n个 n的范围0到正无穷(全选)
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
上面的都是在所有元素中选择
下面都是在相同元素中选择
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(n) 选中第n个元素

8.2 否定伪类选择器

:not( ) 将符号条件的元素去除
不支持组合使用 :not(div .one) 不支持

8.3 特殊伪类选择器

:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的问题,所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后,元素的状态

9 . 伪元素选择器

常见的几个伪元素:
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

认识了以上的css选择器,我们就可以快速找到要进行装饰的HTML元素了,接下来就是css有哪些常用属性可以对HTML元素装饰的漂漂亮亮吧!

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

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

相关文章

【Unity功能集】TextureShop纹理工坊(二)图层(下)

项目源码&#xff1a;后期发布 索引 图层渲染绘画区域图层Shader 编辑器编辑模式新建图层设置当前图层上、下移动图层删除图层图层快照 图层 在PS中&#xff0c;图层的概念贯穿始终&#xff08;了解PS图层&#xff09;&#xff0c;他可以称作PS最基础也是最强大的特性之一。 …

云计算HCIP-OpenStack02

书接上回&#xff1a; 云计算HCIP-OpenStack01-CSDN博客 7.OpenStack核心服务 7.1Horizon&#xff1a;界面管理服务 Horizon提供了OpenStack中基于web界面的管理控制页面&#xff0c;用户或者是管理员都需要通过该服务进行OpenStack的访问和控制 界面管理服务需要依赖于keyston…

Word2Vec:将词汇转化为向量的技术

文章目录 Word2Vec来龙去脉分层Softmax负采样 Word2Vec 下面的文章纯属笔记&#xff0c;看完后不会有任何收获&#xff0c;如果想理解这两种优化技术&#xff0c;给大家推荐一篇博客&#xff0c;讲的很好&#xff1a; 详解-----分层Softmax与负采样 来龙去脉 word2vec,即将词…

电商商品详情API接口(item get)数据分析上货

电商商品详情API接口&#xff08;item get&#xff09;在数据分析与商品上货方面发挥着重要作用。以下是对这两个方面的详细探讨&#xff1a; 一、数据分析 数据源获取&#xff1a; 商品详情API接口提供了丰富的数据源&#xff0c;包括商品的标题、价格、库存、描述、图片、用…

如何将你的 Ruby 应用程序从 OpenSearch 迁移到 Elasticsearch

作者&#xff1a;来自 Elastic Fernando Briano 将 Ruby 代码库从 OpenSearch 客户端迁移到 Elasticsearch 客户端的指南。 OpenSearch Ruby 客户端是从 7.x 版 Elasticsearch Ruby 客户端分叉而来的&#xff0c;因此代码库相对相似。这意味着当将 Ruby 代码库从 OpenSearch 迁…

如何对 Java 项目简化接口设计提升开发效率

文章目录 摘要引言简洁接口设计的原则示例代码OrderProcessor 接口StandardOrderProcessor 实现类Order 数据类调用方代码&#xff1a;OrderService 模块之间的协作QA 环节总结参考资料 摘要 简洁的接口设计可以有效降低代码依赖与耦合度&#xff0c;提高代码的可维护性和扩展…

Python字符串及正则表达式(十):字符串常用操作、字符串编码转换

前言&#xff1a;在编程的世界里&#xff0c;字符串无处不在。它们是构建用户界面、存储数据、进行通信的基础元素。无论是财务系统的总账报表、电子游戏的比赛结果&#xff0c;还是火车站的列车时刻表&#xff0c;这些信息最终都需要以文本的形式呈现给用户。这些文本的背后&a…

JAVA爬虫获取1688关键词接口

以下是使用Java爬虫获取1688关键词接口的详细步骤和示例代码&#xff1a; 一、获取API接口访问权限 要使用1688关键词接口&#xff0c;首先需要获取API的使用权限&#xff0c;并了解接口规范。以下是获取API接口的详细步骤&#xff1a; 注册账号&#xff1a;在1688平台注册一…

【AIGC】与模型对话:理解与预防ChatGPT中的常见误解

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;模型的工作原理和用户期望差异人工智能模型的基本工作原理认知上的局限与误解用户期望与模型实际能力的差距精确理解用户意图的重要性实际应用中的建议 &…

UE5制作倒计时功能

设置画布和文本 文本绑定 格式化时间 转到事件图表&#xff0c;计算时间&#xff0c;时间结束后面的事件可以按自己需求写 进入关卡蓝图&#xff0c;添加倒计时UI

Excel + Notepad + CMD 命令行批量修改文件名

注意&#xff1a;该方式为直接修改原文件的文件名&#xff0c;不会生成新文件 新建Excel文件 A列&#xff1a;固定为 renB列&#xff1a;原文件名称C列&#xff1a;修改后保存的名称B列、C列&#xff0c;需要带文件后缀&#xff0c;为txt文件就是.txt结尾&#xff0c;为png图片…

F5中获取客户端ip地址(client ip)

当F5设备对其原始设置上的所有IP地址使用NAT时&#xff0c;连接到poo成员&#xff08;nodes、backend servers&#xff09;的出站连接将是NAT IP地址。 pool 成员&#xff08;nodes、backend servers&#xff09;将无法看到真实的客户端 ip地址&#xff0c;因为看到的是F5上的…

什么是网络数据包分析?有什么特点?

网络数据包分析&#xff08;Packet Analysis&#xff09;&#xff0c;也被称为网络流量分析或抓包分析&#xff0c;是指通过捕获和检查在网络上传输的数据包来监控、诊断和评估网络性能及安全性的一种技术。这项技术可以用来识别网络问题、优化网络性能、检测安全威胁以及了解网…

大数据技术与应用——数据可视化(山东省大数据职称考试)

大数据分析应用-初级 第一部分 基础知识 一、大数据法律法规、政策文件、相关标准 二、计算机基础知识 三、信息化基础知识 四、密码学 五、大数据安全 六、数据库系统 七、数据仓库. 第二部分 专业知识 一、大数据技术与应用 二、大数据分析模型 三、数据科学 数据可视化 大…

window QT/C++ 与 lua交互(mingw + lua + LuaBridge + luasocket)

一、环境与准备工作 测试环境:win10 编译器:mingw QT版本:QT5.12.3 下载三种源码: LuaBridge源码:https://github.com/vinniefalco/LuaBridge LUA源码(本测试用的是5.3.5):https://www.lua.org/download.html luasocket源码:https://github.com/diegonehab/luasocket 目…

Docker在Ubuntu和CentOS系统下的安装

目录 1. 各版本平台支持情况2. 在Ubuntu系统下安装docker3. 常见报错4. Docker的镜像源修改5. Docker目录修改6. 在CentOS系统下安装docker 1. 各版本平台支持情况 &#xff08;1&#xff09;平台支持情况如下&#xff1a; Server 版本 桌面版本 2. 在Ubuntu系统下安装docker…

图形化界面MySQL(MySQL)(超级详细)

目录 1.官网地址 1.1在Linux直接点击NO thanks..... 1.2任何远端登录&#xff0c;再把jj数据库给授权 1.3建立新用户 优点和好处 示例代码&#xff08;MySQL Workbench&#xff09; 示例代码&#xff08;phpMyAdmin&#xff09; 总结 图形化界面 MySQL 工具大全及其功…

IP数据云查询IP归属地信息

互联网时代&#xff0c;我们每天都会面对大量的网站或App,但你们是否知晓&#xff0c;所有程序员进行程序或者系统的开发都离不开查询IP地址&#xff0c;这是由于对于每个安全的网站/软件来说&#xff0c;基础的服务日志&#xff0c;登录IP等就离不开IP归属地离线库&#xff0c…

PH热榜 | 2024-12-17

1. Eden 标语&#xff1a;一键用AI生成网页评论。 介绍&#xff1a;Eden是一款人工智能驱动的社交插件&#xff0c;只需点击表情符号就能在任何网页上评论。它能自动总结网页内容并生成个性化评论。 想调侃朋友、表达喜爱&#xff0c;还是快速评论几句&#xff1f;用Eden&…

Hadoop学习笔记(包括hadoop3.4.0集群安装)(黑马)

Hadoop学习笔记 0-前置章节-环境准备 0.1 环境介绍 配置环境&#xff1a;hadoop-3.4.0&#xff0c;jdk-8u171-linux-x64 0.2 VMware准备Linux虚拟机 0.2.1主机名、IP、SSH免密登录 1.配置固定IP地址&#xff08;root权限&#xff09; 开启master&#xff0c;修改主机名为…