WEB MYDOCUMENT

Các đơn vị đo lường cơ bản Đơn vị đo lường được ứng dụng trong việc thiết lập chiều dài hoặc chiều rộng của đối tượng Có 2 loại đơn vị đo cơ bản: o Đơn vị đo tuyệt đối Absolute unit là c

Trang 2

HTML là từ viết tắt của cụm từ HyperText Markup Language.

II CÁC THUỘC TÍNH VÀ THẺ TRONG HTML

Trang 3

o Thẻ <sub> , cú pháp: <sup> chỉ số trên </sup>

o Thẻ <sub>, cú pháp: <sub> chỉ số dưới </sub>

o Thẻ <pre> văn bản định dạng trước

4) Thẻ đánh dấu sự thay đổi về nội dung

o Thẻ <del>

o Thẻ <ins>

o Thẻ <s> ngạch ngang qua phần văn bản đó

5) Câu trích dẫn và định nghĩa

o Thẻ <cite> nội dung tham chiếu

o Thẻ <dfn> thuật ngữ cần diễn giải

o Thẻ <address> thông tin liên lạc

6) Một số thẻ khác

o Thẻ <strike> chữ bị gạch ngang

o Thẻ <big> chữ lớn hơn bình thường

o Thẻ <small> tương tự thẻ <big>

o Thẻ rỗng <basefont> định nghĩa kích thước font chữ cho đến khi kết thúc văn bản ,thẻ này chỉ có 1 thuộc tính size và chỉ có thẻ mở.Thẻ rỗng là thẻ chỉ có thẻ mở không có thẻ đóng

7) Thẻ <hr>

Là thẻ tạo ra đường thẳng ngang gồm các giá trị sau:

• Align: căn lề left/center/right

• Color: mà sắc cho đường

• Noshade không có bóng

• Size: độ dày đường thẳng

• Width: chiều dài đường thẳng pixel hoặc % bề dày cửa sổ trình

Trang 4

8) Thẻ liên kết <a>

Cú pháp:

<a href=”url_đường dẫn tới liên kết”

Name=name_tên Tabindex=n Title=”tiêu đề”

Target=”_blank hoặc _self”>

…… siêu văn bản………

</a>

Trong đó:

• Href : là địa chỉ của 1 trang web được liên kết có thể là 1 url nào đó

• Name: đặt tên cho vị trí đặt thẻ

• Tableindex: thứ tự di chuyển khi nhấn phím tab

• Title: văn bản hiện thị khi di chuột trên siêu liên kết

• Target: mở trang web được liên kết trong 1 cửa sổ mới (_blank) hoặctrong cửa sổ hiện tại (_self) hoặc trong 1 frame (tên frame)

Ngoài ra ta có thể dung thẻ liên kết <a> để kết nối tới 1 email Như sau:Nếu đặt thuộc tính href của thẻ <a> bằng giá trị mail to: address@domain thì khi kích hoạt kết nối thì sẽ kích hoạt chức năng thư điện tử của trình duyệt

Cú pháp như sau:

<adress>

<a href=”mail to::đỉa chỉ mail cần liên kết tới”>

…….nội dung cần nói đến……….

Trang 5

b Thẻ <figure>

Cú pháp:

<figure>

<img src=”đường dẫn tới ảnh cần lấy”

Alt=”chú thích khi ảnh không hiện thị”/>

11) Các thuộc tính của thẻ <body>

o Link: liên kết chưa xem

o Alink: liên kết đang xem

o Vlink: liên kết đã xem

o Bgcolor: màu nền

o Background: ảnh nền

o Text: màu chữ

o Scroll: có 2 giá trị yes hoặc no, xác định thanh cuộn có hay không

o Top margin: lề trên

o Right margin: lề phải

o Bottom margin: lề dưới

o Left margin: lề trái

Trang 6

12) Biểu mẫu form

Cú pháp:

<form method=”post hoặc get”

Action=mailto: “đỉa chỉ mail”>

2 Cấu trúc của một đoạn CSS

Vùng chọn {tên thuộc tính:giá trị;

Trang 7

Tên thuộc tính: giá trị;

……….}

Trong đó:

Vùng chọn có thể là thẻ HTML,ID,CLASS,danh sách thứ cấp…

3 Nhúng CSS vào trong trang web

Có 3 cách cho phép chúng ta chèn định dạng CSS vào trong web site

o Cách 1: Chèn kiểu Inline

o Cách 2: Chèn kiểu External

o Cách 3: Chèn trực tiếp vào thẻ của HTML (Inline style)

3.1 Chèn kiểu Inline style

