CSS Tutorial: Part 2

Di Bagian 1 kita membuat tata letak dua kolom klasik dengan navigasi sisi kiri menggunakan CSS dan hanya beberapa jenis tag HTML. Bagian 1 mempresentasikan kode untuk halaman dan menjelaskan tag HTML apa yang akan kita gunakan. Minggu ini saya akan melihat kode HTML aktual yang kita gunakan sejauh ini dan CSS.

Anda dapat memeriksa seperti apa tampilan halaman di sini: halaman contoh CSS

Halaman kita sejauh ini sangat sederhana. Seperti yang mungkin sudah Anda ketahui, semua konten (teks, gambar, Flash, dll.) Yang dilihat pengguna saat melihat halaman web ditandai dengan HTML di antara < body > dan < / body > tag.

Dalam hal ini kita memiliki ini:

<body> 
	<div id="navigation">
		<h2>The Main navigation</h2> 
	</div>
	<div id="centerDoc"> 
		<h1>The Main Heading</h1> 
		<p>
                </p> 
	</div> 
</body>

Dalam kode di atas kita melihat bahwa kita memiliki 2 bagian utama, masing-masing terlampir di dalam < div > tag. Seperti yang Anda pelajari di Bagian 1 tutorial ini, < div > tag dirancang untuk digunakan untuk membuat divisi ‘ ’ dalam dokumen atau, dengan kata lain, buat wadah.

kita telah membuat dua wadah seperti itu dan memberi mereka masing-masing ID unik:

<div id="navigation"> 
...
<div id="centerDoc">

Anda akan melihat bahwa seluruh konten halaman terkandung dalam salah satu dari dua divisi halaman utama ini. Jadi pertanyaan pertama adalah: apa aturan ID di halaman HTML dan mengapa kita menggunakannya dan menetapkannya ke elemen halaman seperti DIV?

1. Pertama-tama, Anda dapat menetapkan ID untuk tag HTML apa pun. Jadi saya bisa menetapkan ID untuk < p > tag juga.

2. ID dalam suatu halaman hanya boleh digunakan satu kali. Artinya, tidak ada dua elemen pada satu halaman yang harus memiliki ID yang sama. ID dimaksudkan untuk mengidentifikasi secara unik elemen halaman. Jadi, dalam contoh di atas kita tahu bahwa hanya ada satu elemen halaman dengan ID dari ‘ navigasi ’ dan hanya satu elemen halaman dengan ID dari ‘ centerDoc ’ ;. Saya suka menggunakan nama ID yang berbicara kepada Anda, cukup jelas apa yang terjadi di setiap divisi yang kita buat di atas.

3. ID pada elemen halaman HTML (tag) digunakan dalam CSS. kita dapat menargetkan ID dalam kode CSS kita untuk mengubah penampilan, posisi, dan bahkan perilaku elemen itu dengan merujuk ID elemen tersebut.

Di dalam < div > tag kita menggunakan tag tajuk (< h1 > dan < h2 >) untuk mengatur header. Saya menjelaskan apa artinya tag tajuk di Bagian 1 tutorial ini.

Dan akhirnya, saya memiliki beberapa < p > tag, dan tentu saja saya memasukkan teks yang membentuk halaman sederhana ini di antaranya.

Sekarang saya akan beralih ke file CSS kita yang dilampirkan ke halaman HTML. kita melampirkan dokumen CSS dengan baris kode ini di antara bagian < head > < / head > tag:

<head>
      <link href="myCSS.css" rel="stylesheet" type="text/css">
</head>

Seperti tautan laman normal, kita memiliki tautan ‘ href ’ atribut – kali ini menunjuk ke dokumen CSS yang memiliki semua kode CSS kita yang akan memengaruhi halaman ini karena tertaut dengannya. Ini bukan satu-satunya cara untuk mengaitkan kode CSS ke halaman (ada beberapa cara lain) tetapi kita akan menyerahkannya ke artikel lain. Jadi di tautan di atas kita beri nama file CSS dengan ini: ‘ href = " myCSS.css " ’ dan kita memberi tahu browser bahwa tautannya adalah ke halaman CSS dengan atribut ini: ‘ type = " teks / css " ’ ;. Yang penting di sini adalah tautannya menunjuk ke file CSS dengan nama: ‘ myCSS.css ’

