CSS语法、选择器、继承、层叠
2024-09-06 18:31:33
行内样式(内联样式)
<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>
最新文章
- 纯CSS3实现的一些酷炫效果
- vpn
- java多线程之 基本概念
- c# 字符串操作
- web应用程序逻辑架构
- 【python】An Introduction to Interactive Programming in Python(week two)
- Objective-C 【autorelease基本使用】
- 使用Redis的理由
- 如何给windows窗体程序打包成一个安装包
- Java之向左添加零(000001)第二种方法
- 495. Kids and Prizes
- git subproject commit xxxxxxxxxxxxxxxxxxxxx -dirty
- 仿ios版微信应用源代码
- CSS随笔1(CSS常用样式)
- 为什么range不是迭代器?range到底是什么类型?
- [CSS] css的background及多背景设置
- NLP里面的一些基本概念
- vue中根据当前时间进行排序
- Java - 18 Java Scanner 类
- Java设计模式(8)——策略模式
热门文章
- Linux防火墙之iptables常用扩展匹配条件(一)
- <;背包>;solution-CF118D_Caesar&#39;s Legions
- 实验14:VLAN间的路由
- BZOJ 3339 Rmq Problem(离线+线段树+mex函数)
- Codeforces 1050D Three Religions (dp+序列自动机)
- python机器学习——正则化
- Thingsboard源码安装部署
- 5.7.20 多实例——MGR部署实战
- Jenkins 插件使用国内镜像源-解决插件下载慢的问题
- 多线程笔记 - Master-Worker