对CSS知识的简单介绍-html tutorial-php.cn

对CSS知识的简单介绍

零下一度

Lepaskan： 2017-06-26 15:43:48

asal

1289 orang telah melayarinya

1、CSS定义

CSS 指层叠样式表 (Cascading Style Sheets)，是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

2、为何使用CSS

网页是由HTML标签组成的，那么这些标签会根据浏览器的默认方式进行排版与样式的渲染，如果想要更改这些默认的样式，推荐用CSS，因为这样不仅实现了内容与表现分离的问题，而且更易于维护。

3、CSS语法

CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

Salin selepas log masuk

其中每条声明由一个属性和一个值组成。

selector {property: value}

Salin selepas log masuk

下面这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

Salin selepas log masuk

这张图形象的表示了上面代码的结构

CSS对空格和大小写都不敏感，也就是说大小写均可，是否包含空格不会影响 CSS 在浏览器中的工作效果

/* 属性为大小，值为小写，并且冒号后面有多个空格 */
 .box {COLOR:   blue;
}/* 建议写法 */.box {color: blue;
}

Salin selepas log masuk

上面的两种写法在浏览器中显示的效果是一样的。

4、CSS注释

与HTML语言一样，CSS也同样存在着注释

4.1、单行注释

/* 这是表示单行的注释 */

Salin selepas log masuk

注意：注释不能嵌套，例如下面的写法都是错误的

/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */

Salin selepas log masuk

4.2、多行注释

/*
 * 这是表示多行的注释
 * 注释内容1
 * 注释内容2 */

Salin selepas log masuk

5、引入方式

5.1、行内式

行内式是在标签的style属性中设定CSS样式。

<div style="..."></div>

Salin selepas log masuk

5.2、嵌入式

嵌入式是将CSS样式集中写在网页的标签的标签对中

<head><meta charset="UTF-8"><title>嵌入式</title>...<style type="text/css">...在这里写CSS样式</style></head>

Salin selepas log masuk

5.3、外联式

将CSS样式写在一个独立的文件中，然后通过link标签引入CSS样式文件

<head><meta charset="UTF-8"><title>外联式</title>...<link rel="stylesheet" href="outer.css?1.1.11" /></head>

Salin selepas log masuk

type属性：只有一个选项，“text/css"，指定当前为css文本文件
rel：指定当前HTML文件与CSS文件的关系是样式表
href：指定外联样式表的路径

5.4、导入式（不推荐使用）

将CSS样式写在一个独立的文件中，然后通过@import标签引入CSS样式文件

<head><meta charset="UTF-8"><title>导入式</title><style type="text/css">@import url(css/outer.css);/*其他css样式*/</style></head>

Salin selepas log masuk

注意：导入样式的书写必须在所有的css规则书写之前，否则失效，导入外部样式表与链入外部样式表类似，相当于在文件中直接使用，这会占用html文件的空间，故不推荐使用该方法，而且有些浏览器会最后加载导入的样式，导致刚开始打开网页的时候，没有任何的样式，到加载完毕之后才会导入样式，用户体验不好

导入外部样式表的另一种用途是，如果一个文件需要引用很多外部样式表，可以把这些要引用的样式表放在一个文件中，然后需要引用的文件则只需引用一个文件即可，如
import.css内容如下
@import “a.css”
@import “b.css”
@import “c.css”

除了以上4种导入的样式之外，这里需要知道所有的标签都有一个默认样式，我们称为浏览器样式，或者默认样式。也就是不加任何样式，HTML标签在浏览器中的显示的样子。

6、建议与注意点

一些建议

为了以后的对代码的优化，建议在每个属性值的后面加一个分号，如：p { font-style: normal; }
某些html属性有自定默认的CSS属性值，如：
为了兼容浏览器，建议将所有的元素的CSS属性值重置，如：
———>h1 { font-size: 12px; }
如果想要用某种特殊字体的话，又担心用户的上面没有该字体，则可以用图片代替
中英文字体的设置顺序，先设置英文的字体，再设置中文的字体，如：p { "Courier New", "宋体" }，建议字体用双引号

样式应用顺序

行内样式优先级最高
针对相同的样式属性，不同的样式属性将以合并的方式呈现
相同样式并且相同属性，呈现的方式由在中的顺序决定，后面会覆盖前面定义过的属性
!important 指定样式规则应用最优先

Atas ialah kandungan terperinci 对CSS知识的简单介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

对CSS知识的简单介绍

1、CSS定义

2、为何使用CSS

3、CSS语法

4、CSS注释

4.1、单行注释

4.2、多行注释

5、引入方式

5.1、行内式

5.2、嵌入式

5.3、外联式

5.4、导入式（不推荐使用）

6、建议与注意点