css入门基础

学习要点：
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.文档内嵌样式 

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <!--定义文档的编码类型-->

    <meta charset="utf-8">

    <title>标题</title>

    <!--css样式控制p标签-->

    <style type="text/css">

        p{

            color: blue;

            font-size: 40px;

        }

    </style>

</head>

<body>

<p>这是一段文本</p>

</body>

</html>

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

3.外部引用样式 

html文件

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <!--定义文档的编码类型-->

    <meta charset="utf-8">

    <title>标题</title>

    <!--外部引用css样式控制p标签-->

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

</head>

<body>

<p>这是一段文本</p>

</body>

</html>

css文件

@charset "utf-8";

p{

    color: #ff272d;

    font-size: 40px;

}

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

在一个css文件里导入另外一个css文件，不推荐，性能不如在html页面多个<link>链接

@charset "utf-8";

/*导入另外一个css文件*/

@import "2.css";

p{

    color: #ff272d;

    font-size: 40px;

}

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

1.浏览器样式 

<b>这个元素隐含加粗样式</b>

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

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

2.样式表层叠优先级
样式表层叠通过四种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的优先级顺序就显的比较重要。以下优先级从低到高：
(1).浏览器样式（元素自身携带的样式）；优先级4最低 
(2).外部引入样式（使用<link>引入的样式）； 优先级3
(3).文档内嵌样式（使用<style>元素设置）；优先级2 
(4).元素内嵌样式（使用style属性设置）。优先级1最高

元素内嵌，优先级1最高

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

文档内嵌 ，优先级2

<style type="text/css">

p

color:blue;

font-weight: bold;

}

</style>

外部引入 ，优先级3

@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。

强制继承布局样式

<style type="text/css">
　　p{

　　　　border: 1px solid red;

　　}

　　b{

　　　　border :inherit;

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

第六十九节，css入门基础的更多相关文章

  1. 第三百六十九节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能

    第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能 Django实现搜索功能 1.在Django配置搜索结果页的路由映 ...

  2. 第一百六十九节，jQuery，基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

  3. 第二十九节：Java基础知识-类，多态，Object，数组和字符串

    前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...

  4. 第二百六十九节，Tornado框架-Session登录判断

    Tornado框架-Session登录判断 Session需要结合cookie来实现 Session的理解 1.用户登录系统时,服务器端获取系统当前时间,进行nd5加密,得到加密后的密串 2.将密串作 ...

  5. 风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解

    风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解 跨站脚本攻击(Cross-site scripting,通常简称为XSS) 反射型XSS原理与演示 交互的数据不会存储在数据库里,一次 ...

  6. 第三百七十九节，Django+Xadmin打造上线标准的在线教育平台—xadmin的安装

    第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...

  7. 第三百六十五节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询

    第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询 1.elasticsearch(搜索引擎)的查询 elasticsearch是功能 ...

  8. 第三百六十四节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mapping映射管理

    第三百六十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mapping映射管理 1.映射(mapping)介绍 映射:创建索引的时候,可以预先定义字 ...

  9. 第三百一十九节，Django框架，文件上传

    第三百一十九节,Django框架,文件上传 1.自定义上传[推荐] 请求对象.FILES.get()获取上传文件的对象上传对象.name获取上传文件名称上传对象.chunks()获取上传数据包,字节码 ...

随机推荐

  1. PHP中file_exists与is_file、is_dir的区别，以及执行效率的比较 转自#冰雪傲骨#

    PHP中file_exists与is_file.is_dir的区别,以及执行效率的比较   判断文件是否存在,有2个常用的PHP函数:is_file 和 file_exists, 判断文件夹是否存在, ...

  2. Swift3集成极光推送

      现在很多程序都开始使用Swift开发了,但是第三方库大多数都是用OC写的,所以我们要使用Swift和OC混编.今天的内容主要讲Swift3.0集成极光推送. 1.准备工作   集成指南,极光上说的 ...

  3. unity中的委托

    中午在做一个 数据点击然后 想把当前的Gameobject传过去,但是想了好久就是弄不出来. 之后网上看了下委托,抱着试试的心态,结果成功了 委托的定义 private delegate void C ...

  4. iOS解析crash日志：

    iOS解析crash日志:我们在ios开发中会碰到的很多crash问题,如果Debug调试模式的话,我们可以往往很容易的根据log的输出定位到导致crash的原因,但对于已经上线的应用,或者是rele ...

  5. Intellij 快捷键

    11ctrl+F12  类似于eclipse 的outline  显示出当前类的所有方法. ctrl+H 查看当前类或者方法的集成结构 ctrl+E 查看最近使用的文件 Ctrl+J 自动完成提示 C ...

  6. 微信js-sdk调用

    之前在做微信的时候,在微信支付还有调起微信扫一扫的时候,用过js-sdk.最近,被几个做前端的同学问到了具体的流程,想想,还是写下来好点.     微信js-sdk,是微信提供给网页开发设计者使用的, ...

  7. cdh 安装记录

    安装文件准备 CDH 下载地址:http://archive.cloudera.com/cdh5/parcels/latest/ 下载操作系统对应的版本: 1．CDH-5.3.0-1.cdh5.3.0 ...

  8. retrofit2学习

    http://www.cnblogs.com/wondertwo/p/5838528.html  使用要点

  9. 解决vs2013下创建的python文件，到其他平台（如linux）下中文乱码（或运行时报SyntaxError: (unicode error) 'utf-8' codec can't decode byte...）

    Vs2013中创建python文件,在文件中没输入中文时,编码为utf-8的,如图 接着,在里面输入几行中文后,再次用notepad++查看其编码如下,在vs下运行也报错(用cmd运行就不会): 根据 ...

  10. 汇总前端最最常用的JS代码片段-你值得收藏

    原始出处,可拷贝:http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html 摘自:http://www.love ...