12-CSS入门基础

来源：互联网发布：c语言a<<1 编辑：程序博客网时间：2024/05/14 01:34

认识CSS
HTML设计网页版面的不足
CSS的特点
CSS的排版样式
- 1 内联样式表
- 2 内部样式表
- 3 外部样式表
样式表层叠

1. 认识CSS

　　CSS是Cascading Style Sheets的缩写，中文翻译为层叠式样式表。CSS2 规范于1998 年02 月通过W3C 的审核与推荐。HTML,XHTML,XML等标记语言都可以使用CSS来制作排版样本。

2. HTML设计网页版面的不足

使用传统HTML控制标记来设计网页，在排版方面先天上就远不及层叠式样式表，因为HTML并非完全着眼于网页排版的功能上。而对于XHTML而言更是如此，因为XHTML有意将原先HTML中有关网页版面的标签和属性废弃不用，如<font>,<center>,color,background,bgcolor等。也就是说对于XHTML而言，其排版和显示功能比HTML更弱。所以，使用XHTML来设计网页更需要搭配CSS排版样本。

3. CSS的特点

HTML排版时的缺点
设置麻烦，修改麻烦，功能严重不足
CSS样式排版的优点
排版属性功能相对完整，排版文件可以独立存在，可以共用排版文件
CSS样式排版的分类
内联样式表，内部样式表，外部样式表
CSS排版专用标记 : <div>和<span>
<div>是块级元素，浏览器会在其前后显示折行，与CSS配合使用可对大的内容块设置样式属性，另一个常见的用途是文档布局。<span>是内联元素，可用作文本的容器，容器大小与文本相当，不会显示折行，与CSS配合使用可用于为部分文本设置样式属性。

4. CSS的排版样式

1. 内联样式表 :

格式：
<标记名称 style="属性1:属性值1;属性2:属性值2>...</标记名称>"
实例 :
<p style="text-align:center;color:red;font-size=20px">排版样式</p>

2. 内部样式表:

内部样式表中所有的样式定义必须在<style>...</style>之间，而<style>...</style>又必须在<head>...</head>之间。
内部样式表和外部样式表在功能上都可分为三种 :
- 标记定义型
- class定义型
- id定义型

(1). 标记定义型的格式

<head>    <style type="text/css">        标记名称{            属性1:属性值1;            属性2:属性值2        }        标记名称{            属性1:属性值1;            属性2:属性值2        }    </style></head><body>    <标记名称>...</标记名称></body>

(2). class定义型的格式

<head>    <style type="text/css">        .定义名称{            属性1:属性值1;            属性2:属性值2        }        .定义名称1,.定义名称2{            属性1:属性值1;            属性2:属性值2        }    </style></head><body>    <标记名称 class="定义名称">...</标记名称></body>

(3). id定义型的格式

<head>    <style type="text/css">        #定义名称{            属性1:属性值1;            属性2:属性值2        }        #定义名称1,#定义名称2{            属性1:属性值1;            属性2:属性值2        }    </style></head><body>    <标记名称 id="定义名称">...</标记名称></body>

3. 外部样式表:

外部样式表需要在后缀为.css的文件中定义样式，如

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

外部样式表可使用link链入，也可使用import导进到html文件中
在<head>...</head> 之间使用<link>,格式 :

    <head>        <link rel="stylesheet" type="text/css" href="URL"/>    </head>

在<style>...</style>之间使用import, 格式 :

    <head>        <style type="text/css">            @import "style.css"        </style>    </head>

5. 样式表层叠

规则一，CSS规定范围越小优先级越高，因此内联（或称行内）样式表、内部样式表和外部样式表排版定义的优先级由高到低为
行内 > id定义型 > class定义型 > 标记定义型
规则二，相同优先级，靠后的样式会覆盖前面的样式。
所有的样式会根据以上两条规则层叠于一个新的虚拟样式表中。

0 0