小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式,当时举的栗子是行内样式,只能写在元素的标签上,作为 style 属性的值存在的。这一期我们学习内联样式,或叫嵌入样式。

内联样式

CSS 样式大致有三种存在形式,行内,内联,和外联。我们已经学过了行内样式,那么我们来看看内联样式的基本写法:

下面的 h1 结构我们已经熟悉了,代表1号标题。代码中高亮的部分就是所谓的“内联样式”了。

它是以一个 style 标签包裹的一段代码,其中 .laser 称为 CSS 的 class,直译为“类”。为了更直观的看到区别,我们再用行内样式的写法看一下:

大家可以看到,行内样式的写法跟 HTML 标签混杂在一起,代码显得比较混乱。另外,这种写法只能每个元素单独写样式,假设页面中有10个元素样式是相同的,就要重复10次。这显然是不科学的。

CSS 的 class 其实就是个标识,告诉浏览器可以用这个来找到对应的元素。我们之前学过 id,也是一个道理,后面也可能会称之为“选择器(Selector)”,就是能选中某些元素的东西。

这里 id 和 class 的主要区别在于,id 在页面中不能重复,而 class 可以任意重复多次。另外,在 CSS 的选择器权重中,id 选择器的权重比 class 高一个量级。

上面的代码中,我们写了一个具有 class=“laser” 的 h1 元素,然后又在 style 里写了一个 .laser 的选择器,就可以在里面设置 h1 的样式了。

至于样式代码,我们前面讲过,都是以名值对的形式出现的,上面的代码也很好理解,英文顾名思义,小鸡君也特意加了注释。实在看不懂的请留言给小鸡君。

我们来看一下效果:

有了这样的内联样式写法,可以方便的把样式代码集中到一处,也可以一次为多个元素设置相同的样式,只需要给它们加上相同的 class 即可:

聪明的你快打开电脑实践一下吧~

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2015-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

css继承样式怎么控制?用选择器

  css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。css继承原理是我们设置上级(父级)的CSS样...

4365
来自专栏lonelydawn的前端猿区

面向对象+模块化设计绘制canvas星空动画

require.js的相关内容已在我的博文 《requireJs的使用,以canvas绘制星空为例》中描述, 可查看:https://cloud.tencent...

6246
来自专栏xingoo, 一个梦想做发明家的程序员

(递归版)合并排序

递归版的合并排序,时间复杂度为O(nlogn),空间复杂度为O(n+logn); 算法思想: 利用分而自治的思想,把排序分成两块,每块内部排序,再进行一次遍历...

21510
来自专栏Pythonista

前端学习之jQuery

[1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

1021
来自专栏逸鹏说道

jQuery选择器大全(48个代码片段+21幅图演示)2

4. 属性过滤选择器 ——4.1 [attribute](取拥有attribute属性的元素) 下面的代码,最后一个a标签没有title属性,所以它仍然会带下划...

2998
来自专栏HTML5学堂

利用JavaScript获取浏览器计算后的样式

HTML5学堂:JavaScript可以用style对象给标签设置样式、获取样式,但是利用style对象获取的样式只能是标签内联的样式,今天要给大家讲解的是利用...

3635
来自专栏前端说吧

布局的诡异bug合集+解决方法(更新中)

2976
来自专栏HTML5学堂

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

6509
来自专栏编程思想之路

Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)

接着上一篇 Android6.0源码分析之View(一) 紧接着来学习view的measure,(注,开始写博客之后,很明显我的学习效率高多了,研究了俩星期硬是...

2759
来自专栏前端知识分享

第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

2723

扫码关注云+社区

领取腾讯云代金券