跟高老师学习Web前端之21.

京娘湖

        话说21天的坚持能养成一个习惯,为了这句话,我愣是从《快乐大本营》中挪开眼睛,跟高老师学习编程,看着金光闪闪的21,我心里无比清楚,只要想放弃,一刹那的事儿,万分容易啊。但万事开头难,凡事贵在坚持,继续吧!

        今天开始我要学习CSS课程了,终点亦是起点,新征程继续努力哦!

        CSS主要用于网页的风格设计。正常情况下HTML展现的页面比较丑,而CSS则可以进行页面风格设计,比如动画效果、页面美化等,使页面充实而美观。那么如何在HTML中引人CSS就是今天我要学习的内容。

        CSS引入方式有三种:行内样式、级联样式和外部样式。

        先学习行内样式。其主要是在标签内部用style引入样式。style引入属性书写格式为--属性名:属性值;,如下图所示:

行内样式引入的代码书写
页面展示

       其次是级联样式,也就是内部样式的引入。内部样式主要是在html的<head>标签内以<style>标签设计样式,其属性值用{ }括号包裹起来。

级联样式引入的代码书写
页面展示

       CSS的第三种重要引入方法为外部样式。外部样式是以文件的方式将属性引入HTML中,首先我们需要用stylesheet建立外部样式表。右击左侧目录,选择新建,选择stylesheet,新建一个样式表,而后在样式表中书写所要展示的页面属性。

外部样式代码书写
外部样式表
页面展示

       行内样式主要用于设计某一块的样式,级联样式可以设计整个网页的样式,而外部样式表,则用于页面属性较多,结构复杂,靠行内样式会导致代码书写混乱时选择的样式引入方式。

       三种CSS样式引入方式学习完毕,那么三者之间优先级如何?下面高老师挨个做了示例分析:

三种样式同时存在时
页面展示:行内样式属性

        由图片可看出,当三种样式属性同时存在时,则内部样式起作用。然后我们又分别测试了行内样式和级联样式同时存在时,级联样式和外部样式同时存在时,行内样式和外部样式同时存在时,其属性的优先级,最后得出结论:行内样式优先级>级联样式>外部样式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,868评论 0 6
  • 1. 介绍 浏览器可能是最广泛使用的软件。本书将介绍浏览器的工作原理。我们将看到,当你在地址栏中输入google....
    康斌阅读 2,060评论 7 18
  • 《窗边的小豆豆》是一本有趣的儿童文学作品。作者是(日)黑柳彻子,这本书讲述了作者上小学时的一段真实的故事:小豆豆因...
    筱天大大阅读 413评论 0 1
  • 朋友圈的女生疯狂的转载这条消息 ,有很多女生都在发表评论 。女生甲说,怪不得自己找不到男盆友,原来是条条占,顺带发...
    范文盲阅读 3,611评论 4 6