慕课网笔记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要慎重使用, 能不用就不用。以避免使用过多,代码不好控制。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

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