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 中 file-loader 和 url-loader 的区别
如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用u ...
- 14.git的安装使用
目录 一.版本控制器 二.git 简介 git与svn比较 git的工作流程 版本库间的通信 git分支管理 三.git使用 流程(核心总结) 安装 基础命令 将已有的文件夹 - 初始化为git仓库 ...
- js能力测评——查找元素的位置
查找元素的位置 题目描述: 找出元素 item 在给定数组 arr 中的位置 输出描述: 如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1 示例1 输入 [ 1, 2, 3, 4 ] ...
- 会话技术中的Cookie与session
关于会话技术 会话:一次会话中包含多次请求和响应. 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 功能:在一次会话的范围内的多次请求间,共享数据 方式: 客户端会话技术:C ...
- opencv —— minEnclosingCircle、fitEllipse 寻找包裹轮廓的最小圆、点集拟合椭圆
寻找包裹轮廓的最小圆:minEnclosingCircle 函数 返回圆应满足:① 轮廓上的点均在圆形空间内.② 没有面积更小的满足条件的圆. void minEnclosingCircle(Inpu ...
- [Python之路] bisect模块
bisect模块 bisect是Python提供的二分查找模块 源码如下: """Bisection algorithms.""" def ...
- nuget打包上传
准备工作 下载nuget.exe,以及gui推送编辑工具 Nuget Package Explorer (可选) 设置nuget环境变量. 流程 完成项目 cmd控制台cd到项目目录下(项目目录不是解 ...
- SDI011 读卡器自动发送00A4选择指令 解决方法
如标题,SDI读卡器会自动发送 004A的应用选择指令 解决方法: 是Certificate Propagation 服务 弄的, 关闭就好了
- Java Web 笔记(1)
JavaWeb 学习笔记,狂神说java,链接:https://www.bilibili.com/video/av68833391 Java Web 1.基本概念 1.1.前言 web开发: web, ...
- 对于搭建网站中出现“You don't have permission to access this resource.”错误提示的解决思路
我是用的是树莓派搭载了ubuntu系统 配置php+apache的网站环境,但在登陆网站进行网站初始化设置时出现错误提示,其大意是没有访问权限,上网搜索了一系列相关教程,都说明对apache2.con ...