際際滷

際際滷Share a Scribd company logo
L畉p tr狸nh v Thi畉t k畉 Web




  i4
CSS  Casscading Style Sheets
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




N畛i dung

   Gi畛i thi畛u CSS
   畛nh ngh挑a Style
   S畛 d畛ng v Ph但n lo畉i CSS
   Selector trong CSS v ph畉m vi 畉nh h動畛ng
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




N畛i dung

   Gi畛i thi畛u CSS
   畛nh ngh挑a Style
   S畛 d畛ng v Ph但n lo畉i CSS
   Selector trong CSS v ph畉m vi 畉nh h動畛ng
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Gi畛i thi畛u v畛 CSS

    CSS = Casscading Style Sheets
    D湛ng 畛 m担 t畉 c叩ch hi畛n th畛 c叩c thnh ph畉n tr棚n trang
     WEB
    S畛 d畛ng t動董ng t畛 nh動 d畉ng TEMPLATE
    C坦 th畛 s畛 d畛ng l畉i cho c叩c trang web kh叩c
    C坦 th畛 thay 畛i thu畛c t鱈nh t畛ng trang ho畉c c畉 site
     nhanh ch坦ng (cascading)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Gi畛i thi畛u v畛 CSS  V鱈 d畛
                                                       Without CSS




                                                With CSS
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




N畛i dung

   Gi畛i thi畛u CSS
   畛nh ngh挑a Style
   S畛 d畛ng v Ph但n lo畉i CSS
   Selector trong CSS v ph畉m vi 畉nh h動畛ng
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




畛nh ngh挑a Style
Ki畛u 1                                          Ki畛u 2
<tag style =                                    SelectorName {
  property1:value1;                              property1:value1;
  property2:value2;                               property2:value2;
                                               
  propertyN:valueN;></tag>                      propertyN:valueN;}
                                                   <tag class = SelectorName>
                                                   
                                                   </tag>


V鱈 d畛:                                          V鱈 d畛:
<h1 style=                                     .TieuDe1 {
  color : blue;                                    color: red;
  font-family : Arial; > DHKHTN </h1>             font-family: Verdana, sans-serif; }
                                                <h1 class=TieuDe1> DHKHTN </h1>
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




畛nh ngh挑a Style  Ghi ch炭

    Gi畛ng Ghi ch炭 trong C++
    S畛 dung /*Ghi ch炭*/
    V鱈 d畛 :
    SelectorName {
     property1:value1; /*Ghi chu 1*/
     property2:value2; /*Ghi chu 2*/
     
     propertyN:valueN;}
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




N畛i dung

   Gi畛i thi畛u CSS
   畛nh ngh挑a Style
   S畛 d畛ng v Ph但n lo畉i CSS
   Selector trong CSS v ph畉m vi 畉nh h動畛ng
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS  Ph但n lo畉i

    G畛m 3 lo畉i CSS
     Inline Style Sheet (Nh炭ng CSS vo tag HTML)
     Embedding Style Sheet (Nh炭ng CSS vo trang web)
     External Style Sheet (Li棚n k畉t CSS v畛i trang web)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS - Inline Style Sheet

    畛nh ngh挑a style trong thu畛c t鱈nh style c畛a t畛ng tag
     HTML.
    Theo c炭 ph叩p ki畛u 1.
     <tag style = property1:value1;propertyN:valueN;> . </tag>

    Kh担ng s畛 d畛ng l畉i 動畛c.

    V鱈 d畛:
   <H1 STYLE="color: yellow">This is yellow</H1>
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS - Embedding Style Sheet
    C嘆n g畛i l Internal Style Sheet ho畉c Document-Wide Style Sheet
    M畛i 畛nh ngh挑a style 動畛c 畉t trong tag <style> c畛a trang HTML.
    畛nh ngh挑a style theo c炭 ph叩p ki畛u 2.
    Trang HTML c坦 n畛i dung nh動 sau:
   <head>
     <style type=text/css >
             <!--
             SelectorName {
                     property1:value1;
                     property2:value2;
                     
                     propertyN:valueN;}
            -->
     </style>
   </head>
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS - Embedding Style Sheet
   <HTML>
   <HEAD>
         <TITLE>
           Embedded Style Sheet
         </TITLE>

         <STYLE TYPE="text/css">
              <!--
                    P {color: red;
                       font-size: 12pt;
                       font-family: Arial;}
                    H2 {color: green;}
              -->
         </STYLE>
   </HEAD>
   <BODY BGCOLOR="#FFFFFF">
         <H2>This is green</H2>
         <P>This is red, 12 pt. and Garamond.</P>
   </BODY>
   </HTML>
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS - External Style Sheet
    M畛i style 畛u l動u trong file c坦 ph畉n m畛 r畛ng l *.CSS.
    File CSS: l動u tr畛 nhi畛u style theo c炭 ph叩p ki畛u 2.


    Trong file HTML: li棚n k畉t b畉ng tag link. C炭 ph叩p:
   <head>
     <link rel=stylesheet href=/slideshow/04-web-course-css/18653025/URL type="text/css">
   </head>


    Trang HTML : Li棚n k畉t b畉ng tag style v畛i @import url. C炭 ph叩p
   <head>
     <style type=text/css media="all | print | screen" >
             @import url(/slideshow/04-web-course-css/18653025/URL);
     </style>
   </head>
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS - External Style Sheet

   Trong t畉p tin MyStyle.CSS                       Trong trang Web : demo.htm
   H2                                              <html>
   {                                               <head>
          FONT-WEIGHT: bold;                          <title>Cass</title>
          FONT-SIZE: 16pt;                            <link href="MyStyle.css"
                                                      REL="stylesheet" >
          COLOR: white;
                                                   </head>
          FONT-STYLE: italic;
                                                   <body>
          FONT-FAMILY: Arial;
                                                      <h2>This is an H2 </h2>
          BACKGROUND-COLOR: red;
                                                   </body>
          font-color: white
                                                   </html>
   }
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS  So s叩nh, 叩nh gi叩
                    Inline Style Sheet           Embedding Style Sheet            External Style Sheet

