CSS-定义样式表
1.HTML标记定义
p{属性:属性值;属性1:属性1}
<p>...</p>
注：p可以叫做选择器，定义那个标记中的内容执行其中的样式。一个选择器可以控制若干个样式属性，他们之间需要用英文的分号隔开，最后一个可以不加分号。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style type="text/css">
p{
color:red;
font-size:30px
}
</style> </head>
<body>
<p>昨天是七夕节！</p>
</body>
</html>
显示效果：
2.Class定义
.p{属性:属性值;属性1:属性值1}
<p class="p">...</p>
注：class定义是以"."开始
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
.p{
background-color: red;
color:blue;
font-size:40px;
}
</style>
</head>
<body>
<p class="p">昨天是七夕节！</p>
</body>
</html>
显示效果：
与HTML标记定义联用：
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
.p{
background-color: red;
color:blue;
font-size:40px;
}
.p p{
color:green;
font-size:50px;
}
</style>
</head>
<body>
<div class="p">
<p>昨天是七夕节！</p>
昨天是七夕节！昨天是七夕节！
</div>
</body>
</html>
显示效果：
3.ID定义
#p{属性:属性值;属性1:属性值1}
<p id="p">...</p>
注：ID定义是以"#"开始的。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
</head>
<style>
#p{
background-color: green;
color:red;
font-size:40px;
}
</style>
<body>
<p id="p">昨天是七夕节！</p>
</body>
</html>
显示效果：
ID定义与HTML标记定义联用
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
</head>
<style>
#ppp{
background-color: green;
color:red;
font-size:40px;
}
#ppp p{
background-color: white;
color: blue;
font-size: 50px;
}
</style>
<body>
<div id="ppp">
<p>昨天是七夕节！</p>
昨天是七夕节！昨天是七夕节！
</div>
</body>
</html>
显示效果：
4.优先级问题
（1）ID > Class > HTML
（2）同级时选择离元素最近的一个
#p{color:red}
#p{color:#f60}
执行颜色为#f60的
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
#ppp{color:blue}
.p{color: green;}
div{color: red;}
</style>
</head>
<body>
<div id="ppp" class="p">
昨天是七夕节！昨天是七夕节！
</div>
</body>
</html>
显示效果：
5.组合选择器（同时控制多个元素）
h1,h2,h3{font-size:14px;color:red;}
注：选择器组合可以使用“,”隔开
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
h1,h2,h3,h4,p,.div{color:red}
</style>
</head>
<body>
<div>
<h1>昨天是七夕节！</h1>
<h2>昨天是七夕节！</h2>
<h3>昨天是七夕节！</h3>
<h4>昨天是七夕节！</h4>
</div>
<p>
昨天是七夕节！
</p>
<div class="div">
昨天是七夕节！
</div>
</body>
</html>
显示效果：
6.伪元素选择器
（1）a:link 正常链接的样式
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
a:link{color:red}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
（2）a:hover 鼠标放上去的样式
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
a:hover{color:green}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
（3）a:active 选择链接时的样式
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
a:active{color:blue}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
（4）a:visited 已经访问过的链接的样式
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>定义CSS样式（CSS选择器）</title>
<meta charset="UTF-8">
<style>
a:visited{color:yellow}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
CSS-定义样式表的更多相关文章
- CSS的样式表基本概念
一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <h ...
- 图解 CSS: 理解样式表的逻辑（转载）
原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html 样式表可以是外部的.内联的或嵌入的; 链接外部样式文件一般是:<lin ...
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- css 层叠式样式表（2）
一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...
- css 05-CSS样式表的继承性和层叠性
05-CSS样式表的继承性和层叠性 #本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 ...
- css 03-CSS样式表和选择器
03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...
- CSS篇-样式表、选择器、权重、伪类
CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...
- CSS重置样式表
网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...
- CSS级联样式表-css选择器
CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...
- 学习HTML 第三节.接近正题：HTML样式-CSS级联样式表
CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...
随机推荐
- Day5前端学习之路——盒模型和浮动
盒子模型 浮动float 一.盒子模型 (1)content内容区 width和height是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其他框,也可以使用min-width.max- ...
- WebSocket协议分析
WebSocket协议分析 1.什么是WebSocket协议 WebScoket协议是基于TCP协议建立的全双工通信,所谓的全双工通信就是双向同时通信. 2.WebSocket协议优点 WebSock ...
- 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp
(一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...
- electron 安装过程出现未成功地运行
问题 正文 产生问题得原因? 是因为之前安装了该程序,但是卸载的时候可能人为的直接删除了卸载程序. 这时候安装包会触发找到注册表中,该appid相同地址的卸载程序位置,然后进行调用,如果没有的话,只会 ...
- PHP0026：PHP 博客项目开发3
- AI Web 2.0
kali: 192.168.0.103 目标机:192.168.0.105 0X01 扫描端口和目录 a)扫描端口 开启了80和22端口 b)扫描目录 看到两个敏感字样的目录 尝试访问/webadmi ...
- MySQL Execute Plan--Index Merge特性
Index Merge特性 在MySQL 5.5之前版本中,查询或子查询被限制在一个表只能使用一个索引(回表查询除外). 假设表TB1001上C1和C2列分别有单列索引,如对下面查询: SELECT ...
- [菜b]Isaunoya 的一些学习笔记…[保持咕咕咕]
fread/fwrite标记永久化 分块 树链剖分 莫比乌斯反演 斜率优化/单调队列 kruskal重构树 回滚莫队 可持久化线段树/trie树 Link-Cut-Tree dsu on tree F ...
- Mac视频下载转换器MovieSherlock使用教程
MovieSherlock for Mac是什么软件?moviesherlock for Mac是运行在Mac平台上一款专业的视频下载转换工具,能快速的下载和转换YouTube电影,并保持原视频的质量 ...
- asp.net mvc 使用AuthorizeAttribute做授权验证
授权验证,比如登陆验证 1.自定义属性继承AuthorizeAttribute 2.重写OnAuthorization方法 3.通过AllowAnonymousAttribute特性处理无需授权的Ac ...