文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇文章带你了解CSS(CascadingStyle Sheets)基本用法和选择器知识

2024-12-14 04:31

关注

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

一、如何使用CSS
要想使用Css来增加Html的美观，有三种方式：

1).头部文件中定义

  1.  

2).导入CSS文件

  1. #创建一个Css文件，里面写入样式，然后导入 
  2. "stylesheet" type="text/Css" href="1.Css"> 

3).直接在标签中定义

  1. 'width:120px;height:60px;background-color:red'>
Css注释 

注：与Html 不同，它的注释方式是：

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

1).id和class选择器
id选择器必须现在标签中的定义，然后在在头部标签的style标签中用“#”来表示：

  1.  
  2.  
  3.   Css应用 
  4.   "text/Css">  
  5.      #dv{ 
  6.        background: red 更改div的背景颜色为红色 
  7.      } 
  8.  
  9.  
  10.  
  11. 'dv'>fd
 定义一个id为dv的div 
  •  
  •  
    •

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

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.      .dv{ 
    6.        background: red 
    7.      } 
    8.  
    9.  
    10.  
    11. 'dv'>fd 
    12.  
    13.  

    2).元素选择器
    就是指直接声明标签名为选择器，然后更改样式

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.      div{ 
    6.        background: red 
    7.      } 
    8.  
    9.  
    10.  
    11. fd
       
    12.  
    13.  

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

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.     Html，head，body，div{ 
    6.        background: red 
    7.      } 
    8.  
    9.  
    10.  
    11. fd
       
    12.  
    13.  

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

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.    div#er{ 
    6.        background: red 
    7.      } 
    8.  
    9.  
    10.  
    11. 'df'>fd 
    12. fhsjak
       
    13. 'er'>re 
    14.  
    15.  

    3).后代选择器
    访问一个元素内的其它元素，可以是元素内的任意元素

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.      div span{ 
    6.        background: red 
    7.      } 
    8.  
    9.  
    10.  
    11.  
    12. erzi 
    13. sunzi 
    14.  
    15.  
    16.  
    17.  

    4).子元素选择器

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.      div>p{ 
    6.        background: red 
    7.      } 
    8.  
    9.  
    10.  
    11.  
    12. erzi 
    13. sunzi 
    14.  
    15.  
    16.  
    17.  

    5).兄弟选择器
    位于元素的下一个元素，不在元素内

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.      div+big{ 
    6.        background: red 
    7.      } 
    8.  
    9.  
    10.  
    11.  
    12. erzi 
    13. sunzi 
    14.  
    15.  
    16. borther 
    17.  
    18.  

    6).伪类选择器
    伪类选择器可分为三类

    1)).锚伪类，用于检测鼠标的悬停状态。

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.      a:link{     
    6.        background: red 
    7.      } 
    8.      a:visited{     
    9.       background: green 
    10.      } 
    11.      a:hover{   
    12.       background: blue 
    13.      } 
    14.      a:active{   
    15.       background: yellow 
    16.      } 
    17.  
    18.  
    19.  
    20. "https://www.baidu.com">百度 
    21.  
    22.  
    23. 注:a:hover必须置于a:link和a:visited 之后，才是有效的。a:active必须被置于a:hover 之后，才是有效的。 

    2)). ：first-child伪类
    匹配第一个匹配到的标签

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.      p:first-child{  匹配第一个p标签 
    6.        background: red 
    7.      } 
    8.      div:first-child{ 匹配第一个div标签 
    9.       background: blue 
    10.      } 
    11.  
    12.  
    13.  
    14. 'dv'> 
    15. 'fd'>fdaf 
    16. 'gfd'>grerg 
    17.  
    18. 'gf'>fsdjkfhkj 
    19. "https://www.baidu.com">baidu 
    20.  
    21.  
    22.  
    23.  

    3)). ：lang伪类

    1.  
    2.  
    3.   Css应用 
    4.   "text/Css"> 
    5.   q:lang(hw)  短引用利用伪类 
    6.    { 
    7.    quotes: "^" "^" 
    8.    } 
    9.  
    10.  
    11.  
    12. 'dv'> 
    13. hw"hw">任性的90后boy
       必须要用短引用 
    14.  
    15.  
    16.  
    17.  
    18.  

    7).通用选择器
    将样式应用到所有的元素中

    1. *{ 
    2.   background:red 
    3. } 

    参考文档：W3C官方文档（CSS篇）

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

    来源：IT共享之家内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    一篇文章带你了解CSS(CascadingStyle Sheets)基本用法和选择器知识

    后端开发CascadingStyleSheet2024-12-14

    一篇文章带你了解 CSS 选择器

    后端开发CSS选择器2024-12-03

    一篇文章带你了解 CSS 属性选择器

    后端开发HTMLCSS2024-11-30
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