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 规则由两个主要的部分构成:选择器以及一条或多条声 ...
随机推荐
- CodeBlocks 断点调试
启动调试器 1. 一般,调试器的按钮可以在工具栏找到 如果没有,可以从view菜单项中调出 2. 设置断点 使用调试器时需要让程序在需要的位置中断,在启动调试器前设置断点如下,鼠标点击编辑器的左边即可 ...
- 有基因ID或者基因名，如何拿到对应的KEGG通路图？
1.https://www.kegg.jp/kegg/tool/map_pathway2.html 2.如下图,筛选出基因所在的通路,并标上不同的颜色. 3.结果页面如下,有些基因会找不到对应的通路, ...
- 实验17：NAT
实验14-1:静态NAT 配置 Ø 实验目的通过本实验可以掌握(1)静态NAT 的特征(2)静态NAT 基本配置和调试 Ø 拓扑结构 实验步骤n 步骤1:配置路由器R1 提供NAT ...
- Node——request使用代理
本文知识点 Node环境搭建 使用代理 进阶学习 环境配置 Node 安装request 安装request npm install request 确认环境安装无误 node -v 代码样例 使用代 ...
- python 2 计算字符串 余弦相似度
def get_ord_list(str): return [ord(i) for i in str] def calcu_approx(str1,str2): def dot(A,B): retur ...
- eclipse 连接sql sever
https://www.cnblogs.com/newen/p/4428541.html 和eclipse连接mysql相似,只是 String url="jdbc:sqlserver:// ...
- num08---原型模式
关键点,实现 Cloneable 接口, 重写clone() 方法.克隆出的对象属性保持一致. 案例: 原型模式在spring 源码中的应用: =========================== ...
- LNK2019
原因:inline函数被外部文件的函数调用时,必须将inline函数定义在头文件中,不能定义在cpp文件中.
- Docker的基本使用与简介
1 Docker简介 1.1 什么是虚拟化 在计算机中,虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来 ...
- 使用newtonsoft完美序列化WebApi返回的ValueTuple
由于开发功能的需要,又懒得新建太多的class,所以ValueTuple是个比较好的偷懒方法,但是,由于WebApi需要返回序列化后的json,默认的序列化只能将ValueTuple定义的各个属性序列 ...