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" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...
随机推荐
- Webpack之(progressive web application) - PWA中的 Service Workers 是什么
学习文档:https://webpack.docschina.org/guides/progressive-web-application/ 参考文档:https://developers.googl ...
- vue路由--命名路由
有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...
- eclipse创建java和web工程
JAVA Eclipse→File→New→Project.. WEB 右键mvn项目→Properties src/main/webapp pom.xml <project xmlns=&qu ...
- java自学：从零基础到入门系列--java环境变量的配置JDK的下载安装图解
一.首先去官网下载 Java 语言的软件开发工具包–JDK,下载JDK8即可,下载地址为:https://www.oracle.com/technetwork/java/javase/download ...
- 为什么选择Spring Boot?
本文概述了各种Spring配置样式,并帮助你了解配置Spring应用程序的复杂性.抽丝剥茧 细说架构那些事——[优锐课] Spring是一个非常流行的基于Java的框架,用于构建Web和企业应用程序. ...
- U盘装系统/win to go制作笔记
//添加图片太麻烦了吧,我扔相册里了,需要自取吧. //U盘装系统 环境:win10戴尔灵越台式机 硬件:16G U盘,Windows电脑 软件:老毛桃启动装机工具,win10镜像1803版本 进入网 ...
- [SDOI] 仪仗队
SDOI仪仗队 序 迎面冷风袭来 我又该何去何从 哪里 是我的安居之处 正文 我们这个题有一个是很显然的想法,我们可以想到是跟 \(\gcd\) 有关,事实上没有任何分析的, ...
- 通过phpstorm管理svn的gui界面报错问题
mac通过phpstorm来gui管理svn时,提示Invalid VCS root mappings 原因是因为mac中的svn版本过高,phpstorm可以兼容的版本是svn 1.6 \ 1.7 ...
- C#中的异步编程--探索await与async关键字的奥妙之处，原来理解和使用异步编程可以这么简单
前言 await与async是C#5.0推出的新语法,关于await与async有很多文章讲解.但看完后有没有这样一种感觉,感觉这东西像是不错,但好像就是看不太懂,也不清楚该怎么使用.虽然偶有接触,但 ...
- Linux systemctl系统工具常用总结（详）
systemctl是一个系统自带的服务管理工具,可以管理系统的服务的,启动.停止.重启.自启.监视.也可以对脚本程序后台运行管理. 文章以nginx.service举例 基础命令: systemctl ...