Menggayakan halaman web yang dibuat Notepad dengan CSS

01 dari 10

Buat Lembaran Gaya CSS

Dengan cara yang sama kami mencipta fail teks berasingan untuk HTML, anda akan membuat fail teks untuk CSS. Jika anda memerlukan visual untuk proses ini sila lihat tutorial pertama. Berikut ialah langkah-langkah untuk mencipta hela gaya CSS anda di Notepad:

1. Pilih Fail> Baru di Notepad untuk mendapatkan tetingkap kosong
2. Simpan fail sebagai CSS dengan mengklik Fail
3. Navigasi ke folder my_website pada pemacu keras anda
4. Tukar "Simpan Sebagai Jenis:" kepada "Semua Fail"
5. Namakan fail anda "styles.css" (tinggalkan sebut harga) dan klik Simpan

02 dari 10

Pautan Lembaran Gaya CSS ke HTML Anda

Sebaik sahaja anda mempunyai helaian gaya untuk laman web anda, anda perlu mengaitkannya dengan laman web itu sendiri. Untuk melakukan ini, anda menggunakan tag pautan. Letakkan pautan pautan berikut di mana saja di dalam tag dokumen haiwan.http:

03 dari 10

Betulkan Margin Halaman

Apabila anda menulis XHTML untuk penyemak imbas yang berbeza, satu perkara yang anda akan pelajari ialah mereka semua kelihatan mempunyai margin yang berbeza dan peraturan untuk bagaimana mereka memaparkan perkara. Cara terbaik untuk memastikan bahawa laman web anda kelihatan sama dalam kebanyakan penyemak imbas adalah untuk tidak membenarkan perkara seperti margin menjadi lalai kepada pilihan penyemak imbas.

Saya lebih suka memulakan halaman saya di sudut kiri atas, tanpa padding tambahan atau margin mengelilingi teks. Walaupun saya akan memasangkan kandungan, saya menetapkan margin kepada sifar supaya saya bermula dengan slate kosong yang sama. Untuk melakukan ini, tambahkan perkara berikut kepada dokumen styles.css anda:

html, badan {
margin: 0px;
padding: 0px;
sempadan: 0px;
kiri: 0px;
atas: 0px;
}

04 dari 10

Menukar Fon pada Halaman

Fonnya sering menjadi perkara pertama yang anda ingin ubah pada halaman Web. Fon lalai di laman Web boleh menjadi hodoh, dan sebenarnya penyemak imbas web itu sendiri, jadi jika anda tidak menentukan font, anda tidak akan tahu apa halaman anda akan kelihatan seperti.

Biasanya, anda akan menukar font pada perenggan, atau kadang-kadang pada keseluruhan dokumen itu sendiri. Untuk laman web ini, kami akan menentukan font di tajuk dan perenggan. Tambahkan yang berikut ke dokumen styles.css anda:

p, li {
fon: 1em Arial, Helvetica, sans-serif;
}
h1 {
fon: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
fon: 1.25em Arial, Helvetica, sans-serif;
}

Saya bermula dengan 1em sebagai saiz asas saya untuk perenggan dan item senarai, dan kemudian menggunakannya untuk menetapkan saiz untuk tajuk utama saya. Saya tidak menjangkakan untuk menggunakan tajuk utama yang lebih mendalam daripada h4, tetapi jika anda merancang untuk anda mahu gaya itu juga.

05 dari 10

Membuat Pautan Anda Lebih Menarik

Warna-warna lalai untuk pautan adalah biru dan ungu untuk masing-masing pautan yang tidak dirawat dan dikunjungi. Walaupun ini adalah piawai, ia mungkin tidak sesuai dengan skema warna halaman anda, jadi mari kita ubahnya. Dalam fail styles.css anda, tambah yang berikut:

a: link {
font-family: Arial, Helvetica, sans-serif;
warna: # FF9900;
teks-hiasan: garis bawah;
}
a: melawat {
warna: # FFCC66;
}
a: hover {
latar belakang: #FFFFCC;
font-weight: bold;
}

Saya menyediakan tiga gaya pautan, iaitu: a sebagai pautan lalai, a: dilawati apabila ia telah dilawati, saya menukar warna, dan a: berlegar. Dengan: hover saya mempunyai pautan mendapatkan warna latar belakang dan pergi berani untuk menekankan ia adalah pautan yang akan diklik.

