首页 > css教程 > 正文

育知HTML5培训 CSS样式表及基本选择器的使用(下)

转载 2019-02-11 0 20

七、选择器

育知HTML5培训 CSS样式表及基本选择器的使用(下)

CSS选择器有这么多种,今天主要给大家讲解是基本选择器。先来看一下基本选择器有那些?

育知HTML5培训 CSS样式表及基本选择器的使用(下)

好,我们一一介绍一下:

1. 全局选择器设置所有标签使用同一样式,用*来表示;

语法:全局选择器语法:*{ }

代码:

CSS选择器

<style type="text/css">

*{

color: red;/*colorCSS属性,redCSS属性值*/

}

style>

我是h3标签

我是段落标签

页面效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

2. 标签选择器设置相同的标签使用相同的样式。直接写标签的名字+大括号就可以了,但是标签名不区分大小写,但是尽量使用小写。

语法:p{}

育知HTML5培训 CSS样式表及基本选择器的使用(下)

代码:

CSS选择器

h3{

color:green;

}

p{

color:red ;

}

input{

color:blue;

}

我是h3标签

我是h3标签

我是h3标签

我是段落标签

我是段落标签

我是段落标签

页面显示效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

3. 类别选择器 大家都知道我们全局选择器是让页面中所有的标签具有相同的样式,标签选择器是让页面中相同的标签具有了相同的样式,那如果我们让相同的标签具有不同的样式或者不同的标签具有相同的样式怎么办呢?那就是定义我们的类别选择器,类别选择器的特点是先声明,后使用,一次定义多次使用,使用特殊符合“.+类名的方式定义,用class这个关键字在标签中引用,注意类名的规范:使用驼峰式命名(className),或使用下划线式(class_name)命名,不能使用中文,不要以数字开头及区分大小写的规范,好了,我们来看一下语法:

语法:

.className{}

内容一

内容二

内容三

代码:

CSS选择器

.myColor{

color:red;

}

我是h3标签

我是h3标签

我是h3标签

我是段落标签

我是段落标签

我是段落标签

页面效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

4. id选择器 我们知道class选择器,在一个同一个页面中可以使用多次,但是如果我想找到页面中唯一的元素怎么办,尤其是我们学习到后面的知识点,比如在js语言中,我们使用id的这种方式比较多。所以我来看一下id选择器的使用及其特点,id选择器的特点就是具有唯一性,这意味着同一id在同一文档页面中只能出现一次。那他的使用也是先定义后使用,定义的时候使用特殊符号“#”号+id名的方式定义的,使用id这个关键字进行引用。注意id名的规范:使用驼峰式命名(idName),或使用下划线式(id_name)命名,不能使用中文,不要以数字开头及区分大小写的规范.好了,我们来看一下他的语法。

语法:

育知HTML5培训 CSS样式表及基本选择器的使用(下)

代码:

CSS选择器

#myColor{

color:red;

}

我是h3标签

我是h3标签

我是h3标签

我是段落标签

我是段落标签

我是段落标签

页面效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

5.复合选择器 根据元素的名称、id、类名,使符合条件的元素共同拥有样式;各选择器条件要以分号(,)隔开。

语法: h2 , #subid , .subclass {color:blue;}

代码:

#box,.mytitle,input{

color:blue;

}

我是内容部分

我是2级标题

我是3级标题

我是3级标题

页面效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

好了,我们下面来看如果选择器同时存在了,会显示谁的颜色呢?谁的优先级最高呢,每个选择器的权重又是多少呢?

八、选择器的优先级及权重

先来比较一下行内样式表及id选择器

代码:

CSS选择器

#myColor{

color: blue;

}

我是内容部分

页面效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

很明显:行内的样式比id选择器的优先级要高,接下来我们再来比较一下id选择器及类别选器的样式。

代码:

CSS选择器

.myStyle{

color: orange;

}

#myColor{

color: blue;

}

我是内容部分

页面效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

很明显,不难看出,id选择器比类别选别器的优先级要高.那我们再来比较一下类别选择器和标签选择器。

代码:

CSS选择器

.myStyle{

color: orange;

}

h3{

color: deepskyblue;

}

我是内容部分

页面显示效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

大家也看了吧,明显的类别选择器比标签选择器的优先级要高,那我们再来看一下标签选择器和全局选择器谁的优先级高!

代码:

CSS选择器

*{

color: orange;

}

h3{

color: deepskyblue;

}

我是内容部分

页面显示效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

很明显,标签选择器比全局选择器的优先级要高。综上述,我们就知道了选择器的优先级了!

行内样式表>id选择器>类别选择器>标签选择器>全局选择器

在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。

那么,又怎么来计算选择器的特殊性呢?

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下:

1. 第一等:代表行内样式,如: style=””,权值为1000。

2. 第二等:代表ID选择器,如:#content,权值为100。

3. 第三等:代表类,伪类和属性选择器,如.content,权值为10。

4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0

理解选择器的特殊性很重要,特别是在修复bug的时候,因为你需要了解哪些规则优先及其原因。至于具体的应用,我们放到后面的再做具体的讲解。

最后我们再说一下选择器如何使用,原则有三点:

1. 选择可以准确的找到要控制的标签;

2. 使用最合理的优先级的选择器;

3. 还要是html和css看起来简洁美观可读性强。

好了,我们了解了选择器,我们一直在使用一个样式那就是文字颜色(color),觉得有些厌烦了,我们再看一下其它的常用的样式。

九、 CSS的基本样式

1.Color:颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));

2.Width:宽度;设置元素的宽度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)

3.Height:高度;设置元素的高度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)

4.Background-color:背景颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));

5.Inherit:属性值,大部分属性都有该属性值意义为继承。

代码:

.box{

width: 300px;

height: 200px;

color:red;

background-color:yellow;

}

我是内容部分

页面显示效果

育知HTML5培训 CSS样式表及基本选择器的使用(下)

十、CSS的尺寸单位介绍

1.px:为像素单位。它是显示屏上显示的每一个小点,为显示的最小单位。它是一个绝对尺寸单位;是固定单位。

2.em:它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;是相对于其父元素来设置字体大小的。

3.%: 百分比,它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%,则为父元素的一半。

4.rem是相对单位; 是相对于根元素改变大小。

十一、CSS的颜色值表示法

1.单词表示法

red green blue black white grey yellow pink orange…

2.十六进制表示法

#ff0000 #00ff00 #0000ff #000000 #ffffff #111111

#f00 #0f0 #00f #000 #fff #111

3.rgb表示法

(255,0,0)

4.rgba表示法

(255,255,0,0.3)

相关文章


  • 怎样把 CSS 写得像鬼一样?——代码也可以吓哭小孩子
  • 一行代码一分钟让对话框效果动起来,只需改变一下css样式表
  • (原创整理)淘宝店招和自定义区的CSS样式大全
  • 加拿大圣大卫天主教中学St David CSS排名、费用及申请材料
  • 前端开发之CSS实现input上传按钮美化(兼容各浏览器)
  • 育知前端培训 CSS样式表及基本选择器的使用(下)
  • 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
  • 编写出色CSS代码的13个建议!想月薪过万必须掌握!
  • 作者信息

    清酒竹杯

    好好学习天天向上!

    最近文章
    微信公众号网页授权详解 10
    jsapi支付什么意思 7
    scope权限什么意思啊 5