企业培训资讯_企业培训干货

当前位置:首页 > 新闻中心

CSS 基础与选择器初识 | CSS【欧洲杯线上买球】

发布时间:2021-07-31    来源:欧洲杯线上买球27206

本文摘要:1.CSS加载方式有几种?

欧洲杯线上买球

1.CSS加载方式有几种?2.@import有什么作用?如何使用?3. CSS 选择器常见的有几种?4. id 选择器和 class 选择器的使用场景划分是什么?5. @charset 有什么作用?6. 简述 src 和 href 的区别?7. 页面导入时,使用 link 和@import 有什么区别?8.在index.css和common.css中有如下内容,HTML里引入index.css后发现页面字体的颜色和巨细没发生任何变化,原因可能是?(不定项)/*index.css*/@import"common.css"body{font-size:12px}/*common.css*/body{color:red;}✅common.css的文件路径可能错了,检查元素看看报错可以定位问题。✅@import"url";后面必须有分号。✅index.css里body的字体设置中的:写成了:。

❌font-size:12px后面缺少了分号。上方面试题“参考谜底详解”,请点击文末“阅读原文”检察!前言:通过前 3 篇系列文章,我们对 HTML 有了一个比力详细的相识。接下来的一系列文章,我们将一步步细致地认识 CSS。

届时,我相信我们能够轻而易举地、规范地写出我们瞥见的任意一个静态页面。1 CSS 相关界说CSS(Cascading Style Sheets 层叠样式表):用来控制 HTML 的体现。CSS 决议页面好欠好看、动画效果酷不酷炫。

HTML+CSS 是一个静态页面的基本组成。就好比一个女生在有基本的身体五官(HTML)后,又对自己妆扮了下:化了妆、梳了发型、穿了悦目的衣服(CSS)。

2 CSS 事情原理再次温习文章:《老生常谈的从 URL 输入到页面展现背后发生的事》首先,当我们在浏览器上输入一个 URL 并回车后,浏览器向服务器发了一个请求,服务器就把相应的数据——HTML 返回给浏览器。然后,浏览器拿到这个数据后就加载这个页面,去剖析这个 HTML。怎样去剖析呢:浏览器获得的字符串,它会对其做一些编码等的分析,把字符串剖析成“树状”的结构,建立一个 DOM,叫 DOM 树(因为它是一个文档结构,类似“树”这样一个效果)。接着,在剖析 HTML 的历程中,浏览器会去加载相应的 CSS。

好比,当剖析到以下框选的代码时:浏览器会再次去向服务器发请求,去获取这个 style.css 文件。继而,同步的这个 CSS 文件就下载下来了。下载下来之后,浏览器同时去剖析这个 CSS 文件,让它酿成一个 “CSS 树”。

然后浏览器再去做一个盘算,把 “DOM 树”和“CSS 树”对应起来,最终获得一个新的“树”。这个“树”里有两个节点,一个是它的元素是什么工具;另一个是这个元素的详细参数:宽、高、位置、巨细、边框等。浏览器获得这个“树”之后,再去“渲染”。相当于我们获得一个很富厚的数据,这个数据告诉了我们页面上每个元素的位置、每个元素之间的关系——父子、邻人等。

欧锦赛线上买球

这个时候,我就可以拿块画板举行“绘制”。最后,一个色彩富厚的页面就展现在了我们眼前:3 CSS 在 HTML 中的引入方式3.1 外部样式表:通过 <link> “链入” CSS(如上例)在 <head> </head> 里边,紧接着 <title> 标签下边加 <link> 标签。<link> 标签中, rel="stylesheet" ,“rel 属性”指定了 HTML 文件与所链接的文件的关系,这里指我们要链接一个“样式表”——stylesheet。

样式表放入这个 href(Hypertext Reference)——这里可以用相对链接(上例用的一个 .css 文件,此文件将所有与之相关的 CSS 全部包罗在里边,这里注意文件路径要写对),也可以用一个完整的 URL。3.2 外部样式表:通过 @import “导入”样式<style>@importurl("index.css");/*①*/@importurl(index.css);/*②*/@import"index2.css";/*③*/@importurl("landscape.css")screenand(orientation:landscape);/*④*/</style>单从形式上, @import 这种方式与 <link> “链入” CSS 的方式差不多,都是从外部引入 CSS 文件。花样上 ①②③ 都可以,效果等同。需要注意的是,对于多个 .css 文件或 URL 的“导入”时,分号 ; 一定不能省。

