4 Mga Paraan upang Lumikha ng CSS

Talaan ng mga Nilalaman:

4 Mga Paraan upang Lumikha ng CSS
4 Mga Paraan upang Lumikha ng CSS

Video: 4 Mga Paraan upang Lumikha ng CSS

Video: 4 Mga Paraan upang Lumikha ng CSS
Video: 🔵HOW TO PUT APPS OR ICONS ON LAPTOP SCREEN/ PAANO MAG DOWNLOAD NG APPS SA LAPTOP/ TAGALOG 2024, Marso
Anonim

Ang isang Cascading Style Sheet (CSS) ay isang sistema para sa pag-coding ng website na nagpapahintulot sa mga taga-disenyo na manipulahin ang maraming mga tampok nang sabay-sabay sa pagtatalaga ng ilang mga elemento sa mga pangkat. Halimbawa, sa pamamagitan ng paggamit ng isang code para sa background ng website, maaaring baguhin ng mga taga-disenyo ang kulay ng background o imahe sa lahat ng mga pahina ng website na may isang pagbabago sa CSS file. Narito kung paano lumikha ng CSS para sa isang pangunahing website.

Mga hakbang

Bahagi 1 ng 4: Pagsulat ng Inline CSS

Lumikha ng CSS Hakbang 1
Lumikha ng CSS Hakbang 1

Hakbang 1. Siguraduhin na mayroon kang isang pangunahing pag-unawa sa mga HTML tag

Dapat mong malaman kung paano gumagana ang mga tag at ng

src

at

href

mga katangian

Lumikha ng CSS Hakbang 2
Lumikha ng CSS Hakbang 2

Hakbang 2. Alamin ang ilan sa mga pangunahing katangian ng CSS

Malalaman mo na maraming mga pag-aari. Gayunpaman, hindi kinakailangan upang matutunan silang lahat.

  • Ang ilang magagandang pangunahing pag-aari ng CSS na dapat malaman

    kulay

    at

    font-pamilya

  • .
Lumikha ng CSS Hakbang 3
Lumikha ng CSS Hakbang 3

Hakbang 3. Alamin ang tungkol sa mga halaga para sa bawat kani-kanilang pag-aari

Ang lahat ng mga pag-aari ay nangangailangan ng isang halaga. Para sa

kulay

ari-arian, halimbawa, maaari mong ilagay ang

pula

halaga

Lumikha ng CSS Hakbang 4
Lumikha ng CSS Hakbang 4

Hakbang 4. Alamin ang tungkol sa

style

Katangian ng HTML.

Ginagamit ito sa loob ng isang elemento tulad ng

href

o

src

. Upang magamit ito, sa loob ng mga marka ng panipi pagkatapos ng pantay na pag-sign, ilagay ang katangiang CSS, isang colon, at pagkatapos ang halaga ng pag-aari. Ito ay kilala bilang isang panuntunan sa CSS.

Lumikha ng CSS Hakbang 5
Lumikha ng CSS Hakbang 5

Hakbang 5. Maunawaan na ang inline CSS ay hindi karaniwang ginagamit para sa mga website ng mga propesyonal na web developer

Ang Inline CSS ay maaaring magdagdag ng hindi kinakailangang kalat sa isang dokumentong HTML. Gayunpaman, ito ay isang mahusay na paraan upang maipakilala sa kung paano gumagana ang CSS.

Bahagi 2 ng 4: Pagsulat ng Pangunahing CSS

Lumikha ng CSS Hakbang 6
Lumikha ng CSS Hakbang 6

Hakbang 1. Ilunsad ang program na nais mong gamitin

Dapat ka nitong payagan na lumikha ng mga HTML at CSS file.

Kung wala kang naka-install na espesyal na programa, maaari mong gamitin ang Notepad o ibang text editor. I-save lamang ang iyong file pareho bilang isang text file at isang CSS file

Lumikha ng CSS Hakbang 7
Lumikha ng CSS Hakbang 7

Hakbang 2. Buksan ang HTML file para sa iyong website

Dapat mo itong buksan sa isang editor ng HTML din, kung mayroon kang isang naka-install.

Pinapayagan ka ng mga editor ng HTML na mag-edit ng HTML at CSS nang sabay

Lumikha ng CSS Hakbang 8
Lumikha ng CSS Hakbang 8

Hakbang 3. Lumikha ng isang tag sa loob ng iyong HTML head

Papayagan ka nitong sumulat ng CSS nang hindi nangangailangan ng isang hiwalay na file.

Lumikha ng CSS Hakbang 9
Lumikha ng CSS Hakbang 9

Hakbang 4. Pumili ng isang elemento na nais mong idagdag ang estilo at i-type ang pangalan ng elemento na sinusundan ng isang hanay ng mga kulot na brace ({})

Upang gawing mas mababasa ang iyong code, laging ilagay ang pangalawang kulot na brace sa sarili nitong linya.

Lumikha ng CSS Hakbang 10
Lumikha ng CSS Hakbang 10

Hakbang 5. Sa pagitan ng mga brace, i-type ang iyong mga panuntunan sa CSS tulad ng gagamitin mo ang

