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

    文章

    526

    浏览量

    45307
  • CSS
    CSS
    +关注

    关注

    0

    文章

    110

    浏览量

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

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    波长选择器FWS系列:光学滤波技术的革命性进步

    线带通滤光片是光谱滤波的关键组件,能够隔离特定波长,广泛应用于光谱学、成像系统等,以提高光学系统的性能和精度。友思特的灵活波长选择器(FWS)系列为线带通滤光片提供了创新解决方案,展现出在多种光学应用中的卓越性能和灵活性。
    的头像 发表于 10-22 11:30 158次阅读
    波长<b class='flag-5'>选择器</b>FWS系列:光学滤波技术的革命性进步

    Texas Instruments SN74AHC257/SN74AHC257-Q1 2线至1线数据选择器/多路复用器数据手册

    Texas Instruments SN74AHC257/SN74AHC257-Q1 2线至1线数据选择器/多路复用器是具有三态输出的四通道双输入数据选择器/多路复用器。所有通道均由共享A/B和OE
    的头像 发表于 08-01 11:36 877次阅读
    Texas Instruments SN74AHC257/SN74AHC257-Q1 2线至1线数据<b class='flag-5'>选择器</b>/多路复用器数据手册

    Texas Instruments SN74AHCT257/SN74AHCT257-Q1四路数据选择器/多路复用器特性/应用/框图

    Texas Instruments SN74AHCT257/SN74AHCT257-Q1四路双输入数据选择器/多路复用器具有3态非反相输出。3态输出可驱动总线组织系统的数据线并与之连接。共享的A/B
    的头像 发表于 07-30 10:56 526次阅读
    Texas Instruments SN74AHCT257/SN74AHCT257-Q1四路数据<b class='flag-5'>选择器</b>/多路复用器特性/应用/框图

    Texas Instruments SN74LVC158A四路2转1线路数据选择器/多路复用器数据手册

    Texas Instruments SN74LVC158A四路2转1线路数据选择器/多路复用器包含四个2转1数字多路复用器,具有反相输出。选通 (G) 输入在低电平时启用所有输出,在高电平时强制所有
    的头像 发表于 07-23 11:20 538次阅读
    Texas Instruments SN74LVC158A四路2转1线路数据<b class='flag-5'>选择器</b>/多路复用器数据手册

    Texas Instruments SN74LVC258A四路2转1线路数据选择器/多路复用器数据手册

    Texas Instruments SN74LVC258A四路2转1线路数据选择器/多路复用器包含四个2转1数字多路复用器,具有反相输出。输出使能 (OE) 输入在低电平时使能所有输出,在高电平
    的头像 发表于 07-23 09:49 480次阅读
    Texas Instruments SN74LVC258A四路2转1线路数据<b class='flag-5'>选择器</b>/多路复用器数据手册

    Texas Instruments SN74LV8T157-EP数据选择器/多路复用器数据手册

    Texas Instruments SN74LV8T157-EP数据选择器/多路复用器包含四个数据选择器/多路复用器,用于选择两个数据源中的一个。同一地址控制所有通道、选择选通(G)输
    的头像 发表于 07-05 10:18 563次阅读
    Texas Instruments SN74LV8T157-EP数据<b class='flag-5'>选择器</b>/多路复用器数据手册

    Texas Instruments SN74HCT157四通道二对一线路数据选择器/多路复用器数据手册

    Texas Instruments SN74HCT157四通道二对一线路数据选择器/多路复用器包含驱动和逆变器,为四个输出栅极提供完整的数据选择。Texas Instruments SN74HCT157中提供单独的选通(/G)
    的头像 发表于 07-04 09:32 1230次阅读
    Texas Instruments SN74HCT157四通道二对一线路数据<b class='flag-5'>选择器</b>/多路复用器数据手册

    Texas Instruments SN74HC153 4选1数据选择器/多路复用器数据手册

    Texas Instruments SN74HC153双通道4选1线路数据选择器/多路复用器包含完整的二进制解码,用于选择四个数据源中的一个。相同的地址选择输入控制两个通道,各通道均包含自己的选
    的头像 发表于 07-03 15:20 1244次阅读
    Texas Instruments SN74HC153 4选1数据<b class='flag-5'>选择器</b>/多路复用器数据手册

    Texas Instruments SN74HC151/SN74HC151-Q1数据选择器/多路复用器特性/应用/框图

    Texas Instruments SN74HC151/SN74HC151-Q1 8选1线路数据选择器/多路复用器提供完整的二进制解码,用于在八个数据源中选择一个。选通端的高电平强制标准输出 (Y
    的头像 发表于 07-03 14:18 740次阅读
    Texas Instruments SN74HC151/SN74HC151-Q1数据<b class='flag-5'>选择器</b>/多路复用器特性/应用/框图

    Texas Instruments SN74AC153-Q1双路4线至1线数据选择器/多路复用器数据手册

    Texas Instruments SN74AC153-Q1双路4线至1线数据选择器/多路复用器是一款双路数据选择器/多路复用器,包含完整的二进制解码,用于选择四个数据源中的一个。相同的地址
    的头像 发表于 07-02 14:49 678次阅读
    Texas Instruments SN74AC153-Q1双路4线至1线数据<b class='flag-5'>选择器</b>/多路复用器数据手册

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

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

    CSS6404LS-LI PSRAM:高清语音识别设备的理想存储解决方案

    CSS6404LS-LI通过 >500MB/s带宽、105℃高温运行及μA级休眠功耗三重突破,成为高清语音设备的理想存储
    的头像 发表于 06-04 15:45 481次阅读
    <b class='flag-5'>CSS</b>6404LS-LI PSRAM:高清语音识别设备的理想存储<b class='flag-5'>器</b>解决方案

    数字电路—13、数据选择器

    数据选择器定义:在多路数据传送过程中,能够根据需要将其中任意一路挑选出来的电路,叫做数据选择器, 也称为多路选择器,其作用相当于多路开关。
    发表于 03-26 11:13

    DLP4710EVM-LC官网的固件选择器提供的red only版本是使得PMIC只保持红色LED的连接吗?

    官网的固件选择器提供的red only版本是使得PMIC只保持红色LED的连接吗 所以物理上只需连接1个led硬件对吗
    发表于 02-18 08:19

    TMS320C6000 DSP中断选择器参考指南

    电子发烧友网站提供《TMS320C6000 DSP中断选择器参考指南.pdf》资料免费下载
    发表于 12-24 17:11 0次下载
    TMS320C6000 DSP中断<b class='flag-5'>选择器</b>参考指南