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" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...
随机推荐
- 珠峰-babel
#### babel 翻译的require为了给node使用么.浏览器可以使用么.#### amd, cmd的规范.和实现原理.#### babel的三个核心包,什么使用使用.#### babel的几 ...
- 学会这一招，小白也能使用数据可视化BI软件创建医院数据实时展示大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以医院数据实时展示大屏为例 ...
- 零基础Python应该怎样学习呢？（附视频教程）
Python应该怎样学习呢? 阶段一:适合自己的学习方式 对于零基础的初学者来说,最迷茫的是不知道怎样开始学习?那这里小编建议可以采用视频+书籍的方式进行学习.看视频学习可以让你迅速掌握编程的基础语法 ...
- 有关版本控制--SVN
什么是版本控制? 这个之前有记录过相关的内容 版本管理就是管理更新的历史记录, 它给我们提供了一些在软件开发过程中必不可少的功能,例如: 记录一款软件添加或更改源代码的过程 回滚到特定阶段,恢复误删除 ...
- Centos7没有IP地址，查看网络状态显示No suitable device found for this connection (devint match))
今天打开虚拟机,使用 ifconfig 命令时,没有显示出 IP 地址 (更好的阅读体验可访问 这里 ) 使用 systemctl status network 命令查看网络状态 显示没有合适的网络装 ...
- linux中网络命令
write 解释 命令名称:write 命令所在路径:/usr/bin/write 执行权限:所有用户 功能描述:给用户发信息,以Ctrl+D保存结束 语法 write <用户名> 示例 ...
- P1058 立体图
链接:Miku ------------------------------ 蒟蒻在线%lmk,ljx,lpy,yyq大佬们 ------------------------------ Good N ...
- vue中keepalive怎么理解？---vue中文社区
vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...
- C#设计模式学习笔记：(4)建造者模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7614630.html,记录一下学习过程以备后续查用. 一.引言 在现实生活中,我们经常会遇到一些构成比较复杂 ...
- 正则表达式之match方法
一直以来,对正则表达式都是非常的恐惧的,以至于学习接口自动化时,到了正则,我就想放弃,于是乎,我将近有一个多月没有继续学习.某天睡醒,阳光正好,摊在床上冥想,我不能被眼前的坎挡住了我前进的路呀,说干就 ...