báo cáo tìm hiểu css căn bản

Background-attachment - Thuoc tinh: scroll: nén vi cuộn theo fixed: nén không bị cuộn theo -_ Ví dụ: body { background-image: url'smiley.gif'; background-repeat: no-repeat; backg

Trang 1

Tim hiéu CSS

I CSS Background: gồm các thuộc tính sau:

1 Background-color (Màu nền)

- Thuộc tính: color-rgb (ví dụ: reb(255,0,0))

color-hex (ví dụ: #FF0000)

color-name (vi du: red) transparent (khéng mau)

- Vidu:

<html>

<head>

body {background-color: yellow}

h1 {background-color: #00££00}

h2 {background-color: transparent}

</style>

</head>

<body>

<hl>This is header 1</h1>

<h2>This is header 2</h2>

<p>This is a paragraph</p>

</body>

</html>

—Két qua hién thi:

Trang 2

2 Background-image (Dung hinh anh lam nền)

- Thuộc tính: øz/(chỉ ra đường dân tới hình ảnh dùng làm nên)

none: mac dinh, không có hình nên

- Vidu:

<html>

<head>

body

{

background-image:

url ('bgdesert.jpg')

}

</style>

</head>

<body>

</body>

</html>

—Kết quả:

Trang 3

3 Background-attachment

- Thuoc tinh: scroll: nén vi cuộn theo

fixed: nén không bị cuộn theo

-_ Ví dụ:

<html>

<head>

body

{

background-image:

url('smiley.gif');

background-repeat:

no-repeat;

background-attachment:

fixed

}

</style>

</head>

<body>

<p>The image will not

scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll

with with with with with with with with with with

the the the the the the the the the the

rest rest rest rest rest rest rest rest rest rest

of

the the the the the the the the the the

page</p>

Trang 4

<p>The image will not scroll with the rest of the page</p>

</body>

</html>

—Kết quả: nền không bị cuộn

4 Background — position: Thiết lập vị trí bắt đầu của nền

-_ Thuộc tính:

top left

top center

top right center left

center center

center right bottom left

bottom center

bottom right x% y% : x là hoành độ, y là tung độ Ở góc trên cùng bên trái là 0% 0% Góc dưới cùng bên phải là 100% 100% Nếu bạn chỉ xác định

một giá trị, giá trị còn lại sẽ là 50%

xpos ypos : x là hoành độ, y là tung độ Ở góc trên cùng bên trái là 0 0

Các đơn vị có thé là điểm ảnh (0px 0px) hoặc bat kì don vi CSS nao

khác Nếu bạn chỉ xác định một giá trị, các giá trị còn lại sẽ là 50%

Có thể kết hợp % và vị trí

- Ví dụ: đặt vị trí ảnh trên trang web ở trung tâm

htm1>

<head>

body

{

background-image:url('smiley.gif');

background-repeat :no-repeat;

background-attachment: fixed;

background-position:center;

}

Trang 5

</style>

</head>

<body>

<p><b>Note:</b> For this to work in Mozilla, the background- attachment property must be set to "fixed".</p>

</body>

</html>

—Keét qua:

Note: For this to work in Mozilla, the background-attachment property

must be set to "fixed"

- Dat vi tri anh dung %:

<html>

<head>

body

{

background-image: url('smiley.gif');

background-repeat: no-repeat;

background-position: 30% 20%;

}

</style>

</head>

<body>

</body>

Trang 6

</html>

—Keét quả:

Note: For this to work in Mozilla, the background-attachment property

must be set to "fixed"

- Dat vi tri anh ding pixel:

<html>

<head>

body

{

background-image: url('smiley.gif"');

background-repeat: no-repeat;

background-position: 50px 100px;

}

</style>

</head>

<body>

</body>

</html>

—Kết quả:

Trang 7

Note: For this to work in Mozilla, the background-attachment property must be set to "fixed"

5 Background — repeat: Lap lai anh nền

-_ Thuộc tính:

repeat : Lip theo cả chiều dọc và ngang repeat-x : Lặp theo chiều ngang

repeat-y : Lap theo chiều dọc no-repeat : Khéng lap

- Vi du: Lap theo chiéu doc

<html>

<head>

body

{

background-image:

url ('bgdesert.jpg');

background-repeat: repeat-y

}

</style>

</head>

<body>

</body>

</html>

—Keét qua:

Trang 8

Il CSS Text: gom các thuộc tính sau:

Trang 9

letter-spacing

text-alizn

text-decoration

text-indent

text-shadow

text-transform

unicode-bidi

white-space

word-spacing

-Vi du color:

Description

Sets the color of a text Sets the text direction Sets the distance between lines

Increase or decrease the space

between characters

Aligns the text in an element

Adds decoration to text

Indents the first line of text in an element

Controls the letters in an element

Sets how white space inside an

element is handled

Increase or decrease the space

between words

Values color

ltr

rtl nonmal number

length

% normal

length

left night

center

justify none underline overline line-through blink

length

% none color

length

none

capitalize

uppercase lowercase normal embed bidi-override normal pre nowrap normal

length

Trang 10

<head>

h1 (color: #00ff00)

h2 (color: #dda0dd)}

p (color: rgb(0,0,255)}

</style>

</head>

<body>

<hi>This is header 1</h1>

<p>This is a paragraph</p>

</body>

</html>

- Vi du align the text:

<html>

<head>

hi (text-align: center}

h2 (text-align: left}

h3 (text-align: right}

</style>

</head>

<body>

</body>

</html>

- Vi du decorate the text:

This is header 1

This is header

‘This is a paragraph

This is header 1

This is header 2

This is header 3

Trang 11

<html>

<head>

hi (text-decoration: overline}

h2 (text-decoration: line-through}

h3 (text-decoration: underline}

h4 (text-decoration: blink)

@ (text-decoration: none}

</style>

</head>

<body>

<p><a href="http://wwu.u3schools.com/default.asp">This

is a link</a></p>

</body>

</html>

IH CSS font

- Cac thuộc tính:

Value Description

font-sple

font-variant

font-weight

font-sizelline-

height

font-family

a mumber, a %, or a font size

Default value: Browser dependent

This is header 1

hi kxheader2 This is header 3

This is header 4

This is a link

Sets the properties for a font The line-height value sets the space between lines The value canbe

caption Defines the font that are used by captioned controls (like buttons, drop-downs, etc.)

icon Defines the fonts that are used by icon labels

mem Defines the fonts that are used by dropdown memus

message-box

small-caption

status-bar

- Vidu:

P

{

font: 12px arial

}

{

font: italic small-caps bold 12px arial

}

p

{

font: oblique small-caps 900 12px/14px arial

}

Pp

{

font: menu

}

Defines the fonts that are used by dialog boxes

Defines the fonts that are used by window status bars

Trang 12

IV CSS Border:

-_ Thuộc tính:

Property

border

border-bottom

border-bottom-color

border-bottom-style

border-bottom-width

border-color

border-left

border-left-color

border-left-style

border-left-width

border-right

border-right-color

border-right-style

border-right-width

border-style

border-top

border-top-color

border-top-style

border-top-width

Description

A shorthand property for setting all of the properties for the four borders in one declaration

A shorthand property for setting all of the properties for the bottom border in one declaration Sets the color of the bottom border

Sets the style of the bottom border

Sets the width of the bottom border

Sets the color of the four borders,

can have from one to four colors

A shorthand property for setting all of the properties for the left border in one declaration Sets the color of the left border

Sets the style of the left border

Sets the width of the left border

A shorthand property for setting all of the properties for the right

border in one declaration

Sets the color of the right border Sets the style of the right border

Sets the width of the right border

Sets the style of the four borders, can have from one to four styles

A shorthand property for setting all of the properties for the top

border in one declaration Sets the color of the top border Sets the style of the top border Sets the width of the top border

Values border-width border-style border-color border-bottom-width border-style

border-color border-color border-style

thin medium thick length color

border-left-width border-style border-color border-color

border-style

thin medium thick length border-right-width

border-style

border-color border-color

border-style

thin medium thick length none hidden dotted dashed solid double groove

ridge

inset outset

border-top-width border-style

border-color border-color border-style thin medium thick length

W3C

Trang 13

border-width A shorthand property for setting thin 4 1

the width of the four borders in medium

one declaration, can have from thick

- Vidu:

<html>

P

{

border: medium double rgb (250,0,255

}

</style>

</head>

<body>

</body>

</html>

V CSS Outline:

- Thuoc tinh:

Value Description

outline-color A shorthand property for setting all the outline properties in one declaration

outline-style

outline-width Default value: invert none medium

- Vidu:

button

{

outline: red solid thin

}

VI CSS Margin

- Thuoc tinh:

margin-top Sets the properties for the margins The values comes in % (defines a margin in % of margin-right the total height/width of the document), /ength (defines a fixed margin), and auto (the

margin-bottom browser sets a margin)

margin-left

Default value: Not defined

- Vidu:

Trang 14

VII

Value

padding-top

padding-right

<html>

<head>

p.margin (margin: 2cm 4cm 3cm 4cm)

</style>

</head>

<body>

<p>This is a paragraph with no specified margins</p>

<p class="margin">This is a paragraph with specified

margins</p>

<p>This is a paragraph with no specified margins</p>

</body>

</html>

CSS Padding

- Thuoc tính:

Description

padding-bottom

padding-left

VIII

Value

list-style-type

Default value: Not defined

- Vidu:

<html>

<head>

td.testl (padding: 1.5cm}

td.test2 (padding: 0.5cm 2.5cm)

</style>

</head>

<body>

<tr>

This is a tablecell with equal padding on each side

</td>

</tr>

</table>

<br />

<tr>

This teblecell has a top and bottom padding of 0.Scm and

a left and right padding of 2.5cm

</td>

</tr>

</table>

CSS List

-_ Thuộc tính:

Description

list-style-position

list-style-image Default value: Not defined

Sets the properties for a list

This is a paragraph with no specified margins

This is a paragraph with specified margins

This is a paragraph with no specified margins

Sets the padding The values comes in % (defines padding in % of the width of the closest element) and /ength (defines a fixed padding)

This is a tablecell with equal padding on each side

This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.

Trang 15

- Vidu:

<html>

catyle type="text/cas"> Tea

(

list-style: square inside url('arrow.gif'}

}

</style>

</head>

<body>

<ul>

<1i>Coffee</1i>

<1i>Tea</1i>

<1i>Coca Cola</1i>

</ul>

</body>

</html>

IX CSS Table

-_ Thuộc tính:

border-collapse Sets whether the table borders collapse 5 1 7 2

are collapsed into a single border separate

or detached as in standard HTML

border-spacing Sets the distance that separates /ength length 5M 1 6 2

cell borders (only for the

"separated borders" model)

left right

empty cells in a table (only for the hide

"separated borders" model)

table-layout Sets the algorithm used to display auto 5 1 6 2

the table cells, rows, and columns fixed

- Vidu:

Định dạng
Số trang	16
Dung lượng	4,26 MB