Khai b叩o                  Ki畛u 1                           Ki畛u 2                         Ki畛u 2
C炭 ph叩p        <p style=color:red;>           <style type=text/css>        <link rel=stylesheet 
                 Test                                .TieuDe1{color: red;}     href=main.css />
               </p>                             </style>
                                                <p class=TieuDe1>            <p class=TieuDe1>
                                                    Test                          Test
                                                </p>                           </p>
働u i畛m         D畛 dng qu畉n l箪 Style theo      D畛 dng qu畉n l箪 Style theo    C坦 th畛 thi畉t l畉p Style cho
               t畛ng tag c畛a ti li畛u web.       t畛ng ti li畛u web.             nhi畛u ti li畛u web.
                C坦 畛 動u ti棚n cao nh畉t          Kh担ng c畉n t畉i th棚m c叩c        Th担ng tin c叩c Style 動畛c
                                                trang th担ng tin kh叩c cho       tr狸nh duy畛t cache l畉i
                                                style
Khuy畉t i畛m     C畉n ph畉i Khai b叩o l畉i           C畉n ph畉i khai b叩o l畉i         T畛n th畛i gian download file
               th担ng tin style trong t畛ng ti   th担ng tin style cho c叩c ti    *.css v lm ch畉m qu叩 tr狸nh
               li畛u Web v c叩c ti li畛u kh叩c    li畛u kh叩c trong m畛i l畉n s畛     bi棚n d畛ch web 畛 tr狸nh duy畛t
               m畛t c叩ch th畛 c担ng.               d畛ng                           trong l畉n 畉u s畛 d畛ng
                Kh坦 c畉p nh畉t style
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




S畛 d畛ng v Ph但n lo畉i CSS  畛 動u ti棚n

    Th畛 t畛 動u ti棚n 叩p d畛ng 畛nh d畉ng khi s畛 d畛ng c叩c
     lo畉i CSS (畛 動u ti棚n gi畉m d畉n) :
    1. Inline Style Sheet
    2. Embedding Style Sheet
    3. External Style Sheet
    4. Browser Default
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




N畛i dung

   Gi畛i thi畛u CSS
   畛nh ngh挑a Style
   S畛 d畛ng v Ph但n lo畉i CSS
   Selector trong CSS v ph畉m vi 畉nh h動畛ng
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Selector

    L t棚n 1 style t動董ng 畛ng v畛i m畛t thnh ph畉n 動畛c 叩p
    d畛ng 畛nh d畉ng

    C叩c d畉ng selectors
     HTML element selectors

     Class selectors                      V鱈 d畛:
                                           .TieuDe1 {
                                           color: red;
     ID selectors                         font-family: Verdana, sans-serif; }

     ....                                 <h1 class=TieuDe1> DHKHTN </h1>
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet


Selector trong CSS
Lo畉i               M担 t畉 ph畉m vi 畉nh h動畛ng                     V鱈 d畛
element            畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag     h1 {color: red;}
                   Element trong ti li畛u Web                  /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */


#id                畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         #test {color: green;}
                   tab c坦 thu畛c t鱈nh id trong t li畛u Web      /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛
                                                               畛nh d畉ng mu ch畛=xanh l叩 */

.class             畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         .note {color: yellow;}
                   tab c坦 thu畛c t鱈nh class trong t li畛u Web   /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u
                                                               b畛 畛nh d畉ng mu ch畛=vng*/

element . class    畛nh d畉ng 叩p d畛ng cho ND c叩c tag            h1.note {text-decoration: underline;}
                   Element c坦 thu畛c t鱈nh class t動董ng 畛ng       /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note
                                                               畛u b畛 畛nh d畉ng g畉ch ch但n */

Grouping           畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m           h1,h2,h3 {background-color: orange;}
                   c叩c tag trong ti li畛u.                     /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh
                                                               d畉ng mu n畛n = mu cam */

Contextual         畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c       p strong {color: purple;}
                   l畛ng trong m畛t th畉 cha no 坦               /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u
                                                               b畛 畛nh d畉ng mu ch畛=mu t鱈a */

Pseudo Class       畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng
Pseudo element     th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n
                   trong m達 l畛nh HTML)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Selector trong CSS - Element

    C坦 hi畛u 畛ng tr棚n t畉t c畉 element c湛ng lo畉i tag
    V鱈 d畛 :
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet


Selector trong CSS
Lo畉i               M担 t畉 ph畉m vi 畉nh h動畛ng                     V鱈 d畛
element            畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag     h1 {color: red;}
                   Element trong ti li畛u Web                  /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */


#id                畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         #test {color: green;}
                   tab c坦 thu畛c t鱈nh id trong t li畛u Web      /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛
                                                               畛nh d畉ng mu ch畛=xanh l叩 */

.class             畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         .note {color: yellow;}
                   tab c坦 thu畛c t鱈nh class trong t li畛u Web   /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u
                                                               b畛 畛nh d畉ng mu ch畛=vng*/

element . class    畛nh d畉ng 叩p d畛ng cho ND c叩c tag            h1.note {text-decoration: underline;}
                   Element c坦 thu畛c t鱈nh class t動董ng 畛ng       /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note
                                                               畛u b畛 畛nh d畉ng g畉ch ch但n */

