第六十九节，css入门基础
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入门基础的更多相关文章
- 第三百六十九节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能
第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能 Django实现搜索功能 1.在Django配置搜索结果页的路由映 ...
- 第一百六十九节，jQuery，基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
- 第二十九节：Java基础知识-类，多态，Object，数组和字符串
前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...
- 第二百六十九节，Tornado框架-Session登录判断
Tornado框架-Session登录判断 Session需要结合cookie来实现 Session的理解 1.用户登录系统时,服务器端获取系统当前时间,进行nd5加密,得到加密后的密串 2.将密串作 ...
- 风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解
风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解 跨站脚本攻击(Cross-site scripting,通常简称为XSS) 反射型XSS原理与演示 交互的数据不会存储在数据库里,一次 ...
- 第三百七十九节，Django+Xadmin打造上线标准的在线教育平台—xadmin的安装
第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...
- 第三百六十五节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询
第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询 1.elasticsearch(搜索引擎)的查询 elasticsearch是功能 ...
- 第三百六十四节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mapping映射管理
第三百六十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mapping映射管理 1.映射(mapping)介绍 映射:创建索引的时候,可以预先定义字 ...
- 第三百一十九节，Django框架，文件上传
第三百一十九节,Django框架,文件上传 1.自定义上传[推荐] 请求对象.FILES.get()获取上传文件的对象上传对象.name获取上传文件名称上传对象.chunks()获取上传数据包,字节码 ...
随机推荐
- UOJ#117. 欧拉回路
#117. 欧拉回路 题目描述 有一天一位灵魂画师画了一张图,现在要你找出欧拉回路,即在图中找一个环使得每条边都在环上出现恰好一次. 一共两个子任务: 这张图是无向图.(50分) 这张图是有向图.(5 ...
- java加解密
换工作中,把以前学的知识,整理整理.能否得到一份好的薪资且满意的工作,然后赢取白富美,走向人生的巅峰,就靠它了.哈哈. 对称加密:DES, AES DES (数据加密算法) : 明文按64位进行分组, ...
- svn问题（队列）
svn执行clean up命令时报错"Previous operation has not finished; run 'cleanup' if it was interrupted&quo ...
- To the end
身为一名初二狗的我也走过了半年.不管怎么说人生中也没有几个半年嘛.从九月到现在快四个月了,我也离中考越来越近了/郁闷/.但是还是要好好过唔.不过我想起这半学期还是挺充实的,至少没有浪费太多的时间.有些 ...
- PDF转换成Txt
我的弱智想法是所有能转换成PDF的文件,就都用PDF预览,上传成功后开启一个线程把文档转换成PDF,PDF再转换成txt. 目的是把txt插入索引进行全文检索. 调用的时候 string filePa ...
- leetcode & lintcode for bug-free
刷题备忘录,for bug-free leetcode 396. Rotate Function 题意: Given an array of integers A and let n to be it ...
- 一点公益二码公益开发模式系统源码App
写这篇文章,是因为最近看到的一个著名的开源项目在内部使用时的各种问题,不得不说,很多的开源的东西思想是不错的,但离真正工程化都有不小的距离,所以没什么商业公司采用的开源产品如果要引入的话一定要慎重,通 ...
- jquery 获取当前对象的id取巧验证的一种方法
<!doctype html><html><head><meta charset="utf-8"><title>titl ...
- 凭借5G研究优势，诺基亚将携手菲律宾将其应用于VR/AR领域
目前,很多人都在抱怨网速不行,影响视频的流畅播放,未来这些问题可以通过5G解决.近日,诺基亚和PLDT的全资子公司Smart首次在菲律宾一个"现场"网络演示上实现了5G速度,该网络 ...
- 斗地主 (NOIP2015 Day1 T3)
斗地主 张牌,因为它可以连在K后, 总体思路为 先出炸弹和四带二 再出三带一 再把对牌和单牌出完 记录并更新Answer,后枚举顺子,并继续向下搜索. 注意:弄明白题意,题目描述不太清楚....另外, ...