Jadi sekarang kita memiliki style sheet yang ditautkan ke dokumen, mari kita lihat beberapa kode CSS. Potongan kode pertama ini ‘ gaya ’ ID unik yang kita bicarakan sebelumnya:

#navigation { 
	position: absolute; 
	z-index: 10; 
	width: 210px; 
	height: 600px; 
	margin: 0; 
	margin-top: 0px; 
	border-right: 1px solid #C6EC8C; 
	font-weight: normal; 
} 
 
#centerDoc { 
	position: absolute; 
	z-index: 15; 
	padding: 0 0 20px 20px; /*top right bottom left*/ 
	margin-top: 50px;
	margin-left: 235px; 
}

Ada banyak hal yang terjadi di sini sehingga kita akan fokus hanya pada beberapa elemen untuk saat ini. Dalam elemen-elemen di atas kita memiliki 2 penyeleksi ('navigation' dan 'centerDoc'), satu untuk setiap ID, dan setiap pemilih diikuti oleh kurung keriting: {}. Di antara kurung keriting, kita mencantumkan ‘properti’ yang menentukan gaya apa yang berlaku untuk pemilih. Jadi di sini adalah kode penyeleksi CSS dengan semua nyali (propertinya) dihapus:

#navigation { 
	/*Look ma no CSS rules!*/ 
} 
#centerDoc { 
	/*Look ma no CSS rules!*/ 
}

Saya baru saja menyisipkan teks: ‘/ * Lihat ma no aturan CSS! * / 'Untuk menunjukkan di mana kode CSS biasanya. Jadi sekarang Anda dapat melihat bahwa apa pun di antara kurung keriting adalah bagian dari satu grup atau paket yang dalam CSS secara umum disebut properti.

Dalam contoh di atas, Anda dapat melihat bahwa ada beberapa teks yang muncul di depan braket keriting. Teks itu memberi nama pada pemilih. Jadi dalam hal ini kita memiliki dua nama pemilih dan dengan demikian dua pemilih: #centerDoc dan #navigation. Jadi mengapa kita memiliki simbol # di depan teks? Mengapa kita tidak dapat menyebutnya hanya 'centerDoc' dan ‘navigation’?

Seperti HTML dan pemrograman, teks tertentu di tempat-tempat tertentu memiliki makna khusus yang memberitahu sistem untuk melakukan sesuatu yang spesifik. Dalam hal ini, setiap kali Anda memiliki simbol # di depan nama pemilih CSS, kita mengatakan bahwa pemilih ini adalah jenis pemilih khusus yang disebut pemilih ‘ID’. Apa yang istimewa dari pemilih ID? Jenis pemilih itu hanya dapat diterapkan ke satu elemen di halaman HTML. Kedengarannya asing?

Jadi, Anda yang tidak tidur di komputer sekarang melihat bahwa kita memiliki pemilih ID CSS untuk setiap div HTML yang memiliki ID, dan mereka memiliki nama yang sesuai. Jadi pemilih CSS #centerDoc berlaku untuk div: ‘ < div id = " centerDoc " > ’ ;, Anda mendapatkannya? Apa pun aturan / gaya CSS yang kita pilih untuk kode ke pemilih ID kita akan mengubah apa yang muncul di dalam div yang sesuai. Jadi untuk div dengan id: ‘ navigasi ’ kita memiliki aturan CSS ini:

#navigation { 
	position: absolute; 
	z-index: 10; 
	width: 210px; 
	height: 600px; 
	margin: 0; 
	margin-top: 0px; 
	border-right: 1px solid #C6EC8C; 
	font-weight: normal; 
}

Perhatikan di bagian bawah kita mengatakan semua teks akan memiliki font-weight 'normal' dengan memberikannya properti ini:

font-weight: normal;

kita dapat dengan mudah mengatakan bahwa kita ingin semua teks muncul di div (div dengan ID ‘navigasi’) sebagai gantinya - maka properti akan terlihat seperti ini:

