13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS
2.传统 HTML 设计网页版面的缺点
3.CSS 的特点
4.CSS 的排版样式
13.1 认识CSS
CSS的英文全名是 Cascading Style Sheets,中文可翻译为串接式排版样式,并且 CSS2规范
也于 1998 年 02 月通过 W3C 的审核与推荐,所以 CSS 并不是专为 XHTML 所设计的,CSS 还
可以被其他标记语言拿来制作排版样本,如 HTML,XML 文件都可以应用 CSS,来美化网页的
设计,大家如果学会 CSS,在 HTML,XHTML,XML 文件中都可以使用.
13.2 传统 HTML 设计网页版面的缺点
使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML
并非完全着眼在网页排版的功能上,而这对 XHTML 而言更是如此,因为 XHTML 有意将原先
HTML 中有关网页版面的标记或属性遗弃不用,如<font>,<center>,color,background,bgcolor 等
等,所以对 XHTML 文件而言,其排版与显示的功能比 HTML 文件更弱,所以使用 XHTML 来
设计网页更需要搭配 CSS 排版样本.
13.3 CSS 的特点
HTML 排版时的缺点:
设置麻烦,修改麻烦,功能严重不足.
CSS 样式排版的优点:
排版属性功能完整,排版文件可以独立存在,可以共用排版文件
CSS 样式排版的分类:
内行排版样式,,内嵌式排版样式,,链接式排版
13.4 CSS 的排版样式
行内排版样式:
格式:<标记名称 style=”属性 1:属性值 1;属性 2:属性值 2”>…</标记名称>
例 :<p style= ”font-size:20pt;color:red;text-align:center”>排版样式</p>
排版专用标记:<div>与<span>
这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据 .如果
没有一样,则<span> 与</span>该数据显示前后都不会跳行.
内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又
必须在<head>..</head>之间.
与其功能,又可以分为三种,
1. 标记定义型
2. class 定义型
3. id 定义型
标记定义型格式:
<head>
<style type=”text/css”>
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
标记名称{属性 1:属性值 2;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
class 定义型格式:
<head>
<style type=”text/css”>
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
id 定义型格式:
<head>
<style>
#定义名称{属性 1:属性值 1;属性 2:属性值 2;}
#定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
“行内”和”内嵌式”排版定义的优先级:
CSS 规定,范围越小,优先级越高.
由小到大排列:
1. 行内
2. class 和 id 定义型
3. 标记定义行
id 的优先级高于 class 级.
外部排版样式定义:
独立的样式排版:
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
在<head>…</head>之间使用<link>
格式:
<head>
<link rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>之间使用 import
格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
CSS 行内排版内嵌式排版和外部排版样式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
color:red;
font-size: 40px;
}
.abc{color: green;}
#def{color: orange;}
</style>
</head> <body>
<p style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我是行内排版样式：格式:<标记名称 style=”属性 :属性值 ;属性 :属性值 ”>…</标记名称></p>
<div style="background: red">我DIV是一个区块,我要站一行</div><br/>
<span style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我SPAN是内联，我不占一行</span>
<!--排版专用标记:<div>与<span>
这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据 .如果
没有一样,则<span> 与</span>该数据显示前后都不会跳行.
内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又
必须在<head>..</head>之间.
与其功能,又可以分为三种,
. 标记定义型
. class 定义型
. id 定义型
-->
<p id="def">我是id 定义型,我是使用一次的，我对应的是 #号定义的内容</p>
<p class="abc">我是class 定义型，我可以多次使用，我对应的是.号定义的内容</p>
<p class="abc">我是class 定义型，我可以多次使用，我对应的是.号定义的内容2</p>
<p class="abc">我是class 定义型，我可以多次使用，我对应的是.号定义的内容3</p>
<Pre>“行内”和”内嵌式”排版定义的优先级:
CSS 规定,范围越小,优先级越高.
由小到大排列:
. 行内
. class 和 id 定义型
. 标记定义行
id 的优先级高于 class 级.</Pre>
<!--
外部排版样式定义:
独立的样式排版:
标记名称{属性 :属性值 ;属性 :属性值 ;}
.定义名称{属性 :属性值 ;属性 :属性值 ;}
在<head>…</head>之间使用<link>
格式:
<head>
<link rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>之间使用 import
格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
--> </body>
</html>
13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式的更多相关文章
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- CSS入门基础
认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- 学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...
- CSS 入门基础
一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...
- CSS入门基础学习一
一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...
- python 入门基础4 --数据类型及内置方法
今日目录: 零.解压赋值+for循环 一. 可变/不可变和有序/无序 二.基本数据类型及内置方法 1.整型 int 2.浮点型float 3.字符串类型 4.列表类型 三.后期补充内容 零.解压赋值+ ...
- css入门基础知识
一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...
随机推荐
- 高手养成计划基础篇-Linux第二季
高手养成计划基础篇-Linux第二季 本文来源:i春秋社区-分享你的技术,为安全加点温度 前言 前面我们学习了文件处理命令和文件搜索命令,简单的了解了一下Linux,但是仅仅了解这样还不行,遇 ...
- 服务器端PHP允许跨域
解决跨域的关键是设置 Access-Control-Allow-Origin. 例如:客户端的域名是 api.itbsl.com,而请求的域名是www.itbsl.com 如果直接使用ajax访问,会 ...
- 单元测试mock当前时间
在实际项目中很多地方用到DateTime.Now,这个时间是时时变化的.如果要进行单元测试对比预期结果时,这个时间无法预测,可以添加如下两个时间类 namespace Common.Helper { ...
- FileZilla 使用笔记
FileZilla 使用了三年了,一些功能其实还没有主动去发现,这次接着项目忙完的空闲时间整理一下 Tips,提高工作效率,方便以后查阅. 一.好用的功能 1.Site Manager - 站点管理器 ...
- 图片格式PGM缩写
PGM是Portable Gray Map的缩写.它是灰度图像格式中一种最简单的格式标准.另外两种与之相近的图片格式是PBM和PPM.它们分别相应着黑白图像和彩色图像. PGM的数据存放方式相比于JP ...
- dpkg: 处理软件包 qjackctl (--configure)时出错解决方法
第一步:备份 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk 第二步:新建 $ sudo mkdir /var/lib/dpkg/info 第三步 ...
- NotSupportedError Only secure origins are allowed
今天在写H5调用手机摄像头时提示一个错误信息如下: NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0Z ...
- 【spring】task 任务调度（定时任务）
1.定时任务的几种实现可以看这里:http://gong1208.iteye.com/blog/1773177 2.需要导入spring的jar包,可以参看之前的[spring]相关文章 3.这里使用 ...
- 必须要会的 50 个 React 面试题
翻译:疯狂的技术宅 原文:www.edureka.co/blog/interv… 如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你.本文是你学习和面试 React 所需知识的完美指南. ...
- linux定时任务执行没结果，手动执行有结果问题总结
今天写了个脚本手动执行有结果,但是放到系统定时任务跑却没结果,之前也遇到这种问题解决了没记录后面又懵逼了一次~~~ 如下图: 手动执行有结果 放到定时任务中每五分钟执行一次 解决方法: 脚本中加载系统 ...