Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2

Kategori

Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2 : Styling dan CSS

Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2 : Styling dan CSS

Pada bagian pertama dari Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1 , kita belajar sedikit tentang tulang dari halaman web : HTML . Dalam pelajaran hari ini , kita akan mulai menempatkan pakaian di situs web menggunakan styling dan CSS .

Semoga tulisan Cara Membuat Website Sendiri ini menuntun Anda melalui tiga cara Anda dapat menerapkan gaya elemen dalam dokumen HTML . Ini mengasumsikan Anda sudah memahami pelajaran pertama , jadi jika Anda belum , Anda mungkin ingin melakukan itu pertama . Pada akhir pelajaran ini , Anda akan memahami bagaimana untuk menambahkan properti gaya untuk elemen dalam halaman web Anda . Untuk bahan referensi tambahan , lihat teks di bawah .

Apa yang akan Anda Perlu
  • Sebuah editor teks biasa untuk menulis HTML Anda
  • web browser pilihan Anda untuk menguji HTML Anda
  • Keinginan untuk daging sapi sampai pengetahuan Anda tentang cara kerja web
Seperti yang Anda lihat , itu tidak perlu banyak untuk memulai .

Apakah Styles dan CSS ?

Cascading Style Sheets

CSS singkatan dari Cascading Style Sheets , dan itu bahasa menggunakan browser untuk menafsirkan bagaimana elemen pada halaman web akan terlihat . Bahasa CSS adalah cukup mudah untuk memahami : Anda mendefinisikan properti CSS tertentu, yang span segala sesuatu dari dimensi elemen ( lebar dan tinggi ) , teks ( berat badan , gaya , font- jenis, warna , dll ) , posisi , dan jarak ( margin dan paddings ) .

Pada dasarnya Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2 ini ada hubungannya dengan bagaimana unsur harus melihat , itu ada hubungannya dengan CSS . Untuk memperpanjang pada metafora di atas , HTML dan unsur-unsur dalam dokumen Anda adalah tulang dari situs. Mereka menyediakan struktur . CSS gaun situs Anda dan membuatnya tampak bagus atau tidak . Bagian itu tergantung pada daging desain Anda .

Ditulis , misalnya , CSS terlihat sedikit sesuatu seperti ini : Jika saya ingin menambahkan warna untuk sepotong teks , properti CSS yang sesuai adalah , tidak mengejutkan color . Untuk menentukan properti warna, Anda akan cukup ketik color , Titik dua , menyatakan apa gaya harus , kemudian diakhiri dengan titik koma . Jadi , misalnya , color:red;   mau tak mau dan mengharapkan hasil . Anda dapat menggunakan CSS untuk menerapkan gaya untuk setiap elemen pada halaman web Anda di salah satu dari tiga cara :
  • Gaya Inline : Metode ini yang terbaik untuk cepat , satu off gaya yang ingin Anda berlaku untuk satu elemen tanpa banyak overhead . Anda dapat menambahkan gaya inline untuk setiap elemen dengan mendefinisikan atribut gaya elemen . Sebagai contoh:
<p style="color:red;">The text inside this paragraph tag will be red.</p>
  • Anda dapat menentukan lebih dari satu properti menggunakan gaya inline selama Anda ingat titik koma di antara mereka :
<p style="color:red; font-family:Helvetica; font-size:20px;">The text inside this p tag will be red, 20-pixels wide, and use Helvetica.<p>
  • Stylesheet Internal: Di dalam dokumen ( sering di dalam kepala ) , Anda dapat menentukan gaya untuk elemen dalam halaman menggunakan penyeleksi . stylesheet internal terlihat seperti ini :

<code><style type="text/css">
        h3 {
                color:red;
                font-family:Helvetica;
                font-size:20px;
        }
