DIVCSS 第一章 CSS 入门基础

[复制链接]
ARCHY明星会员实名认证 发表于 2012-8-19 23:01:08 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
一、认识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>
复制代码
如果第一次接触css,建议先看看:10天学会HTML教程




上一篇:10天学会HTML教程
下一篇:站长大讲堂 第四期 常见dz问题的排除方法及数据库常见错误的处理

大神点评25

 发表于 2012-8-19 23:40:21
学习了以后能用上 不管大家修改什么程序
clswang 发表于 2012-8-19 23:40:34 [DIVCSS] 显示全部楼层
果断学习中啊
www.huaguow.com www.hanfanba.com www.shuyangweb.com www.qiwenguan.cn cygs.org
非一般感觉明星会员实名认证 发表于 2012-8-19 23:42:41 [DIVCSS] 显示全部楼层
学习中
神马都是浮云... ...
分享 发表于 2012-10-11 13:58:15 [DIVCSS] 显示全部楼层
嘿嘿 真的很不错
www.jibang5.com
い王尒κろ゛ 发表于 2012-10-12 15:22:08 [DIVCSS] 显示全部楼层
不错 顶一个
http://www.861860.com
°。Sandy、 发表于 2012-10-19 15:32:05 [DIVCSS] 显示全部楼层
好好学习!  一步一步来!
愉悦的心情是一个人最好的打扮!我是段三弟,我为自已代言!
sky 发表于 2012-10-21 12:40:38 [DIVCSS] 显示全部楼层
真不错啊
tomp 发表于 2012-11-6 20:09:45 [DIVCSS] 显示全部楼层
写的不错 支持一下
链接平台wanlian5.com
discuzwdm 发表于 2012-11-22 16:32:53 [DIVCSS] 显示全部楼层
下定决心学会这门技术,如果遇到不懂的,还望版主多多支持
jingjinxin 发表于 2012-12-15 10:36:22 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
tlj123 发表于 2013-1-5 13:08:47 [DIVCSS] 显示全部楼层
不错,看看,好好学习呵
求实五行 发表于 2013-5-12 20:06:17 [DIVCSS] 显示全部楼层
不希望自己那么盲目,我要知道自己有没有必要学,也许我只是需要知道怎么用就可以了
hackshow 发表于 2013-10-8 10:32:35 [DIVCSS] 显示全部楼层
   教程很基础 很实用~      对于一些站长来说   这样的教程  真是雪中送炭啊~
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表