欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS标签选择器(二)_html/css_WEB-ITnose

程序员文章站 2022-04-14 17:37:54
...

一、CSS选择器概述

1.1、CSS功能

CSS语言具有两个基本功能:匹配和渲染

当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标识。

只有匹配到具体的对象之后,浏览器才能根据CSS样式声明,决定渲染的效果,并及时呈现在页面中。

1.2、CSS选择类型

  • 标签选择器
  • ID选择器
  • 类选择器
  • 特殊选择器
  • 1.3、CSS基本语法

    二、标签选择器

    2.1标签选择器概述

    以文档对象类型的元素作为选择器,如p、div,span等。

    最常用的选择器是标签选择器。标签选择器可以用来寻找特定类型的元素,如段落、超链接或者标题元素,只需要指定希望应用样式的元素的名称。

    标签选择器有时候也称为元素选择器或者简单选择器。

    如:

    /*段落字体颜色为黑色*/p{    color:black;}/*超链接显示下划线*/a{    text-decoration:underline;}/*一级标题显示为粗体效果*/h1{    font-weight:bold;}

    2.2、使用标签选择器的优缺点:

    优点:能够快速为页面中同类型的标签统一样式。

    缺点:不能设计差异化样式,有时候会相互干扰

    例如:如果在网页样式表中定义如下样式,把所有div元素对象定义为宽度为774px

    /*所有div元素对象定义为宽度为774px*/div{      width:774px;       }  

    那么当用div进行布局时,就需要重新为页面中每个div对象定义宽度,因为在页面中并不是每个div元素对象的宽度都显示为774px,否则是件非常麻烦的事情774。

    2.3、那么在什么情况下选用标签选择器?

    如果希望标签定义默认样式时,可以使用标签选择器。例如,使用ul元素时,它会自动缩进,并自带列表符号,有时这种样式会给列表布局带来麻烦,此时就可以选择ul元素作为标签选择器,并清除预定义样式。

    标签选择器

    标签选择器

    段落设置字体为蓝色

    超链接没有下划线
    CSS标签选择器(二)_html/css_WEB-ITnoseCSS标签选择器(二)_html/css_WEB-ITnose
    姓名:
    密码 :

    @charset "utf-8";/* CSS Document *//*统一文档字体大小,行高,字体*/body{    font:12px Arial, Helvetica, sans-serif;    color:#000000;}/*段落字体颜色为蓝色*/p{    color:#0000FF;}/*一级标题显示为粗体效果*/h1{    font-weight:bold;}/*设置a标签的下划线为没有*/a{    text-decoration:none;}/*清除预定义样式*/ul{    margin:0px;    list-style:none;    }/*设置图像的边框为0*/img{    border:0px;}/*统一表格字体和行高*/table{    border:solid 5px #000000; /*边框实线,宽度为5px,颜色为黑色*/    font-size:12px;        /*字体大小为12px*/            color:#666;            /*字体颜色为中灰*/    line-height:200%;    /*行主为默认值的2倍*/}/*设置input标签的边框为实线,1个像素,颜色为浅灰*/input{    border:solid 1px #ddd;}

    /*清除预定义样式*/ul{    margin:0px;    list-style:none;    }

    如果希望统一文档标签中的样式,也可以使用标签选择器。

    例如统一文档字体大小,行高,字体,通过table标签选择器统一表格格的字体样式,通过a标签选择器清除所有超链接的下划下,通过img标签选择器清除网页图像的边框,当图像嵌入a元素中,即作为超链接对象时会出现边框,通过input标签选择器,统一输入表单边框为浅灰色的实现等。

    /*统一文档字体大小,行高,字体*/body{    font:12px Arial, Helvetica, sans-serif;}/*统一表格字体和行高*/table{    font-size:12px;        /*字体大小为12px*/            color:#666;            /*字体颜色为中灰*/    line-height:200%;    /*行主为默认值的2倍*/}/*设置a标签的下划线为没有*/a{    text-decoration:none;}/*设置图像的边框为0*/img{    border:0px;}/*设置input标签的边框为实线,1个像素,颜色为浅灰*/input{    border:solid 1px #ddd;}

    对于div、span等通用结构元素,不建议使用标签选择器,因为通用结构元素的应用范围广泛,使用标签选择器会相互干扰