Home / Informasi / CSS kode struktur untuk HTML 5

Cara Download CSS kode struktur untuk HTML 5 Update Terbaru

Sedikit Info Seputar CSS kode struktur untuk HTML 5 Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul CSS kode struktur untuk HTML 5, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Informasi, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar CSS kode struktur untuk HTML 5 Terbaru
link: CSS kode struktur untuk HTML 5

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi CSS kode struktur untuk HTML 5 Terbaru dan Terlengkap 2017

CSS kode struktur untuk HTML 5
Dalam posting ini saya ingin menggambarkan beberapa panduan yang berguna tentang bagaimana menerapkan struktur CSS kode terorganisir mengingat pengenalan HTML 5 bahasa markup. Mereka bukan aturan umum tetapi saran sederhana yang dapat Anda ikuti untuk meningkatkan pembacaan, pengelolaan, dan organisasi umum dari kode CSS. Saran ini sangat berguna jika Anda harus bekerja pada file CSS yang kompleks yang dinyatakan bisa sulit untuk mengelola. 


Saya lebih memilih untuk memisahkan kode CSS dalam tiga bagian yang berbeda: bagian pertama yang berisi tag HTML umum; bagian kedua yang berisi tag struktur, sebuah bagian terakhir dengan kelas kustom. 

Bagian 1: Umum tag HTML 
Dalam bagian ini saya membagi kode dalam dua subbagian. Sebuah ayat pertama yang berisi kode untuk mereset tag HTML standar dan ayat kedua yang berisi kode untuk mendefinisikan kembali tag HTML standar. 

Bagian 1 Ayat 1 
Bagaimana Anda tahu, tentang ulang CSS, praktek ini digunakan untuk mengatur ulang gaya default browser untuk elemen HTML standar (tubuh, h1, p, ul, li, ...). Salah satu file yang paling populer untuk reset CSS adalah Eric Meyers CSS ulang . Untuk HTML 5 saya sarankan Anda untuk melihat pada Richard Clark CSS ulang berdasarkan file Mayers. File-file ini mengatur ulang semua tag HTML yang ada dan untuk itu mengandung banyak baris kode CSS. Kenyataannya, pada kebanyakan kasus, hanya tag yang sering digunakan itu perlu diatur ulang adalah tubuh, h1, h2, h3, p, ul, li, bentuk, masukan dan jarang meja, tr dan td. Jadi jika Anda suka, Anda dapat menggunakan versi singkat dari file-file yang hanya berisi elemen HTML Anda benar-benar digunakan dalam halaman Anda:
  
/* Subsection 1: CSS Reset */
body, 
h1, h2, h3, 
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {
border:0;
margin:0;
padding:0;
font-size:100%;
...
}
Dalam kode sebelumnya saya disorot dalam huruf tebal beberapa HTML 5 tag baru yang Anda butuhkan untuk me-reset (lihat setelah penjelasan singkat tentang mereka). 

Bagian 1 Ayat 2 
Dalam ayat kedua dari bagian 1 saya hanya mendefinisikan kembali tag HTML standar: 

/* Subsection 2: Standard HTML tags redefinition */body,
form, input {
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}

a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}



Jika saya perlu mendefinisikan tag standar (untuk <h1> misalnya) dengan sifat yang berbeda tergantung pada posisi dari tag pada halaman (<h1> untuk judul posting dan<h1> untuk judul sidebar) Saya lebih memilih untuk menambahkan CSS terkait kode ke bagian yang berisi tag struktural (Bagian 2). Sebagai contoh, untuk sidebar:


aside {...}
aside h1 {...}

Bagian 2: tag Struktural 
Dalam bagian ini saya mendefinisikan semua elemen CSS yang mendefinisikan struktur halaman. Seperti yang saya diantisipasi, HTML 5 memperkenalkan tag baru yang meningkatkan semantik kode. Beberapa dari tag ini adalah: <header>, <nav>, <article>, <section>, <aside>, <footer> ... Anda dapat menggunakan tag bukannya lebih lapisan DIV umum kita digunakan sampai sekarang (misalnya: <div id="nav"> ... </ span>). 
Tak lama, gambar di sebelah kanan merupakan tata letak dua kolom yang khas menggunakan HTML 5 tag untuk menentukan struktur halaman. Jika Anda ingin mengetahui informasi lebih lanjut tentang topik ini, saya sarankan Anda untuk melihat artikel-artikel yang sangat baik: 

- Smashing Magazine: HTML5 dan Masa Depan Web 
- Steve Smith: Tag Struktural di HTML5 
- Lachlan Hunt: Preview HTML5 

Kode CSS sangat sederhana:

header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}

Praktis itu identik dengan kode kita menggunakan DIV dengan lapisan: 



#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}


Untuk setiap elemen HTML Anda dapat menentukan elemen anaknya. Sebagai contoh jika ini adalah kode untuk bar navigasi: 
...
<nav>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>

Kode CSS yang terkait adalah: 

nav{...}
nav ul{...}
nav ul li{...}
nav ul li a{...}

Seperti yang saya katakan sebelumnya, dalam rangka meningkatkan pembacaan kode, saya sarankan Anda untuk menggunakan kode indentasi, dan urutan abjad untuk daftar sifat-sifat unsu

nav ul li a{
font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;
}

Apa perubahan terhadap HTML 4? Tidak begitu banyak:

<div id="nav">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div>

Menyederhanakan, jenis tag struktural dalam HTML 5 adalah lapisan DIV dengan ID tertentu dalam HTML 4: 


#nav{...}
#nav ul{...}
#nav ul li{...}
#nav ul li a{...}



Bagian 3: Kelas Kustom 
Pada bagian terakhir dari file saya CSS saya menambahkan kelas kustom saya dapat menggunakan kembali dalam beberapa bagian (header, sidebar, footer, ...).

/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}


Itulah sedikit Artikel CSS kode struktur untuk HTML 5 terbaru dari kami

Semoga artikel CSS kode struktur untuk HTML 5 yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca CSS kode struktur untuk HTML 5

Share this