Là cách chèn trực tiếp các định dạng CSS trong cặp thẻ <style> đặt trong phần Head

Cú pháp như sau:

<!doctype html>

<html>

<head>

<title> tiêu đề web site </title>

<style> định dạng CSS cho các thành phần </style>

3.2 Chèn kiểu External style

Là cách định dạng CSS riêng trong 1 file có phần mở rộng là CSS, sử dụngcách này cùng 1 file CSS có thể áp dụng cho nhiều web site

Trang 8

Cú pháp: ta khai báo thẻ <link> để chỉ đến file chứa định dạng CSS trong phần Head như sau

<!doctype html>

<html>

<head>

<title> tiêu đề web site </title>

<link rel=”stylesheet” href=”đường dẫn tới nơi chứa file CSS”>

3.3 Chèn trực tiếp vào thẻ của HTML

Inline style được sử dụng nhiều trong trường hợp một thẻ nào đó của HTML cần có style (định dạng) riêng của nó

Inline style là cách được áp dụng cho chính thẻ HTML đó, đây là cách có

độ ưu tiên cao nhất so với 2 cách trên

Trang 9

II CÁC THẺ TRONG CSS

1 Vùng chọn trong CSS

Có 5 kiểu vùng chọn cơ bản bao gồm:

o Vùng chọn theo tên thẻ HTML: định dạng CSS cho các thẻ có sẵn trong HTML

o Vùng chọn theo ID: định dang CSS riêng cho từng thành phần riêng biệt ,chọn theo tên riêng và mỗi vùng chọn có một ID riêng

o Vùng chọn theo CLASS: định dạng CSS có thể dùng cho nhiều phần

tử khác nhau

o Vùng chọn thứ cấp: định dạng cho phần tử con của một phần tử nào

đó Chẳng hạn như định cho li trong danh sách ul hoặc ol…

o Vùng chọn thứ cấp liền nhau: định dạng cho phần tử con thứ cấp liền

kề với phần tử mẹ.chẳng hạn như định dạng cho phần tử con li của

Trang 10

.tên class {định dạng cho class}

cách dung:

khai báo và sử dụng như bình thường sử dụng id trên

2 Các đơn vị đo lường cơ bản

Đơn vị đo lường được ứng dụng trong việc thiết lập chiều dài hoặc chiều rộng của đối tượng

Có 2 loại đơn vị đo cơ bản:

o Đơn vị đo tuyệt đối (Absolute unit) là các đơn vị vật lý được định nghĩa sẵn trong máy tính

Trang 11

• …

3 Các thuộc tính thông dụng cho đoạn văn bản

o Text-align: căn lề văn bản gồm các thuộc tính như

• Left: căn trái

• Right: căn phải

• Centre: căn giữa

• Justify: căn đều 2 bên

o Text-decoration: thêm gạch trên, gạch dưới, gach giữa (gạch ngang) văn bản , gồm các thuôc tính như

• Underline: kẻ dưới dòng (gạch chân ký tự văn bản)

• Line-through: kẻ ngang dòng (gạch ngang qua ký tự văn bản)

• Overline: kẻ trên dòng (gạch trên ký tự văn bản)

o Text-indent:tạo khoảng trống bên tay trái cho văn bản (chỉnh vị trí của đoạn văn bản theo chiều ngang)

• Cú pháp: text-indent: vị trí;

• Ví dụ: p{ text-indent: 200px;} hoặc p {text-indent: -200px;}

vị trí có thể là giá trị âm hoặc dương

o Text-shadow: đổ bóng cho văn bản

o Text-transform: tùy chỉnh hiện thi in hoa và in thường gồm có các thuộc tính như:

• Uppercase: chữ in hoa toàn bộ văn bản

• Capitalize: Chữ in thường toàn bộ văn bản

• Lowercase: viết hoa chữ cái đầu toàn văn bản

o Letter-spacing: định khoảng cách giữa các ký tự, cú pháp: spacing: kích thước (kích thước đung đơn vị có thể dung đơn vị px, ) Đây là thuộc tính có thể dung cho 1 số thẻ như p, h1, h2,…

letter- Một số lưu ý đối với đoạn văn bản:

 Thường sử dụng thẻ p hoặc block

 Một số thuộc tính thông dụng sử dụng để định dạng cho đoạn văn bản là:

 Color: #mã màu hoặc color: tên màu; định dạng màu sắc cho đoạn văn bản

 Font-family: tên font (arial,tahoma,sans-serif…) đặt font cho đoạn văn bản

