Rumah hujung hadapan web html tutorial CSS样式表介绍_html/css_WEB-ITnose

CSS样式表介绍_html/css_WEB-ITnose

Jun 24, 2016 pm 12:34 PM

 

一、    CSS中的样式选择

1)内样式(内联样式)

style=””;

2)内嵌样式

3)外部样式

4)导入样式

@import url();

注:优先级行内 > 链接 > 内嵌 > 导入(就近原则)

二、CSS中的常用选择器

1)标签选择器

直接使用标签名来定义一个标签属性。整个文档内所有该标签将都被定义一个相同的属性。

2)类型选择器

使用.ClassName来定义一个类型的属性。当标签元素内包含class=””属性时,则具有其定义的样式。

3)ID选择器

使用#IdName来定义一个ID元素的属性。当标签元素内的ID与其定义的ID相同时,该标签则具有其定义的属性。

注:优先级 ID>类型>标签

3、CSS中的特殊选择器(在特殊情况下使用)

子对象选择器

语法:E1 > E2 。表示为选择所有作为对象E1下面的所有子对象。

属性选择器1

语法:E1[attr]。表示拥有[attr]属性的所有E1对象。

属性选择器2:

语法:E1[attr=value]。选择拥有[attr]属性的属性值等于value的E1对象

4、CSS中的常用属性

字体 Font

1) font属性,对字体进行整体控制。(可一次性设置多种属性)

 

2) color属性,对字体的颜色进行修改和控制。

3) font-family,对文本的字体进行修改。

4)font-size,定义文本的字体大小。

5)font-stretch:定义修改文本字体的加粗(normal:正常,narrower:加细,wider:加粗)

6)text-decoration:设置文本的修饰,装饰内容。

 

文本 text

1)vertical-align:设置或检索对象内容的垂直对其方式。

2)text-align:设置或检索对象中文本的对齐方式。

背景 background

1)background:对背景整体属性进行控制,设置其复合属性。

2)background-color:设置对象的背景颜色。

3)background-image:设置对象的背景图片

4)background-repeat:设置对象的背景图片的排列方式。

定位 Postioning

1)position:设置对象的定位方式。

2)top bottom left right:设置对象定位距离像素。

边框 Borders

1)border:对边框的整体属性进行控制,设置其复合属性

 

2)border-color:设置对象边框的颜色。

3)border-style:设置对象边框的样式。

4)border-width:设置对象边框的宽。

列表 lists

list-style:对列表的整体属性进行控制,设置其复合属性

 

布局 Layout

1)float:该属性的值指出了对象是否及如何浮动。

2)clear*:不允许对象浮动。both:不允许两边有对象浮动。left/right:不允许左边/右边有对象浮动。none:无浮动值。

3)display:设置或检索对象是否及如何显示。

边距 Margin/Padding

Margin:设置对象的外边距

Padding:设置对象的内边距

 

5、伪选择器

常用的伪选择器

a:link 设置对a未被访问前的样式属性。

a:hover    设置对象在其鼠标悬停时的样式属性。

a:active   设置对象在被激活时的样式表属性。

a:visited  设置a对象在其链接已被访问过的属性。

a:focue    设置对象成为焦点时的样式表属性。

 

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras 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.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles