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 ...
随机推荐
- JAVA线程池的实际运用
线程池的创建 我们可以通过ThreadPoolExecutor来创建一个线程池 /** * @param corePoolSize 线程池基本大小,核心线程池大小,活动线程小于corePoolSize ...
- 透彻讲解，Java线程的6种状态及切换
Java中线程的状态分为6种. 1. 初始(NEW):新创建了一个线程对象,但还没有调用start()方法.2. 运行(RUNNABLE):Java线程中将就绪(ready)和运行中(running) ...
- 虚拟机安装ssh，关闭防火墙
输入命令:sudo apt-get install openssh-server 安装ssh 安装完成后,开启服务 sudo /etc/init.d/ssh start 之后使用如下命令 ...
- HBase数据持久化之HRegion.flushcache即CF持久化
我们从HRegion.flushcache开始分析.由于这个过程还是比较复杂的,因此,在这一节,我们不会分析的太过详细,只是单单的介绍一下其大体流程,待大家有了整体的把握之后,我们将在下一节详细介绍其 ...
- [原创]K8uac bypassUAC(Win7/Wi8/Win10) 过46款杀软影响所有Windows版本
[原创]K8uac bypassUAC(Win7/Wi8/Win10) 过46款杀软影响所有Windows版本 工具: k8uac编译: VC++ 作者:K8哥哥发布: 2018/11/25 1:30 ...
- 引入CSS的三种方式
虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...
- JS获取链接中域名等信息
以访问百度为例子http://pan.baidu.com/share/qrcode?w=150&h=150&url=http%3A%2F%2F172.16.1.96%2FWeb%2FG ...
- npm包实现发布正式和测试版
npm publish的時候 怎麽發測試版和正式版本呢? 通常我們一般情況下 直接 npm publish 提交自己的開發包后,在項目中 npm install @packageName 是下載下來剛 ...
- WCF 的学习过程
之前没有接触过WCF,这两天学习中.把遇到的问题和解决办法记下来. 遇到的问题: (1).HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理 ...
- 深度解读阿里巴巴云原生镜像分发系统 Dragonfly
Dragonfly 是一个由阿里巴巴开源的云原生镜像分发系统,主要解决以 Kubernetes 为核心的分布式应用编排系统的镜像分发难题.随着企业数字化大潮的席卷,行业应用纷纷朝微服务架构演进,并通过 ...