本例 ④ 中后半段加的是“媒体查询限制条件”:screen 指“在有浏览器屏幕下”;and (orientation:landscape) 针对移动端设备的“显示偏向 orientation ”是“横屏(landscape)”。“竖屏”英文单词是:portrait。3.3 内部样式表:放在 head 元素内的 <style> 标签中如上篇文章的例子:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML表单</title><style>#txa{width:300px;height:200px;margin-left:-12px;}</style></head><body>……3.4 内联样式:直接写在元素开始标签的 style 属性中<pstyle="background:yellow;font-family:sans-serif;">Oli是个好人!</p>注:这种写法注意分号、前后的引号;一般不推荐使用,在特定情况下使用。

总结:一般情况下推荐使用 <link> “链入” CSS。4 CSS 选择器初识CSS 选择器用于“定位”我们想要给予“样式”、“规则”的 HTML 元素。对于 CSS 的“样式”、“规则”,我们可以拆分明白:h1{color:red;background:yellow;}4.1 元素选择器p{color:yellow;}div{background:yellow;}p,div{font-family:sans-serif;}4.2 ID 选择器id 定位页面上唯一的元素(如上篇文章的例子):<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML表单</title><styletype="text/css">#txa{/*①*/width:300px;height:200px;margin-left:-12px;}</style></head><body>…<div><labelfor="txa">评论:</label><textareaid="txa"name="article">是个好人!<!--②--></textarea></div>…注释:对于 ② 中 id="txa" :“id 属性”是一种标识元素“唯一”的方法,带 id 的元素有一个特性:你可以直接链接这些元素,给它们单独加样式。❗️但注意:id 是唯一的,一个元素不能有多个 id,另外页面上不允许多个元素都有相同的 id。

id 取名时,不允许泛起空格。对于 ① 中 #txa :按 id 来选择一个元素,需要在 id 名前面使用一个 # 字符。

4.3 类选择器源码及效果展示https://jsbin.com/sijuminino/edit?html,css,output“类”:可直接明白为一个足球俱乐部,在这个俱乐部(类)里,所有成员(元素)都必须遵循统一的规范——如出席商业运动时都必须着同样的装束。建立一个“类”分两步:为 HTML 元素增加一个 class 属性,这样就可以将这个元素加到这个“类”中。❗️注意:一个元素可以加入多个类,即一小我私家可以加入多个俱乐部,写法上各个“类名”用“空格”离隔。

<ul><liclass="first">fine</li><liclass="second">thankyou</li><liclass="thirddone">andyou</li></ul>在 CSS 中选择这个“类”(❗️注意:花样为在 class 类名前面用一个 . 字符)。.first{font-weight:bold;}.done{text-decoration:line-through;}小总结:想要对多个元素使用某个样式时,就把这些元素都加入到这个“类”里,就会用到 class;但如果只有一个元素需要加这个样式,那就用 id。

4.4 通配选择器这个选择器可以与任何元素匹配,就像一个“通配符”。如:*{color:yellow;}这个“规则”可以让文档中所有元素的 color 值都指定为 yellow。

欧洲杯线上买球

4.5 属性选择器“属性选择器”凭据元素的属性和属性值来匹配元素,“属性”英文单词为:attribute。4.5.1 [attr]源码及效果展示https://jsbin.com/voyipikura/edit?html,css,output即直接用 [] 符号将元素的属性名框起来,用于凭据元素属性来选择元素:li[class]{color:red;background:yellow;}选择有 class 属性(值不限)的所有 li 元素,使其文本为 red,配景色为 yellow。4.5.2 [attr=val]源码及效果展示https://jsbin.com/togaluxiso/edit?html,css,output即直接用 [] 符号将“属性”和与之对应的“属性值”框起来,用于凭据详细属性及其值来选择元素:li[class="second"]{color:red;background:yellow;}选择有 class 属性值为 second 的所有 li 元素,使其文本为 red,配景色为 yellow。