06 dari 10

Menggayakan Seksyen Navigasi

Oleh kerana kita meletakkan bahagian pelayaran (id = "nav") terlebih dahulu dalam HTML, mari kita buatnya terlebih dahulu. Kita perlu menunjukkan betapa luasnya dan meletakkan margin yang lebih luas di sebelah kanan supaya teks utama tidak akan bertentangan dengannya. Saya juga meletakkan sempadan di sekelilingnya.

Tambah CSS berikut untuk dokumen styles.css anda:

#nav {
lebar: 225px;
margin-right: 15px;
sempadan: pepejal sederhana # 000000;
}
#nav li {
senarai gaya: tiada;
}
.footer {
saiz font: .75em;
jelas: kedua-duanya;
lebar: 100%;
teks-align: center;
}

Ciri gaya senarai menetapkan senarai di dalam bahagian navigasi untuk tidak mempunyai peluru atau nombor, dan gaya footer bahagian hak cipta menjadi lebih kecil dan berpusat di dalam bahagian.

07 daripada 10

Meletakkan Seksyen Utama

Dengan meletakkan bahagian utama anda dengan kedudukan mutlak, anda boleh memastikan bahawa ia akan tetap tepat di mana anda mahu kekal di laman Web anda. Saya membuat lebar 800px untuk menampung monitor yang lebih besar, tetapi jika anda mempunyai monitor yang lebih kecil, anda mungkin mahu menjadikannya lebih sempit.

Letakkan yang berikut dalam dokumen styles.css anda:

#main {
lebar: 800px;
atas: 0px;
kedudukan: mutlak;
kiri: 250px;
}

08 dari 10

Penggayaan Perenggan Anda

Oleh kerana saya telah menetapkan font perenggan di atas, saya ingin memberikan setiap perenggan sedikit tambahan "sepakan" untuk menjadikannya lebih baik. Saya melakukan ini dengan meletakkan sempadan di bahagian atas yang menekankan perenggan lebih daripada sekadar imej sahaja.

Letakkan yang berikut dalam dokumen styles.css anda:

.baris atas {
border-top: solid solid # FFCC00;
}

Saya membuat keputusan untuk melakukannya sebagai kelas yang dipanggil "topline" daripada sekadar mentakrifkan semua perenggan dengan cara itu. Dengan cara ini, jika saya memutuskan saya ingin mempunyai perenggan tanpa garis kuning teratas, saya hanya boleh meninggalkan kelas = "topline" dalam tag perenggan dan ia tidak akan mempunyai sempadan atas.

09 dari 10

Menggambar Imej

Imej biasanya mempunyai sempadan di sekelilingnya, ini tidak selalu kelihatan melainkan imej itu adalah pautan, tetapi saya suka mempunyai kelas dalam lembaran gaya CSS saya yang mematikan sempadan secara automatik. Untuk helaian gaya ini, saya mencipta kelas "noborder", dan kebanyakan imej dalam dokumen itu adalah sebahagian daripada kelas ini.

Bahagian khas lain dari imej ini adalah lokasi mereka pada halaman. Saya mahu mereka menjadi sebahagian daripada perenggan yang mereka ada tanpa menggunakan jadual untuk menyelaraskan mereka. Cara paling mudah untuk melakukan ini adalah dengan menggunakan property float CSS.

Letakkan yang berikut dalam dokumen styles.css anda:

#main img {
terapung: kiri;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px none;
}

Seperti yang anda dapat lihat, terdapat juga sifat margin yang ditetapkan pada imej, untuk memastikan bahawa ia tidak dihancurkan terhadap teks terapung yang ada di sebelahnya dalam perenggan.

10 daripada 10

Sekarang Lihat Halaman Anda yang Selesai

Sebaik sahaja anda telah menyimpan CSS anda, anda boleh memuatkan semula halaman pets.htm dalam pelayar web anda. Halaman anda harus kelihatan sama seperti yang ditunjukkan dalam gambar ini, dengan gambar yang diselaraskan dan navigasi diletakkan dengan betul di sebelah kiri halaman.

Ikuti langkah yang sama untuk semua halaman dalaman anda untuk laman web ini. Anda ingin mempunyai satu halaman untuk setiap halaman dalam navigasi anda.