《阿宝哥的CSS编程笔记》之01:使用CSS

大前端设计(H5+小程序+App)

温馨提示:

本文中可能包含表格,在手机屏幕上竖屏显示时,一行内可显示中文字符数量为20个左右,因部分表格单元格内容过长会导致自动换行,从而使得排版不太美观。

另外,本文中可能包含高清图片,在手机屏幕上预览时,我们需要频繁的进行放大缩小操作,这是相当麻烦的一件事情。

因此,如果条件允许,建议您坐在舒适的办公桌前,冲泡一杯咖啡或者茶,在电脑上阅读以获得更好的体验。

在HTML文档中,有三种使用样式表的方式:内联方式、内部样式块和外部样式文件。

1、内联方式 (Inline Styles)

内联定义即在标记的style属性值上直接使用CSS。

示例代码:

<!DOCTYPE html>

<html>

    <head style="">
        <meta charset="UTF-8">
        <title>内联样式表</title>
    </head>

    <body  style="background-color: deepskyblue;">
        
        <p style="color:gray;  
            font-size: 18px;  
            font-family: '微软雅黑';" >
            字体颜色将显示为灰色,18像素大小,字体为微软雅黑。
        </p>
    
    </body>

</html>

运行效果:

内联样式表

2、内部样式块对象 (Embedding a Style Block)

我们还可以在HTML文档的<head>标记里插入一个<style>块。

示例代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>内部样式块</title>

        <style>
            body {
                background: deepskyblue;
                color: green;
            }
            
            p {
                font-size: 12px;
            }
        </style>
    </head>

    <body>
        <!--
            描述:此处的p标记内的内容样式被覆盖了。因为优先级遵循最近原则;
        -->
        <p style="font-size: 30px;">这段文字颜色遵循内部样式表规则,文字大小遵循内联样式表规则。</p>

        <p style="font-size: 20px;">第一段落</p>
        <p>第二段落</p>
        <p>第三段落</p>
    </body>

</html>

运行效果:

内部样式块

3、外部样式表 (Linking to a Style Sheet)

我们在Web项目中可以先建立外部样式表文件style.css,然后在HTML文档中使用<link>标记将其作为样式表链接起来。

css文件style.css示例代码:

body {
    background: deepskyblue;
    color: green;
}

p {
    font-size: 12px;
}

HTML文档示例代码:

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">

        <title>外部样式表</title>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

    </head>

    <body>
        <!--
            描述:此处的p标记内的内容样式被覆盖了。因为优先级遵循最近原则;
        -->
        <p style="font-size: 20px;">这段文字颜色遵循外部样式表规则,文字大小遵循内联样式表规则。</p>

        <p>第一段落</p>
        <p>第二段落</p>
        <p>第三段落</p>
    </body>

</html>

运行效果:

外部样式表

温馨提示:

多种使用方式并存时,最接近目标元素的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义,但覆盖重叠的定义。


如果您不能静下心来,不精心雕琢和打造自己的知识系统和技能体系,沉迷于点石成金亦或是拔苗助长等等的奇技淫巧之间,那都是事倍功半的瞎忙活!

古往今来,学习,没有捷径,除非出现科幻般的脑机互联......但有拙法,那就是书山有路勤为径,学海无涯苦作舟!更何况,日新月异知识爆炸的今天,态度犹豫和停止学习,那么等待您的,唯有丛林淘汰法则。

书,能读完吗?肯定不能,汗牛充栋!
书,能学完吗?绝对可以,得读经典。

好好学习,天天向上!继续下一章...


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

推荐阅读更多精彩内容