0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

CSS基本用法和选择器知识的分享

电子设计 来源:电子设计 作者:电子设计 2020-12-24 14:58 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

前言

相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是,Css相当于Html的一个美化装置,所以它必须依赖于Html才能发挥作用,那么今天我们就来深入了解下它吧。

一、如何使用CSS

要想使用Css来增加Html的美观,有三种方式:

1).头部文件中定义2).导入CSS文件
#创建一个Css文件,里面写入样式,然后导入3).直接在标签中定义

Css注释注:与Html 不同,它的注释方式是: Css语句

二、CSS的选择器

为什么一开始要讲选择器了,因为我们要想精确修改的Html中的某个元素的属性,就必须使用选择器,它可以通过选择器定位到某个元素上然后修改元素的样式。

1).id和class选择器

id选择器必须现在标签中的定义,然后在在头部标签的style标签中用“#”来表示:

fd

定义一个id为dv的div

class选择器和id选择器差不多,只不过class选择器用”.“来表示:

fd

2).元素选择器

就是指直接声明标签名为选择器,然后更改样式

fd

或者声明所有标签名为选择器

fd

也可以使用元素加选择器更加精确的定位到该元素

fd

fhsjak

re

3).后代选择器

访问一个元素内的其它元素,可以是元素内的任意元素

erzisunzi

4).子元素选择器

erzisunzi

5).兄弟选择器

位于元素的下一个元素,不在元素内

erzisunzi

borther6).伪类选择器

伪类选择器可分为三类

1)).锚伪类,用于检测鼠标的悬停状态。 百度注:a:hover必须置于a:link和a:visited 之后,才是有效的。a:active必须被置于a:hover 之后,才是有效的。2)). :first-child伪类

匹配第一个匹配到的标签

fdaf

grerg

fsdjkfhkjbaidu

3)). :lang伪类

hw

必须要用短引用

7).通用选择器

将样式应用到所有的元素中

*{ background:red}

参考文档:W3C官方文档(CSS篇)

三、总结

这篇文章主要介绍了CSS的基本用法和选择器的基础知识。通过对CSS的学习,相信大家应该能做出许多华丽绚烂的特效了吧,CSS的确是一个很强大的东西。

审核编辑:符乾江


