Scribd Logo
Upload

Welcome to Scribd!

  • Bai 11 CSS

    Uploaded by

    NHULEE
    11 views34 pages

    Original Title

    bai 11 CSS

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views34 pages

    Bai 11 CSS

    Uploaded by

    NHULEE

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 34

    CSS

    CSS l g?
    - CSS: Cascading Style Sheet: y l nhng mu quy nh cch thc th hin cc th HTML. -CSS c 3 cch s dng: + S dng trc tip km vi cc th HTML (Inline Style Sheet) + nh ngha trong 1 trang web (Internal Style Sheet) + nh ngha thnh 1 file CSS ring (External Style Sheet) Ti sao phi dng CSS - CSS gip bn tit kim c rt nhiu thi gian v cng sc cho vic thit k web.

    Th t p dng cc nh dng Nh trn ni, ta c th s dng nhiu cch khc nhau lm CSS. iu g s xy ra nu bn p dng nhiu cch nh dng cho 1 th HTML? (S 1 l u tin nht, s 4 l km u tin nht). 1. Inline Style (Style c qui nh trong 1 th HTML c th) 2. Internal Style (Style c qui nh trong phn <HEAD> ca 1 trang HTML ) 3. External Style (style c qui nh trong file CSS ngoi) 4. Browser Default (thit lp mc nh ca trnh duyt) Nh vy ta thy inline style c mc u tin cao nht, nhng g c nh ngha y s b qua tt c cc nh ngha khc

    C php ca CSS c to nn bi 3 thnh phn: - Thnh phn la chn (thng l mt th HTML) (Selector) - Thuc tnh (Property) - Gi tr (Value) C php ca CSS c th hin nh sau: Selector { Property1: Value1; Property2: Value2; } - Selector thng l cc th HTML bn mun nh ngha thm. Property l thuc tnh m bn mun thay i; mi mt thuc tnh cn phi c mt gi tr. Mt thuc tnh v gi tr ca n c phn cch bi du hai chm . Hai cp thuc tnh-gi tr c phn cch nhau bi du chm phy . Ton b cc cp thuc tnh-gi tr ca mt th HTML c t trong cp du ngoc nhn

    Inline Style Sheet


    Th d : <h1 style=color:red> y l CSS dng 1</h1> u im D dng qun l Style theo tng th ca trang web

    C u tin cao nht


    Khuyt im Cn phi thng bo li thng tin Style trong tng trang web mt cch th cng Kh cp nht Style

    <html> <body> <h1 style=color:red> on vn bn ny c mu <br> y l CSS dng 1<br> </h1> </body> </html>

    <html> <body> <p style="color:blue; Font-size:27; Font-family:arial "> Cho cc bn. y l Inline Style Sheet. Mu xanh. Size 27. Font Arial </p> </body> </html>

    Internal Style Sheet


    Th d 1: <html> <head> <style type="text/css"> p {color:red; Font-size:13; Font-family:arial} </style> </head> <body> <p>Cho cc bn. y l Internal Style Sheet</p> </body> </html>

    Th d 2: <html> <head> <title>Thit K Web </title> <style type="text/css"> .H{ color:red; font-family:arial; font-size:13pt;} </style> </head> <body> <p class="H">Cho cc bn. y l CSS dng 2</p> </body> </html>

    CSS MU CH
    <html> <head> <title>Thit K Web </title> <style type="text/css"> do{color:red} xanh{color:blue} tim{color:violet} </style> </head> <body> <do> y l mu </do><br> Su dung css trong thiet ke web<br> <do>Mu thnh cng <xanh> mu xanh hy vng</xanh></do><br> <tim>Mu tm tnh yu</tim> </body> </html>

    y l mu Su dung css trong thiet ke web Mu thnh cng mu xanh hy vng Mu tm tnh yu

    CSS FONT CH <html> <head> <style type="text/css"> p.t {font-family:"Times New Roman"} p.a{font-family:Arial} do{color:red} </style> </head> <body> <h2>CSS ci t Font</h2> <p class="t">y l on text Times New Roman font.</p> <p class="a"><do>y l on text Arial font mu </do> </p> </body> </html>

    CSS MU NN

    <html> <head> <style type="text/css"> h1{background-color:aqua} mu xanh ngc p{background-color:lime} mu xanh l cy sng div{background-color:teal} mu xanh tm </style> </head>
    <body> <h1>Th d v CSS background-color </h1> <div>Lp Thit k Web. <p>Mu nn cho on text ny l mu xanh sng.</p> Chng ta vn trong th div c mu nn xanh tm. </div> </body>

    CSS FONT SIZE


    <html> <head> <style type="text/css"> h1 {font-size:27;} h2 {font-size:16;} p {font-size:80%;} </style> </head>
    <body> <h1>Lp Thit K Web size ch 27</h1> <h2>Lp Thit K Web size ch 16</h2> <p>Lp Thit K Web size ch bng 80% size mc nh</p> Lp Thit K Web size ch mc nh </body> </html>

    CSS HNH NN
    <html> <head> <style type="text/css"> body {background-image:url("hinhanh/lacay.jpg")} </style> </head> <body> <h1>Lp Thit K Web <br> S dng CSS internal hnh nn<br> </h1> </body> </html>

    CSS HNH NN
    <html> <head> <style type="text/css"> body { background-image:url('hinhanh/tim.jpg'); background-repeat:no-repeat; background-position:right top; } </style> </head> <body> <h1>Lp Thit K Web</h1> <pre> Hnh nn c t gc phi trn ca trang Web Hnh khng lp li </pre> </body> </html>

    <html> <head> CSS CANH L VN BN <style type="text/css"> h1 {text-align:center} p.date {text-align:right} p.main {text-align:justify} </style> </head> <body> <h1> CSS nh l vn bn </h1> <p class="date">Walcott ang chia s v tr dn u danh sch ghi bn Ngoi hng Anh, vi 4 ln lp cng sau 3 trn.</p> <p class="main"> Tuy nhin, ti nay Arsenal s khng c s phc v ca ngi sao chy cnh ny. Anh dnh chn thng khi cng i tuyn Anh ginh chin thng 3-1 trn t Thy S vng loi Euro 2012 hm gia tun. C ngun tin cho rng Walcott c th phi ngh u n 6 tun. l mt thit thi ln i vi Arsenal, bi ang trong cnh tng thiu h s li mt i mt phng n tn cng hu hiu. Robin van Perie ri Nicklas Bendtner u cha th thi u tr li. Ti nay Samir Nasri c th ti xut nhng chc g anh kp ly li cm gic sau mt thi gian phi ngh dng thng. </p> </body> </html>

    CSS CHANGE CASE


    <html> <head> <style type="text/css"> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head> <body> <p class="uppercase">lp thit k web.</p> <p class="lowercase">lp thit k web.</p> <p class="capitalize">lp thit k web.</p> </body> </html>

    CSS KHONG CCH GIA CC T <html> <head> <style type="text/css"> p{ word-spacing:30px;} </style> </head> <body>
    <p> Lp Thit K Web. Lp Thit K Web. </p> </body> </html>

    Ch : - CSS phn bit ch hoa v ch thng do khi vit bn cn phi cn thn trong vic s dng ch hoa, ch thng.

    External Style Sheet CSS


    t cc thuc tnh CSS vo mt tp tin ring bit (*.css), khi c th tham chiu n t nhiu trang Web khc nhau S dng External Style l mt cch l tng khi ta cn phi nh dng nhiu trang web theo mt mu thng nht.

    Bc 1 : Vit file CSS


    Cch vit file CSS Mt file CSS c th c vit ra t bt k trnh son tho vn bn no. Trong file CSS ch cha cc nh dng, khng bao gm cc th HTML. Mt file CSS phi ghi vi phn m rng l *.CSS

    Th d 1:
    h1 {font-size: 36; font-color:blue} p {background-color:aqua} body {font-family:verdana; background-image: url(images/back40.gif)}

    Th d 2 :
    body {background-color: yellow} h1 {color:orange; text-align:center} p {font-family:"Times New Roman"; font-size:20}

    Bc 2:To lin kt n file CSS


    Mi trang web s dng file CSS ngoi ny u phi s dng th <LINK>. Th <LINK> c t bn trong th <HEAD>, vi thuc tnh href s tr n file .CSS bn ngoi. Th d:Lin kt n file mystyle.css <head> <link rel="stylesheet" type="text/css" href=mystyle.css" /> </head>

    u im : C th thit lp style cho nhiu trang web nhanh chng Thng tin cc style c trnh duyt ghi nh Code CSS nm ring trong mt file nn d qun l khng b ri

    Khuyt im : Tn thi gian download file *.css v lm chm qu trnh bin dch web trnh duyt ln u tin s dng (file c load mt ln v c dng li cho cc ln sau )

    Th d minh ha : File mystyle.css body {background-image:url(tim.jpg)} h1 {color:aqua} p {font-size:21; font-weight:bold;color:white}


    File html <html> <head> <link rel="stylesheet" type="text/css href="mystyle.css"/> </head> <body> <h1>Thit K Web</h1> <p>Su dung File CSS to hnh nn trang web</p> </body> </html>

    BI TP TO MT TRANG WEB C S DNG FILE CSS

    (CH : FILE CSS T NHT L 1O STYLE)

    You might also like