DIVCSS 第一章 CSS 入门基础

小秋同学 03-26 20:42:25 网站教程
摘要: 一、认识CSSCSS 的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS2 规范也于1998 年02 月通过W3C 的审核与推荐,所以CSS 并不是专为XHTML 所设计的,CSS 还可以被其他标记语言拿摘要: 一、认识CSSCSS 的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS2 规范也于1998 年02 月通过W3C 的审核与推荐,所以CSS 并不是专为XHTML 所设计的,CSS 还可以被其他标记语言拿

一、认识CSS

CSS 的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS2 规范也于1998 年02 月通过W3C 的审核与推荐,所以CSS 并不是专为XHTML 所设计的,CSS 还可以被其他标记语言拿来制作排版样本,如HTML,XML 文件都可以应用CSS,来美化网页的设计,大家如果学会CSS,在HTML,XHTML,XML 文件中都可以使用。

二、传统HTML设计网页版面的缺点

使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML 而言更是如此,因为XHTML 有意将原先HTML 中有关网页版面的标记或属性遗弃不用,如<font>,<center>,color,background,bgcolor 等等,所以对XHTML 文件而言,其排版与显示的功能比HTML 文件更弱,所以使用XHTML 来设计网页更需要搭配CSS 排版样本。

三、CSS的特点

1、HTML 排版时的缺点:

设置麻烦,修改麻烦,功能严重不足。

2、CSS 样式排版的优点:

排版属性功能完整,排版文件可以独立存在,可以共用排版文件

3、CSS 样式排版的分类:

内行排版样式,内嵌式排版样式,链接式排版

四、 CSS的排版样式

1、行内排版样式:

格式:<标记名称style=”属性1:属性值1;属性2:属性值2”>…</标记名称>

例:

  1. <p style= ”font-size:20pt;color:red;text-align:center”>排版样式</p>

复制代码

排版专用标记:<div>与<span>

这两个标签都是用来设置涵盖一个区块为主;区块就是表示一行以上的数据;如果
没有一样,则<span> 与</span>该数据显示前后都不会跳行。

2、内嵌式排版样本:

内嵌式排版中所有的样式定义都必须在<style>..</style> 之间,而<style>..</style>又必须在<head>..</head>之间。

与其功能,又可以分为三种:

1. 标记定义型

2. class 定义型

3. id 定义型

标记定义型格式:

  1. <head>

  2. <style type=”text/css”>

  3. 标记名称{属性1:属性值1;属性2:属性值2;}

  4. 标记名称{属性1:属性值2;属性2:属性值2;}

  5. </style>

  6. </head>

  7. <body>

  8. <标记名称>…</标记名称>

  9. </body>

复制代码

class 定义型格式:

  1. <head>

  2. <style type=”text/css”>

  3. .定义名称{属性1:属性值1;属性2:属性值2;}

  4. .定义名称1,.定义名称2{属性1:属性值1;属性2:属性值2;}

  5. </style>

  6. </head>

  7. <body>

  8. <标记名称class=”定义名称”>…</标记名称>

  9. </body>

复制代码

id 定义型格式:

  1. <head>

  2. <style>

  3. #定义名称{属性1:属性值1;属性2:属性值2;}

  4. #定义名称1,#定义名称2{属性1:属性值1;属性2:属性值2;}

  5. </style>

  6. </head>

  7. <body>

  8. <标记名称id=”定义名称”>…</标记名称>

  9. </body>

复制代码

“行内”和”内嵌式”排版定义的优先级:

CSS 规定,范围越小,优先级越高。

由小到大排列:

1. 行内

2. class 和id 定义型

3. 标记定义行

id 的优先级高于class 级:

3、外部排版样式定义:

独立的样式排版:

标记名称{属性1:属性值1;属性2:属性值2;}
.定义名称{属性1:属性值1;属性2:属性值2;}

在<head>…</head>之间使用<link>

格式:

  1. <head>

  2. <link rel=”stylesheet” type=”text/css” href=URL />

  3. </head>

复制代码

在<head>…</head>之间使用import
格式:

  1. <head>

  2. <style type="text/css">

  3. @import "style.css"

  4. </style>

  5. </head>

复制代码



文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/514.html发布于 03-26 20:42:25
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~