HTML Berstruktur: Panduan Pemula untuk Mempraktikkan DIV+CSS Web Page Layout_CSS/HTML

Adakah anda sedang belajar susun atur CSS? Adakah anda masih tidak dapat menguasai reka letak CSS tulen sepenuhnya? Biasanya terdapat dua situasi yang menghalang pembelajaran anda:

Kemungkinan pertama ialah anda masih belum memahami prinsip halaman pemprosesan CSS. Sebelum anda mempertimbangkan prestasi keseluruhan halaman anda, anda harus terlebih dahulu mempertimbangkan semantik dan struktur kandungan, dan kemudian menambah CSS untuk semantik dan struktur. Artikel ini akan memberitahu anda cara menstruktur HTML.

Sebab lain ialah anda bingung untuk atribut lapisan pembentangan yang sangat biasa (seperti padding sel, hspace, align="left", dll.) dan tidak tahu penyataan CSS untuk menukarnya menjadi . Sebaik sahaja anda telah menyelesaikan masalah pertama dan mengetahui cara menstrukturkan HTML anda, saya akan memberikan anda senarai yang memperincikan CSS yang akan digunakan untuk menggantikan atribut persembahan asal.

HTML Berstruktur

Apabila kami mula-mula belajar membuat halaman web, kami sentiasa mempertimbangkan cara mereka bentuknya dahulu, dengan mengambil kira gambar, fon, warna dan pelan reka letak. Kemudian kami menggunakan Photoshop atau Fireworks untuk melukisnya dan memotongnya menjadi gambar kecil. Akhir sekali, edit HTML untuk memulihkan semua reka bentuk ke halaman.

Jika anda mahu halaman HTML anda disusun dengan CSS (mesra CSS), anda perlu kembali dan mulakan semula Jangan fikir tentang "penampilan" dahulu, tetapi fikirkan dahulu semantik dan struktur kandungan halaman anda.

Penampilan bukanlah perkara yang paling penting. Halaman HTML yang tersusun dengan baik boleh dipersembahkan dalam sebarang penampilan, dan CSS Zen Garden adalah contoh biasa. CSS Zen Garden membantu kami akhirnya menyedari kuasa CSS.

HTML bukan sahaja untuk dibaca pada skrin komputer. Imej anda yang direka dengan teliti dalam Photoshop mungkin tidak dipaparkan pada PDA, telefon mudah alih dan pembaca skrin. Tetapi halaman HTML yang tersusun dengan baik boleh dipaparkan di mana-mana dan pada mana-mana peranti rangkaian melalui definisi CSS yang berbeza.

Mula berfikir

Pertama sekali, anda mesti belajar apa itu "struktur", yang sesetengah penulis juga panggil "semantik". Maksud istilah ini ialah anda perlu menganalisis blok kandungan anda dan tujuan setiap kandungan disediakan, dan kemudian membina struktur HTML yang sepadan berdasarkan tujuan kandungan ini.

Jika anda duduk dan menganalisis dengan teliti serta merancang struktur halaman anda, anda mungkin akan mendapat beberapa bahagian seperti ini:

Logo dan nama tapak

Kandungan halaman utama

Navigasi tapak (menu utama)

Submenu

Kotak carian

Kawasan berfungsi (seperti troli beli-belah, daftar keluar)

Footer ( Hak cipta dan pernyataan undang-undang yang berkaitan)

Kami biasanya menggunakan elemen DIV untuk mentakrifkan struktur ini, serupa dengan ini:

＜div id="header"＞＜/div＞

＜div id="content"＞＜/div＞

＜div id="globalnav"＞＜/div＞

＜div id="subnav"＞＜ ＜ >
＜div id="search"＞＜/div＞

＜div id="shop"＞＜/div＞

＜div id="footer"＞＜ / div＞

Ini bukan reka letak, tetapi struktur. Ini ialah perihalan semantik blok kandungan. Apabila anda memahami struktur anda, anda boleh menambah ID yang sepadan pada DIV. Sebarang blok kandungan boleh terkandung dalam bekas DIV, dan DIV lain boleh bersarang di dalamnya. Blok kandungan boleh mengandungi sebarang elemen HTML --- tajuk, perenggan, imej, jadual, senarai, dsb.

Mengikut perkara di atas, anda sudah tahu cara menstruktur HTML, dan kini anda boleh menentukan reka letak dan gaya. Setiap blok kandungan boleh diletakkan di mana-mana pada halaman, dan warna, fon, sempadan, latar belakang, sifat penjajaran, dll. blok boleh ditentukan.

Menggunakan pemilih ialah perkara yang menarik

Nama id ialah cara mengawal blok kandungan tertentu Dengan membungkus blok kandungan ini dengan DIV dan menambah id unik, anda boleh Gunakan Pemilih CSS untuk mentakrifkan dengan tepat rupa setiap elemen halaman, termasuk tajuk, senarai, gambar, pautan, perenggan, dsb. Contohnya, jika anda menulis peraturan CSS untuk #header, peraturan itu boleh berbeza sepenuhnya daripada peraturan imej dalam #content.

Contoh lain ialah: anda boleh menentukan gaya pautan dalam blok kandungan yang berbeza melalui peraturan yang berbeza. Sesuatu seperti ini: #globalnav a:link atau #subnav a:link atau #content a:link. Anda juga boleh menentukan gaya yang berbeza untuk elemen yang sama dalam blok kandungan yang berbeza. Contohnya, tentukan gaya p dalam #content dan #footer masing-masing melalui #content p dan #footer p. Dari segi struktur, halaman anda terdiri daripada gambar, pautan, senarai, perenggan, dll. Elemen ini sendiri tidak menjejaskan peranti rangkaian yang dipaparkan (PDA, telefon mudah alih atau TV Internet Ia boleh ditakrifkan sebagai Sebarang penampilan prestasi).

Halaman HTML yang disusun dengan teliti adalah sangat mudah dan setiap elemen digunakan untuk tujuan struktur. Apabila anda ingin mengesot perenggan, anda tidak perlu menggunakan teg sekatan. Hanya gunakan teg p dan tambah peraturan margin CSS pada p untuk mencapai tujuan lekukan. p ialah teg berstruktur dan margin ialah atribut persembahan Yang pertama adalah milik HTML dan yang kedua adalah milik CSS. (Ini ialah pemisahan struktur dan pembentangan.)

Hampir tiada teg atribut pembentangan dalam halaman HTML yang tersusun dengan baik. Kod ini sangat bersih dan ringkas.예를 들어 원본 코드

는 이제 HTML로만 을 작성할 수 있으며 성능을 제어하는 ​​모든 항목은 HTML로 작성됩니다. CSS 구조화된 HTML에서 테이블은 테이블이지 다른 것이 아닙니다(예: 레이아웃 및 위치 지정에 사용됨).

직접 구조를 연습해 보세요

위는 가장 기본적인 구조일 뿐이며, 실제 적용에서는 필요에 따라 콘텐츠 블록을 조정할 수 있습니다. DIV는 종종 중첩되어 있는 것을 볼 수 있습니다. 구조는

목록

다른 목록/ul>

중첩된 div 요소를 사용하면 성능을 제어하기 위해 더 많은 CSS 규칙을 정의할 수 있습니다. 예: #navcontainer에 목록을 오른쪽 중앙에 배치하는 규칙을 제공하고, #globalnav에 목록을 왼쪽 중앙에 배치하는 규칙을 제공하고, #subnav 목록에 완전히 다른 동작을 제공할 수 있습니다.

기존 메소드를 CSS로 대체

다음 목록은 기존 메소드를 CSS로 대체하는 데 도움이 됩니다.

HTML 속성 및 해당 CSS 메소드

HTML 속성

CSS 메소드 설명

align="left"

align="right" float: left;

float: right CSS를 사용하여 모든 요소를 ​​플로팅합니다. : 그림, 단락, div, 제목, 표, 목록 등

float 속성을 사용하는 경우 부동 요소의 너비를 정의해야 합니다.

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; CSS를 사용하면 본문 요소뿐만 아니라 모든 요소에 여백을 설정할 수 있습니다. 상단, 오른쪽, 하단 및 왼쪽 요소의 여백 값을 각각 지정할 수 있습니다.

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:방문: #339; :hover: #999;

a:active: #00f;

HTML에서는 링크의 색상이 본문의 속성 값으로 정의됩니다. 링크 스타일은 페이지 전체에서 동일합니다. CSS 선택기를 사용하면 페이지의 여러 부분에서 링크 스타일이 다를 수 있습니다.

bgcolor="#FFFFFF" background-color: #fff; CSS에서는 본문 및 테이블 요소뿐만 아니라 모든 요소에 대해 배경색을 정의할 수 있습니다.

bordercolor="#FFFFFF" border-color: #fff; 모든 요소는 테두리(boeder)를 설정할 수 있으며 위쪽, 오른쪽, 아래쪽 및 왼쪽을 각각 정의할 수 있습니다.

border="3 "cellspacing="3" border-width: 3px; CSS를 사용하면 표의 테두리를 통일된 스타일로 정의하거나 상단, 오른쪽, 하단 및 왼쪽 테두리의 색상, 크기, 스타일을 별도로 정의할 수 있습니다.

table, td 또는 th 선택기를 사용할 수 있습니다.

경계 없는 효과를 설정해야 하는 경우 CSS 정의를 사용할 수 있습니다. border-collapse: Collapse;





clear:왼쪽; 🎜 >clear: right;

clear: 둘 다

많은 2열 또는 3열 레이아웃은 위치 지정을 위해 float 속성을 사용합니다. 플로팅 레이어에 배경색이나 배경 이미지를 정의하는 경우

cellpadding="3"

vspace="3"

hspace를 사용할 수 있습니다. = "3" padding: 3px; CSS를 사용하면 모든 요소에 padding 속성을 설정할 수 있습니다. 마찬가지로 padding도 위쪽, 오른쪽, 아래쪽 및 왼쪽으로 설정할 수 있습니다. 패딩은 투명합니다.

align="center" text-align: center;

margin-right: auto; margin-left: auto;

텍스트 정렬은 텍스트에만 적용됩니다. 🎜>
div, p와 같은 블록 레벨은 margin-right: auto; 및 margin-left: auto;를 통해 수평으로 중앙에 배치될 수 있습니다.

몇 가지 아쉬운 기술 및 작업 환경

브라우저의 불완전한 CSS 지원으로 인해 CSS가 기존 방법과 동일한 효과를 얻을 수 있도록 일부 기술(해킹)을 채택하거나 환경(해결 방법)을 구축해야 하는 경우가 있습니다. 예를 들어, 블록 수준 요소는 수평 센터링 기술, 상자 모델 버그 기술 등을 사용해야 하는 경우가 있습니다. 이러한 모든 기술은 Molly Holzschlag의 기사 "통합 웹 디자인: 장기 CSS 해킹 관리 전략"에 자세히 설명되어 있습니다.