CSS学习（一）——入门基础

来源：互联网发布：python yield什么意思编辑：程序博客网时间：2024/06/05 19:03

CSS的英文全名是Cascading Style Sheets，中文即层叠式排版样式。XHTML, HTML和XML文件都可以应用CSS来美化网页的设计。

使用传统HTML控制标记来设计网页，在先天上就无法与排版样本来做比较，因为HTML并非完全着眼在网页排版的功能上。CSS样式排版具有排版属性功能完整，排版文件可以独立存在、可以共用排版文件等特点。CSS排版的分类：行内排版样式、内嵌式排版样式、链接式排版样式（导入式排版样式）：

行内排版样式

格式：<标记名称 style="属性1:属性1";属性2:属性2;>...</标记名称>

例如：<p style="font-size:20pt;color:red;text-align:center;font-weight:bold; background:green">排版样式</p>

<span></span>这个标记区域内限制的文字可以根据需要进行排版修改（更改颜色、文字背景、字体等等），它不具备换行功能。

<div></div>这个标记会让文字后面自动换行，同时修改的效果会占据整行。

内嵌式排版样式

该排版样式中所有的样式定义都必须在<style type="text/css">...</style>之间，而<style>...</style>又必须在<head>...</head>之间。

从功能上看可以分为三种：1. 标记定义型 2. class定义型 3. id定义型

标记定义型

<head>

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

</style>

</head>

<body>

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

</body>

class定义型

<head>

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

</style>

</head>

<body>

<标记名称 class="定义名称">...</标记名称>

</body>

或

<head>

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

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

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

</style>

</head>

<body>

<标记名称 class="定义名称1">...</标记名称>

<标记名称 class="定义名称2">...</标记名称>

</body>

id定义型（与class定义型类似）

<head>

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

</style>

</head>

<body>

<标记名称 id="定义名称">...</标记名称>

</body>

优先级：行内定义型>id>class>标记定义型

外部排版样式

要达到只写一个css样式，供多个网页使用，则需要采用外部排版样式。

第一步，新建一个全部放css的文件，内容例如：

p{color:red;font-size:50px;font_weight:bold}

将文件命名为xxx.css

第二步，编写网页时，在<head>...</head>之间使用<link />（注意，这是个单标记）

或

在编写网页时，在<head>...</head>之间使用import

@import"xxx.css"

</style>

0 0