css实例 css中id/class 详解样式表(外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解)[第一天]
文章目录
- css实例
- css中的id
- css中的class
- 样式表
- 外部样式表
- 内部样式表
- 内联样式
- 7种基础选择器
- 多重样式优先级
- 错误理解
css实例
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
- 选择器通常是您需要改变样式的 HTML 元素
- 每条声明由一个属性和一个值组成
- 属性(property)是您希望设置的样式属性(style attribute),每个属性有一个值,属性和值被冒号分开
- CSS声明总是以分号 ; 结束,声明总以大括号 { } 括起来
注意:
如果多个标签共用一个样式,则用 , 分隔 ,eg:.head_left_ul , .head_end_ul , .end_div ul { }
Tips:
使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。
由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。
css中的id
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。(仅仅限于一个,多个会出现你意想不到的一些bug)
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 " # " 来定义。
css中的class
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中类选择器以一个点" . "号显示。
对于多个不同元素,但class一样的,你也可以指定特定的HTML元素使用class。
eg:
p.center {text-align:center;}
注意:
p和.center之间不要加空格,不然无效,因为这是选择p中 class 叫center的,而不是选择p元素后代元素中 class 叫center的(css结合元素选择器)
样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link> 标签链接到样式表。 < link> 标签在(文档的)头部。
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 < style> 标签在文档头部定义内部样式表。
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如:当样式仅需要在一个元素上应用一次时 或者 vue中动态绑定style。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
7种基础选择器
在讨论 CSS 优先级之前,先说说 CSS 的 7 种基础的选择器:
ID 选择器, 如 #id{}
类选择器, 如 .class{}
属性选择器, 如 a[href=“segmentfault.com”]{}
伪类选择器, 如 :hover{}
伪元素选择器, 如 ::before{}
标签选择器, 如 span{}
通配选择器, 如 *{}
所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成,组合的方式有很多种,这里列举较常见的6种:
后代选择符: .father .child{}(中间有空格)
子选择符: .father>.child{}(加不加空格一样,格式化之后,编译器(VS code)会自动删除空格,所以最好不加空格)
相邻(兄弟)选择符: .bro1+.bro2 p{} (加不加空格一样,格式化之后,编译器(VS code)会自动删除空格,所以最好不加空格)
后续兄弟选择器 :div~p(后续兄弟选择器选取所有指定元素之后的相邻兄弟元素,以破折号分隔)
结合元素选择器:p.center(不能加空格,意思上面讲过了)
多类选择器:.p1.p2(不能加空格,表示同时含有两个才行!)
后代选择和子代选择注意:
很多人容易把子代选择器和后代选择器混在一起,子代选择器只能选择元素的子代,而他的孙代、曾孙不能被选上,后代选择器可以选子代、孙代、曾孙的元素
eg:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.second p {color: red;}/* .second>p {color: red;} */</style>
</head><body><div class="first"><div class="second"><p>子代</p><!-- first的子代 --><div><p>孙代</p><!-- //first的孙代 --><div><p>曾孙</p><!-- //firs的曾孙代 --></div></div></div><div class="third"><!-- //first的第二个子代、second的兄弟 --><P>兄弟</P></div></div>
</body></html>
运行结果:
.second p {color: red;
}
.second>p {color: red;
}
兄弟选择注意:
兄弟选择器只能选择所选元素的后面兄弟元素,不能选择前面的兄弟元素,相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
eg:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.second+.third p{color: red;}/*.third+.second p{color: red;}*/</style>
</head><body><div class="first"><div class="second"><p>子代</p><!-- first的子代 --><div><p>孙代</p><!-- //first的孙代 --><div><p>曾孙</p><!-- //firs的曾孙代 --></div></div></div><div class="third"><!-- //first的第二个子代、second的兄弟 --><P>兄弟</P></div></div>
</body></html>
运行结果
.second+.third p{color: red;
}
.third+.second p{color: red;
}
无效果!
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中,甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下,优先级如下:
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
注意:
如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
但是也会出现更加复杂的样式,eg:p.center 、 继承 、#c .p 、div p…
这时的优先级如何比较?
最近的祖先样式比其他祖先样式优先级高
优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断
属性后插有 !important 的属性拥有最高优先级,若同时插有 !important,则再利用规则 3、4 判断优先级
错误理解
在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。
比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 > 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。
还是拿刚刚的例子说明,11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。
css实例 css中id/class 详解样式表(外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解)[第一天]相关推荐
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- CSS:外部样式表/内部样式表/内联样式
在html中,引用CSS样式有3中方式:外部样式表,内部样式表,内联样式. 本文代码整理自w3school:http://www.w3school.com.cn (1)外部样式表,指在html文件的h ...
- HBase【付诸实践 01】hbase shell 常用命令详解(表操作+数据增删改查+2种查询操作)(hbase-2.4.5 单机版standalone模式)
1.运行环境 HBase的安装文件为:hbase-2.4.5-bin.tar.gz 相关配置信息可以查看<HBase-2.4.5 单机版standalone模式安装配置> 其他环境如下: ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
- 从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- html里的section可以设置id,html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
最新文章
- 开发日记-20190914 关键词 汇编语言王爽版 第五章
- JQuery中each()的使用方法说明
- linux思考の为何要挂载
- 时光不老,我们不散!
- qt 中出现ld returned1exit status错误的几个原因
- Python学习(五)列表的简单操作
- 反积分饱和 程序_用抗积分饱和PID控制传递函数为G(s)的被控对象
- java basic data type,java基本数据类型--Basic Datatypes
- CompSNN: A Lightweight Spiking Neural Network Based on Spatiotemporally Compressive Spike Features
- Filecoin Gas基础费率跌至4.40 nanoFIL
- NoSQL 已死:我们不需要他了
- 简单读取带有EXCEL宏病毒文件的内容
- 阿里网易海康等HR联盟来了,打工人颤抖吧
- 网页嵌入谷歌翻译js插件
- 安徽师大附中%你赛day9 T3 贵 解题报告
- PPASR流式与非流式语音识别
- 傅里叶变换,其物理意义是什么?(转)
- 虚拟机VM利用U盘重装系统
- VM ware workstation 10 下载及安装密钥
- PCB:FPC原材料,设计,加工,组装终极解决方案