tetapan html css

Tetapan HTML CSS

CSS ialah teknologi yang sangat penting dalam reka bentuk dan pembangunan web. CSS (Cascading Style Sheets) menyediakan cara untuk menerangkan gaya dan susun atur dokumen HTML.

CSS membolehkan pereka web mengawal penampilan dan reka letak elemen dalam dokumen HTML dengan mudah. Dengan memisahkan definisi gaya daripada HTML, CSS menjadikan halaman web lebih mudah untuk diselenggara dan diubah suai.

Dalam artikel ini, kita akan membincangkan cara menyediakan CSS untuk mengawal gaya dan reka letak dokumen HTML.

Tambah CSS pada Dokumen HTML

Untuk menambah gaya CSS pada dokumen HTML, terdapat beberapa cara yang berbeza. Berikut ialah beberapa daripadanya:

Helaian gaya sebaris: Gunakan atribut "gaya" dalam elemen HTML untuk menentukan gaya, seperti ini:

12ebb36ae25ccec2d990b2ad81b6d9c9Perenggan ini berwarna merah. 94b3e26ee717c64999d7867364b1b4a3

Walaupun kaedah ini berfungsi untuk sebilangan kecil gaya, ia tidak sesuai untuk tapak web yang besar kerana ia memerlukan penggayaan berulang dalam setiap elemen. Di samping itu, ia tidak mudah untuk dijaga.

Helaian gaya dalaman: Letakkan gaya CSS dalam teg c9ccee2e6ea535a969eb3f532ad9fe89 Contohnya:

93f0f5c25f18dab9d176bd4f6de5d30e

<style>
    p {
        color: red;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1

Kaedah ini membolehkan anda menetapkan berbilang gaya dalam dokumen yang sama dan mempunyai kawalan gaya ke atas keseluruhan muka surat . Walau bagaimanapun, jika anda perlu menggunakan gaya yang sama pada berbilang halaman, anda mesti menyalin dan menampal gaya pada setiap halaman.

Helaian gaya luaran: Gunakan teg 261f5faa98205db566fb261e4276ef68 dalam dokumen HTML untuk merujuk fail CSS luaran. Contohnya:

93f0f5c25f18dab9d176bd4f6de5d30e

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

9c3bca370b5104690d9ef395f2c5f8d1

Dalam senario ini, semua gaya disimpan dalam satu fail CSS dan boleh dikongsi merentas berbilang muka surat fail. Kaedah ini adalah yang paling biasa digunakan dan mudah diselenggara.

Pemilih CSS

Pemilih CSS ialah corak yang digunakan untuk memilih elemen tertentu. Terdapat pelbagai pemilih yang tersedia, termasuk yang berikut:

Pemilih Elemen: Memilih elemen tertentu. Contohnya, untuk memilih semua elemen p:

p {

color: red;

}

Pemilih ID: memilih elemen dengan ID yang ditentukan. Contohnya, untuk memilih elemen dengan ID "header":

header {

background-color: gray;

}

Pemilih kelas: Memilih elemen dengan kelas yang ditentukan. Contohnya, pilih setiap elemen dengan kelas "intro":

.intro {

font-style: italic;

}

Pemilih kompaun: terdiri daripada dua atau lebih pemilih ringkas . Sebagai contoh, pilih semua elemen dengan kelas "intro" dan elemen p:

p.intro {

font-style: italic;

}

reka letak CSS

CSS membenarkan Anda mengawal kedudukan dan saiz elemen dalam dokumen HTML. Berikut ialah beberapa sifat reka letak CSS yang paling biasa digunakan:

Kedudukan: Gunakan sifat kedudukan untuk menetapkan elemen kepada kedudukan "mutlak", "relatif" atau "tetap":

kedudukan : mutlak;
kedudukan: relatif;
kedudukan: tetap;

Apung: Gunakan atribut apungan untuk mengapungkan elemen ke kiri atau kanan:

apung: kiri;
terapung: kanan;

Paparan: Gunakan atribut paparan untuk mengawal cara elemen dipaparkan, contohnya: elemen peringkat blok atau elemen sebaris:

paparan: blok;
paparan : sebaris;

model kotak : Gunakan atribut padding, margin dan jidar untuk mengawal saiz dan kedudukan elemen:

lapik: 10px;
margin: 10px;
sempadan: 1px hitam pejal;

Reka bentuk halaman web responsif

Reka bentuk web responsif ialah teknik yang digunakan untuk mencipta tapak web yang boleh diakses pada berbilang peranti. Dengan menggunakan pertanyaan media CSS (Pertanyaan Media), anda boleh mengoptimumkan reka letak tapak web anda mengikut saiz dan orientasi peranti yang berbeza.

Sebagai contoh, berikut ialah reka bentuk responsif ringkas yang akan mengubah reka letak apabila lebar peranti jatuh di bawah 600px:

skrin@media dan (lebar maksimum: 600px) {
badan {

background-color: lightblue;

}
#header {

background-color: gray;

}
#nav {

width: 100%;

}
#nav ul {

display: block;
margin: 0;
padding: 0;

}
#nav li {

margin: 0;
padding: 0;
border-bottom: 1px solid white;

}
}

Ringkasan

CSS ialah teknologi yang sangat penting yang menyediakan kaedah A untuk menerangkan gaya dan susun atur dokumen HTML. Untuk menambah gaya CSS pada dokumen HTML, terdapat beberapa kaedah yang tersedia, termasuk helaian gaya sebaris, helaian gaya dalaman dan helaian gaya luaran. Pemilih CSS ialah corak yang digunakan untuk memilih elemen tertentu, manakala sifat susun atur CSS membolehkan anda mengawal kedudukan dan saiz elemen. Akhir sekali, reka bentuk web responsif ialah teknik untuk mencipta tapak web yang boleh diakses pada berbilang peranti, menggunakan pertanyaan media CSS untuk mengoptimumkan reka letak.

Atas ialah kandungan terperinci tetapan html css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!