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>

View Code

效果截图：

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>

View Code

效果截图：

方式二：放到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>

View Code

效果截图：

方式三：放到独立的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>

View Code

CSS代码：（新建的独立的CSS文件中）

p{color:blue;font-size: 20px;
}
h2{color:red;background: green;
}

View Code

效果截图：

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>

View Code

CSS代码：（新建的独立的CSS文件中）

p{color:blue;font-size: 20px;
}h2{color:red;background: green;
}

View Code

效果截图：

第二个：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>

View Code

CSS代码：（新建的独立的CSS文件中）

#myid1{color:blue;font-size: 20px;
}#myid2{color:green;font-size: 20px;
}h2{color:red;background: green;
}

View Code

效果截图：

第三个：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>

View Code

CSS代码：（新建的独立的CSS文件中）

.myclass{color:green;font-size: 20px;
}h2{color:red;background: green;
}

View Code

效果截图：

三个选择器的区别：

Tag:对某一个标记属性的内容进行设置,例如对<h2>...</h2>

id: 由于id的唯一性，所以只对单一的id标记属性的内容进行设置,例如对<h2 id="myid">...</h2>

class:可以对所有class标记的属性的内容进行设置，例如对<h2 class="myclass">...<h2>、<h3 class="myclass">...</h3>等

转载于:https://www.cnblogs.com/XYQ-208910/p/5806918.html

CSS：CSS层叠样式表的概述相关推荐

  1. CSS 指层叠样式表 (Cascading Style Sheets) 和选择器

    CSS 指层叠样式表 (Cascading Style Sheets) 内联样式(行内样式) 在开始标记中通过style属性(attribute)来设置元素的样式.注意,这里的 property 指的 ...

  2. 001：CSS：层叠样式表

    CSS:层叠样式表 主要内容 CSS介绍 DIV和SPAN CSS引入的几种方式 选择器 CSS中常用属性 盒子模型 学习目标 知识点 要求 DIV和SPAN 掌握 CSS引入的几种方式 掌握 选择器 ...

  3. css基础 层叠样式表 选择器

    CSS css: 层叠样式表 语法: 选择器{属性:属性值:属性:属性值:} css的三种引入方式 a. 行内样式:<p style="color:red">描述内容& ...

  4. HTML + CSS 宝典 第一节 概述

    课程概述 HTML & CSS   到底是什么  有什么用 他们是 计算机语言 语言  是 沟通的工具, 人和人沟通的 语言:自然语言 人和计算机  沟通的工具: 计算机语言 网页    =  ...

  5. option样式美化 css,CSS select样式优化

    下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. 请选择您所在的城市 请选择您所在的城市 中山市 太原市 广州市 CSS样式 .sel_wrap{ height ...

  6. CSS——CSS基础（一篇就够用）

    CSS--CSS基础(一篇就够用) 一.CSS概述 1.什么是css 2.作用 3.css和html属性的使用原则 二.CSS语法规范 1.css的使用方式 ①行内样式,内联样式 ②内部样式 ③外部样 ...

  7. 什么是CSS CSS的工作原理

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

  8. html5公共样式css,css常用公共样式

    /*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...

  9. 两端文字对齐css,css两端对齐怎么设置，css中文本的对齐有哪些

    css两端对齐怎么设置,css中文本的对齐有哪些 内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...

  10. [JS,CSS] - CSS圆角框组件

    来源:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html 下载地址:http://files.cnblogs.com/biny ...

最新文章

  1. 计算机维修实训室制度,计算机实训室规章制度
  2. 1088 三人行（20 分）
  3. Python基础教程：set集合的教程
  4. cad线加粗怎么设置_原来CAD的线条还可以这样加粗！还能修改初始单位！太实用了...
  5. mysql图片字符集_MySQL字符集介绍及配置
  6. 浅谈MVP与Model-View-ViewModel（MVVM）设计模式
  7. Spring框架面试工作必备锦囊 Java框架-Spring
  8. 【java】java 关键字: final详解
  9. 数据大屏可视化展示系统有什么作用
  10. Redis配置和持久性
  11. pano2vr导出html看不,【答疑】pano2vr6导出的全景，是空白的，打不开，？ - 视频教程线上学...
  12. android 13 WMS/AMS系统开发-窗口层级相关SurfaceFlinger图层创建 第三节
  13. 矩阵分解(java)
  14. 抛硬币吃苹果的概率问题
  15. MISC 入门隐写之用眼睛去倾听
  16. rnnlm源码分析(七)
  17. oracle建表备份数据,oracle建表备份脚本，如果update的数据不对，可以从WEB_RI_PLYEDR_CED_BAK找回...
  18. python，抖音视频下载
  19. JAVA笔记整理（1）：进制转换
  20. oracle+锁+杀不死,oracle kill -9 会话

热门文章

  1. 802.x 标准介绍
  2. 硬盘整数分区大小计算
  3. pid负反馈闭环控制程序
  4. 把本地文件和文件夹提到公司的gitlab上
  5. html仿游戏网站首页面
  6. SQL数据库-创建数据库
  7. AO采集用友oracle,AO2011系统如何采集用友GRP-R9导出的ASD文件
  8. MyBatis从删库到跑路
  9. 小红书是如何赚钱到翻车的？
  10. IBM刀片配置RHCS for centos6