Grouping           畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m           h1,h2,h3 {background-color: orange;}
                   c叩c tag trong ti li畛u.                     /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh
                                                               d畉ng mu n畛n = mu cam */

Contextual         畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c       p strong {color: purple;}
                   l畛ng trong m畛t th畉 cha no 坦               /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u
                                                               b畛 畛nh d畉ng mu ch畛=mu t鱈a */

Pseudo Class       畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng
Pseudo element     th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n
                   trong m達 l畛nh HTML)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Selector trong CSS  ID rules

    C坦 hi畛u 畛ng duy nh畉t tr棚n m畛t element c坦 炭ng id.
    V鱈 d畛 :
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet


Selector trong CSS
Lo畉i               M担 t畉 ph畉m vi 畉nh h動畛ng                     V鱈 d畛
element            畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag     h1 {color: red;}
                   Element trong ti li畛u Web                  /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */


#id                畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         #test {color: green;}
                   tab c坦 thu畛c t鱈nh id trong t li畛u Web      /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛
                                                               畛nh d畉ng mu ch畛=xanh l叩 */

.class             畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         .note {color: yellow;}
                   tab c坦 thu畛c t鱈nh class trong t li畛u Web   /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u
                                                               b畛 畛nh d畉ng mu ch畛=vng*/

element . class    畛nh d畉ng 叩p d畛ng cho ND c叩c tag            h1.note {text-decoration: underline;}
                   Element c坦 thu畛c t鱈nh class t動董ng 畛ng       /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note
                                                               畛u b畛 畛nh d畉ng g畉ch ch但n */

Grouping           畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m           h1,h2,h3 {background-color: orange;}
                   c叩c tag trong ti li畛u.                     /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh
                                                               d畉ng mu n畛n = mu cam */

Contextual         畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c       p strong {color: purple;}
                   l畛ng trong m畛t th畉 cha no 坦               /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u
                                                               b畛 畛nh d畉ng mu ch畛=mu t鱈a */

Pseudo Class       畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng
Pseudo element     th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n
                   trong m達 l畛nh HTML)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Selector trong CSS  Class rules

    C坦 hi畛u 畛ng tr棚n t畉t c畉 c叩c lo畉i tag c坦 c湛ng gi叩 tr畛
     thu畛c t鱈nh class.
    V鱈 d畛 :
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet


Selector trong CSS
Lo畉i               M担 t畉 ph畉m vi 畉nh h動畛ng                     V鱈 d畛
element            畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag     h1 {color: red;}
                   Element trong ti li畛u Web                  /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */


#id                畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         #test {color: green;}
                   tab c坦 thu畛c t鱈nh id trong t li畛u Web      /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛
                                                               畛nh d畉ng mu ch畛=xanh l叩 */

.class             畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         .note {color: yellow;}
                   tab c坦 thu畛c t鱈nh class trong t li畛u Web   /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u
                                                               b畛 畛nh d畉ng mu ch畛=vng*/

element . class    畛nh d畉ng 叩p d畛ng cho ND c叩c tag            h1.note {text-decoration: underline;}
                   Element c坦 thu畛c t鱈nh class t動董ng 畛ng       /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note
                                                               畛u b畛 畛nh d畉ng g畉ch ch但n */

Grouping           畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m           h1,h2,h3 {background-color: orange;}
                   c叩c tag trong ti li畛u.                     /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh
                                                               d畉ng mu n畛n = mu cam */

Contextual         畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c       p strong {color: purple;}
                   l畛ng trong m畛t th畉 cha no 坦               /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u
                                                               b畛 畛nh d畉ng mu ch畛=mu t鱈a */

Pseudo Class       畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng
Pseudo element     th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n
                   trong m達 l畛nh HTML)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Selector trong CSS  K畉t h畛p Element v Class

    V鱈 d畛 :
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet


Selector trong CSS
Lo畉i               M担 t畉 ph畉m vi 畉nh h動畛ng                     V鱈 d畛
element            畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag     h1 {color: red;}
                   Element trong ti li畛u Web                  /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */


#id                畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         #test {color: green;}
                   tab c坦 thu畛c t鱈nh id trong t li畛u Web      /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛
                                                               畛nh d畉ng mu ch畛=xanh l叩 */

.class             畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         .note {color: yellow;}
                   tab c坦 thu畛c t鱈nh class trong t li畛u Web   /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u
                                                               b畛 畛nh d畉ng mu ch畛=vng*/

element . class    畛nh d畉ng 叩p d畛ng cho ND c叩c tag            h1.note {text-decoration: underline;}
                   Element c坦 thu畛c t鱈nh class t動董ng 畛ng       /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note
                                                               畛u b畛 畛nh d畉ng g畉ch ch但n */

Grouping           畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m           h1,h2,h3 {background-color: orange;}
                   c叩c tag trong ti li畛u.                     /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh
                                                               d畉ng mu n畛n = mu cam */

Contextual         畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c       p strong {color: purple;}
                   l畛ng trong m畛t th畉 cha no 坦               /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u
                                                               b畛 畛nh d畉ng mu ch畛=mu t鱈a */

Pseudo Class       畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng
Pseudo element     th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n
                   trong m達 l畛nh HTML)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Selector trong CSS - Contextual Selection

    畛nh d畉ng 動畛c 叩p d畛ng cho n畛i dung trong chu畛i tag
     theo 炭ng th畛 t畛
    V鱈 d畛 :
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet


Selector trong CSS
Lo畉i               M担 t畉 ph畉m vi 畉nh h動畛ng                     V鱈 d畛
element            畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag     h1 {color: red;}
                   Element trong ti li畛u Web                  /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */


#id                畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         #test {color: green;}
                   tab c坦 thu畛c t鱈nh id trong t li畛u Web      /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛
                                                               畛nh d畉ng mu ch畛=xanh l叩 */

.class             畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c         .note {color: yellow;}
                   tab c坦 thu畛c t鱈nh class trong t li畛u Web   /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u
                                                               b畛 畛nh d畉ng mu ch畛=vng*/

element . class    畛nh d畉ng 叩p d畛ng cho ND c叩c tag            h1.note {text-decoration: underline;}
                   Element c坦 thu畛c t鱈nh class t動董ng 畛ng       /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note
                                                               畛u b畛 畛nh d畉ng g畉ch ch但n */

Grouping           畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m           h1,h2,h3 {background-color: orange;}
                   c叩c tag trong ti li畛u.                     /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh
                                                               d畉ng mu n畛n = mu cam */

Contextual         畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c       p strong {color: purple;}
                   l畛ng trong m畛t th畉 cha no 坦               /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u
                                                               b畛 畛nh d畉ng mu ch畛=mu t鱈a */

Pseudo Class       畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng
Pseudo element     th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n
                   trong m達 l畛nh HTML)
L畉p tr狸nh v Thi畉t k畉 Web  Bi :CSS  Casscading Styte Sheet




Selector trong CSS  Pseudo Class
  畛nh d畉ng d畛a vo tr畉ng th叩i c畛a li棚n k畉t, s畛 ki畛n chu畛t.
  C坦 th畛 k畉t h畛p v畛i Selector kh叩c.

More Related Content

Viewers also liked (20)

Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
hovanhiep
Microsoff Office Word
Microsoff Office WordMicrosoff Office Word
Microsoff Office Word
hovanhiep
際際滷6
際際滷6際際滷6
際際滷6
tuanduongcntt
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
hovanhiep
Web301 slide 7
Web301   slide 7Web301   slide 7
Web301 slide 7
tuanduongcntt
際際滷4 html5
際際滷4 html5際際滷4 html5
際際滷4 html5
tuanduongcntt
際際滷3 html5
際際滷3 html5際際滷3 html5
際際滷3 html5
tuanduongcntt
Web2022 slide 1
Web2022   slide 1Web2022   slide 1
Web2022 slide 1
tuanduongcntt
Web301 slide 4
Web301   slide 4Web301   slide 4
Web301 slide 4
tuanduongcntt
Web301 slide 5
Web301   slide 5Web301   slide 5
Web301 slide 5
tuanduongcntt
Web301 slide 2
Web301   slide 2Web301   slide 2
Web301 slide 2
tuanduongcntt
o t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketing
o t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketingo t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketing
o t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketing
LC TECH VIETNAM
Bi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPT
Bi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPTBi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPT
Bi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPT
MasterCode.vn
Bai giang photoshop
Bai giang photoshopBai giang photoshop
Bai giang photoshop
M董 M畉 S坦c
際際滷2 html5
際際滷2 html5際際滷2 html5
際際滷2 html5
tuanduongcntt
Adobe after effects
Adobe after effectsAdobe after effects
Adobe after effects
SaiFujiwarano
際際滷5 html5
際際滷5 html5際際滷5 html5
際際滷5 html5
tuanduongcntt
Photoshop in graphic design - Fundamental
Photoshop in graphic design - FundamentalPhotoshop in graphic design - Fundamental
Photoshop in graphic design - Fundamental
H畉i Tr畉n
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
hovanhiep
Microsoff Office Word
Microsoff Office WordMicrosoff Office Word
Microsoff Office Word
hovanhiep
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
hovanhiep
o t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketing
o t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketingo t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketing
o t畉o thi畉t k畉 bao b狸 cho Gi叩m 畛c Marketing
LC TECH VIETNAM
Bi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPT
Bi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPTBi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPT
Bi 5 T担 v畉 v ch畛nh s畛a 畉nh - Gi叩o tr狸nh FPT
MasterCode.vn
Adobe after effects
Adobe after effectsAdobe after effects
Adobe after effects
SaiFujiwarano
Photoshop in graphic design - Fundamental
Photoshop in graphic design - FundamentalPhotoshop in graphic design - Fundamental
Photoshop in graphic design - Fundamental
H畉i Tr畉n

Similar to 04 web course css (20)

02 udpt thiet ke web voi css
02 udpt   thiet ke web voi css02 udpt   thiet ke web voi css
02 udpt thiet ke web voi css
Nguyen Son
際際滷2
際際滷2際際滷2
際際滷2
tuanduongcntt
C S S & The Modern Web Design
C S S &  The  Modern  Web  DesignC S S &  The  Modern  Web  Design
C S S & The Modern Web Design
Hi畛p L棚 Tu畉n
Bi 2 - Trang Web Gi畛i Thi畛u (2).docx
Bi 2 - Trang Web Gi畛i Thi畛u (2).docxBi 2 - Trang Web Gi畛i Thi畛u (2).docx
Bi 2 - Trang Web Gi畛i Thi畛u (2).docx
TrongNguyn1
Baigiang css
Baigiang cssBaigiang css
Baigiang css
hmtsystem
TKW03 - CSS Part 1 study about css in html.pdf
TKW03 - CSS Part 1 study about css in html.pdfTKW03 - CSS Part 1 study about css in html.pdf
TKW03 - CSS Part 1 study about css in html.pdf
nguyenhoangphong019
Ti li畛u HTML5-CSS3
Ti li畛u HTML5-CSS3Ti li畛u HTML5-CSS3
Ti li畛u HTML5-CSS3
L動董ng B叩 H畛p
Thi畉t k畉 giao di畛n v畛i Liquid
Thi畉t k畉 giao di畛n v畛i LiquidThi畉t k畉 giao di畛n v畛i Liquid
Thi畉t k畉 giao di畛n v畛i Liquid
Tien Nguyen
CSS Cn b畉n
CSS Cn b畉nCSS Cn b畉n
CSS Cn b畉n
jvinhit
H動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉u
H動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉uH動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉u
H動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉u
ThyPhanThBch
H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2
H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2
H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2
Nguy畛n Tu畉n Qu畛nh
際際滷 1 - Thi畉t k畉 Web c董 b畉n
 際際滷 1 - Thi畉t k畉 Web c董 b畉n 際際滷 1 - Thi畉t k畉 Web c董 b畉n
