CSS3系列 01 基础知识

最新推荐文章于 2024-01-18 18:04:31 发布

云崖先生

最新推荐文章于 2024-01-18 18:04:31 发布

阅读量123

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_43422005/article/details/118926129

版权

CSS3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS介绍

基本介绍

CSS全称为Cascading Style Sheet，译为层叠样式表。

它能够为HTML进行样式美化以及页面布局。

如果将单纯的HTML所构成的页面当做一副素描画，那么CSS的作用就是为这幅素描画进行上色处理。

当然CSS也能对HTML文档进行布局，让其不再使用默认的文档流排列方式，而是利用CSS让元素进行自由的组合、排列。

值得一提的是在早期没有出现CSS时，对HTML布局我们大多会使用table标签来进行，但是CSS诞生后就不会那么做了，使用CSS布局更加的方便。

关于CSS的学习可分为三大块：

如何选择标签元素
如何操纵标签元素
如何对页面进行布局

版本更迭

CSS1

1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS。他们在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。

1996年[11]12月发表的CSS1的要求有：[13]

支持字体的大小、字形、强调
支持字的颜色、背景的颜色和其他元素
支持文章特征如字母、词和行之间的距离
支持文字的排列、图像、表格和其他元素
支持边缘、围框和其他关于排版的元素
支持id和class

CSS2-2.1

1998年[11]5月W3C发表了CSS2[14]，其中包括新的内容如：

绝对的、相对的和固定的定比特素、媒体型的概念、
双向文件和
一个新的字体。

CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。[15]

CSS3

CSS3标准已部分公布，但仍未全部制订完毕，还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展[16]。

CSS3的标志。

CSS3分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已经开始制订。[17]直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。[18]

CSS3里增加了不少功能，如：“border-radius”、“text-shadow”、“transform”以及“transition”。CSS3亦支持动画（animation）及立体（preserved-3d）。

部分属性（例如旋转类属性（如：transform），动画类属性，立体类属性），由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分。

CSS4

W3C于2011年9月29日开始了设计CSS4[19][20]。直至现时只有极少数的功能被部分网页浏览器支持，如使用在HTML而非SVG上的pointer-events[21]。

CSS4增加了一些更方便的选择器，并简化了一些现有选择器的用法。

如何使用CSS

行内式

直接在HTML标签元素中添加style属性并书写CSS代码的方式即为行内式。

行内式并不推荐使用，它对后期维护造成了一些很大的困惑，且代码复用性也较低：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span style="background-color: red;color:white;padding:5px;">HELLO WORLD</span>
</body>

</html>

渲染结果：

嵌入式

在head标签中内嵌style标签，并在style标签中书写CSS代码的方式被称为嵌入式。

嵌入式在调试代码时使用很方便，但是后期项目上线应该将CSS代码和HTML做好分离：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span:nth-child(1){
            background-color: red;
            color: white;
            padding: 5px;
            font-style: italic;
        }
    </style>
</head>

<body>
    <span>HELLO WORLD</span>
</body>

</html>

渲染结果：

链接式

在head标签中内嵌子标签link，利用link标签来链接一个已经书写好的CSS样式文件的方式被称为链接式。

链接式是实际生产中最常用的导入CSS样式的方式。

HTML文档：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <span>HELLO WORLD</span>
</body>

</html>

CSS文件：

span:nth-child(1){
    background-color: red;
    color: white;
    padding: 5px;
    font-style: italic;
}

渲染结果：

导入式

在head标签中内嵌子标签style，style标签中利用CSS所提供的语法@import url(“path”)来导入一个已经书写好的CSS样式文件的方式被称为导入式。

导入式的方式在整合CSS代码时比较常见，如下所示。

HTML文档：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url("./all_style.css");
    </style>
</head>

<body>
    <span>HELLO WORLD</span>
    <div>HELLO CSS</div>
</body>

</html>

整合的CSS文件，all_style.css：

@import url("./style1.css");
@import url("./style2.css");

单独的CSS文件，style1.css：

span:nth-child(1){
    background-color: red;
    color: white;
    padding: 5px;
    font-style: italic;
}

单独的CSS文件，style2.css：

div:nth-of-type(1){
    background-color: blue;
    color: white;
    padding: 5px;
    font-style: italic;
    margin-top: 5px;
}

渲染结果：

样式重置

所有的HTML都有一些自带的样式，比如body文档有边距并不是直接铺满整个屏幕的，ol、ul等默认样式都是黑色实心圆、a标签有下划线等。

在实际的项目开发中，我们应当将这些默认样式全部取消掉，因此有人专门做了一个CSS文件，名为CSS Rest即为CSS样式重置，在编写CSS代码之前，我们应当先导入这个文件：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

注释语法

CSS中若要添加注释，格式如下：

/* Comment */

它可以支持多行注释。

云崖先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3系列 01 基础知识

CSS介绍基本介绍CSS全称为Cascading Style Sheet，译为层叠样式表。它能够为HTML进行样式美化以及页面布局。如果将单纯的HTML所构成的页面当做一副素描画，那么CSS的作用就是为这幅素描画进行上色处理。当然CSS也能对HTML文档进行布局，让其不再使用默认的文档流排列方式，而是利用CSS让元素进行自由的组合、排列。值得一提的是在早期没有出现CSS时，对HTML布局我们大多会使用table标签来进行，但是CSS诞生后就不会那么做了，使用CSS布局更加的方便。关于CSS的学
复制链接

扫一扫