CSS层叠样式表：Cascading Style Sheets

介绍：

　　现代网页的设计原则是内容和样式分离，降低它们之间的直接相互依存关系，解耦性，同时，同样的内容，可以通过不同的CSS样式表现出来。

功能：

　　CSS负责处理标记语言(HTML、XHTML)的显示效果。HTML主要是告诉搜索引擎的内容，CSS主要负责内容的样式风格。

　　CSS非常强大，下面两个链接，有很多样式效果，可以点进去看看：

　　http://www.csszengarden.com

http://tjrus.com/iphone

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层叠样式表的概述的更多相关文章

  1. CSS（层叠样式表）基础知识

     CSS 指层叠样式表 (Cascading Style Sheets).样式定义怎样显示 HTML 元素.它通常存储在样式表中,把样式加入到 HTML 4.0 中,解决内容与表现分离的问题. 当同一 ...

  2. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  3. css（一）-- 概述以及引入方式

    概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  4. 了解HTML CSS布局(层叠样式表)

    CSS全称为"层叠样式表(Cascading Style Sheets)", 它主要是用于定义HTML内容在浏览器内显示的样式, 比如文字, 颜色, 视觉上的静态效果, 布局等等. ...

  5. CSS （层叠样式表）

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...

  6. css（层叠样式表）属性

    CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多 ...

  7. CSS：层叠样式表—position

    CSS position属性用于指定一个元素在文档中的定位方式.top,right,bottom和left属性则决定了该元素的最终位置. 常见语法 static | relative | absolu ...

  8. 前端之CSS——CSS选择器

    一.CSS介绍 为什么需要CSS(CSS的作用)? 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改 ...

  9. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. Hadoop案例（一）之日志清洗

    日志清洗案例 一. 简单解析版 1)需求 去除日志中字段长度小于等于11的日志. 2)输入数据 /Sep/::: +] "-" "Mozilla/4.0 (compati ...

  2. 开发 ASP.NET vNext 初步总结（使用Visual Studio 2015 Preview ）

    新特性: vNext又称MVC 6.0,不再需要依赖System.Web,占用的内存大大减少(从前无论是多么简单的一个请求,System.Web本身就要占用31KB内存). 可以self-host模式 ...

  3. LoadRunner 函数大全之中文解释

    LoadRunner 函数大全之中文解释 // sapgui_table_set_column_selected 模拟用户 // 单击表中的列标题. int sapgui_table_set_colu ...

  4. 长沙理工大学第十二届ACM大赛-重现赛 G - 跑路ing

    题目描述 vigoss18 辞职成功终于逃出了公司,但是没过太久,公司就发现vigoss18 的所作所为,于是派人来把他抓 回去. vigoss18 必须一直跑路,躲避公司的围捕.可以抽象的看成一个有 ...

  5. UVA12995 Farey Sequence [欧拉函数，欧拉筛]

    洛谷传送门 Farey Sequence (格式太难调,题面就不放了) 分析: 实际上求分数个数就是个幌子,观察可以得到,所求的就是$\sum^n_{i=2}\phi (i)$,所以直接欧拉筛+前缀和 ...

  6. latex常用命令

    首行不缩进:在顶格的段落前面加上 \noindent 增加空格:\vspace{长度}:精确增加垂直距离,\hspace{长度} 与 \addvspace{长度}:增加高度长度的垂直空间 在公式的上. ...

  7. UVALive 6907 Body Building

    题目链接:https://vjudge.net/problem/UVALive-6907 题意: 给出一张图,判断这张图中有多少个哑铃,哑铃判断的条件是,对于一个连通图:如果找到一条边连接这两个点的个 ...

  8. 【BZOJ 4027】 4027: [HEOI2015]兔子与樱花 （贪心）

    4027: [HEOI2015]兔子与樱花 Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号 ...

  9. codevs 1214 线段覆盖

    1214 线段覆盖 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold   题目描述 Description 给定x轴上的N(0<N<100)条线段,每个线段 ...

  10. 整数求和 Exercise07_21

    import java.util.Scanner; public class Exercise07_21 { /** * @param 冰樱梦 * 时间:2018年12月 * 题目:整数求和 */ p ...