声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 可编程逻辑
    +关注

    关注

    7

    文章

    529

    浏览量

    45465
  • CSS
    CSS
    +关注

    关注

    0

    文章

    113

    浏览量

    15601
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    LTC1960:双电池充电器/选择器的卓越之选

    LTC1960:双电池充电器/选择器的卓越之选 在电子设备的设计中,电池管理系统至关重要,尤其是对于需要双电池供电的便携式产品。LTC1960作为一款高度集成的双电池充电器/选择器,为工程师们提供了
    的头像 发表于 02-26 10:10 308次阅读

    探索MAX1538:双电池系统电源选择器的卓越之选

    探索MAX1538:双电池系统电源选择器的卓越之选 在电子设备的电源管理领域,双电池系统的电源选择与控制一直是一个关键且具有挑战性的任务。今天,我们将深入探讨Maxim公司推出的MAX1538电源
    的头像 发表于 02-25 15:25 245次阅读

    MAX20320:智能紧凑型 6A 电源路径选择器

    MAX14740 - MAX14742/MAX20320:智能紧凑型 6A 电源路径选择器 在电子设备的电源管理设计中,选择合适的电源路径选择器至关重要,它直接影响设备的性能、功耗和稳定性。今天我们
    的头像 发表于 02-09 10:50 288次阅读

    探索MAX14742智能电源路径选择器

    探索 MAX14740 - MAX14742/MAX20320 智能电源路径选择器 在电子设备的设计领域,电源管理一直是至关重要的环节。今天,我们就来深入了解一款功能强大的电源管理芯片
    的头像 发表于 02-09 10:40 197次阅读

    MAX14741:智能紧凑型 6A 电源路径选择器的卓越之选

    MAX14740 - MAX14742/MAX20320:智能紧凑型 6A 电源路径选择器的卓越之选 在电子设备的电源管理领域,一款性能出色的电源路径选择器至关重要。今天,我们就来详细探讨一下
    的头像 发表于 02-09 10:35 216次阅读

    探索MAX14740:智能紧凑型6A电源路径选择器

    探索MAX14740 - MAX14742/MAX20320:智能紧凑型6A电源路径选择器 在电子设备的设计中,电源管理是一项至关重要的任务。一款性能卓越的电源路径选择器能够显著提升设备的稳定性
    的头像 发表于 02-09 10:35 263次阅读

    探索MAX14714:紧凑型6A智能电源路径选择器的卓越性能

    探索MAX14714:紧凑型6A智能电源路径选择器的卓越性能 在电子设备的电源管理领域,高效、可靠且紧凑的电源路径选择器至关重要。今天,我们一同深入了解Maxim Integrated推出
    的头像 发表于 02-06 15:15 297次阅读

    探索MAX14713:紧凑型6A智能电源路径选择器的卓越性能

    探索MAX14713:紧凑型6A智能电源路径选择器的卓越性能 在电子设备的电源管理领域,如何高效、稳定地选择电源路径一直是工程师们关注的重点。今天,我们就来深入了解一款优秀的电源路径选择器
    的头像 发表于 02-06 15:00 208次阅读

    深入解析SNx4AHCT157:高性能数据选择器/多路复用器

    深入解析SNx4AHCT157:高性能数据选择器/多路复用器 在电子设计领域,数据选择器和多路复用器是实现信号切换和选择的关键组件。今天,我们将深入探讨德州仪器(TI)的SNx4AHCT157系列
    的头像 发表于 01-16 17:40 2293次阅读

    深入解析CD4512B:一款高性能8通道数据选择器

    深入解析CD4512B:一款高性能8通道数据选择器 在电子设计的广阔领域中,数据选择器扮演着至关重要的角色,它们能够在多个信号源中进行选择,并将选定的信号传输到输出端。CD4512B作为一款具有高
    的头像 发表于 01-16 14:20 352次阅读

    SN74LV157A:多功能数据选择器/多路复用器的技术剖析

    SN74LV157A:多功能数据选择器/多路复用器的技术剖析 在电子设计领域,数据选择器/多路复用器是一种常见且重要的器件,它们能够在多个数据源中进行选择并输出,为电路设计提供了极大的灵活性。今天
    的头像 发表于 01-16 11:00 1982次阅读

    SN74LV8T151-EP数据选择器/多路复用器的设计与应用

    SN74LV8T151-EP数据选择器/多路复用器的设计与应用 在电子设计领域,数据选择器/多路复用器是常见且关键的器件。今天我们就来深入探讨德州仪器(TI)的SN74LV8T151-EP这款产品
    的头像 发表于 01-12 15:30 310次阅读

    汽车级四路2选1数据选择器SN74ACT257-Q1的设计与应用

    汽车级四路2选1数据选择器SN74ACT257-Q1的设计与应用 在电子设计领域,数据选择器和多路复用器是常用的基础器件,它们在数据处理和信号切换方面发挥着重要作用。今天,我们就来详细探讨一下
    的头像 发表于 01-12 14:10 634次阅读

    SN74ACT153:双4选1数据选择器/多路复用器的详细剖析

    SN74ACT153:双4选1数据选择器/多路复用器的详细剖析 在电子设计领域,数据选择器和多路复用器是常见且关键的组件,它们能够高效地实现数据的选择和路由。今天我们要深入探讨的是德州仪器(TI
    的头像 发表于 01-12 13:45 659次阅读

    HarmonyOS实战:自定义时间选择器

    前言 最近在日常鸿蒙开发过程中,经常会使用一些时间选择器,鸿蒙官方提供的时间选择器满足不了需求,所以自己动手自定义一些经常会使用到的时间选择器,希望能帮到你,建议点赞收藏! 实现效果 需求分析 默认
    的头像 发表于 06-09 15:51 765次阅读
    HarmonyOS实战:自定义时间<b class='flag-5'>选择器</b>