01-ийн 10
CSS Style Sheet үүсгэх
Бид HTML-т зориулсан тусдаа текст файл үүсгэсэн шиг та CSS-ийн текст файл үүсгэх болно. Хэрэв та энэ үйл явцыг харуулах хэрэгтэй бол эхний зааварчилгааг үзнэ үү. Notepad-д CSS загварын хуудсыг үүсгэх алхмууд энд байна:
- Хоосон цонх авахын тулд File> New in Notepad гэдгийг сонгоно уу
- File Save гэх мэт файлыг дарж CSS файл болгон CSS хадгална.
- Хатуу диск дээрх my_website фолдер руу залуурдах
- "Save As Type:" рүү "All Files" гэж оруулна уу
- Файлыг "styles.css" гэж нэрлэнэ (ишлэлүүдийг орхи) Хадгалах дээр товшино уу
10 дахь нь
CSS Style Sheet-г өөрийн HTML рүү холбоно уу
Хэрэв та вэбсайтдаа зориулж хэв маягийн хуудастай бол үүнийг вэб хуудас руу холбох хэрэгтэй болно. Үүнийг хийхийн тулд та холбоосыг ашиглана. Дараах холбоосыг эндээс хийж болно.
03 - 10
Хуудасны барьцаа засах
Хэрвээ та янз бүрийн хөтчүүдэд зориулсан XHTML-г бичиж байх юм бол тэдгээрийг хэрхэн яаж харуулахыг өөр өөр зарчим, журамтай гэж үздэг. Ихэнх browsers дээр таны сайтын харагдах байдал нь хамгийн сайн арга замыг хөтөч сонголтоос анхдагч зах зээлд тохируулахыг зөвшөөрөхгүй байх явдал юм.
Би хуудаснуудаа зүүн дээд буланд эхлүүлэхийг илүүд үздэг. Хэдийгээр би агуулгыг хөөцөлдөх ч гэсэн, би хоосон хуудасныхаа эхлэлийг эхлүүлэхийн тулд "тэг" -ийг тэг болгож тогтоосон. Үүнийг хийхийн тулд дараах зүйлсийг өөрийн styles.css документ дээр нэмнэ үү:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
зүүн: 0px;
дээд: 0px;
}
04 - 10
Хуудасны фонтыг өөрчлөх
Фонт нь вэб хуудсан дээр өөрчлөхийг хүсэж байгаа хамгийн анхны зүйл юм. Вэб хуудсанд байгаа фонт нь муухай байж болох бөгөөд Вэб хөтөч өөрөө өөрөөр хэлбэл фонтыг тодорхойлохгүй бол таны хуудас ямар байхыг мэдэхгүй.
Ерөнхийдөө, та фонтын үсгийн фонтыг өөрчлөх, эсвэл заримдаа бүхэл бүтэн баримт бичигт өөрчлөлт оруулах болно. Энэ сайтын хувьд бид үсгийн фонт болон догол мөрийн түвшинг тодорхойлно. Дараах зүйлсийг styles.css файлдаа нэмнэ үү:
p, li {
үсгийн маяг: 1em Arial, Helvetica, sans-serif;
}
h1 {
үсгийн маяг: 2em Arial, Helvetica, sans-serif;
}
h2 {
үсгийн маяг: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
үсгийн маяг: 1.25em Arial, Helvetica, sans-serif;
}
Би 1em-ээс эхлэл болон жагсаалтын эд зүйлсийн үндсэн хэмжээгээр эхэлсэн бөгөөд дараа нь миний гарчигт зориулж хэмжээг тогтоодог. Би гарчигийг h4-ээс илүү гүнзгий хэрэглэдэг гэж бодохгүй байна. Гэхдээ та үүнийг хэв загвартай болгохыг хүсэх болно.
05-р сарын 10
Өөрийн холбоосыг илүү сонирхолтой болгох
Холбоосуудын анхдагч өнгө нь цэнхэр, нил ягаан биш байна. Энэ стандарт нь таны хуудасны өнгөний схемд тохирохгүй байж болох тул өөрчлөх хэрэгтэй. Таны styles.css файлд дараах зүйлсийг нэмээрэй:
a: link {
font-family: Arial, Helvetica, sans-serif;
өнгө: # FF9900;
текст-чимэглэл: underline;
}
a: зочилсон {
өнгө: # FFCC66;
}
a: hover {
background: #FFFFCC;
фонт-жин: зоримог;
}
Би холбоосын гурван загварыг үүсгэсэн: a: холбоосыг анхдагчаар холбосон: a зочилсон үедээ зочилсон, би өнгийг өөрчлөх, мөн: hover. Үүнд: hover холбоос би background color-г аваад зорчихын тулд холбоосыг тодруулаарай.
06-ийн 10
Залуурдах хэсэгт Styling хийх
Бид эхлээд HTML (HTML = "nav") хэсгийг байрлуулж байгаа болохоор эхлээд хэвлүүлцгээе. Энэ нь хэр өргөн байх ёстойг харуулахын тулд баруун талдаа илүү өргөн хүрээтэй байр суурийг илэрхийлэх хэрэгтэй. Би бас эргэн тойронд хил тавилаа.
Дараах CSS-г өөрийн styles.css документ дээр нэмнэ үү:
#nav {
өргөн: 225px;
margin-right: 15px;
хил: дунд зэргийн хатуу # 000000;
}
#nav li {
жагсаалт хэв маяг: none;
}
.footer {
фонт-хэмжээ: .75em;
тодорхой: хоёулаа;
өргөн: 100%;
текст-шугам: төв;
}
Жагсаалттай загварын шинж чанар нь navigation хэсэг дотор жагсаалт, сум, дугаар байхгүй, мөн зохиогчийн эрхийн хэсэг нь зохиогчийн хэсэг нь бага байх бөгөөд хэсэг дотор төвлөрдөг.
10-р хэсэг
Үндсэн хэсэг байршуулна
Үнэн байрлалаар гол хэсэгээ байршуулснаар та өөрийн вэбсайт дээрээ үлдэхийг хүсч байгаа газартаа үлдэх болно гэдэгт итгэлтэй байж болно. Би том хэмжээний монитортой бол 800кг-ийн өргөнийг хийсэн боловч хэрвээ танд жижигхэн дэлгэцтэй бол та үүнийг илүү нарийн болгохыг хүсч болох юм.
Өөрийн styles.css документэд дараахийг тавина уу:
#main {
өргөн: 800px;
дээд: 0px;
албан тушаал: үнэмлэхүй;
left: 250px;
}
08-ийн 10
Таны үлгэрийг хэвлэ
Дээрх үсгийн фонтыг аль хэдийн тавьсан болохоор догол мөр бүрт илүү "өшиглөх" -ийг илүү сайн болгож өгөхийг хүссэн. Би энэ зургийг зүгээр л зөвхөн зурагнаас илүү тодруулсан дээд талд тавих замаар хийсэн.
Өөрийн styles.css документэд дараахийг тавина уу:
.дээд шугам {
хилийн дээд хэсэг: зузаан хатуу # FFCC00;
}
Би үүнийг бүх догол мөрийг тодорхойлсоноосоо илүү "оройн" гэж нэрлэдэг анги гэж нэрлэхээр шийдсэн юм. Энэ тохиолдолд, хэрэв би дээд шар шугамгүйгээр догол мөр үүсгэхийг хүсч байвал догол мөрөн дэх class = "topline" хэсгийг орхиж болох бөгөөд энэ нь дээд хилийг авахгүй болно.
10-р сарын 10
Зураг зурах
Зургууд нь ихэвчлэн тэдний эргэн тойронд байдаг бөгөөд энэ зураг нь холбоос бол энэ нь үргэлж харагдахгүй байдаг. Гэхдээ би өөрийн CSS загвар маягт дотроо хил хязгаарыг автоматаар унтраадаг. Энэ загварт зориулж би "noborder" ангиллыг үүсгэсэн бөгөөд баримт бичгийн ихэнх зургууд нь энэ ангийн нэг хэсэг юм.
Эдгээр зургуудын онцгой хэсэг нь хуудасны байршил юм. Тэдгээрийг хооронд нь холбохын тулд тэдгээрийн дотор байсан догол мөрийн хэсэг байхыг би хүсч байсан. Үүнийг хийх хамгийн хялбар арга бол хөвөх CSS өмчийг ашиглах явдал юм.
Өөрийн styles.css документэд дараахийг тавина уу:
#main img {
float: left;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px байхгүй;
}
Үүнийг харахад, зураг дээр тавигдсан маржин шинж чанарууд нь тэдгээрийн дэргэд байгаа хажуугийн текстийн эсрэг тэдгээрийг эвдэж үл болно гэдгийг бататгах хэрэгтэй.
10 - с 10
Одоо дууссан хуудаснаас харна уу
Та өөрийн CSS хадгалсаны дараа өөрийн вэб браузер дахь pets.htm хуудсыг дахин ачаалах боломжтой. Таны хуудас энэ зурган дээр харагдаж байгаа, хуудасны зүүн тал дээр зөв байрлуулсан залуурдлагатай ижил байх ёстой.
Энэ сайтын бүх дотоод хуудсуудад эдгээр алхмуудыг дагана уу. Та навигаци дээр хуудас бүрт нэг хуудастай байхыг хүсч байна.