Thuc Hanh Css

  • Published on
    11-Jan-2016

  • View
    5

  • Download
    0

Embed Size (px)

DESCRIPTION

Thuc Hanh Css

Transcript

THC HNH THIT K WEB

THC HNH CSS1. NH DNG VN BN1.1. Highligh vn bn

- nh ngha CSS

.hl_yellow { background-color:yellow}

.hl_aqua { background-color: Aqua}

- p dng vo trang HTML

V d: y l on vn bn c highligh

y l on vn bn c highligh

1.2. nh dng cho link

- nh ngha CSS

/* link cha vin thm c mu , khng gch di */

a.mystyle:link {color: #ff0000; text-decoration: none} /* link vin thm c mu xanh, khng gch di */

a.mystyle:visited {color: #0000ff; text-decoration: none} /* link khi h chut ln trn c mu vng v nn mu xanh l cy, c gch di*/

a.mystyle:hover {color: #ffff00; background: #66ff66; text-decoration: underline} - p dng vo trang HTML

test my link style1.3. nh dng vn bn b gch ngang - nh ngha CSS

.linethrough { text-decoration: line-through}- p dng vo trang HTML

y l on vn bn b gch ngang ch1.4. nh dng khong tht vo u dng cho vn bn- nh ngha CSS

p {text-indent: 2.5em; margin-top: 0 }/* mi paragraph u tht vo u dng */

p.noindent {text-indent: 0; margin-top: 0 }

- p dng vo trang HTML

on vn bn ny c dng u tht vo mt khong 2.5 kch thc font ch hin ti

on vn bn ny khng b tht vo dng u tin1.5. To tooltip cho cc t vit tt trong vn bn- nh ngha CSS

.define {cursor:help;

border-style:dotted;

border-width:1px;

background-color: #FFE4C4;

}- p dng vo trang HTML

CSS

1.6. Drop Cap- nh ngha CSS

.dropcap {

float:left;

color:#4E544A;

font-size:5em;

line-height:70px;

padding-top:2px;

font-family: times;

}

- p dng vo trang HTML

y l on vn bn c k t u tin c drop cap

2. NH DNG BNG2.1. Mu 1:

- nh ngha CSS

table.mytable {border-collapse: collapse; border:3px solid black}

th.mytable {border:1px solid black; background:DodgerBlue; font:bold; color:white;}

td.mytable {border:1px solid black; text-align:center}

tr.mytable_row1 {background-color:LightBlue}

tr.mytable_row2 {background-color:LightCyan}- p dng vo trang HTML

header 1

header 2

header 3

column 1

column 2

column 3

column 1

column 2

column 3

column 1

column 2

column 3

column 1

column 2

column 3

2.2. Mu 2:

- nh ngha CSS

table.mytable {border-collapse: collapse}

/*collapse: khng c khong cch gia cc cell ca bng */

th.mytable {border-top:3px solid black; border-bottom:2px solid black; background:violet; font:bold; color:white; text-align:left}

td.mytable_column1 {background-color:gainsboro } /* gainsboro: mu xm nht */

tr.mytable {border-bottom:3px solid black; border-top:2px solid black; }

- p dng vo trang HTML

header 1

header 2

header 3

column 1

column 2

column 3

column 1

column 2

column 3

column 1

column 2

column 3

2.3. Mu 3:

2.4. Mu 4:

2.5. Mu 5

2.6. Mu 6:

(xem hng dn ti: http://veerle.duoh.com/blog/comments/a_css_styled_table/)3. NH DNG DANH SCH

Cc thuc tnh nh dng danh sch:

list-style-type

list-style-position

list-style-image

list-style

3.1. Thuc tnh list-style-typeCc gi tr ca thuc tnh list-style-type:

- none | disc | circle | square |

- upper-latin | lower-latin | upper-roman | lower-roman | upper-alpha | lower-alphaV d:

  • item 1
  • item 2

I. item 1

II. item 2

  • square item 1
  • square item 2

square item 1

square item 2

3.2. Thuc tnh list-style-positionCc gi tr ca thuc tnh list-style-position: inside | outside

V d:

  • First one
    second line
  • Second one

First onesecond line

Second one

  • First one
    second line
  • Second one

First onesecond line

Second one

3.3. Thuc tnh list-style-imageS dng hnh nh lm bullet cho danh sch. C php: list-style-image:url([image_url])

V d:

  • First list for custom marker.
  • Second list for custom marker.

4. TO THANH NAVIGATOR1. To thanh Navigator n gin

- nh ngha CSS#menu a, #menu a:visited {

position:relative;

text-decoration:none;

text-align:center;

background-color:#9ab;

color:#fff;

display:block;

width:10em;

border:2px solid #fff;

border-color:#def #678 #345 #cde;

padding:0.25em;

margin:0.5em auto;

}

#menu a:hover

{

top:2px;

left:2px;

color:#fff;

border-color:#345 #cde #def #678;

}- p dng vo trang HTML

Home

About

History

Team

Offices

2. To Drop-Down Menu (Horizontal Style)(Xem cc mu khc ti http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php)

- nh ngha CSS

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}

ul li {

position: relative;

}

li ul {

position: absolute;

left: 149px; /* Set 1px less than menu width */

top: 0;

display: none;

}

/* Styles for Menu Items */

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 5px;

border: 1px solid #ccc; /* IE6 Bug */

border-bottom: 0;

}

/* Holly Hack. IE Requirement \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

li:hover ul, li.over ul { display: block; } /* The magic */- on m JavaScript

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i