DIVCSS 第一章 CSS 入门基础

原标题：DIVCSS 第一章 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”>…</标记名称>

例:

<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 定义型

标记定义型格式:

<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 级：

3、外部排版样式定义:

独立的样式排版:

标记名称{属性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>

复制代码

版权所属：热蚂蚁_一个不错的学习网站
本文地址：https://www.remayi.com/study/458.html
版权声明：原创文章，转载时必须以链接形式注明原始出处及本声明。本站文章如没有特殊说明，均采集网上收集，若要转载请务必注明出处，尊重他人劳动成果共创和谐网络环境。声明：某些文章来源于网络，所采集的到信息本站只为传递信息和分享，不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站客服删除！

标签：CSS 入门学习CSS 教程基础技巧样式前端美化