• 认识CSS
  • 传统HTML设计网页版面的缺点
  • CSS的特点
  • 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>

div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离

两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。

详解：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：

测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>

2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：

测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</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入门基础的更多相关文章

  1. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  2. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  3. 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS

    整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...

  4. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  5. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  6. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  7. 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  8. HTML中CSS入门基础

    HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中, ...

  9. CSS入门基础学习一

    一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...

随机推荐

  1. java web第一个Servlet程序

    Servlet 简介 . Java Servlet是和平台无关的服务器端组件,它运行在Serlet容器中.Servlet容器负责Servlet和客户的通信以及调用Servlet的方法,Servlet和 ...

  2. net.sf.json日期类型格式化输出

    net.sf.json 日期类型格式化输出 Date, Timestamp ; 编写工具类 package cn.jorcen.commons.util; import java.text.DateF ...

  3. SecureCRT 中文乱码问题

    1.修改远程linux机器的配置 [root@rhel ~]#vi /etc/sysconfig/i18n 把LANG改成支持UTF-8的字符集 如: LANG=”zh_CN.UTF-8″ 或者是 L ...

  4. Struts2 interceptor使用经验小结

    1. interceptor 调用Spring容器中的bean 在interceptor中常有需要调用Spring Bean的需要,其实很简单和Struts2的Action一样配置即可. Spring ...

  5. [状压dp]HDOJ3182 Hamburger Magi

    题意 大致是: 有n个汉堡 m块钱  (n<=15) 然后分别给n个汉堡的能量 再分别给n个汉堡所需的花费 然后下面n行 第i行有x个汉堡要在i汉堡之前吃 然后给出这x个汉堡的编号 输出 能获得 ...

  6. Linux回收站[改写rm防止误删文件无法恢复]

    http://blog.csdn.net/wklken/article/details/6898590

  7. linux中fork（）函数详解（原创！！实例讲解）

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同, ...

  8. 使用Visual Studio进行单元测试

    一.使用Visual Studio进行单元测试的几个建议 1.先写单元测试(依我愚见,应该是接口先行,如果有的话) -> 测试失败 -> 以最小的改动(即编写实际代码)使测试通过(而在VS ...

  9. C++ CGI Helloword

    一 什么是CGI CGI(The Common Gateway Interface):通用网关接口,定义web服务器和客户脚本进行信息交互的一系列标准.  二 web浏览器 为了了解CGI的概念,让我 ...

  10. 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...