Trang 12

 Font-size : kich thước ; đặt kích thước font cho đoạn văn bản ví dụ : p { font=size : 13px ;}

 Font-style : kiểu font ; đặt kiểu font cho đoạn văn bản kiểu font bao gồm các giá trị như : italic (chữ in

nghiêng hay chữ gầy), bold (chữ in đậm hay chữ béo), normal (chữ in thường), oblique (kiểu chữ xiên)

 Font-weigh : giá trị ; thuộc tính này có 3 giá trị là normal ( bình thường), bold ( đậm), đặt dạng số 3.300

 Letter-spacing : căn chỉnh khoảng cách giữa các ký tự

ví dụ: h3 { leter-spacing: 2em; } hoặc h3 { spacing: -3em; }

letter- Line-heigh : căn chỉnh khoảng cách giữa các dòng Ví

dụ : p {line-heigh : 150%} hoặc p {line-heigh:15px; }

 Đặt hướng cho đoạn văn bản

• Div.rtl {direction: rtl; } hướng từ phải qua trái

• Div { direction: ltr; } hướng từ trái qua phải

 Word-spacing : khoảng cách ; tăng khoảng cách giữa các từ ví dụ p { word-spacing : 30px ; }

 White-space : giá trị ; làm mất giá trị đường bao của một thẻ HTML Thuộc tính white-space sẽ làm toàn bộđoạn văn bản ở trên 1 dòng Ví dụ : p { white-

space :nowrap ; }

4 Đường viền và các thuộc tính của đường viền.

Border là một thành phần quan trọng trong một trang web Nó thường đượcdùng trong trang trí, đóng khung cho đối tượng cần nhấn mạnh, phân cách đối tượng giúp trang web trông dễ nhìn hơn Thuộc tính này có thể được áp dụng cho các thẻ như : div, li, table…

Các thuộc tính của đường viên bao gồm :

o Border- width : quy định độ rộng đường viền của một đối tượng web Bao gồm các giá trị như :

Trang 13

o Border- color : quy định màu sắc đường viền cho đối tượng web Giátrị của nó bao gồm tất cả những giá trị màu mà CSS hỗ trợ.

o Border-style : quy định kiểu đường viền của một đối tượng web CSS cung cấp 8 kiểu đường viền tương ứng với 8 giá trị như :

Ngoài ra với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng (ứng với đường viền mỗi phía đều có có các thuộc tính tương ứng: border-width,

border-color, boder-style)

o Border-top: đường viền phía trên

o Border-right: đường viền phải

o Border-bottom: đường viền bên dưới

o Border-left: đường viền bên trái

Ta có thể sử dụng phương pháp viết mã giản lược như sau:

Border: border-width border-color border-style;

Ví dụ:

Trang 14

div.border { border: 1px solid #333; }

5 Thuộc tính Margin

Định nghĩa khoảng trắng bao quanh phần tử HTML Nó có thể dùng giá trị

âm để lồng nội dung vào với nhau

Cá giá trị của thuộc tính gồm :

Trang 15

margin-top=margin-6 Thuộc tính Padding

Định nghĩa khoảng trống giữa mép các phần tử tới các phần tử con hoặc nộidung bên trong Chúng ta không thể gán giá trị âm cho thuộc tính này, padding không ảnh hưởng tới khoảng cách giữa các đối tượng như margin nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng

Có thể sử dụng cách viết gọn (dùng mã giản lược) cho thuộc tính padding

o Nếu thuộc tính có 4 giá trị thì thứ tự là padding-top,padding-right, padding-bottom, padding-left

Trang 16

div.padding { padding: 4px 6px; } bottom=4, padding-right=padding-left=6.

//padding-top=padding-7 Background

Gồm các thuộc tính:

o Background-color: định màu nền cho 1 thành phần trên trang web,

cú pháp là background-color: tên màu hoặc #mã màu;

o Background-image: chèn ảnh nền vào một thành phần trên trang

web, cú pháp là background-image: url(đường dẫn tói ảnh cần chèn),nếu đặt ảnh trong cùng thư mục với file CSS thì ta chỉ cần viết tên ảnh không cần đường dẫn

o Background-repeat: lặp lại ảnh nền, thuộc tính được sử dụng khi ảnh

nền đặt cho 1 đối tượng quá nhỏ so với không gian còn lại của đối tượng thuộc tính này gồm 4 giá trị:

• Repeat-x: lặp lại ảnh theo phương ngang

• Repeat-y: lặp lại theo Phuong doc

• Repeat: lặp lại theo cả 2 phương

• No-repeat: không lặp lại

o Background-position: theo mặc định hình nền khi chèn sẽ nằm ở góc

trên bên trái màn hình Tuy nhiên bạn có thể đặt hình nền ở bất kỳ vịtrí nào trong không gian mà nó làm nền bằng thuộc tính background-position Cú pháp như sau background-position: vị trí ảnh nền; vị trí ảnh nền có thể là các giá trị centimeters,pixels,inches,… hay các vị trí đặc biệt như top,bottom,left,right

Ví dụ về thuộc tính background-position

Background-position:5cm 2cm Ảnh được định vị 5cm từ trái qua và 2cm từ trên xuống Background-position:20% 30% Ảnh được định vị 20% từ trái qua và 30% từ trên xuống Background-position:bottom left Ảnh được định vị ở góc trái phía dưới

Có thể sử dụng cách viết gọn (dùng mã giản lược) cho thuộc tính

background Ví dụ :

Từ đoạn code này :

Background-color: #fffffff;

Trang 17

Background-image: url(hinh.jpg);

Background-repeat:no-repeat;

Background-attachment:fixed;

Background-position: bottom;

ta có thể nhóm lại như sau:

background: #ffffff url(hinh.jpg) no-repeat fixed right bottom;

8 Làm thẻ Div có thnh cuộn

Tiến hành style(định dạng CSS) cho thẻ Div cần để cố định 2 giá trị width

và height, để thẻ div hiện thị thanh cuộn ta để thuộc tính display có giá trị là auto

Định dạng CSS cho thẻ Div như sau:

# tên ID {width: giá trị cụ thể nào đó;

Height: giá trị cụ thể nào đó;

Display: auto;

Border:giá trị ;Margin: giá trị;}

