Hari - TML/CSS - Projek ILUGC(halaman web)-tutorial css-php.cn

Hari - TML/CSS - Projek ILUGC(halaman web)

Patricia Arquette

Lepaskan： 2025-01-04 07:11:34

asal

885 orang telah melayarinya

HTML:

HTML adalah singkatan dari Hyper Text Markup Language
HTML ialah bahasa penanda standard untuk mencipta halaman Web
HTML menerangkan struktur halaman Web
HTML terdiri daripada satu siri elemen
Elemen HTML memberitahu penyemak imbas cara memaparkan kandungan
Elemen HTML melabelkan cebisan kandungan seperti "ini adalah tajuk", "ini perenggan", "ini pautan", dll.

Rujuk- https://www.w3schools.com/Html/html_intro.asp

CSS:

Cascading Style Sheets (CSS) ialah bahasa stylesheet yang digunakan untuk menerangkan pembentangan dokumen yang ditulis dalam HTML.
CSS menerangkan cara elemen perlu dipaparkan pada skrin, di atas kertas, dalam pertuturan atau pada media lain.

Rujuk- https://developer.mozilla.org/en-US/docs/Web/CSS

Day - TML/CSS - Project ILUGC(web page)

Perbezaan antara HTML/CSS dan Javascript.

-->HTML/CSS - Halaman statik - Kandungan kekal sama setiap kali ia dimuatkan melainkan dikemas kini secara manual.
-->Javascript - Halaman dinamik - Halaman boleh bertindak balas kepada tindakan pengguna, seperti mengklik butang, menyerahkan borang atau menggerakkan tetikus.

Sintaks HTML:

<html>
<head>
<title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

Salin selepas log masuk

-->Simpan fail dengan sambungan (.html) dan klik dua kali untuk menjalankan program.

Day - TML/CSS - Project ILUGC(web page)

Elemen HTML:
Dalam HTML, elemen biasanya disertakan menggunakan teg pembuka dan teg penutup untuk menentukan permulaan dan penamatnya.
--> Tag Pembukaan : Menandakan permulaan elemen HTML.
--> Teg Penutup : Menandai penghujung elemen HTML dengan garis miring ke hadapan sebelum nama elemen.
Cth:

Helo, Dunia!

Teg kendiri: Teg kendiri (juga dikenali sebagai teg penutup sendiri) dalam HTML ialah elemen yang tidak memerlukan teg penutup kerana ia tidak mempunyai sebarang kandungan antara pembukaan dan penutup tag.
Ex-
- break:digunakan untuk memasukkan pemisah baris

Projek:

Menyediakan susun atur halaman web ILUGC:(https://ilugc.in/)

<html>
<kepala>
    <title>ILUGC</title>
<gaya>
.bekas{
    sempadan:1px pepejal;
    ketinggian:200%;
    lebar: 85%;
    margin:auto;
}
.header h4{
    text-transform: huruf besar;
    warna:#e22d30;
    atas sempadan:1px hijau pepejal;
    lebar: muat-kandungan;
    padding-top:10px;
}
.header{

    jidar:25px;
}
</style>
</head>
<badan>
   <div>



<p>Output:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" alt="Day - TML/CSS - Project ILUGC(web page)"></p><p><strong>Penjelasan:</strong></p>

<ol>
<li>
<html>: Elemen akar dokumen HTML.</li>
<li>
<head>: Mengandungi metadata dan sumber untuk dokumen.</li>
<li>
<tajuk>: Menetapkan tajuk halaman web yang dipaparkan pada tab penyemak imbas.</li>
<li>
<gaya>: Membenamkan CSS untuk menggayakan dokumen HTML.</li>
</ol>

Salin selepas log masuk

.bekas: Menggayakan div bekas:
a) jidar: pepejal 1px;: Menambah jidar pepejal 1 piksel.
b) ketinggian: 200%;: Tetapkan ketinggian kepada dua kali ganda ketinggian port pandangan.
c) lebar: 85%;: Tetapkan lebar kepada 85% daripada lebar port pandangan.
d) margin: auto;: Memusatkan bekas secara mendatar.
.header h4: Menggayakan
elemen di dalam kelas .header:
a) text-transform: huruf besar;: Menukar teks kepada huruf besar.
b) warna: #e22d30;: Menetapkan warna teks kepada warna merah tertentu.
c) sempadan atas: 1px hijau pepejal;: Menambah sempadan atas hijau.
d) lebar: muat-kandungan;: Mengecilkan lebar elemen agar sesuai dengan kandungannya.
e) padding-top: 10px;: Menambahkan 10 piksel padding di atas teks.
.header: Menggayakan div pengepala:
a) jidar: 25px;: Menambah jidar 25 piksel di sekeliling pengepala.

: Mengandungi semua kandungan halaman web yang boleh dilihat.
: Unsur bekas untuk mengumpulkan dan menggayakan kandungan.
: Mewakili tajuk utama halaman web.
: Mewakili subtajuk yang kurang penting daripada
.

Atribut:
Atribut memberikan maklumat tambahan tentang elemen HTML, biasanya dalam bentuk pasangan nilai nama.
Cth: `

Padding:
Padding ialah ruang antara kandungan elemen dan sempadannya. Ia mewujudkan jidar dalaman di sekeliling kandungan, menolak kandungan dari tepi elemen.

Margin:
Margin ialah ruang di luar sempadan unsur yang memisahkannya daripada unsur lain. Ia mentakrifkan ruang luaran antara elemen, mewujudkan jarak di sekelilingnya.

pemilih kelas dan pemilih elemen:

Pemilih kelas menyasarkan elemen HTML yang mempunyai atribut kelas tertentu, menggunakan noktah (.) diikuti dengan nama kelas.
Pemilih elemen menyasarkan elemen HTML secara langsung dengan nama tegnya

Atas ialah kandungan terperinci Hari - TML/CSS - Projek ILUGC(halaman web). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Hari - TML/CSS - Projek ILUGC(halaman web)

HTML:

CSS:

Projek:

: Mewakili tajuk utama halaman web.

: Mewakili subtajuk yang kurang penting daripada

.