CSS语法、选择器、继承、层叠
行内样式（内联样式）
<h1 style="color:red;font-size:20px;">css行内样式</h1>
内部样式表（嵌入样式）
<!-- -->解决低版本浏览器不识别style标签的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
<!--
p{
color:blue;
}
-->
</style>
</head>
<body>
<h1 style="color:red;font-size:20px;">css行内样式</h1>
<p>行内样式</p>
<p>嵌入样式</p>
<p>外部样式</p>
<p>导入样式</p>
</body>
</html>
外部样式表（建议）
<link rel="stylesheet" href="index2.css"><!-- grey -->
导入式
页面加载很慢时可能出现无样式
同时存在浏览器兼容性问题
位于style标签的第一行
<style>
<!--
@import url('index.css');/*green*/
p{
color:blue;
}
-->
</style>
css使用方式区别
优先级：
就近原则，谁距离元素最近，谁的优先级越高
css选择器
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:blue;
}
</style>
</head>
<body>
<p>css样式</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{color:blue;}
.red{color:red;}
</style>
</head>
<body>
<p>css样式</p>
<p class="red">通过类设置样式</p>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{color:blue;}
.red{color:red;}
#big{font-size:30px;}
</style>
</head>
<body>
<p>css样式</p>
<p class="red">通过类设置样式</p>
<p id="big">通过id设置样式</p>
</body>
</html>
全局选择器（通配符选择器）
*{margin:;padding:;font-family: "宋体";}
群组选择器
p,div{font-family: "宋体";}
后代选择器
之间用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p em{color:red;}
</style>
</head>
<body>
<p><em>css</em>样式</p>
<div>通过<em>id</em>设置样式</div>
</body>
</html>
伪类选择器
链接伪类的顺序，a:hover必须置于a:link和a:visited之后，才有效，a:active必须在a：hover之后，才有效。而link、visited两个伪类之间顺序无所谓，谁在前都可以
顺序：:link :visited :hover :active 或者 :visited :link :hover :active
IE6不支持其他元素的:hover和:active状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link{color:black;}
a:hover{color:yellow;}
a:visited{color:green;}
a:active{color:red;} p:hover{color:yellow;}
p:active{font-size:20px;}
</style>
</head>
<body>
<a href="#">链接样式</a>
<p>p标签样式</p>
</body>
</html>
css继承和层叠
IE6以下版本，表格不会继承body的属性
IEtester测试IE浏览器个版本的兼容性
谷歌浏览器默认字体大小是16px，h1标签默认字体大小是2em，在谷歌浏览器中显示为32px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{font-size:12px;}
p{color:red;border:1px solid;}
div{color:red;}
div{font-weight:bold;}
</style>
</head>
<body>
<!-- span会继承p元素的部分样式属性
部分样式无法继承，如border
-->
<p>css<span>继承</span></p>
<div>css层叠</div>
<!-- h1字体大小为24px -->
<h1>h1字体大小是2em</h1>
</body>
</html>
CSS语法、选择器、继承、层叠的更多相关文章
- css选择器---继承,优先级,层叠
CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS核心内容：层叠和继承
实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...
- Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- CSS选择器、层叠相关的基础知识
CSS是Cascading Style Sheets的英文缩写,即层叠样式表.CSS2.1是W3C于2007年发布,现在推荐使用的.CSS3现在还处于开发中,有部分浏览器的新版本支持. 1. CSS ...
- 前端基础--css基本语法,选择器
一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式 ...
- css语法规范、选择器、字体、文本
css语法规范 使用 HTML 时需要遵从一定的规范,CSS 也是如此.要想熟练地使用 CSS 对网页进行修饰,首先需要了解CSS 样式规则. CSS 规则由两个主要的部分构成:选择器以及一条或多条声 ...
随机推荐
- CUDA学习（二）之使用clock()函数
clock()函数是C/C++中的计时函数,相关的数据类型是clock_t,使用clock函数可以计算运行某一段程序所需的时间,如下所示程序计算从10000000逐渐减一直到0所需的时间. #incl ...
- 【WPF学习】第三十四章 资源基础
WPF允许在代码中以及在标记中的各个位置定义资源(和特定的控件.窗口一起定义,或在整个应用程序中定义). 资源具有许多重要的优点,如下所述: 高效.可以通过资源定义对象,并在标记中的多个地方使用.这会 ...
- SpringMVC 参数映射与文件上传
handler参数映射: 接下来就是Spring的各个处理细节了,无论框架如何疯转其实我们处理请求的流程是不变的,设计到的操作也是固定的,举个例子,当我们要实现一个登陆功能时: 创建一个用于处理登录请 ...
- Android 开启与关闭软键盘
http://www.cnblogs.com/weixing/p/3300908.html InputMethodManager imm = (InputMethodManager)getSystem ...
- C/C++中指针和引用之相关问题研究
一.基本知识 指针和引用的声明方式: 声明指针: char* pc; 声明引用: char c = 'A' char& rc = c; 它们的区别: ①从现 ...
- POJ_1208_模拟
题目描述: 给定一个长度n,有0~n-1编号的箱子和位置,起始个编号的箱子放在相同编号的位置. 有一系列操作: move a onto b,将a,b上面的箱子放回初始位置,并将a放到b箱上. move ...
- 小白学 Python 数据分析（3）：Pandas （二）数据结构 Series
在家为国家做贡献太无聊,不如跟我一起学点 Python 顺便问一下,你们都喜欢什么什么样的文章封面图,老用这一张感觉有点丑 人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析( ...
- 51Nod 1021 石子归并(区间dp经典入门)
题意: N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子合并成新的一堆,并将新的一堆石子数记为该次合并的代价.计算将N堆石子合并成一堆的最小代价. n<=100 思 ...
- Go语言实现：【剑指offer】把二叉树打印成多行
该题目来源于牛客网<剑指offer>专题. 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 需要分层,二维数组. Go语言实现: /** * Definition for ...
- 并发编程之Master-Worker模式
我们知道,单个线程计算是串行的,只有等上一个任务结束之后,才能执行下一个任务,所以执行效率是比较低的. 那么,如果用多线程执行任务,就可以在单位时间内执行更多的任务,而Master-Worker就是多 ...