</style>
  • Dalam contoh di atas h3 adalah pemilih . Itu mengatakan , " Semua elemen H3 di halaman ini harus menggunakan gaya berikut ". Anda juga dapat menentukan penyeleksi menggunakan kelas atau ID elemen .
  • Stylesheet Eksternal : stylesheet ini bergerak CSS ke file eksternal berakhir dengan css ( misalnya , style.css Sintaks untuk stylesheet eksternal adalah persis seperti apa yang Anda lihat dengan stylesheet internal, tetapi Anda tidak perlu gaya deklarasi Sebaliknya . . , Anda link ke stylesheet eksternal Anda seperti:
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
  • Dalam hal ini , saya punya file style.css di dalam folder stylesheet , dan saya mengatakan web browser : " . Ketika Anda memuat halaman, mencari CSS di sini " Segala sesuatu di dalam tampak sama dengan apa yang terjadi di dalam gaya tag stylesheet internal.

Ketika Menggunakan Kelas , ID , dan Element Selectors ?

Sebagian besar waktu , demi organisasi , Anda akan ingin menggunakan stylesheet eksternal . Tapi bagaimana Anda memutuskan mana penyeleksi untuk digunakan? Mari kita cepat berjalan melalui pilihan Anda :
  • Penyeleksi Elemen : Anda harus menggunakan pemilih elemen ketika Anda ingin yang paling elemen dari jenis yang terlihat dengan cara yang sama pada halaman Anda . Jadi jika Anda ingin semua elemen h2 menjadi 30 piksel , Anda bisa menambahkan berikut ke file CSS Anda :
<code>h2 {
        font-size:30px;
}
  • Sejak saat itu , setiap h2 akan menghormati gaya bahwa kecuali jika Anda menimpanya .
  • Kelas Penyeleksi : Kelas berguna untuk gaya luas yang ingin Anda terapkan untuk lebih dari satu elemen , tetapi mungkin gaya yang ingin Anda gunakan sedikit lebih selektif daripada yang Anda lakukan ketika menggunakan pemilih elemen . Dalam video tersebut , saya mendefinisikan sangat membosankan red kelas seperti:
<code>.red {
        color:red;
}
  • Menggunakan dot ( . ) Sebelum teks " merah " , saya sudah bilang browser saya bahwa pemilih ini adalah kelas saya menciptakan . Sekarang , dalam setiap elemen dalam halaman saya , saya bisa menambahkan atribut class = " merah " dan teks yang akan merah .
  • ID Pemilih : Ditetapkan di CSS oleh sebelumnya hash ( # ) , ID pemilih adalah untuk satu elemen tertentu dan satu elemen saja. Pada dasarnya ini menyediakan cara untuk menyesuaikan gaya untuk satu elemen tertentu tanpa menggunakan gaya - menjaga inline semua styling Anda di satu tempat . ( ID juga sangat berguna untuk JavaScript , tapi itu jauh melampaui lingkup kami di sini . ) Jika saya ingin div 800x600px dengan latar belakang merah yang disebut my_red_div , akan terlihat seperti ini :
<code>#my_red_div {
        width:800px;
        height:600px;
        background:red;
}

Pelajari artikelnya untuk melihat semua ini dalam praktek . Membaca adalah satu hal , tapi itu semua mulai lebih masuk akal ketika Anda bisa melihatnya .

Itu dia?

Singkatnya , ya ! Tentu saja ada lebih CSS , dan ada beberapa cara serius lebih maju dari penanganan CSS sehingga Anda benar-benar dapat mempersempit bagaimana unsur-unsur mewarisi gaya mereka , tapi itu benar-benar dasar-dasar . Satu-satunya hal yang hilang : sifat !

Aku tidak , bagaimanapun , akan berjalan melalui setiap properti CSS yang tersedia ( kami terus terang tidak punya waktu dalam pelajaran ini ) . Seperti kebanyakan hal dari sifat pemrograman , Anda akan belajar lebih banyak dari mencari tahu pilihan Anda daripada yang saya bisa berikan dalam satu panduan ringkas . Berikut adalah beberapa referensi CSS Anda mungkin ingin menelusuri :
  • W3Schools CSS Refrence (www.w3schools.com/css/css_reference.asp)
  • Ditambahkan Bytes ' CSS Cheat Sheet (www.cheatography.com/davechild/cheat-sheets/css2/)
  • A List Apart (alistapart.com/)
Saya ingin mendengar lebih favorit di komentar alat bantu referensi ! Aku kebanyakan googler untuk hal semacam ini . Aku tidak ahli CSS , tapi aku sudah menghabiskan jumlah yang baik hacking CSS untuk proyek-proyek hewan peliharaan saya sendiri waktu , dan percayalah : Sedikit berjalan jauh , tapi ada banyak yang dapat Anda pelajari jika Anda ingin pergi jauh .

Nah itu dia sobat http://ddsobirin.wagomu.id/ sedikit informasi yang bisa admin bagikan. Mudah-mudahan ada guna dan manfaat bagi Anda semuanya. Jangan lupa untuk membaca juga postingan lainnya terkait Staedtler Pensil Terbaik Untuk Anak dan juga ada postingan mengenai Tips Memilih Jasa Ekspedisi Pengiriman Barang. Terima kasih sudah berkunjung dan membaca postingannya, demikianlah mengenai Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2.
   




  • Silahkan masukan huruf yang tertulis pada gambar di atas dengan benar.
     

    Isi tulisan akan diterbitkan dan hanya pemilik blog yang dapat menghapusnya.