際際滷 1 - Thi畉t k畉 Web c董 b畉n
S畛ng Kh叩c
tai lieu thiet ke website
tai lieu thiet ke websitetai lieu thiet ke website
tai lieu thiet ke website
nhatgiaoict
Bizweb theme workshop
Bizweb theme workshopBizweb theme workshop
Bizweb theme workshop
Qu箪 Nguy畛n Minh
Bi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docx
Bi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docxBi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docx
Bi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docx
TrongNguyn1
1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx
1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx
1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx
giangtranthanh2
Giao trinh java script
Giao trinh java scriptGiao trinh java script
Giao trinh java script
hieusy
Gi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh web
Gi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh webGi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh web
Gi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh web
KhnhTrnh39
Css
CssCss
Css
Best Linh
02 udpt thiet ke web voi css
02 udpt   thiet ke web voi css02 udpt   thiet ke web voi css
02 udpt thiet ke web voi css
Nguyen Son
C S S & The Modern Web Design
C S S &  The  Modern  Web  DesignC S S &  The  Modern  Web  Design
C S S & The Modern Web Design
Hi畛p L棚 Tu畉n
Bi 2 - Trang Web Gi畛i Thi畛u (2).docx
Bi 2 - Trang Web Gi畛i Thi畛u (2).docxBi 2 - Trang Web Gi畛i Thi畛u (2).docx
Bi 2 - Trang Web Gi畛i Thi畛u (2).docx
TrongNguyn1
Baigiang css
Baigiang cssBaigiang css
Baigiang css
hmtsystem
TKW03 - CSS Part 1 study about css in html.pdf
TKW03 - CSS Part 1 study about css in html.pdfTKW03 - CSS Part 1 study about css in html.pdf
TKW03 - CSS Part 1 study about css in html.pdf
nguyenhoangphong019
Thi畉t k畉 giao di畛n v畛i Liquid
Thi畉t k畉 giao di畛n v畛i LiquidThi畉t k畉 giao di畛n v畛i Liquid
Thi畉t k畉 giao di畛n v畛i Liquid
Tien Nguyen
CSS Cn b畉n
CSS Cn b畉nCSS Cn b畉n
CSS Cn b畉n
jvinhit
H動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉u
H動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉uH動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉u
H動畛ng d畉n t畉o CSS c董 b畉n cho ng動畛i m畛i b畉t 畉u
ThyPhanThBch
H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2
H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2
H動畛ng d畉n l畉p tr狸nh web v畛i PHP - Ngy 2
Nguy畛n Tu畉n Qu畛nh
際際滷 1 - Thi畉t k畉 Web c董 b畉n
 際際滷 1 - Thi畉t k畉 Web c董 b畉n 際際滷 1 - Thi畉t k畉 Web c董 b畉n
際際滷 1 - Thi畉t k畉 Web c董 b畉n
S畛ng Kh叩c
tai lieu thiet ke website
tai lieu thiet ke websitetai lieu thiet ke website
tai lieu thiet ke website
nhatgiaoict
Bi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docx
Bi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docxBi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docx
Bi 6 - X但y d畛ng thanh i畛u h動畛ng cho website.docx
TrongNguyn1
1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx
1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx
1.Mang may tinh-CDBKSG_HTML_01-21.3 (1).pptx
giangtranthanh2
Giao trinh java script
Giao trinh java scriptGiao trinh java script
Giao trinh java script
hieusy
Gi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh web
Gi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh webGi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh web
Gi叩o tr狸nh HTML CSS Nh畉t Ngh畛 - L畉p tr狸nh web
KhnhTrnh39

More from Tr動畛ng D畉y Ngh畛 (20)

Quiz
QuizQuiz
Quiz
Tr動畛ng D畉y Ngh畛
Main categories tabs
Main categories tabsMain categories tabs
Main categories tabs
Tr動畛ng D畉y Ngh畛
Level test format 08092011
Level test format  08092011Level test format  08092011
Level test format 08092011
Tr動畛ng D畉y Ngh畛
Lesson plan
Lesson planLesson plan
Lesson plan
Tr動畛ng D畉y Ngh畛
Books
BooksBooks
Books
Tr動畛ng D畉y Ngh畛
Resources
ResourcesResources
Resources
Tr動畛ng D畉y Ngh畛

