Jadual Kandungan
样式表
嵌入式样式表
内联样式表
示例

外部样式表
选择器
ID选择器
类选择器
标签选择器
总结
Rumah hujung hadapan web html tutorial DIV+CSS学习小结_html/css_WEB-ITnose

DIV+CSS学习小结_html/css_WEB-ITnose

Jun 24, 2016 am 11:44 AM

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统的通过表格布局定位的方式不同,它可以实现网页页面与表现想分离。

因为在牛腩还有JS都有大量的接触到CSS,到现在再学习DIV+CSS的时候,就不再感觉陌生了,都是共鸣~~

无论怎么设置CSS样式,都少不了选择器样式表

样式表

样式表最主要的有三种。分别为嵌入式样式表,外部样式表和内联样式表。

嵌入式样式表

         在html的

标签之间添加样式表。

示例:

	<title>示例</title>	<style type="”text/css”">		#color{			font-color:red;}</style>
Salin selepas log masuk

内联样式表

         直接在html标签中插入样式

示例:

<h1 id="示例-h">示例<h1></h1>
</h1>
Salin selepas log masuk

外部样式表

         建立一个新的CSS文件,通过link语句插入到HTML代码中。

示例:

<link type="”text/css”" rel="”stylesheet”" href="%E2%80%9Dcss/%E7%A4%BA%E4%BE%8B.css%E2%80%9D/">
Salin selepas log masuk

选择器

选择器最常用的也是三种,分别是ID选择器,类选择器和标签选择器。

ID选择器

         在HTML中,可以给元素添加ID,来确定这个元素的位置,同时,这个ID必须是唯一的,不可重复的。可以通过ID来给标签设置样式

示例:

         给p标签设置一个叫做color的id。

<p id="”color”">示例 </p>
Salin selepas log masuk

通过css的id选择器来给

标签中的内容改变颜色。

#color{	font-color:red;}
Salin selepas log masuk

类选择器

         在HTML中,可以给标签添加class属性,通过class来给标签设置属性。

示例:

         给p标签设置一个叫做color的class。

<p class="”color”">示例 </p>
Salin selepas log masuk

通过css的类选择器来给

标签中的内容改变颜色。

.color{	font-color:red;}
Salin selepas log masuk

标签选择器

         根据HTML标签来给标签中的内容改变样式。

示例:

         改变

标签的文字的颜色

	<p>示例</p>
Salin selepas log masuk

通过标签选择器改变

标签中文字的颜色

P{	color:red;}
Salin selepas log masuk

总结

选择器和样式表是CSS中最基本的内容。掌握了这些,在学习其他东西的时候回更加的得心应手。

在视频学习的时候,还学习到了CSS与JavaScript、CSS与XML和CSS与Ajax的综合运用,但掌握的不是很好,还需要多多练习,来进一步加深理解。

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.

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 ...

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 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