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" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...
随机推荐
- Spring boot内置Tomcat的临时目录被删除导致文件上传不了-问题解析
目录 1.问题 2.1. 为什么需要使用这个/tmp/tomcat*? 2.2.那个 /tmp/tomcat* 目录为什么不存在? 三.解决办法 修改 springboot 配置,不要在/tmp 下创 ...
- Pythone是什么鬼？
认识 Python 人生苦短,我用 Python -- Life is short, you need Python 目标 Python 的起源 为什么要用 Python? Python 的特点 Py ...
- Spark之RDD本质
1.在一个完整的数据转换流程里往往涉及到多个具有衍生关系RDD,这些RDD其实是通过逻辑串联来利用装饰器模式层层包装扩展的的一堆对象,这些相邻RDD间必须有继承关系.并且比Java中的装饰器来的更彻底 ...
- MFC/QT 学习笔记（一）——认识windows基础库
MFC (微软基础类库),Windows系统平台做GUI尚且OK,但不支持跨平台. //Windows消息机制: //1.SDK与API Software Development Kit,为特定软件框 ...
- DataX的使用——大数据同步技术
准备工作: 1.视频教学http://113.31.104.47/portal/#/course/dashboard/b34d160db64624732ef152a1118af11a 2.DataX的 ...
- spring mvc5 的 配置文件 pom.xml
spring mvc5 的 配置文件 pom.xml <?xml version="1.0" encoding="UTF-8"?> <pro ...
- modbus 协议说明及常用格式
--- 说明: modbus协议一般适用于一个主设备访问多个从设备的硬件开发环境,类似于zigbee网络中的一个路由器多个协调器的一对多模型. modbus常用的寄存器类型为 3X 保持寄存器和 4X ...
- dir()和vars()的区别就是
------------恢复内容开始------------ dir()只打印属性(属性,属性......) 而vars()则打印属性与属性的值(属性:属性值......) >> a='a ...
- 一起学Vue之条件判断
在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,本文以一个简单的小例子简述v-if的常见用法,仅供学习分享使用,如有不足之处,还请指正. v-if 指令 ...
- node模块化开发基本知识学习笔记
传统非模块化开发缺点: 1.命名冲突 2.文件依赖 标准的模块化规范: 1.AMD-requirejs 2.CMD-seajs 服务器端模块化规范: 1.CommonJS-Node.js 模块化相关的 ...