04 web course css

  • 1. L畉p tr狸nh v Thi畉t k畉 Web i4 CSS Casscading Style Sheets
  • 2. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet N畛i dung Gi畛i thi畛u CSS 畛nh ngh挑a Style S畛 d畛ng v Ph但n lo畉i CSS Selector trong CSS v ph畉m vi 畉nh h動畛ng
  • 3. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet N畛i dung Gi畛i thi畛u CSS 畛nh ngh挑a Style S畛 d畛ng v Ph但n lo畉i CSS Selector trong CSS v ph畉m vi 畉nh h動畛ng
  • 4. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Gi畛i thi畛u v畛 CSS CSS = Casscading Style Sheets D湛ng 畛 m担 t畉 c叩ch hi畛n th畛 c叩c thnh ph畉n tr棚n trang WEB S畛 d畛ng t動董ng t畛 nh動 d畉ng TEMPLATE C坦 th畛 s畛 d畛ng l畉i cho c叩c trang web kh叩c C坦 th畛 thay 畛i thu畛c t鱈nh t畛ng trang ho畉c c畉 site nhanh ch坦ng (cascading)
  • 5. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Gi畛i thi畛u v畛 CSS V鱈 d畛 Without CSS With CSS
  • 6. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet N畛i dung Gi畛i thi畛u CSS 畛nh ngh挑a Style S畛 d畛ng v Ph但n lo畉i CSS Selector trong CSS v ph畉m vi 畉nh h動畛ng
  • 7. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet 畛nh ngh挑a Style Ki畛u 1 Ki畛u 2 <tag style = SelectorName { property1:value1; property1:value1; property2:value2; property2:value2; propertyN:valueN;></tag> propertyN:valueN;} <tag class = SelectorName> </tag> V鱈 d畛: V鱈 d畛: <h1 style= .TieuDe1 { color : blue; color: red; font-family : Arial; > DHKHTN </h1> font-family: Verdana, sans-serif; } <h1 class=TieuDe1> DHKHTN </h1>
  • 8. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet 畛nh ngh挑a Style Ghi ch炭 Gi畛ng Ghi ch炭 trong C++ S畛 dung /*Ghi ch炭*/ V鱈 d畛 : SelectorName { property1:value1; /*Ghi chu 1*/ property2:value2; /*Ghi chu 2*/ propertyN:valueN;}
  • 9. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet N畛i dung Gi畛i thi畛u CSS 畛nh ngh挑a Style S畛 d畛ng v Ph但n lo畉i CSS Selector trong CSS v ph畉m vi 畉nh h動畛ng
  • 10. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS Ph但n lo畉i G畛m 3 lo畉i CSS Inline Style Sheet (Nh炭ng CSS vo tag HTML) Embedding Style Sheet (Nh炭ng CSS vo trang web) External Style Sheet (Li棚n k畉t CSS v畛i trang web)
  • 11. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS - Inline Style Sheet 畛nh ngh挑a style trong thu畛c t鱈nh style c畛a t畛ng tag HTML. Theo c炭 ph叩p ki畛u 1. <tag style = property1:value1;propertyN:valueN;> . </tag> Kh担ng s畛 d畛ng l畉i 動畛c. V鱈 d畛: <H1 STYLE="color: yellow">This is yellow</H1>
  • 12. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS - Embedding Style Sheet C嘆n g畛i l Internal Style Sheet ho畉c Document-Wide Style Sheet M畛i 畛nh ngh挑a style 動畛c 畉t trong tag <style> c畛a trang HTML. 畛nh ngh挑a style theo c炭 ph叩p ki畛u 2. Trang HTML c坦 n畛i dung nh動 sau: <head> <style type=text/css > <!-- SelectorName { property1:value1; property2:value2; propertyN:valueN;} --> </style> </head>
  • 13. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS - Embedding Style Sheet <HTML> <HEAD> <TITLE> Embedded Style Sheet </TITLE> <STYLE TYPE="text/css"> <!-- P {color: red; font-size: 12pt; font-family: Arial;} H2 {color: green;} --> </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H2>This is green</H2> <P>This is red, 12 pt. and Garamond.</P> </BODY> </HTML>
  • 14. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS - External Style Sheet M畛i style 畛u l動u trong file c坦 ph畉n m畛 r畛ng l *.CSS. File CSS: l動u tr畛 nhi畛u style theo c炭 ph叩p ki畛u 2. Trong file HTML: li棚n k畉t b畉ng tag link. C炭 ph叩p: <head> <link rel=stylesheet href=/slideshow/04-web-course-css/18653025/URL type="text/css"> </head> Trang HTML : Li棚n k畉t b畉ng tag style v畛i @import url. C炭 ph叩p <head> <style type=text/css media="all | print | screen" > @import url(/slideshow/04-web-course-css/18653025/URL); </style> </head>
  • 15. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS - External Style Sheet Trong t畉p tin MyStyle.CSS Trong trang Web : demo.htm H2 <html> { <head> FONT-WEIGHT: bold; <title>Cass</title> FONT-SIZE: 16pt; <link href="MyStyle.css" REL="stylesheet" > COLOR: white; </head> FONT-STYLE: italic; <body> FONT-FAMILY: Arial; <h2>This is an H2 </h2> BACKGROUND-COLOR: red; </body> font-color: white </html> }
  • 16. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS So s叩nh, 叩nh gi叩 Inline Style Sheet Embedding Style Sheet External Style Sheet Khai b叩o Ki畛u 1 Ki畛u 2 Ki畛u 2 C炭 ph叩p <p style=color:red;> <style type=text/css> <link rel=stylesheet Test .TieuDe1{color: red;} href=main.css /> </p> </style> <p class=TieuDe1> <p class=TieuDe1> Test Test </p> </p> 働u i畛m D畛 dng qu畉n l箪 Style theo D畛 dng qu畉n l箪 Style theo C坦 th畛 thi畉t l畉p Style cho t畛ng tag c畛a ti li畛u web. t畛ng ti li畛u web. nhi畛u ti li畛u web. C坦 畛 動u ti棚n cao nh畉t Kh担ng c畉n t畉i th棚m c叩c Th担ng tin c叩c Style 動畛c trang th担ng tin kh叩c cho tr狸nh duy畛t cache l畉i style Khuy畉t i畛m C畉n ph畉i Khai b叩o l畉i C畉n ph畉i khai b叩o l畉i T畛n th畛i gian download file th担ng tin style trong t畛ng ti th担ng tin style cho c叩c ti *.css v lm ch畉m qu叩 tr狸nh li畛u Web v c叩c ti li畛u kh叩c li畛u kh叩c trong m畛i l畉n s畛 bi棚n d畛ch web 畛 tr狸nh duy畛t m畛t c叩ch th畛 c担ng. d畛ng trong l畉n 畉u s畛 d畛ng Kh坦 c畉p nh畉t style
  • 17. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet S畛 d畛ng v Ph但n lo畉i CSS 畛 動u ti棚n Th畛 t畛 動u ti棚n 叩p d畛ng 畛nh d畉ng khi s畛 d畛ng c叩c lo畉i CSS (畛 動u ti棚n gi畉m d畉n) : 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet 4. Browser Default
  • 18. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet
  • 19. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet N畛i dung Gi畛i thi畛u CSS 畛nh ngh挑a Style S畛 d畛ng v Ph但n lo畉i CSS Selector trong CSS v ph畉m vi 畉nh h動畛ng
  • 20. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector L t棚n 1 style t動董ng 畛ng v畛i m畛t thnh ph畉n 動畛c 叩p d畛ng 畛nh d畉ng C叩c d畉ng selectors HTML element selectors Class selectors V鱈 d畛: .TieuDe1 { color: red; ID selectors font-family: Verdana, sans-serif; } .... <h1 class=TieuDe1> DHKHTN </h1>
  • 21. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Lo畉i M担 t畉 ph畉m vi 畉nh h動畛ng V鱈 d畛 element 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag h1 {color: red;} Element trong ti li畛u Web /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */ #id 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c #test {color: green;} tab c坦 thu畛c t鱈nh id trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛 畛nh d畉ng mu ch畛=xanh l叩 */ .class 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c .note {color: yellow;} tab c坦 thu畛c t鱈nh class trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng mu ch畛=vng*/ element . class 畛nh d畉ng 叩p d畛ng cho ND c叩c tag h1.note {text-decoration: underline;} Element c坦 thu畛c t鱈nh class t動董ng 畛ng /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng g畉ch ch但n */ Grouping 畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m h1,h2,h3 {background-color: orange;} c叩c tag trong ti li畛u. /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh d畉ng mu n畛n = mu cam */ Contextual 畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c p strong {color: purple;} l畛ng trong m畛t th畉 cha no 坦 /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u b畛 畛nh d畉ng mu ch畛=mu t鱈a */ Pseudo Class 畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng Pseudo element th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n trong m達 l畛nh HTML)
  • 22. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS - Element C坦 hi畛u 畛ng tr棚n t畉t c畉 element c湛ng lo畉i tag V鱈 d畛 :
  • 23. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Lo畉i M担 t畉 ph畉m vi 畉nh h動畛ng V鱈 d畛 element 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag h1 {color: red;} Element trong ti li畛u Web /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */ #id 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c #test {color: green;} tab c坦 thu畛c t鱈nh id trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛 畛nh d畉ng mu ch畛=xanh l叩 */ .class 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c .note {color: yellow;} tab c坦 thu畛c t鱈nh class trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng mu ch畛=vng*/ element . class 畛nh d畉ng 叩p d畛ng cho ND c叩c tag h1.note {text-decoration: underline;} Element c坦 thu畛c t鱈nh class t動董ng 畛ng /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng g畉ch ch但n */ Grouping 畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m h1,h2,h3 {background-color: orange;} c叩c tag trong ti li畛u. /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh d畉ng mu n畛n = mu cam */ Contextual 畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c p strong {color: purple;} l畛ng trong m畛t th畉 cha no 坦 /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u b畛 畛nh d畉ng mu ch畛=mu t鱈a */ Pseudo Class 畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng Pseudo element th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n trong m達 l畛nh HTML)
  • 24. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS ID rules C坦 hi畛u 畛ng duy nh畉t tr棚n m畛t element c坦 炭ng id. V鱈 d畛 :
  • 25. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Lo畉i M担 t畉 ph畉m vi 畉nh h動畛ng V鱈 d畛 element 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag h1 {color: red;} Element trong ti li畛u Web /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */ #id 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c #test {color: green;} tab c坦 thu畛c t鱈nh id trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛 畛nh d畉ng mu ch畛=xanh l叩 */ .class 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c .note {color: yellow;} tab c坦 thu畛c t鱈nh class trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng mu ch畛=vng*/ element . class 畛nh d畉ng 叩p d畛ng cho ND c叩c tag h1.note {text-decoration: underline;} Element c坦 thu畛c t鱈nh class t動董ng 畛ng /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng g畉ch ch但n */ Grouping 畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m h1,h2,h3 {background-color: orange;} c叩c tag trong ti li畛u. /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh d畉ng mu n畛n = mu cam */ Contextual 畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c p strong {color: purple;} l畛ng trong m畛t th畉 cha no 坦 /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u b畛 畛nh d畉ng mu ch畛=mu t鱈a */ Pseudo Class 畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng Pseudo element th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n trong m達 l畛nh HTML)
  • 26. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Class rules C坦 hi畛u 畛ng tr棚n t畉t c畉 c叩c lo畉i tag c坦 c湛ng gi叩 tr畛 thu畛c t鱈nh class. V鱈 d畛 :
  • 27. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Lo畉i M担 t畉 ph畉m vi 畉nh h動畛ng V鱈 d畛 element 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag h1 {color: red;} Element trong ti li畛u Web /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */ #id 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c #test {color: green;} tab c坦 thu畛c t鱈nh id trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛 畛nh d畉ng mu ch畛=xanh l叩 */ .class 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c .note {color: yellow;} tab c坦 thu畛c t鱈nh class trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng mu ch畛=vng*/ element . class 畛nh d畉ng 叩p d畛ng cho ND c叩c tag h1.note {text-decoration: underline;} Element c坦 thu畛c t鱈nh class t動董ng 畛ng /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng g畉ch ch但n */ Grouping 畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m h1,h2,h3 {background-color: orange;} c叩c tag trong ti li畛u. /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh d畉ng mu n畛n = mu cam */ Contextual 畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c p strong {color: purple;} l畛ng trong m畛t th畉 cha no 坦 /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u b畛 畛nh d畉ng mu ch畛=mu t鱈a */ Pseudo Class 畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng Pseudo element th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n trong m達 l畛nh HTML)
  • 28. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS K畉t h畛p Element v Class V鱈 d畛 :
  • 29. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Lo畉i M担 t畉 ph畉m vi 畉nh h動畛ng V鱈 d畛 element 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag h1 {color: red;} Element trong ti li畛u Web /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */ #id 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c #test {color: green;} tab c坦 thu畛c t鱈nh id trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛 畛nh d畉ng mu ch畛=xanh l叩 */ .class 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c .note {color: yellow;} tab c坦 thu畛c t鱈nh class trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng mu ch畛=vng*/ element . class 畛nh d畉ng 叩p d畛ng cho ND c叩c tag h1.note {text-decoration: underline;} Element c坦 thu畛c t鱈nh class t動董ng 畛ng /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng g畉ch ch但n */ Grouping 畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m h1,h2,h3 {background-color: orange;} c叩c tag trong ti li畛u. /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh d畉ng mu n畛n = mu cam */ Contextual 畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c p strong {color: purple;} l畛ng trong m畛t th畉 cha no 坦 /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u b畛 畛nh d畉ng mu ch畛=mu t鱈a */ Pseudo Class 畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng Pseudo element th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n trong m達 l畛nh HTML)
  • 30. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS - Contextual Selection 畛nh d畉ng 動畛c 叩p d畛ng cho n畛i dung trong chu畛i tag theo 炭ng th畛 t畛 V鱈 d畛 :
  • 31. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Lo畉i M担 t畉 ph畉m vi 畉nh h動畛ng V鱈 d畛 element 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c tag h1 {color: red;} Element trong ti li畛u Web /* ND c畛a th畉 <h1> b畛 畛nh d畉ng mu ch畛=畛 */ #id 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c #test {color: green;} tab c坦 thu畛c t鱈nh id trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh id=test 畛u b畛 畛nh d畉ng mu ch畛=xanh l叩 */ .class 畛nh d畉ng 叩p d畛ng cho ND t畉t c畉 c叩c .note {color: yellow;} tab c坦 thu畛c t鱈nh class trong t li畛u Web /* ND c畛a b畉t k畛 tag c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng mu ch畛=vng*/ element . class 畛nh d畉ng 叩p d畛ng cho ND c叩c tag h1.note {text-decoration: underline;} Element c坦 thu畛c t鱈nh class t動董ng 畛ng /* ND c畛a c叩c th畉 <h1> c坦 thu畛c t鱈nh class=note 畛u b畛 畛nh d畉ng g畉ch ch但n */ Grouping 畛nh d畉ng 叩p d畛ng cho ND m畛t nh坦m h1,h2,h3 {background-color: orange;} c叩c tag trong ti li畛u. /* ND c畛a c叩c th畉 <h1> <h2> <h3> 畛u b畛 畛nh d畉ng mu n畛n = mu cam */ Contextual 畛nh d畉ng 叩p d畛ng cho ND c叩c th畉 動畛c p strong {color: purple;} l畛ng trong m畛t th畉 cha no 坦 /* ND c畛a c叩c th畉 <strong> n畉m trong th畉 <p> 畛u b畛 畛nh d畉ng mu ch畛=mu t鱈a */ Pseudo Class 畛nh d畉ng 動畛c 叩p d畛ng d畛a vo tr畉ng Pseudo element th叩i c畛a c叩c Element. (Kh担ng xu畉t hi畛n trong m達 l畛nh HTML)
  • 32. L畉p tr狸nh v Thi畉t k畉 Web Bi :CSS Casscading Styte Sheet Selector trong CSS Pseudo Class 畛nh d畉ng d畛a vo tr畉ng th叩i c畛a li棚n k畉t, s畛 ki畛n chu畛t. C坦 th畛 k畉t h畛p v畛i Selector kh叩c.

Editor's Notes

  • #5: Styles define how to display HTML elements Styles are normally stored in Style SheetsStyles were added to HTML 4.0 to solve a problemExternal Style Sheets can save you a lot of work External Style Sheets are stored in CSS filesMultiple style definitions will cascade into one
  • #22: In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • #24: In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • #26: In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • #28: In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • #30: In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.
  • #32: In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn&apos;t cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source. Rather, they are &quot;inserted&quot; by the UA under certain conditions to be used for addressing in style sheets. They are referred to as &quot;classes&quot; and &quot;elements&quot; since this is a convenient way of describing their behavior. More specifically, their behavior is defined by a fictional tag sequence. Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.