12-CSS入门基础

最新推荐文章于 2023-03-16 06:00:00 发布

skyandairchild

最新推荐文章于 2023-03-16 06:00:00 发布

阅读量258

点赞数

分类专栏： html 文章标签： w3c html css cascading

本文链接：https://blog.csdn.net/skyandairchild/article/details/52755377

版权

html 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

认识CSS
HTML设计网页版面的不足
CSS的特点
CSS的排版样式
样式表层叠

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定义型 > 标记定义型
规则二，相同优先级，靠后的样式会覆盖前面的样式。
所有的样式会根据以上两条规则层叠于一个新的虚拟样式表中。

skyandairchild

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-CSS入门基础

CSS入门基础，行内样式表，内部样式表，外部样式表，样式表层叠
复制链接

扫一扫

专栏目录