【CSS基础--CSS选择器的常见用法】

CSS选择器的常见用法

  • 1.CSS介绍
    • 1.1 基本语法规范
    • 1.2 引入样式
    • 1.3 规范
  • 2. CSS选择器
    • 2.1 标签选择器
    • 2.2 类选择器
    • 2.3 ID选择器
    • 2.4 复合选择器

1.CSS介绍

CSS(Cascading Style Sheet),层叠样式表,由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。

1.1 基本语法规范

选择器+{一条/多条声明}

  • 选择器就是针对谁修改
  • 声明就是修改的内容
  • 声明的属性是键值对。使用 : (冒号)进行分割键和值
  • CSS要写在style标签中,而style标签可放任何位置,但一般放head标签内

在这里插入图片描述

1.2 引入样式

  • 行内样式:在标签内使用style属性,属性值是CSS属性键值对。

  • 内部样式:定义style标签,在标签内定义CSS样式。

  • 外部样式:定义link标签,通过href属性引入外部CSS。

内部样式会出现大量代码冗余,不利于后期维护所以不常用。行内样式,只适合写简单样式,外部样式,html和css实现了完全的分离,在企业开发中比较常用

1.3 规范

样式大小写:css不区分大小写,一般在开发中使用小写
空格规范:冒号后面带空格,选择器和{}之间也有一个空格

2. CSS选择器

CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性

  1. 标签选择器
  2. class(类)选择器
  3. id选择器
  4. 复合选择器
  5. 调配选择器

在这里插入图片描述

2.1 标签选择器

选择所有的a标签,设置颜色为红色
在这里插入图片描述

2.2 类选择器

符号.(点)加类名,一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割)
在这里插入图片描述

2.3 ID选择器

#加id里面的名称
在这里插入图片描述

2.4 复合选择器

只设置ul下的li中的a标签
在这里插入图片描述

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

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

相关文章

HTML Audio标签src使用base64字符

源码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>Audio src base64</title> </head> <body><audio controls><source src"data:audio/mp3;base64,//OIxAAAAAAAAAA…

保研面试408复习 2——操作系统、计网

文章目录 1、操作系统一、进程、线程的概念以及区别&#xff1f;二、进程间的通信方式&#xff1f; 2、计算机网络一、香农准则二、协议的三要素1. 语法2. 语义3. 时序 标记文字记忆&#xff0c;加粗文字注意&#xff0c;普通文字理解。 1、操作系统 一、进程、线程的概念以及…

hadoop学习---基于Hive的聊天数据分析报表可视化案例

背景介绍&#xff1a; 聊天平台每天都会有大量的用户在线&#xff0c;会出现大量的聊天数据&#xff0c;通过对聊天数据的统计分析&#xff0c;可以更好的对用户构建精准的用户画像&#xff0c;为用户提供更好的服务以及实现高ROI的平台运营推广&#xff0c;给公司的发展决策提…

C语言:指针(1)

1. 内存和地址 内存划分为⼀个个的内存单元&#xff0c;每个内存单元的⼤⼩取1个字节。 计算机中常⻅的单位&#xff08;补充&#xff09;&#xff1a; ⼀个⽐特位可以存储⼀个2进制的位1或者0 C语⾔中给地址起了新的名字叫&#xff1a;指针。 内存单元的编号地址指针。 1.…

在Ubuntu上安装docker

一、安装docker 更新系统包列表&#xff1a; sudo apt-get update安装必要的依赖软件包&#xff0c;使apt可以通过HTTPS使用repository。 sudo apt-get install apt-transport-https ca-certificates curl software-properties-common添加Docker的阿里云GPG密钥&#xff1a;…

CleanMyMac X 4.15.3 版本发布

CleanMyMac X 4.15.3 版本发布&#xff0c;一款苹果 macOS 系统好用的伴侣软件&#xff0c;其包含 1.一键深度清理。2.系统垃圾专清。3.大/旧文件专清。4.系统提速。5.性能悬浮窗。6.恶意软件防护。7.隐私保护。8.软件卸载器。9.软件更新器等 9 大功能&#xff0c;为您的苹果电…

【计算机毕业设计】基于SSM++jsp的电子竞技管理平台【源码+lw+部署文档+讲解】

目录 1 绪论 1.1 研究背景 1.2 目的和意义 1.3 论文结构安排 2 相关技术 2.1 SSM框架介绍 2.2 B/S结构介绍 2.3 Mysql数据库介绍 3 系统分析 3.1 系统可行性分析 3.1.1 技术可行性分析 3.1.2 经济可行性分析 3.1.3 运行可行性分析 3.2 系统性能分析 3.2.1 易用性指标 3.2.2 可…

Git知识点总结

目录 1、版本控制 1.1什么是版本控制 1.2常见的版本控制工具 1.3版本控制分类 2、集中版本控制 SVN 3、分布式版本控制 Git 2、Git与SVN的主要区别 3、软件下载 安装&#xff1a;无脑下一步即可&#xff01;安装完毕就可以使用了&#xff01; 4、启动Git 4.1常用的Li…

又发现一个ai生成音乐的网站-heymusic

网址 https://heymusic.ai/ 尴尬&#xff0c;不挂梯子能登录进来&#xff0c;但是谷歌账号注册不了&#xff0c;刷新了几遍也没注册上。 看了下价格&#xff0c;应该不是免费的&#xff0c;所以也没了试用的兴趣。 我也不想用别的邮箱注册了&#xff0c;所以只能简单的水一…

1.使用uniapp搭建微信小程序项目并引入前端组件资源

文章目录 1. 项目配置1.1. 新建vue3项目1.2. 关联云空间1.3. 运行到微信开发者工具 2. 前端组件2.1. uniCloud的内置组件和扩展组件2.2. uView3.02.3. 在uniapp项目引入uview3 1. 项目配置 1.1. 新建vue3项目 由于我们要使用vue3而不是vue2&#xff0c;所以要选好版本&#x…

杰理-701-单线灯-ws2812-驱动

杰理-701-单线灯-ws2812-驱动 LED_gradual_open(); //调用后 呼吸灯 set_led_colour&#xff08;R,G,B&#xff09;&#xff1b;//具体颜色 spi_dma_set_addr_for_isr //spi 配置dma 后灯才亮 #define LED_H 0x7c #define LED_L 0x40 发送高位和地位的字节&#xff0c;具体…

TypeScript学习日志-第十六天(泛型)

泛型 一、函数泛型 当我们有多个函数是一样的不同的的函数的类型不一样时&#xff0c;我们可以使用泛型&#xff0c;这样就可以省去很多重复的书写&#xff0c;例如&#xff1a; 这样的两个函数时一样的&#xff0c;就是类型不一样&#xff0c;我们就可以使用泛型这样写&…