学习要点:

1.使用 CSS

2.三种方式

3.层叠和继承

主讲教师:李炎恢

本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化。

一.使用 CSS

CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS 属性和属性值。

<p style="color:red;font-size:50px;">这是一段文本</p>

解释:style 是行内样式属性。color 是颜色属性,red 是颜色属性值;font-size是字体大小属性,50px 是字体大小属性值。

二.三种方式

创建 CSS 样式表有三种方式:1.元素内嵌样式;2.文档内嵌样式;3.外部引入样式。

1.元素内嵌样式

<p style="color:red;font-size:50px;">这是一段文本</p>

解释:即在当前元素使用 style 属性的声明方式。

2.文档内嵌样式

<style type="text/css"> 
p {
  color: blue; font-size: 40px;
}
</style> <p>这是一段文本</p>

解释:在<head>元素之间创建<style>元素,通过选择器的方式调用指定的元素并设置相关 CSS。

3.外部引用样式

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

//style.css

@charset "utf-8";
p {
  color: green;
  font-size: 30px;
}

解释:很多时候,大量的 HTML 页面使用了同一个组 CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中,然后通过<link>元素去引入它即可。@charset "utf-8" 表明设置 CSS 的字符编码,如果不写默认就是 utf-8。如果有多个.css 文件,可以使用 @import 导入方式引入.css 文件。只不过,性能不如多个<link>链接。

三.层叠和继承

所谓的样式表层叠:指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式表继承:指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式,是这个元素在这个浏览器运行时默认附加的样式。

1.浏览器样式

<b>这个元素隐含加粗样式</b>
<span style="font-weight:bold;">这个元素通过 style 加粗</span>

解释:<b>元素就是具有加粗的隐含样式,而<span>元素没有任何隐含样式,通过 style 属性设置样式。

2.样式表层叠

样式表层叠通过五种方式进行,如果样式相同,那么比如会产生冲突替换。这时,它的优先级顺序就显的比较重要。以下优先级从低到高:

(1).浏览器样式(元素自身携带的样式);

(2).外部引入样式(使用<link>引入的样式);

(3).文档内嵌样式(使用<style>元素设置);

(4).元素内嵌样式(使用 style 属性设置)。

//元素内嵌

<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>

//文档内嵌

<style type="text/css">
p {
  color:blue; font-weight: bold;
}
</style>

//外部引入

@charset "utf-8";
p {
  color: green;
  font-style: italic;
}

如果某一个样式被优先级高的给替换掉了,却又想执行这个样式方案,可以将这个方案标记成重要样式(important)。

//强行设置最高优先级

color: green !important;

3.样式继承

如果某一个元素并没有设置父元素相关的样式,那么就会使用继承机制将父元素的样式集成下来。

//<b>元素继承了<p>元素的样式

<p style="color:red;">这是<b>HTML5</b></p>

样式继承只适用于元素的外观(文字、颜色、字体等),而元素在页面上的布局样式则不会被继承。如果继承这种样式,就必须使用强制继承:inherit。

//强制继承布局样式

<p>这是<b>HTML5</b></p>

<style type="text/css">
p {
  border: 1px solid red;
} b {
  border : inherit;
}
</style>

第 12 章 CSS 入门的更多相关文章

  1. [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  2. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  3. HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版​

    HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...

  4. 第三章 Docker 入门

    第三章 docker 入门 3.1 确保docker已经就绪 首先查看docker程序是否存在,功能是否正常 [#3#cloudsoar@cloudsoar-virtual-machine ~]$su ...

  5. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...

  6. 第六十九节,css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  7. 第二章 MySQL入门篇

    第一章 MySQL入门篇 一.MySql简介 简言: 和SQL Server数据库相同,MySQl也是一个关系型数据库管理系统.由瑞典的MySQL AB公司开发,2008年被SUN公司收购,2009年 ...

  8. MySQL----MySQL数据库入门----第一章 数据库入门

    第一章 数据库入门 1.1 数据库基础知识 1.1.1 数据库概述 数据不仅包括普通意义上的数字,还包括文字.图像.声音等.也就是说,凡是在计算机中用来描述事物的记录都可称作数据. 数据库的基本特点: ...

  9. html与css入门经典视频教程 千锋说要这样学

    PHP初学者看过来,老师带来的PHP入门经典视频教程,带你轻松入门,学习PHP就是这么简单. 很多人不理解为什么学习PHP要先学习HTML基础和CSS,其实PHP作为服务器的脚本语言,在开发过程中用于 ...

随机推荐

  1. Bootstrap~日期控制

    回到目录 一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的, 控件地址:http://www.bootcss.com/p/ ...

  2. H5常用代码:适配方案3

    在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有 ...

  3. Atitit js中的依赖注入di ioc的实现

    Atitit js中的依赖注入di ioc的实现 全类名(FQCN)为标识符1 混合请求模式1 使用类内  builder  即可..2 Service locator method走ok拦2 Jav ...

  4. Atitit apache 和guava的反射工具

    Atitit apache 和guava的反射工具 apache1 Spring的反射工具类 ReflectionUtils1 Guava 反射工具2 apache  34             7 ...

  5. js的基本语句和语法

    字符串赋值:把字符串用双引号或单引号引起来,在(js.php)中:二.类型转换;parseint():转整数.parsefloat转小数:强制转换三.运算符表达式1数序运算:加减乘除   %取余:2逻 ...

  6. fir.im Weekly - 不能错过的 GitHub Top 100 开源库

    好的工具&资源,会带来更多的灵感.本期 fir.im Weekly 精选了一些实用的 iOS,Android 的使用工具和源码分享,还有前端.UI方面的干货.一起来看下:) Swift 开源项 ...

  7. iOS-旧项目中手动内存管理(MRC)转ARC

    在ARC之前,iOS内存管理无论对资深级还是菜鸟级开发者来说都是一件很头疼的事.我参 加过几个使用手动内存管理的项目,印象最深刻的是一个地图类应用,由于应用本身就非常耗内存,当时为了解决内存泄露问题, ...

  8. DOM对象 与 jQuery对象 之间的相互装换

    示例代码: //jQuery对象转DOM对象 //因为jQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式 var $div1 = $("#div1"); //jQ ...

  9. Android 代码混淆之部分类不混淆的技巧

    在编写Android程序之后,我们通常要代码进行混淆编码,这样才能保证市场上我们的应用不会被别人进行反编译,然后破解,所以此时需要在发布正式版本的时候,有一些类事不能混淆的,比如实现了 Seriali ...

  10. java基础,继承类题目:编写一个Java应用程序,该程序包括3个类:Monkey类、People类和主类 E

    21.编写一个Java应用程序,该程序包括3个类:Monkey类.People类和主类 E.要求: (1) Monkey类中有个构造方法:Monkey (String s),并且有个public vo ...