css的核心之一:css选择器

作者:fandonglai日期:2016-09-08 12:03:59 点击:477 css选择器

css的优势

  • 内容与表现分离
  • 网页的内容统一,容易修改
  • 丰富的样式,使得页面布局更加灵活
  • 减少网页的代码量,增加网页的加载速度,节省网络带宽
  • 运用独立css文件,有利于网页被搜索引擎收录

css选择器:

  • css选择器:指定一个或多个标签,为其添加样式

css的一个核心就是能对多个元素应用某些相同的样式
如:img{border:none}/*将img标签的边框去掉*/ 而不再像之前 每个<img>标签处都去掉边框

css的选择器的基本结构

语法:

    选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
...
}

先说一下基本选择器:

  • 1、标签选择器:

标签:即html标签,比如:div、p、span、img…

语法:

    某个html标签{
属性名:属性值;
属性名:属性值;
...
}

举例说明:

<!--需求:给span标签设置一个背景颜色-->
<span>文字</span>

<!--css代码要写在style标签中,因为如果用行内式,我们就不需要选择器了-->
<style>
span{
background: yellow;
/*背景颜色*/
}

</style>
  • 2、类选择器: 最常用的

给标签设置一个class,并且给class加一个名字,比如:class="box",将class对应的名字设置为box,box可以是任意的(但不可用中文,或者数字作为开头,一般用英文单词命名就可以啦)

语法:

    .标签的类名{
属性名:属性值;
属性名:属性值;
...
}

举例说明:

    <!--需求:给div设置宽度100px-->
<div class="box">文字</div>

<style>
.box{
width: 100px;
}

</style>
  • 3、id选择器:

注意:在同一个文件中 id名不可以重复,唯一性

语法:

    #id的名字{
属性名:属性值;
属性名:属性值;
...
}

举例说明:

    <!--需求:给div设置背景颜色为红色-->
<div id="div1">文字</div>

<style>
#div1{
background: red;
}

</style>
  • 4、通配符选择器

可以选择全部的标签

语法:

    *{
属性名:属性值;
属性名:属性值;
...
}

举例说明:

    <!--将所有的标签设置为隐藏-->    

<style>
*{
display: none;
}

</style>

上一篇: html的基本结构

下一篇: css盒子模型