热门关键字:
jquery > jquery教程 > jquery教程 > css元素选择器菜鸟教程,css基本选择器

css元素选择器菜鸟教程,css基本选择器

344
作者:管理员
发布时间:2021/8/23 18:10:51
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5307
  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;


  }


  菜单


  HTMLCSSJavaScript




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