❗️注意:这种选择花样要求必须与“属性值”完全匹配,不多不少,不能有任何形式的简写。例:选择有 class 属性值为 third done 的所有 li 元素,使其文本为 red,配景色为 yellow。li[class="thirddone"]{color:red;background:yellow;}✘不能简写为:li[class="third"]{color:red;background:yellow;}4.5.3 [attr~=val]源码及效果链接https://jsbin.com/niluyupero/edit?html,css,output即直接用 [] 符号将“属性”、符号 ~ 和与之要加样式的“属性值”框起来,用于“凭据部门属性值”来选择元素:li[class~="done"]{color:red;background:yellow;}选择有 class 属性值包罗 done 的所有 li 元素,使其文本为 red,配景色为 yellow。

4.5.4 ^ $ *1. ^源码及效果展示https://jsbin.com/ruqererafe/edit?html,css,outputli[class^="se"]{color:red;background:yellow;}选择 class 整个属性值以 se 开头的所有 li 元素,使其文本为 red,配景色为 yellow。2. $源码及效果展示https://jsbin.com/zasiyadoqa/edit?html,css,outputli[class$="ne"]{color:red;background:yellow;}选择 class 整个属性值以 ne 末端的所有 li 元素,使其文本为 red,配景色为 yellow。3. *源码及效果展示https://jsbin.com/jikeyetola/edit?html,css,outputli[class*="ir"]{color:red;background:yellow;}选择 class 属性值中包罗字串 ir 的所有 li 元素,使其文本为 red,配景色为 yellow。

助记:^ 是笑脸(^^)的左边开始,所以影象为属性值以某字符开头;$ 美元符号很像一个摇摆的尾巴,所以可影象为属性值以某字符末端;* 星号犹如星星,都是一串一串的,所以可影象为属性值中包罗某字符串。4.5.5 语言值匹配源码及效果展示https://jsbin.com/doqibureci/edit?html,css,output<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><title>表现“谢谢”的语言</title></head><body><h1>表现“谢谢”的语言</h1><dl><dt>英语</dt><ddlang="en">Thankyou.</dd><dt>日语</dt><ddlang="ja">ありがとう.</dd><dt>法语</dt><ddlang="en">Merci.</dd><dt>澳洲英语</dt><ddlang="en-au">Thankyouverymuch.</dd></dl></body></html>当需要对以上代码中:选择 lang 属性即是 en 或者以 en- 开头的所有元素,使其文本为 red,配景色为 yellow。*[lang|="en"]{color:red;background:yellow;}❗️注意:上面这种属性选择器经常用于匹配语言值。


本文关键词:欧锦赛线上买球,欧洲杯线上买球

本文来源:欧锦赛线上买球-www.fcgtaijiquan.com

分享到:
欧锦赛线上买球:中乙赛场感人1幕!主客球迷举起闪光灯,球员集体向照片鞠躬,只为送行1人 李飞《生死追击》开机 燃情致敬缉毒英雄
热门文章
印尼大型电商Tokopedia脱销产物类目,以及注册开店指南(图)
欧锦赛线上买球- mac话筒没声音怎么办
3D打印设计的小工具,辅助关节炎患者【欧洲杯线上买球】
欧锦赛线上买球_日本精工遭中国反垄断罚款1.74亿 12家日企涉价格垄断
欧洲杯线上买球|吃完夜宵多久可以睡觉 刚吃完夜宵就睡觉好吗
食物也能防晒 夏季防晒就吃这几类食物 夏季晒伤会导致什么后果及解决办法:欧锦赛线上买球
欧锦赛线上买球|浮小麦猪脊骨汤益气止汗
如何把副业搞得风生水起?法式员增收的4种方式:欧锦赛线上买球
逐日话题榜【欧洲杯线上买球】
InVivos与Taconic结成战略合作伙伴关系,在新加坡建新繁育基地-欧洲杯线上买球
重磅!李总理拿下荷兰锂电超级工程
欧洲杯线上买球:山东协和学院年投入200万培养乡村医生
欧锦赛线上买球:体质差怕冷怎么办 怕冷多属阳虚体质
【欧锦赛线上买球】跨境电商盘货:最好用的10大社交媒体营销治理工具
欧洲杯线上买球| 编导类艺考可以学什么专业?有哪些偏向?
客户案例
×