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 ...
随机推荐
- Tomcat 的 server.xml 文件详解
文件内容解读 <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apac ...
- 移动端点击事件300ms延迟问题解决方案——fastclick.js
移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...
- Kali学习笔记12：服务扫描
关于什么是服务扫描不多介绍,通俗来看: 我已经扫描到目标机器某个端口开放,接下来我需要知道开放这个端口的是什么应用 情景: 我的Kali机器IP地址:192.168.22.130 我要扫描的Metas ...
- OAuth2简易实战（三）-JWT
1. OAuth2简易实战(三)-JWT 1.1. 与OAuth2授权码模式差别 授权服务器代码修改 @Configuration @EnableAuthorizationServer public ...
- Aseprite入门教程
因为最近在学cocos2d-x和vs搭配做手机游戏开发,想自己做一些素材,所以找到了这款软件,Aseprite v1.1.12.刚安装上时也是不懂该怎么操作,随着逐渐地摸索,对初始的使用有了一些了解. ...
- 树莓派GPIO口的使用
树莓派的优势在于Liunx操作系统加GPIO口,其中IO口时物联网组成中不可缺少的,高低电平的控制是很有必要的存在,再加有python的支持,玩转GPIO相对就容易多了 管脚编号 BCM: 编号侧重 ...
- 运行 Spring Boot 应用的 3 种方式
今天介绍 3 种运行 Spring Boot 应用的方式,看大家用过几种? 你所需具备的基础 什么是 Spring Boot? Spring Boot 核心配置文件详解 Spring Boot 开启的 ...
- ES6躬行记（1）——let和const
古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...
- 使用vue之directive设计列表加载更多
背景 之前写过一篇<纯JS实现加载更多(VUE框架)>,它的逻辑思路比较清晰易懂,而今天看了一天公司项目的部分功能代码,发现同事们写的加载更多的功能更加的有趣,而且易于封装到一个组件当中, ...
- CC2530微处理器接口开发技术——信号灯的设计与实现
本问主要介绍了CC2530处理器的通用输入/输出接口(GPIO),以及GPIO的位操作,理解GPIO的基本原理和功能,最后使用C语言驱动CC2530的GPIO实现对信号灯的控制. CC2530的GPI ...