font-weight: bold;

Di halaman kita, div navigasi berada di sebelah kiri dan memiliki perbatasan … Mengapa? Ini memiliki perbatasan 1 piksel hijau muda yang bagus karena saya mengatur ini di CSS saya:

border-right: 1px solid #C6EC8C;

Cukup jelas, bukan? Saya akan menyarankan mengubah warna perbatasan dan mengubah ketebalan piksel perbatasan dan melihat tampilannya.

Mengapa navigasi berada di sebelah kiri halaman sementara centerDoc berada di sebelah kanan halaman? Nah hal pertama yang harus dilihat adalah baris ini di pemilih navigasi:

position: absolute;

Ini memberitahu browser untuk hanya menempatkan div ini pada halaman apa adanya. Ini terlalu menyederhanakan subjek, tetapi untuk tujuan kita ini berfungsi untuk saat ini.

The real magic dalam hal ini adalah kode CSS untuk centerDoc:

#centerDoc { 
	position: absolute; 
	z-index: 15; 
	padding: 0 0 20px 20px; /*top right bottom left*/ 
	margin-top: 50px; 
	margin-left: 235px; 
}

The line:

margin-left: 235px;

memberitahu browser untuk memasukkan 235px (piksel) margin di sebelah kiri div dengan ID ‘ centerDoc ’ ;. Itu mendorong div itu ke atas, memberi ruang untuk navigasi div ; untuk mengambil tempat itu. Atau dalam hal ini, cukup buat kolom kiri yang bagus.

Sebelum kita menentukan margin, kita telah menetapkan sesuatu yang disebut 'padding' dan itu seperti apa itu: Ruang yang melilit elemen kita (tag).

CSS memiliki fitur dan konsep model kotak ini yang pada dasarnya adalah kotak yang membungkus elemen HTML. Model kotak ini terdiri dari: bantalan, margin, batas, dan konten aktual. Ini memungkinkan kita untuk menempatkan perbatasan di sekitar elemen dan elemen ruang dalam kaitannya dengan elemen lain. Dari dalam ke luar diperintahkan seperti ini:

content -> padding -> border -> margin

Jadi dalam kasus kita, apa pun di antara < div > tag adalah konten ‘ konten ’ ;. Tepat setelah itu muncul padding. Lalu ada perbatasan dan akhirnya margin. Margin dan padding mungkin tampak seperti hal yang sama tetapi jika Anda memikirkannya, Anda dapat melihat bagaimana bisa mengendalikan ruang sebelum perbatasan (padding) dan setelah perbatasan (margin) benar-benar dapat memengaruhi tata letak Anda.

Dalam contoh ini Anda perhatikan bahwa div navigasi berada lebih tinggi di halaman daripada div centerDoc. Ini bukan karena urutan di mana mereka muncul dalam HTML seperti biasanya tanpa CSS, melainkan karena pengaturan margin yang saya tetapkan untuk setiap pemilih; untuk centerDoc, saya mengatur margin atas ke 50px:

margin-top: 50px;

Dan untuk div navigasi saya atur ke

margin-top: 0px;

Ini menetapkan margin atas ke 0 piksel sehingga karena itu akan menjadi 50 piksel lebih tinggi dari div centerDoc. Saya menyarankan agar Anda memindahkan posisi navigasi div di bawah pusat doc div di HTML hanya untuk melihat apakah ada perubahan, Anda akan melihat bahwa di mana div muncul dalam kode HTML yang sebenarnya tidak ada hubungannya dengan bagaimana itu akan muncul kepada pengguna sekarang bahwa posisi CSS telah digunakan. Hal lain yang harus dicoba adalah bermain dengan nilai-nilai CSS dan melihat apa yang terjadi, mengubah padding, mengubah margin, dll.

kita akan menyimpulkan diskusi tentang CSS ini di Part 3.

1. Ada lebih banyak HTML yang muncul di atas bagian pertama < body > tag yang sangat penting bagi laman tetapi sebenarnya tidak ada sangkut pautnya dengan apa yang muncul di laman (dari perspektif pengguna) jadi saya tidak akan membahasnya di artikel ini.