style

katangian

Ang bawat linya ay dapat magtapos sa isang semicolon (;). Upang mabasa ang iyong code, ang bawat panuntunan ay dapat magsimula sa sarili nitong linya at ang bawat linya ay dapat na naka-indent.

Napakahalagang tandaan na ang estilo na ito ay makakaapekto sa lahat ng mga elemento ng napiling uri sa pahina. Ang mas tiyak na estilo ay sasakupin sa susunod na seksyon

Bahagi 3 ng 4: Mas Advanced na CSS

Lumikha ng CSS Hakbang 11
Lumikha ng CSS Hakbang 11

Hakbang 1. Lumikha ng isang CSS file, hindi isang HTML file at i-save ito gamit ang

.css

karugtong

Buksan din ang iyong HTML file.

Lumikha ng CSS Hakbang 12
Lumikha ng CSS Hakbang 12

Hakbang 2. Lumikha ng isang tag sa iyong HTML head

Papayagan ka nitong mag-link ng isang hiwalay na CSS file sa iyong HTML na dokumento. Ang iyong link tag ay nangangailangan ng tatlong mga katangian:

rel

uri

at

href

  • rel

    nangangahulugang "ugnayan" at sinasabi sa browser kung ano ang kaugnayan sa HTML na dokumento. Dito dapat mayroong halaga na

    "styleheet"

  • .
  • uri

    nagsasabi kung anong uri ng media ang nai-link. Dito dapat mayroong halaga na

    "text / css"

  • href

  • dito ay ginagamit nang katulad sa kung paano ito ginagamit sa isang elemento, ngunit narito dapat itong mai-link sa isang CSS file. Kung ang CSS file ay matatagpuan sa parehong folder tulad ng HTML file, ang pangalan lamang ng file ang kailangang isulat sa loob ng mga marka ng panipi.
Lumikha ng CSS Hakbang 13
Lumikha ng CSS Hakbang 13

Hakbang 3. Piliin ang mga elemento ng iba't ibang uri na nais mong idagdag ang parehong estilo

Magdagdag ng a

klase

katangian sa mga elementong ito at itakda ang mga ito katumbas ng isang pangalan ng klase na iyong pinili. Bibigyan nito ang iyong mga elemento ng parehong estilo.

Lumikha ng CSS Hakbang 14
Lumikha ng CSS Hakbang 14

Hakbang 4. Italaga kung anong estilo ang matatanggap ng isang klase

I-type ang pangalan ng klase sa iyong CSS file na may isang panahon (.) Na nauna dito (i.

.klaseng

).

Lumikha ng CSS Hakbang 15
Lumikha ng CSS Hakbang 15

Hakbang 5. Piliin ang mga solong elemento na nais mong idagdag ang espesyal na estilo at magdagdag ng isang

id

katangian

Ang Id ay nilikha sa CSS gamit ang isang pound na simbolo (#) sa halip na isang panahon.

Ang mga Id ay mas tiyak kaysa sa mga klase, kaya't ang isang id ay lalampas sa anumang istilo ng klase kung mayroon itong isang katangian na may ibang halaga kaysa sa klase

Bahagi 4 ng 4: Matuto Nang Higit Pa

Lumikha ng CSS Hakbang 16
Lumikha ng CSS Hakbang 16

Hakbang 1. Bisitahin ang mga w3 na paaralan

Ito ay isang opisyal na website na naglalayong magturo ng mga kasanayan sa pagbuo ng web. Ang w3 ay may maraming mga sanggunian na nakalista para sa HTML at CSS, pati na rin iba pang mga wikang web.

Lumikha ng CSS Hakbang 17
Lumikha ng CSS Hakbang 17

Hakbang 2. Maghanap ng iba pang mga site na partikular na naglalayong matuto at magturo ng HTML at CSS

Ang mga site tulad ng CSS trick.com ay partikular na naglalayon sa pagtuturo ng CSS at mga kasanayan sa disenyo ng web. Ang paghanap ng kagalang-galang na mapagkukunan ay makakatulong sa iyong paglalakbay sa pag-aaral.

Lumikha ng CSS Hakbang 18
Lumikha ng CSS Hakbang 18

Hakbang 3. Makipag-ugnay sa mga web designer at developer

Ang kanilang karanasan at kaalaman kung paano maaaring magturo sa iyo ng mahalagang kaalaman at kasanayan.

Lumikha ng CSS Hakbang 19
Lumikha ng CSS Hakbang 19

Hakbang 4. Tingnan ang source code ng mga website na iyong napagtagpo

Ang pagtingin sa CSS ng mga mahusay na binuo na website ay maaaring magpakita sa iyo ng mga paraan upang magdisenyo ng mga bahagi ng mga website. Ang pagkopya nito bilang pagsasanay at pagkalikot ng code ay makakatulong sa iyo na malaman kung paano gumamit ng iba't ibang mga katangian ng CSS.

Video - Sa pamamagitan ng paggamit ng serbisyong ito, maaaring ibahagi ang ilang impormasyon sa YouTube

Mga Tip

Inirerekumendang: