Tự học Css by Nhơn Zenki

Giao trinh HTML - CSS

Baøi 1 CSS (Cascading Style Sheets) Các cách sử dụng CSS trên trang HTML Cú pháp CSS Các loại Selector Các nhóm thuộc tính định dạng . Thực hiện trang web đơn giản, phần nội dung trang giới thiệu CSS là chữ viết tắt của Cascading Style Sheets, là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..

Ba cách để định dạng trang web Có ba cách bạn có thể sử dụng để định dạng trang web là: cục bộ, nhúng vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng là liên kết đến một file riêng biệt được sử dụng phổ biến nhất.

1 . Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML Cách định dạng cục bộ là sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ tác động lên thẻ đó. ( đã sử dụng tại bài 2).

2 . Nhúng vào trang web Khai báo code CSS nằm trong cặp thẻ <style></style> được đặt ở phần <head></head> của tài liệu. Về cơ bản nó cũng chỉ có tác động cục bộ lên file mà bạn chèn đoạn code CSS này. Nó có phạm vi ảnh hưởng lớn hơn là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các file khác trong cùng một bộ web. <head> <title>Nhúng vào trang</title> <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ /> <style type=”text/css”> Body{ background-color: green; font-faminly :arial; font-size:14px; color:white; } h1 {font-size: 16px;} p {color:blue;} </style> </head>

3 . Liên kết đến một file biệt lập - Đây là thế mạnh thực sự của CSS bởi vì, chỉ cần tạo ra một file CSS và viết code chỉ một lần. Nó sẽ ảnh hưởng đến toàn bộ các file trong bộ web chứ không chỉ ảnh hưởng đến một file .html đơn lẻ hoặc chỉ một thẻ trong hàng ngàn thẻ mà bạn có.

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS - Bằng cách này chúng ta có thể tách rời hoàn toàn những thành phần trình bày và nội dung ra khỏi nhau. Nếu toàn bộ code CSS được viết trong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa chữa trang web trở nên cực kỳ nhanh chóng và đơn giản. - Để liên kết file CSS đến tất cả các file .html, chỉ cần chèn đoạn code sau vào giữa thẻ <head></head> của tài liệu: <link href="style_sheet.css" rel="stylesheet" type="text/css" /> - Trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web. Tất nhiên trong file style_sheet.css phải viết code CSS rồi.

4 . Kết luận: - Mức độ ưu tiên tải về theo thứ tự sau: Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập

Cú pháp của CSS - Cú pháp của CSS được chia làm 3 phần. o

Phần thẻ chọn (selector),

phần thuộc tính (property),

phần giá trị (value).

selector {property: value} - Nếu giá trị có nhiều từ, nên đặt giá trị đó vào trong dấu nháy kép p {font-family: "sans serif"}

- Trong trường hợp thẻ chọn (selector) có nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;). p {text-align:center;color:red}

- Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt. p{ text-align: center; color: black; font-family: arial }

Các loại selector Có nhiều loại selector nhưng 4 loại được sử dụng nhiều nhất là:

- Element selector - Class selector

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS - Id selector - Descendant selectors những loại còn lại ít và không nên sử dụng vì tích tương thích trình duyệt kém.

Element selector: Tự động định dạng vào tất cả html element cùng tên

Body{ PROPERTY: VALUE } /* tag Body sẽ bị ảnh hưởng bởi thuộc tính được định dạng trong dấu {}*/ Ví dụ:

Body{ background-color: #003366; font-faminly :arial; font-size:14px; color:white; } } Kết qủa: trang web sẽ có nền xanh đậm (003366), FONT chữ mặc định cho toàn trang là arial, size 14, màu trắng

Class selector: - class cho phép định dạng style của các đối tượng (table,td,div,span...) - Bạn có thể sử dụng lặp đi lặp lại nhiều lần trong cùng một file HTML Đặt tên selector bắt đầu bằng dấu chấm theo cú pháp sau:

.selector{ Property:value; } ví dụ: <style> .special{ color: red; } </style> …. <span class=" special">SPAN</span> <p class=" special ">P</p> <div class=" special ">DIV</div> kết quả: SPAN P DIV ID selector:

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS cũng giống như class nhưng ID chỉ được sử dụng một lần Đặt tên selector bắt đầu bằng dấu # theo cú pháp sau:

#selector{ Property:value; } ví dụ:

Sự khác biệt giữa Class và ID Nói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang.

Decendant selector: Selector được đặt theo thứ tự cha con

Selector1 selector2 { Property: value; } Ví dụ:

p a { color: blue } <p> This is <a href=”#”>long<a> text </p> Những tag a trong tag <p> sẽ bị ảnh hưởng bởi luật trên

Pseudo Class - Pseudo Class sẽ tạo ra thay đổi tới thành phần của XHTML khi một sự kiện nào đó sẽ xảy ra. - Pseudo Class được sử dụng thông dụng nhất với các đường liên kết khi người dùng di chuột qua hoặc nhấp vào nó. - Với những trình duyệt mới hơn (trừ Internet Explorer 6) bạn có thể dễ dàng tạo ra hiệu ứng Rollover với bất cứ thành phần nào trên trang chứ không chỉ thẻ <a>.

Pseudo Class cho thẻ liên kết <a> Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS - Pseudo Class được sử dụng nhiều nhất với các thẻ liên kết (thẻ <a>) để tạo ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó - Có tất cả 4 trạng thái của đường liên kết o

Link: đơn thuần là báo cho người đọc biết nó là đường liên kết.

Visited: Người đọc đã từng nhấp chuột vào link này rồi.

Hover: Người đọc di chuột qua đường liên kết

Active: Đường liên kết đang được người đọc nhấp chuột.

- Tương đương với 4 Pseudo Class.(cho toàn trang) a:link {color:orange;} a:visited {color:gray;} a:hover {color:red; text-decoration:none;} a:active {color:navy;} - Diễn giải: o

Bình thường sẽ có màu cam và gạch chân là giá trị mặc định.

Đường liên kết đã được người dùng nhấp vào 1 lần, sẽ có màu xám.

Người đọc di chuột lên (chưa nhấp) nó sẽ có màu đỏ và không có gạch chân

Người đọc chỉ nhấp và giữ chuột nó sẽ có màu xanh đậm (ít khi xảy ra)

- Trong 4 trạng thái trên thì bạn không nhất thiết phải khai báo cả 4 trạng thái. Thường thì người ta chỉ khai báo 2 trạng thái chủ yếu là :link và :hover. Còn :visited và :active thì cũng không thực sự cần thiết lắm. Trình duyệt sẽ bỏ qua những trạng thái không được khai báo. - Cho một vùng của web, thông qua một class: .class_name a: link { properties: value; } .class_name a: visited{ properties: value; } .class_name a: active { properties: value; } .class_name a: hover { properties: value; } .class_name a: focus { properties: value; } - hoặc a.class_name: link { properties: value; } a.class_name: visited{ properties: value; } a.class_name: active { properties: value; } a.class_name: hover { properties: value; } a.class_name: focus { properties: value; }

- các định dạng thẻ a này chỉ có ảnh hưởng trong các đối tượng sử dụng css class_name và áp dụng tương tự cho trường hợp nếu sử dụng id (#)

Gom nhóm CSS

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS - Nếu có nhiều selector có cùng chung thuộc tính, ta có thể gom nhóm những selector đó lại cùng một nhóm h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } Tương đương với: h1, h2, h3 { font-family: sans-serif }

Định dạng khối – BOX Model - Box Model là khái niệm rất cơ bản và cũng là quan trọng nhất của CSS. Bởi vì nó quyết định các thành phần trên trang web sẽ được xuất hiện như thế nào và chúng tương tác với nhau ra sao. Dưới đây là hình minh hoạ

CSS Margins - Margin dùng để xác định khoảng cách giữa nó và đối tượng bao quanh nó, ta có thể sử dụng 4 thuộc tính của margin để định khoảng cách cho left,right,top,bottom. Đơn vị tính (length (px,pt) / - percent (%) / - auto) - Có thể định giá trị cho cả top,left,bottom,right trên cùng một dòng (thuận chiều kim đồng hồ bắt đầu từ top) Ví dụ1: margin: 10px 5px 0px 3px; tương đương: margin-top: 10px; margin-right: 5px; margin-bottom: 0px; margin-left: 3px;

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS

Ví dụ 2: margin: 10px Cả 4 giá trị top/ right / bottom / left đều bằng 0 Ví dụ 3: margin: 0 auto; Giá trị top/ bottom=0; right / left : auto Nếu sử dụng cho div trên trang html sẽ định cho div canh giữa trang.

CSS Padding - Tương tự như khi sử dụng margin ở trên nhưng ý nghĩa sẽ là định khoảng các từ border đến vùng nội dung bên trong - Padding thường được sử dụng để tạo ra khoảng trống giữa đường biên và chữ như 2 ví dụ dưới đây.

Đoạn văn này có đường viền mà không có padding Đoạn văn này có đường viền và giá trị padding là 5px.

CSS Border: - Khi khai báo đường viền, bạn nên nhớ luôn phải khai báo giá trị border-style. Nếu giá trị này không được khai báo, tất cả những giá trị như màu sắc, độ dày sẽ không được hiển thị. Đơn giản là vì khi giá trị border-style không được khai báo, trình duyệt sẽ cho rằng nó bằng 0. Ví dụ: .duongvien{ border:solid 1px #003366 }

Nhóm CSS Text Một số định dạng cho Text:

- Color: tên màu hoặc mã màu : Màu cho text - Letter Spacing: n : Khoảng cách giữa các ký tự ( px /pt /em/ normal) - Text Align: left / right/ center/ justify : canh lề khối văn bản - Text Decoration: kiểu chữ

( none / underline (gạch chân) / overline (gạch trên đầu) / line through (gạch xuyên chữ)..)

- Text-indent: định dạng thụt đầu dòng cho dòng đầu tiên trong một đoạn văn - Text Transform: định dạng chữ hoa chữ thường

(none / capitalize chữ đầu trong 1 từ in hoa/ upperrcase : tất cả chữ đều in hoa/ lowercase : tất cả chữ đều thường dù có nhập vào dạng in hoa)

- Word Spacing : khỏang cách giữa các từ trong câu

Nhóm CSS Font Properties

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS - Font- family: định dạng font (thường đi 3 font 1 lúc, nếu font đầu tiên tại máy người dùng không có, sẽ hiển thi nội dung bằng font thứ hai, nếu font thứ hai không có , sẽ dùng font cuối cùng để hiển thị nội dung.) - Font- size: định kích thước cho text - Font- style: định dạng in đậm,in nghiêng... - Font- weight: định dạng độ đậm của text

Nhóm CSS Background: - Background-color: value; /* giá trị màu */ - Background-image: url(path_to_image); / ảnh nền cho trang ví dụ: .

background-image:url(images/anhnen.gif);

- Background-repeat: điều khiển quá trình lặp lại của ảnh nền o

no-repeat ( không lặp)

repeat (lặp theo tất cả cách hướng)

repeat-x (chỉ lặp theo trục x- ngang)

repeat-y (chỉ lặp theo trục y- dọc).

- Background-attachment: khóa ảnh nền o

scroll : khi thanh cuộn được trượt ảnh nền sẽ cùng trượt với nội dung trên trang

fixed: ảnh nền sẽ không bị trượt đi ….

- Background-position : vị trí bắt đầu của ảnh nền

CSS Order & Unorder list - list-style định dạng style cho list(<li>..</li>

list-style-position: inside hoặc outside

list-style-image: none hoặc url(path_to_image); thay các nút của list bằng 1 ảnh

list-style-type : các dạng của nút list bao gồm các giá trị trong danh sách

CSS Dimension - height: chiều cao ( px / %/ auto) - max- height: chiều cao tối đa - min- height: chiều cao tối thiểu - width: chiều rộng - min-width: chiều rộng tối thiểu - max- width: chiều rộng tối đa - line-height: chiều cao dòng văn bản

CSS Classification - Display: value

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS o

none : không hiển nội dung của đối tượng

block : xuống dòng ở đầu và cuối đối tượng

inline : không xuống dòng ở đầu và cuối đối tượng(ngược với block)

CSS float - Float:value/ định vị trí hiển thị của một đối tượng so với đối tượng chứa nó và không làm ảnh hưởng đến phần text/image trong đối tượng cha o

value: + none / + left / + right

** thường được dùng trong design web bằng div

- Clear:value / xóa ảnh hưởng giá trị của Float o

Left: xóa ảnh hưởng của float bên trái của div kề trước

right: xóa ảnh hưởng của float bên phảicủa div kề trước

both: xóa ảnh hưởng của float trái & phải của div kề trước

Thực hành bài 3 tạo trang với nôi dung như sau:

Thực hiện:

5 . Khai báo site:  Site > new site > advanced>nhập tên vào ô sitename: Thuyvy_flowershop  Local root folder: chỉ đường dẫn tới folder thuyvy_flowershop > done

6 . Tạo và lưu file html:  File > new > html > create  File > save > mở folder thuyvy_flowershop / lưu tên file : GIOITHIEU.html /save

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy

Giao trinh HTML - CSS

7 . Tạo và lưu file CSS:  File > new > CSS > create  File > save > tạo thêm folder CSS trong folder thuyvy_flowershop / lưu tên file

style.css vào folder CSS vừa tạo /save

8 . Tạo tiêu đề cho trang  Tại sau thẻ <tittle> nhập “ THUYVY_flower shop “.

<title>THUYVY_flower shop</title>

9 . Liên kết CSS vào HTML  Nhập thẻ sau vào phần <head> của trang

10 .

Tạo các style định dạng trên file style.css  Định dạng mặc định font chữ, canh lề trên cho trang

body{ font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666; margin-top:0; }  Định dạng kích thước và canh vào giữa trang cho thẻ Div lớn nhất trên trang

#container{ width : 600px; margin: 0 auto; }

Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM

Gv: Vũ Thị Thanh Thúy