文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

css基本选择器有哪些

2024-04-02 19:55

关注

这篇文章主要为大家展示了“css基本选择器有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css基本选择器有哪些”这篇文章吧。

  CSS基本选择器(对指定的标签设置样式,要把指定的标签选择出来):元素选择器、类选择器、id选择器、组合选择器、通用选择器

  1. 元素选择器(类型选择器或标记选择器):声明哪些元素采用css样式

  2. 类选择器(class):应用样式而不考虑具体设计的元素,为了将类选择器的样式与元素进行关联,必须将元素中的class属性指定一个适当的值。

  class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。也可以指定特定的HTML元素使用class。

  在HTML中,一个class属性还可能包含多个属性值,各个值之间用空格分隔,表示将多类应用到同一个标记中。可以使用多次,表示类别。

  Document

  p.special{

  color: red;

  }

  3. id选择器(id):

  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

  HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

  不同与类选择器,id选择器不能组合使用,不容许有空格分隔的多个值,仅仅使用一次。

  #red {color:red;}

  这个段落是红色。

  4.组合选择器:

  多个选择器(元素选择器、类选择器、id选择器等)通过逗号连接。

  样式一样的可以进行组合。

  html5语义化

  header, section, footer, aside, nav, article, figure

  {

  display: block;

  }

  nav,header,p,article{

  width: 1200px;

  margin:0 auto;

  }

  ul{

  height:40px;

  background-color: #fff;

  list-style: none;

  display: inline-block;

  width: 1200px;

  padding: 0px;

  }

  li{

  line-height: 40px;

  text-align: center;

  float: left;

  width: 400px;

  margin:0 auto;

  }

  li:hover{

  background: pink;

  }

  a{

  text-decoration: none;

  }

  。post{

  border:1px dashed #000;

  padding: 0 0 20px 20px;

  margin-bottom: 40px;

  padding-top: 10px;

  background-color: #fff;

  }

  #content{

  border:1px solid #ccc;

  padding:30px 40px;

  background-color: rgb(247,244,255);

  margin-top: 20px;

  }

  页面导航

  查看相关内容返回首页返回本页

  作者,初级码农

  培训的,大概培训了半年,js、jquery、bootstrap、angular、vue、Ajax、数据库、php、面向对象、Web服务器、移动端

  我觉得还行

  作者:Amy

  工作机会还多的,php是轻量级网站开发最好的选择

  不错了

  作者:键盘侠

  学历本科、信息专业、会这么多,不会找不到的,对自己有信心一点

  我的帖子我做主

  关于楼主

  用户组:菜鸟初级

  阅读量:20

  发表时间:2020-03-18

  my logo

  5.?通用选择器:?星号(*)

  该选择器可以与任何元素进行匹配,可以对文档中的所有元素设定属性和属性值。

  div布局

  *{margin: 0;

  padding: 0;

  border: 0;

  }

  #header{

  width: 100%;

  height: 80px;

  line-height: 80px;

  background-color: rgb(255,165,0);

  }

  #main{

  height:200px;

  }

  #menu{

  float: left;

  height:200px;

  width: 10%;

  background-color: yellow;

  }

  menu{

  height: 200px;

  }

  b{

  display: inline-block;

  margin-top: 10px;

  font-size: 18px;

  margin-left: 5px;

  }

  ul{

  margin-left: 46px;

  list-style: none;

  margin-top: 10px;

  }

  ul li{

  line-height: 40px;

  }

  #content{

  float: left;

  height:200px;

  background-color: pink;

  width: 90%;

  }

  #content p{

  text-align: center;

  line-height: 200px;

  }

  #footer{

  background-color: gray;

  height:80px;

  line-height: 80px;

  text-align: center;

  }

以上是“css基本选择器有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