对CSS知识的简单介绍
1、CSS定义
CSS 指层叠样式表 (Cascading Style Sheets)，是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
2、为何使用CSS
网页是由HTML标签组成的，那么这些标签会根据浏览器的默认方式进行排版与样式的渲染，如果想要更改这些默认的样式，推荐用CSS，因为这样不仅实现了内容与表现分离的问题，而且更易于维护。
3、CSS语法
CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }其中每条声明由一个属性和一个值组成。
selector {property: value}下面这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}这张图形象的表示了上面代码的结构
CSS对空格和大小写都不敏感，也就是说大小写均可，是否包含空格不会影响 CSS 在浏览器中的工作效果
/* 属性为大小，值为小写，并且冒号后面有多个空格 */
.box {COLOR: blue;
}/* 建议写法 */.box {color: blue;
}上面的两种写法在浏览器中显示的效果是一样的。
4、CSS注释
与HTML语言一样，CSS也同样存在着注释
4.1、单行注释
/* 这是表示单行的注释 */
注意：注释不能嵌套，例如下面的写法都是错误的
/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */
4.2、多行注释
/* * 这是表示多行的注释 * 注释内容1 * 注释内容2 */
5、引入方式
5.1、行内式
行内式是在标签的style属性中设定CSS样式。
<div style="..."></div>
5.2、嵌入式
嵌入式是将CSS样式集中写在网页的
标签的标签对中<head><meta charset="UTF-8"><title>嵌入式</title>...<style type="text/css">...在这里写CSS样式</style></head>
5.3、外联式
将CSS样式写在一个独立的文件中，然后通过link标签引入CSS样式文件
<head><meta charset="UTF-8"><title>外联式</title>...<link rel="stylesheet" href="outer.css?1.1.11" /></head>
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>
注意：导入样式的书写必须在所有的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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1673
14
1429
52
1333
25
1278
29
1257
24
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
