姬小光前端小讲堂【第003期】

在上一期的代码中,我们用到 h1,p,a 等标签,这些标签确定了我们想在网页中展示一个标题,一个段落,和一个链接。

在上一节我们也看到了,浏览器会给我们的标签“渲染”一个默认的样式,包括默认的字体大小,颜色,间距等。

那么,如果我们想自己改变这些字体大小和颜色的话,该怎么做呢?这一期,我们来谈谈所谓“样式”。

所谓样式

我们所说的样式,是特指可以改变 HTML 表现的一种代码,全称叫做“层叠样式表”,英文为 CSS( Cascading Style Sheets),稍后我们会再深入讲解。

我们首先从“内联样式”开始,内联样式是以 HTML 属性(回复 002 )的形式定义的,属性名为 style。

我们再次打开记事本,编辑上一次的 index.html 文件并保存:

<h1 style="font-size: 14px; color: red;">此非然并卵</h1>

这里,从字面意思上大致可以猜到,一个是设置了字体大小(font-size),一个是设置了颜色(color)。那么让我们来预览一下效果:

我们可以看到图中的 h1 标签已经变成了我们设置的字体和颜色了。接下来,我们再做一点点改变:

<a style="text-decoration:none;" href=“http://diao.it” target=“_blank” title=“Why are you so diao?”>DIAO.IT</a>

这个单词貌似复杂一点了... 这个属性是用来设置文本的一些“装饰”性的表现的,类似 Word 里面的 U 和 I 功能。

这里,我们设置 text-decoration:none; 意思就是让文本没有任何修饰,所以下划线也就不复存在了:

关于 CSS 还有很多属性可以设置,几乎可以控制一切你能想到的方方面面。想了解更多 CSS 属性,建议去 www.w3school.com.cn 学习或查找资料。

当然,对于你安装的不同浏览器来说,同样的代码在显示的时候会略有差异,处理这些浏览器之间的展示差异,也是前端工程师的重要工作内容之一。

下一节,我们将简单介绍一下与这些兼容性相关的东西。

本文分享自微信公众号 - 姬小光(hi-laser)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-06-26

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Arcgis for JavaSctipt之常用Layer详解

概述:Arcgis for Javasctipt中常见的layer有动态图层(ArcGISDynamicMapServiceLayer

21250
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝...

23680
来自专栏C/C++基础

CSS中常见的长度单位

注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。

18620
来自专栏HTML5学堂

CSS3蒙版 — 元旦快乐!

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果,可我们在这里并不打算介绍PS的蒙版效果,而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-w...

408100
来自专栏tkokof 的技术,小趣及杂念

HGE系列之九 管中窥豹(精灵动画)

这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:)

10320
来自专栏Crossin的编程教室

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块,俗称 海龟作图,它是基于 tkinter 模块打造,提供一些简单的绘图工具,海龟作图最初...

65860
来自专栏超然的博客

深入了解——CSS3新增属性

写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式。参考下述代码:

11710
来自专栏阮一峰的网络日志

CSS中背景图片定位方法

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

55410
来自专栏Android开发经验

Android自定义View-记录一个简单却又常见的效果实现

代码 简单列下主要代码,完整代码地址放在了文字末尾。 1.为了更加灵活,我这里提供了很多属性用于用户自己来设置:

8920
来自专栏Coco的专栏

【CSS进阶】CSS 颜色体系详解

21150

扫码关注云+社区

领取腾讯云代金券