Loading data........
Tin nhanh :
Xem Tivi Online

Tổng hợp các kênh giải trí (Đang cập nhật chức năng..)

New Update

Truyền hình SCTV

SCTV14

SCTV15

SCTV16

SCTV17

SCTV18 HD

Vietnam Channels

VTV1

VTV2

VTV3

VTV4

VTV6

VTV9

VTC Online

VTC1

VTC2

VTC3

VTC4

VTC5

VTC6

VTC Online

VTC7

VTC8

VTC9

VTC10

VTC11

VTC12

Truyền hình tp HCM

HTV1

HTV2

HTV3

HTV4

HTV7

HTV9

Radio Channels

VOV1

VOV2

VOV3

VOV4

VOV5

VOV GT-HN

Home » » Tìm hiểu về CSS căn bản

Tìm hiểu về CSS căn bản

Đối với nhiều lập trình viên, tuy rằng có kinh nghiệm lập trình thâm niên 1-2 năm thậm chí đến 3-4 năm nhưng nhiều người vẫn chưa nắm rõ hết được những thuộc tính cơ bản của cấu trúc html và css. Hôm nay mình sẽ viết 1 bài giới thiệu khái quát chung về những kiến thức cơ bản và cách dùng Css kết hợp với Html trong việc thiết kế 1 website.

I. Cú pháp chung:

- Đối với file css khi được viết riêng rẽ bên ngoài thì khi chèn vào trong file Html sẽ có cú pháp:

<link rel="stylesheet" type="text/css" href="css_file_name.css"/>

- Còn nếu viết trực tiếp css bên trong file Html thì sẽ là

<style type="text/css">
   /*---- Nội dung style  css */
</style>

Cả 2 đều được chèn vào bên trên thẻ đóng </head>

- Ngoài ra css còn có thể viết trực tiếp bên trong các thẻ con của Html

Cấu trúc <tag style="property:value;">

Ví dụ:

< div style="color:black;">Hello world</div>

<a href="#" style="padding:10px 10px;"></a>

II. Cách sử dụng

     Trước tiên ta cần hiểu được các tác dụng của thẻ DIV, SPAN, UL, LI….., khi nào dùng CLASS, khi nào dùng ID để viết css.

1- Thẻ DIV được coi như định dạng cấu trúc của 1 khối đối với dữ liệu bên trong nó. Khi sử dụng thẻ nhiều DIV chứa nội dung text bên trong nó liền nhau thì mặc định dữ liệu text sẽ tự ngắt xuống dòng.

VD: Nội dung 1 đoạn Html sử dụng thẻ DIV như sau

<div>Nội dung mô tả 1</div>
<div>Nội dung mô tả 2</div>
<div>Nội dung mô tả 3</div>
<div>Nội dung mô tả 4</div>

Thì dữ liệu khi hiển thị trên trình duyệt sẽ theo từng dòng 1, kể cả khi bạn đặt các khối thẻ DIV liền nhau như:

<div>Nội dung 1</div><div>Nội dung 2</div>

2- Thẻ SPAN: khác với thẻ DIV khi sử dụng thẻ SPAN thì dữ liệu text của bạn sẽ được hiển thị trên 1 dòng

ví dụ:

<span>abc</span>
<span>def</span>
<span>ghi</span>

Kết quả hiển thị sẽ là

abc def ghi

3- Các thẻ khác: UL, LI, P, …Flirt male… nhiều thẻ quá, khi nào rảnh update tiếp.

Giờ ta tiếp tục nói về cách viết khi nào sử dụng CLASS hay ID để viết trong CSS. Để dễ hiểu khi nhắc đến ID là ta biết ngay đó là 1 khối hay 1 cái gì đó thuộc về duy nhất chỉ có 1. Ví dụ trên 1 website thì cấu trúc chỉ có 1 footer ta xác định ngay là sử dụng ID để tạo style cho footer này, còn CLASS là lớp giao diện mà ta có thể sử dụng đi sử dụng nhiều lần Rolling on the floor laughing (không biết giải thích kiểu này có ai hiểu không nhỉ Secret telling smile).

Cấu trúc viết css sử dụng với Class thường có dấu chấm (.) đằng trước mỗi tên class đó.

Còn với ID là sử dụng dấu thăng (#) đằng trước tên.

Ví dụ

/*---- Với class --->

     .button { }

      .error {}

/*-- Với ID --->

     #footer {}

     #taskbar {}
     

Khi sừ dụng trên Html sẽ được viết như sau

<a href="#" class="button" > Click me </a>

<div id="footer">Thế giới Blogger</div>

III. Các thuộc tính trong CSS

FONT

font_demo

TEXT

text_demo

Open-mouthed smile Vẽ vời lâu quá, mọi người nhìn hình rồi sẽ hiểu

3-28-2012 1-06-17 AM

3-28-2012 1-06-31 AM3-28-2012 1-06-40 AM3-28-2012 1-06-51 AM3-28-2012 1-07-01 AM

Đối với CSS3

image

image

image

image

image

image

image

Like và chia sẻ với bạn bè :

0 nhận xét:

Speak up your mind

Tell us what you're thinking... !

 
Proudly powered by Blogger
Copyright © 2009-. The Color Of Life - All Rights Reserved