Sau khi sử dụng kỹ thuật này nếu nội dung bạn đưa vào dài hơn chiều rộng

và chiều cao của thẻ Div thì trình duyệt sẽ tự đọng sinh ra thanh cuộn ngang và dọc giống iframe

9 Style một kiểu bubber đơn giản

Dạng bubble thường được sử dụng trong việc trích dẫn lời nói của một tác giả nào đó hoặc trong các lời bình luận của 1 blog nào đó

Trang 18

<div class="bubblewrapper">

<div class="comment"> Đây là ví dụ của một kiểu bubble đơn giản, các bạn có thể ứng dụng chúng vào ngay trong site của mình Chúc các bạn thành công! </div>

<div class="commentfooter"> <span class="author">Tác giả:</span>

<a href="www.cssyeah.com" target="_blank" title="Tác giả">CSSYeah.com</a>

</div>

Với cách làm trên ta sử dụng 2 thẻ Div , thẻ div class=”comment” chứa lời bình luận còn thẻ Div class=”footercomment” chứa thông tin tác giả, thẻ Div class=”bubblewrapper” trong trường hợp này có tác dụng giới hạn kích thước cho

2 thẻ div bên trong Trong phần nội dung chúng ta có thể dung nhiều lần dạng bubble này nên ta định dạng CSS

Phần định dạng CSS thuộc tính class cho thẻ Div

#wrapper { width: 400px;

margin: 0 auto;

padding: 0;

} div.comment { margin: 0;

padding: 10px;

background: #E8ECEF;

} div.commentfooter { padding: 8px 0 0 22px;

Trang 19

background: url(arrow-down.gif) no-repeat 20px 0

#FFFFFF;

} span.author { padding-left: 15px;

background: url(author.gif) no-repeat left center;

font-weight: bold;

} div.commentfooter a { color: #CC0000;

} div.commentfooter a:hover, div.commentfooter a:active { text-decoration: none;

• Lower-roman: số la mã thường: i, ii, iii, iv,

• Upper-roman: số la mã hoa: I,II,III,IV,…

• None: không để gì cả

o Thuộc tính list-style-position gồm các giá trị

• Inside: các dấu nằm bên trong khung của danh sách, đây là giá trị mặc định

• Outside: các dấu nằm bên ngoài khung của danh sách, để thấy

rõ ta phải để padding và margin của khung ul bằng 0

Trang 20

o Thuộc tính list-style-image: url(); dùng để thay đổi dấu hiện thị bằnghình ảnh Khi dung thuộc tính này thì ta nên để thuộc tính list-style-type có giá trị là none để dễ sử dụng

Có thể dung cách viết giản lược code cho list-style như sau:

List-style: type position image

Ví dụ:

Li { list-style : circle inside ; }

///////////////////////////////////////////////////////////////////////////////////////

Overflow : auto ; Clear : both ; A{

Color :#ten mau ; Text-decoration ;none ;}

Color:#ten mau;

} A{} vaf a:link{} la nhu nhau

A :action{

Background :#ten mau}…khi nhap vao ma chua tha chuot ra

Định dạng
Số trang	22
Dung lượng	124,56 KB