慕课网笔记3 : css 选择器 继承

慕课网: HTML+CSS基础课程

  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
  • 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等

  • css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
屏幕快照 2017-01-17 下午11.15.07.png

选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔

  • 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。
    1. **内联式 **: 把css代码直接写在现有的HTML标签中
<p style="color:red">这里文字是红色。</p>
  1. 嵌入式: 嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间.
<style type="text/css">
span{
color:red;
}
</style>
  1. 外部式 : 写在单独的文件中 .css为扩展名
    在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,
<link href="main.css" rel="stylesheet" type="text/css" />

注意:

  1. css样式文件名称以有意义的英文字母命名,如 main.css。
  1. rel="stylesheet" type="text/css" 是固定写法不可修改。
  2. <link>标签位置一般写在<head>标签之内。

<pre>
优先级 : 当遇到同名样式时
1. link链接的css文件权值相同 是下面的覆盖上面的. <em>ps: 权值在下面继承中解释</em>
2. 离html元素近的 样式覆盖远的
</pre>


一、 css选择器

每一条css样式声明(定义)由两部分组成

 div {
   background-color: red;
   font-size: 16px;
}
选择器 {
      样式;
 }
/*------------------------------------------------------------------*/
> 1. 在{}之前的部分就是“选择器”
> 2. “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
> 3. 标签选择器其实就是html代码中的标签

  • <h5> 类选择器</h5>
.class  {
          css样式代码;
}
  • <h5>ID选择器</h5>
#stress{
       color:red;
}

类 和 ID 选择器的区别

  • 相同点:可以应用于任何元素
  • 不同点:
    1. 在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
    2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
      例 :
<span class="stress bigsize">  
// 类可以对同一个原素使用多个样式
//ID不可以这样使用
  • <h5> 子选择器</h5>

    用于选择指定标签元素的 第一代子元素

.food> li {
        border:1px solid red;
}
/*在类选择器后面用">" 指向子选择器  */
  • <h5>包含(后代)选择器</h5>

用于选择指定标签元素下的后辈元素

.first  span {
        color:red;
}

包含(后代)选择器 与 子选择器 的区别

  • 子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。

  • 后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

  • 总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

  • <h5>通用选择器</h5>

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素

* {
    color:red;
}
/*代码使用html中任意标签元素字体颜色全部设置为红色*/
  • <h5>伪类选择符</h5>

伪类选择符: 它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

   a: hover { 
        color:red;
}

关于伪选择符:
关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是< a> 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

  • <h5>分组选择符</h5>

为html中多个标签元素设置同一个样式

h1, h2, h3, span {
      color : red;
}
.first,
#second> span{
      color:green;
}

二、继承

  • 权值:

浏览器是根据权值来判断使用哪种css样式的,那种权值高的就使用哪种css样式

权值的规则:

  • 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
  • 注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
p { 
  color:red;
} /*权值为1*/
p span{
  color:green;
} /*权值为1+1=2*/
.warning { 
  color:white;
} /*权值为10*/
p span.warning { 
  color:purple;
} /*权值为1+1+10=12*/
#footer .note p { 
  color:yellow;
} /*权值为100+10+1=111*/
  • 层叠:

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用 (后面的样式覆盖前面的)

p {color:red;}
p {color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
/*最后将显示字体颜色为绿色*/

当到html文件中的样式优先级让然为:

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

ps:!important优先级样式是个例外,权值高于用户自己设置的样式。

  • <big>!important;</big>

将当前样式设置为最高权值

p {
     color:red!important;
}
/*注意:!important要写在分号的前面*/

注意:
!important要慎重使用, 能不用就不用。以避免使用过多,代码不好控制。

推荐阅读更多精彩内容

  • 一、什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下:选择器{ 样式;}在{}之前的部分就是“选...
    空指针的空阅读 111评论 0 2
  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器...
    百作不死的学习阅读 610评论 0 7
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 1,925评论 0 40
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 14,065评论 33 447
  • 第6章 开始学习CSS,为网页添加样式 1、认识CSS样式CSS全称为“层叠样式表 (Cascading Styl...
    夏沫xx阅读 378评论 0 11