CSS：CSS层叠样式表的概述
CSS层叠样式表：Cascading Style Sheets
介绍：
现代网页的设计原则是内容和样式分离，降低它们之间的直接相互依存关系，解耦性，同时，同样的内容，可以通过不同的CSS样式表现出来。
功能：
CSS负责处理标记语言(HTML、XHTML)的显示效果。HTML主要是告诉搜索引擎的内容，CSS主要负责内容的样式风格。
CSS非常强大，下面两个链接，有很多样式效果，可以点进去看看：
CSS的格式：
p{
background-color:red;
font-size:16px;
}
p: 选择器(影响了那些HTML的元素)
background-color、font-size：CSS属性
red、16px：CSS值
CSS的属性有哪些，点击下面的链接去看看，很全面：http://www.w3schools.com/cssref/default.asp
现在做一个演示测试，代码和效果图如下：
html代码：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" conent="Boyahongru">
<meta name="keywords" conent="kenjiao,edcucation,student,teacher">
<title>测试CSS层叠样式表的使用</title>
</head> <body>
<h2 >优美的诗词</h2> <h3>白海棠（红楼梦）</h3>
<p >
半卷湘帘半掩门，碾冰为土玉为盆。</br>
偷来梨蕊三分白，借得梅花一缕魂。</br>
月窟仙人缝缟袂，秋闺怨女试啼痕。</br>
娇羞默默同谁诉，倦倚西风夜已昏。
</p> <hr> <h3>七绝</h3>
<p >
黄昏雨落一池秋，晚来风向万古愁。</br>
不厌浮生唯是梦，缘求半世但无俦。</br>
一颦一笑一伤悲，一生痴迷一世醉。</br>
一磋一叹一轮回，一寸相思一寸灰。</br>
功名万里赋予谁，去年秋江水，醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</br>
往事难追战马肥，胡笳送君归，修道心事无人猜，青云羡慕鸟，尊前图一醉。
</p>
</body>
</html>
效果截图：
CSS的保存位置有三种方式：
方式一：放到HTML标记(Tag)的Style属性中
格式： <p style=“color:red;”> this is an example</p>
特点：每一次只能写在单一的元素里面,如果有很多元素，操作太复杂。在项目中，最不建议使用
html代码：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" conent="Boyahongru">
<meta name="keywords" conent="kenjiao,edcucation,student,teacher">
<title>测试CSS层叠样式表的使用</title>
</head> <body>
<h2 style="color:red;">优美的诗词</h2> <h3>白海棠（红楼梦）</h3>
<p style="color:blue;">
半卷湘帘半掩门，碾冰为土玉为盆。</br>
偷来梨蕊三分白，借得梅花一缕魂。</br>
月窟仙人缝缟袂，秋闺怨女试啼痕。</br>
娇羞默默同谁诉，倦倚西风夜已昏。
</p> <hr> <h3>七绝</h3>
<p style="color:blue;">
黄昏雨落一池秋，晚来风向万古愁。</br>
不厌浮生唯是梦，缘求半世但无俦。</br>
一颦一笑一伤悲，一生痴迷一世醉。</br>
一磋一叹一轮回，一寸相思一寸灰。</br>
功名万里赋予谁，去年秋江水，醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</br>
往事难追战马肥，胡笳送君归，修道心事无人猜，青云羡慕鸟，尊前图一醉。
</p>
</body>
</html>
效果截图：
方式二：放到HTML文件的头部中
格式：<head>
<style>
p{
color:red;
}
</style>
</head>
特点：可以将所有相同元素的内容一次性设置好，操作快速简单
html代码：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" conent="Boyahongru">
<meta name="keywords" conent="kenjiao,edcucation,student,teacher">
<title>测试CSS层叠样式表的使用</title> <STYLE TYPE="text/css">
p{
color:blue;
font-size: 20px;
}
h2{
color:red;
background: green;
}
</STYLE>
</head> <body>
<h2>优美的诗词</h2> <h3>白海棠（红楼梦）</h3>
<p>
半卷湘帘半掩门，碾冰为土玉为盆。</br>
偷来梨蕊三分白，借得梅花一缕魂。</br>
月窟仙人缝缟袂，秋闺怨女试啼痕。</br>
娇羞默默同谁诉，倦倚西风夜已昏。
</p> <hr> <h3>七绝</h3>
<p>
黄昏雨落一池秋，晚来风向万古愁。</br>
不厌浮生唯是梦，缘求半世但无俦。</br>
一颦一笑一伤悲，一生痴迷一世醉。</br>
一磋一叹一轮回，一寸相思一寸灰。</br>
功名万里赋予谁，去年秋江水，醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</br>
往事难追战马肥，胡笳送君归，修道心事无人猜，青云羡慕鸟，尊前图一醉。
</p>
</body>
</html>
效果截图：
方式三：放到独立的CSS文件中
格式：
<head>
<link rel=“stylesheet” type=“text/css” herf=“demo.css”>
</head>
特点：可以将设置内容样式的所有操作放在另一个文件中，使用时只需要链入即可，便于开发。在项目中，极力推崇使用这种方式。
html代码：（html文件中）
html：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" conent="Boyahongru">
<meta name="keywords" conent="kenjiao,edcucation,student,teacher">
<title>测试CSS层叠样式表的使用</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body>
<h2>优美的诗词</h2> <h3>白海棠（红楼梦）</h3>
<p>
半卷湘帘半掩门，碾冰为土玉为盆。</br>
偷来梨蕊三分白，借得梅花一缕魂。</br>
月窟仙人缝缟袂，秋闺怨女试啼痕。</br>
娇羞默默同谁诉，倦倚西风夜已昏。
</p> <hr> <h3>七绝</h3>
<p>
黄昏雨落一池秋，晚来风向万古愁。</br>
不厌浮生唯是梦，缘求半世但无俦。</br>
一颦一笑一伤悲，一生痴迷一世醉。</br>
一磋一叹一轮回，一寸相思一寸灰。</br>
功名万里赋予谁，去年秋江水，醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</br>
往事难追战马肥，胡笳送君归，修道心事无人猜，青云羡慕鸟，尊前图一醉。
</p>
</body>
</html>
CSS代码：（新建的独立的CSS文件中）
p{
color:blue;
font-size: 20px;
}
h2{
color:red;
background: green;
}
效果截图：
CSS常用的三种选择器：
第一个：HTML Tag
p{
color:red;
}
<p>this is an example</p>
html代码：（html文件中）
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" conent="Boyahongru">
<meta name="keywords" conent="kenjiao,edcucation,student,teacher">
<title>测试CSS层叠样式表的使用</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body>
<h2>优美的诗词</h2> <h3>白海棠（红楼梦）</h3>
<p >
半卷湘帘半掩门，碾冰为土玉为盆。</br>
偷来梨蕊三分白，借得梅花一缕魂。</br>
月窟仙人缝缟袂，秋闺怨女试啼痕。</br>
娇羞默默同谁诉，倦倚西风夜已昏。
</p> <hr> <h3>七绝</h3>
<p >
黄昏雨落一池秋，晚来风向万古愁。</br>
不厌浮生唯是梦，缘求半世但无俦。</br>
一颦一笑一伤悲，一生痴迷一世醉。</br>
一磋一叹一轮回，一寸相思一寸灰。</br>
功名万里赋予谁，去年秋江水，醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</br>
往事难追战马肥，胡笳送君归，修道心事无人猜，青云羡慕鸟，尊前图一醉。
</p>
</body>
</html>
CSS代码：（新建的独立的CSS文件中）
p{
color:blue;
font-size: 20px;
}
h2{
color:red;
background: green;
}
效果截图：
第二个：id
#myid{
color:red;
}
<p id=“myid”>this is an example</p>
html代码：（html文件中）
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" conent="Boyahongru">
<meta name="keywords" conent="kenjiao,edcucation,student,teacher">
<title>测试CSS层叠样式表的使用</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body>
<h2>优美的诗词</h2> <h3>白海棠（红楼梦）</h3>
<p id="myid1">
半卷湘帘半掩门，碾冰为土玉为盆。</br>
偷来梨蕊三分白，借得梅花一缕魂。</br>
月窟仙人缝缟袂，秋闺怨女试啼痕。</br>
娇羞默默同谁诉，倦倚西风夜已昏。
</p> <hr> <h3>七绝</h3>
<p id="myid2">
黄昏雨落一池秋，晚来风向万古愁。</br>
不厌浮生唯是梦，缘求半世但无俦。</br>
一颦一笑一伤悲，一生痴迷一世醉。</br>
一磋一叹一轮回，一寸相思一寸灰。</br>
功名万里赋予谁，去年秋江水，醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</br>
往事难追战马肥，胡笳送君归，修道心事无人猜，青云羡慕鸟，尊前图一醉。
</p>
</body>
</html>
CSS代码：（新建的独立的CSS文件中）
#myid1{
color:blue;
font-size: 20px;
}
#myid2{
color:green;
font-size: 20px;
}
h2{
color:red;
background: green;
}
效果截图：
第三个：class
.myclass{
color:red;
}
<p class=“myclass”>this is an example</p>
html代码：（html文件中）
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" conent="Boyahongru">
<meta name="keywords" conent="kenjiao,edcucation,student,teacher">
<title>测试CSS层叠样式表的使用</title> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body>
<h2>优美的诗词</h2> <h3>白海棠（红楼梦）</h3>
<p class="myclass">
半卷湘帘半掩门，碾冰为土玉为盆。</br>
偷来梨蕊三分白，借得梅花一缕魂。</br>
月窟仙人缝缟袂，秋闺怨女试啼痕。</br>
娇羞默默同谁诉，倦倚西风夜已昏。
</p> <hr> <h3>七绝</h3>
<p class="myclass">
黄昏雨落一池秋，晚来风向万古愁。</br>
不厌浮生唯是梦，缘求半世但无俦。</br>
一颦一笑一伤悲，一生痴迷一世醉。</br>
一磋一叹一轮回，一寸相思一寸灰。</br>
功名万里赋予谁，去年秋江水，醉卧不识今夜愁，哀筝惹泪落，谁劝我千杯？</br>
往事难追战马肥，胡笳送君归，修道心事无人猜，青云羡慕鸟，尊前图一醉。
</p>
</body>
</html>
CSS代码：（新建的独立的CSS文件中）
.myclass{
color:green;
font-size: 20px;
}
h2{
color:red;
background: green;
}
效果截图：
三个选择器的区别：
Tag:对某一个标记属性的内容进行设置,例如对<h2>...</h2>
id: 由于id的唯一性，所以只对单一的id标记属性的内容进行设置,例如对<h2 id="myid">...</h2>
class:可以对所有class标记的属性的内容进行设置，例如对<h2 class="myclass">...<h2>、<h3 class="myclass">...</h3>等
CSS：CSS层叠样式表的概述的更多相关文章
- CSS（层叠样式表）基础知识
CSS 指层叠样式表 (Cascading Style Sheets).样式定义怎样显示 HTML 元素.它通常存储在样式表中,把样式加入到 HTML 4.0 中,解决内容与表现分离的问题. 当同一 ...
- Bulma CSS - CSS类
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...
- css（一）-- 概述以及引入方式
概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...
- 了解HTML CSS布局(层叠样式表)
CSS全称为"层叠样式表(Cascading Style Sheets)", 它主要是用于定义HTML内容在浏览器内显示的样式, 比如文字, 颜色, 视觉上的静态效果, 布局等等. ...
- CSS （层叠样式表）
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
- css（层叠样式表）属性
CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多 ...
- CSS：层叠样式表—position
CSS position属性用于指定一个元素在文档中的定位方式.top,right,bottom和left属性则决定了该元素的最终位置. 常见语法 static | relative | absolu ...
- 前端之CSS——CSS选择器
一.CSS介绍 为什么需要CSS(CSS的作用)? 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改 ...
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
随机推荐
- Java学习（构造方法、this关键字、super应用）
构 造 方 法 定义:对象创建时使用的方法,即在new一个新对象时,对应构造方法,直接对属性赋值. 语句格式: 修饰符(public 等) 构造方法名(必须跟当前类名一样,否则报错)(参数列表) ...
- Python全栈开发之4、内置函数、文件操作和递归
转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5476760.html 一.内置函数 Python的内置函数有许多,下面的这张图全部列举出来了,然后我会把一些常用的拿 ...
- PHP原理之变量
作者: Laruence( ) 本文地址: http://www.laruence.com/2008/08/22/412.html 转载请注明出处 或许你知道,或许你不知道,PHP是一个弱类型,动 ...
- JS 汉字与Unicode码的相互转化
js文件中,有些变量的值可能会含有汉字,画面引入js以后,有可能会因为字符集的原因,把里面的汉字都变成乱码.后来发现网上的一些js里会把变量中的汉字都表示成”\u“开头的16进制编码,这样应该可以解决 ...
- shell动画
在印象中,好像终端就是黑白界面,加扁平输出.是不是很乏味?其实现在 Linux/Unix 系统中带的终端模拟器是支持动画和彩色输出的.下面,一起来看看字符界面下的动画魅力! 1 定点输出 1.1 回车 ...
- 洛谷——P3376 【模板】网络最大流
题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行 ...
- Codeforces Round #436 (Div. 2) E. Fire（dp 记录路径）
E. Fire time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...
- NetBIOS主机名扫描工具nbtscan
NetBIOS主机名扫描工具nbtscan NetBIOS主机名是NetBIOS协议为主机分配的名称.通过NetBIOS主机名,系统可以利用WINS服务.广播及Lmhost文件等多种模式将NetB ...
- C++ STL 全排列函数详解
一.概念 从n个不同元素中任取m(m≤n)个元素,按照一定的顺序排列起来,叫做从n个不同元素中取出m个元素的一个排列.当m=n时所有的排列情况叫全排列.如果这组数有n个,那么全排列数为n!个. 比如a ...
- [BZOJ2429][HAOI2006]聪明的猴子(最小生成树)
性质:最小生成树上任意两点间的最大边权,一定是这两点间所有路径的最大边权中最小的.证明显然. #include<cstdio> #include<cstring> #inclu ...