LẬP TRÌNH WEBfit.lqdtu.edu.vn/files/DanhSach/Bai2.pdfMột số đặc tính cơ bản của CSS...

LẬP TRÌNH WEB

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

CSS - JAVASCRIPT

LẬP TRÌNH WEB

1

� CSS

� Javascript

NỘI DUNG


� Giới thiệu: CSS là một ngôn ngữ quy định cáchtrình bày cho các tài liệu viết bằng HTML, XHTML,XML, hay UML,…

� Một số đặc tính cơ bản của CSSCSS quy định cách hiển thị của các thẻ HTML

CSS


� CSS quy định cách hiển thị của các thẻ HTMLbằng cách quy định các thuộc tính của các thẻđó.

� Một số đặc tính cơ bản của CSS� Có thể khai báo CSS bằng nhiều cách khácnhau. Mức độ ưu tiên của CSS sẽ theo thứ tựsau.1. Style đặt trong từng thẻ HTML riêng biệt

CSS


1. Style đặt trong từng thẻ HTML riêng biệt

<div id="vidu" style="width:300px; height:100px; background-color: #00FFFF; text-align: justify;">

...

</div>

� Một số đặc tính cơ bản của CSS� Có thể khai báo CSS bằng nhiều cách khácnhau.2. Style đặt trong phần <head><html>

CSS


<head><title>Tiêu đề trang</title><style type="text/css">#vidu{ width: 400px; height:200px;

background-color : #AB0176; text-align : "justify";}</style>

</head><body>

<div id="vidu“> … </div></body>

</html>

� Một số đặc tính cơ bản của CSS� Có thể khai báo CSS bằng nhiều cách khácnhau.3. Style đặt trong file mở rộng .css

CSS

<html>


<html>

<head>

<title>Tiêu đề trang</title><link type="text/css"

rel="Stylesheet"

href="StyleSheet.css" />

</head>

<body>

<div id="vidu“> ...</div>

</body>

</html>

� Một số đặc tính cơ bản của CSS� Có thể khai báo CSS bằng nhiều cách khácnhau. Mức độ ưu tiên của CSS sẽ theo thứ tựsau.1. Style đặt trong từng thẻ HTML riêng biệt

CSS


1. Style đặt trong từng thẻ HTML riêng biệt

2. Style đặt trong phần <head>

3. Style đặt trong file mở rộng .css

4. Style mặc định của trình duyệt

� Một số đặc tính cơ bản của CSS� CSS có tính kế thừa: Giả sử có thẻ <div id="vidu"> và file css

CSS


Tương đương

� Khai báo CSSselector {property: value}

CSS

� Selector: Các đối tượng màchúng ta sẽ áp dụng các


thuộc tính trình bày. Nó cóthể là các tag HTML, classhay id.

� Property: Chính là các thuộctính quy định cách trình bày.

� Value: Giá trị của thuộc tính.

� Các kiểu Selector:� Class selectors : Tên của Class selector có tiền tố là dấu chấm (.)

CSS


� Các kiểu Selector:� Class selectors :

� Chú ý:� Nếu muốn chỉ định class cho một phần tử nào đó thì đặt thẻHTML đó trước CSS rule.

CSS


HTML đó trước CSS rule.

� Ta có thể áp dụng nhiều class cho một phần tử bằng cáchliệt kê các class đó cách nhau bởi dấu cách.

� Các kiểu Selector:� ID selectors : Style áp dụng cho phần tử HTML, đặt trước ID của nó dấu “#”.

CSS


� Các kiểu Selector:� Grouped selectors : Style áp dụng cho nhiều selectors.

CSS


� Các kiểu Selector:� Contextual selectors (Selectors theo ngữ cảnh): Địnhnghĩa thuộc tính cho phần tử HTML tùy thuộc vào ngữcảnh của nó.

CSS


� Các thuộc tính hay sử dụng:� Background: Định dạng màu nền/ảnh nền cho cácthành phần trong trang web.� Thuộc tính background-color: Định dạng màu nền cho cácthành phần trong trang web

� Thuộc tính background-image: Chèn ảnh nền vào

CSS


� Thuộc tính background-image: Chèn ảnh nền vàocác thành phần trên trang web.

� Thuộc tính background-repeat: Lặp lại ảnh nền trêncác thành phần trên trang web.

� repeat-x: Chỉ lặp lại ảnh theo phương ngang.

� repeat-y: Chỉ lặp lại ảnh theo phương dọc.

� repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.

� no-repeat: Không lặp lại ảnh.

� Background:

� Thuộc tính background-attachment: Dùng để xácđịnh tính cố định của ảnh nền so với với nội dungtrang web. Thuộc tính này có 2 giá trị:

� scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.

CSS


trị mặc định.

� fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

� Thuộc tính background-position: Dùng một cặp 2 giátrị để biểu diễn tọa độ đặt ảnh nền. Các đơn vị chínhxác như centimeters, pixels, inches,… hay các đơn vịqui đổi như %, hoặc các vị trí đặt biệt như top, bottom,left, right.

� Các thuộc tính hay sử dụng:� Background: Cú pháp rút gọn:

background:<background-color>|

<background-image>

CSS


<background-repeat>|

<background-attachment>|

<background-position>

� Các thuộc tính hay sử dụng:� Background:

CSS


� Các thuộc tính hay sử dụng:� Font: Định dạng font chữ, gồm các thuộc tính

� Thuộc tính font-family: Chỉ định tên các loại font.

� Thuộc tính font-style: Chỉ định các kiểu in thường(normal), in nghiêng (italic) hay xiên (oblique) lên các

CSS


(normal), in nghiêng (italic) hay xiên (oblique) lên cácthành phần trang web.

� Thuộc tính font-variant: được dùng để chọn giữa chếđộ bình thường và small-caps của một font chữ.

� Thuộc tính font-weight: cách thức thể hiện của fontchữ là ở dạng bình thường (normal) hay in đậm(bold).

� Thuộc tính font-size: Chỉ định kích thước font.

� Các thuộc tính hay sử dụng:� Font:

CSS


� Các thuộc tính hay sử dụng:� Các thuộc tính đối với Text:

� Thuộc tính Color: Định màu chữ cho một thành phần nào đó trên trang web.body { color:#000 }

CSS


body { color:#000 }

h1 { color:#0000FF }

� Thuộc tính text-indent: Cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản.p { text-indent:30px }

� Các thuộc tính hay sử dụng:� Các thuộc tính đối với Text:

� Thuộc tính text-align: Dùng để canh chỉnh văn bảncho các thành phần trong trang web: left (mặc định),right, center và justify.

CSS


right, center và justify.

� Thuộc tính letter-spacing: Dùng để định khoảng cáchgiữa các ký tự trong một đoạn văn bản.

� Thuộc tính text-decoration: Dùng để thêm các hiệuứng gạch chân (underline), gạch xiên (line-through),gạch đầu (overline), và một hiệu ứng đặc biệt là vănbản nhấp nháy (blink).

� Các thuộc tính hay sử dụng:� Pseudo-classes cho các liên kết: Pseudo-classes cho phép xác định các hiệu ứng địnhdạng cho một đối tượng liên kết ở một trạng tháixác định như:

CSS


xác định như:� a:link: Khi liên kết chưa được thăm

� a:hover: Khi rê chuột lên liên kết

� a:visited: Khi liên kết được thăm

� a:active: Khi liên kết đang được kích hoạt – đang giữnhấn chuột ().

� a:focus: Khi liên kết nhận focus

� Các thuộc tính hay sử dụng:� Pseudo-classes cho các liên kết:

CSS


� Các thuộc tính hay sử dụng:� Box model: Box model mô tả cách mà CSS địnhdạng khối không gian bao quanh một thànhphần. Nó bao gồm:� padding (vùng đệm),

CSS


� padding (vùng đệm),

� border (viền),

� margin (canh lề) và

� các tùy chọn

� Các thuộc tính hay sử dụng:� Box model:

CSS



� Thuộc tính margin: trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần

CSS


cả trang web hay một thành phần web.

� margin-top: canh lề trên

� margin-bottom: canh lề dưới

� margin-left: canh lề trái

� margin-right: canh lề phải


� Thuộc tính margin: Công thức rút gọn:margin:<margin-top> | <margin-right> |

<margin-bottom>| <margin-left>

CSS


<margin-bottom>| <margin-left>

hoặc: margin:<value1>|< value2>

với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.

� Box model:� Thuộc tính margin:

CSS



� Thuộc tính Padding: Quy định khoảng cách giữa phần nội dung và viền của một đối tượng. Nó không ảnh hưởng tới khoảng các giữa các các đối tượng như

CSS


hưởng tới khoảng các giữa các các đối tượng như margin. Cú pháp tương tự như margin.

� padding-top: trên

� padding-right: phải

� padding-bottom: dưới

� padding-left: trái

hoặcpadding:<padding-top>|<padding-right>|<padding-bottom> |<padding-left>


� Thuộc tính Border: Được dùng trong trang trí, đóngkhung cho một đối tượng cần nhấn mạnh, phân cáchcác đối tượng giúp trang web trông dễ nhìn hơn,…

CSS


� Thuộc tính border-width: Quy định độ rộng cho viền: thin,medium, thick , hay là một giá trị đo cụ thể như pixels.

� Thuộc tính border-color: Quy định màu viền cho một đốitượng web

� Thuộc tính border-style: Quy định kiểu viền thể hiện của mộtđối tượng web.

� hoặc

border:<border-width> |<border-color> |<border-style>

� Các thuộc tính hay sử dụng:� Height & Width:

� Thuộc tính width: Quy định chiều rộng cho một thành phần web.

� Thuộc tính max-width: Quy định chiều rộng tối đa cho một thành phần web.

CSS


� Thuộc tính min-width: Quy định chiều rộng tối thiểu cho một thành phần web.

� Thuộc tính height: Quy định chiều cao cho một thành phần web.

� Thuộc tính max-height: Quy định chiều cao tối đa cho một thành phần web.

� Thuộc tính min-height: Quy định chiều cao tối thiểu cho một thành phần web.

� Các thuộc tính hay sử dụng:

� Float & Clear:� Thuộc tính float: Dùng để cố định một thành phần webvề bên trái hay bên phải không gian bao quanh nó.Thuộc tính float có 3 giá trị:

CSS


Thuộc tính float có 3 giá trị:

�Left: Cố định phầntử về bên trái.�Right: Cố định phầntử về bên phải.�None: Bình thường.


� Float & Clear:� Thuộc tính Clear: Đi cùng với thuộc tính float, trongCSS còn có một thuộc tính là clear. Thuộc tính clearlà một thuộc tính thường được gán vào các phần tử

CSS


là một thuộc tính thường được gán vào các phần tửliên quan tới phần tử đã được float để quyết địnhhướng xử sự của phần tử này. Gồm các giá trị:

� left (tràn bên trái),

� right (tràn bên phải),

� both (không tràn) và

� none.


� Float & Clear:

CSS



� Position:

CSS


� Giới thiệu:� JavaScript là ngôn ngữ dưới dạng script.

� JavaScript là ngôn ngữ dựa trên đối tượng, cónghĩa là bao gồm nhiều kiểu đối tượng.

JavaScript có thể đáp ứng các sự kiện như tải

Javascript


� JavaScript có thể đáp ứng các sự kiện như tảihay loại bỏ các form. Khả năng này cho phépJavaScript trở thành một ngôn ngữ script động.

� Javasript có thể làm việc khác nhau trên cáctrình duyệt khác nhau

� Nhúng JavaScript vào một file HTML theomột trong các cách sau đây:� Sử dụng các câu lệnh và các hàm trong cặp thẻ<SCRIPT>

<script type="text/javascript" language="javascript" >

Javascript


<script type="text/javascript" language="javascript" >…</script>

� Sử dụng các file nguồn JavaScript<script type="text/javascript" src=“filename.js" >…</script>

� Nhúng JavaScript vào một file HTML theomột trong các cách sau đây:� Sử dụng một biểu thức JavaScript làm giá trị củamột thuộc tính HTML:

Sử dụng thẻ sự kiện (event handlers) trong một

Javascript


� Sử dụng thẻ sự kiện (event handlers) trong mộtthẻ HTML nào đó

� Khai báo biến:

Javascript


� Các toán tử:� Phép gán (=):

Javascript


� Phép toán so sánh: ==(bằng), != (khác), >, >=,<, <=

� Phép toán số học: +, -, *, /, % (chia lấy phần dư),++, --

� Các toán tử:� Ghép chuỗi(+)

� Phép toán Logic: && (và), || (hoặc), ! (phủ định).

� Phép toán Bitwise: & (và), | (hoặc), ^ (phủ định),<< Toán tử dịch trái, >> Toán tử dịch phải.

Javascript


<< Toán tử dịch trái, >> Toán tử dịch phải.

� Các cấu trúc lệnh:� Cấu trúc rẽ nhánh: if ... else:if (<điều kiện>)

{

//Các câu lệnh với điều kiện đúng

Javascript


//Các câu lệnh với điều kiện đúng

}

else

{

//Các câu lệnh với điều kiện sai

}

� Các cấu trúc lệnh:� Cấu trúc lựa chọn switch ... Case:

switch ( <biến> ){ case value1:

statements1;

Javascript


break;...

case value n-1:statements(n-1);break;

default:statements(n);

}

� Các cấu trúc lệnh:� Vòng lặp for: Lặp khi điều kiện đúngfor (initExpr; <Điều kiện> ; incrExpr){

//Các lệnh thực hiện trong vòng lặp

Javascript


//Các lệnh thực hiện trong vòng lặp}

� Vòng lặp whilewhile (<điều kiện>){

//Các lệnh thực hiện trong vòng lặp}

� Các cấu trúc lệnh:� Lệnh Break: Dùng để thoát khỏi vòng lặp gần nhất.

� Lệnh continue: Dùng để bắt đầu một vòng lặp mới.

� Vòng lặp for...in: Câu lệnh này thường được sử dụng đểlặp tất cả các thuộc tính (properties) của một đối tượng.

Javascript


lặp tất cả các thuộc tính (properties) của một đối tượng.for (<variable> in <object>){//Các câu lệnh

}

� Lệnh new: Để tạo ra một thể hiện mới của một đối tượngobjectvar = new object_type( param1 [,param2]... [,paramN])

� Hàm: Trong JavaScript ta dễ dàng nhận thấy có 2 loại Hàm� Các Hàm JavaScript đã hổ trợ sẳn (Built-inFunctions)

Ngoài ra người dùng có thể định nghĩa ra các

Javascript


� Ngoài ra người dùng có thể định nghĩa ra cáchàm để phục vụ cho mục đích riêng (User-defined Functions).function TenHam(bien_1,bien_2,...)

{ // Thân hàm …

return value;

}

� Một số hàm JavaScript (Built-in Functions):� isNaN(var): Kiểm tra một biến có phải là số hay không?

� parseInt(var): Chuyển một chuổi sang số nguyên.

� parseFloat(var): Chuyển một chuổi sang số Float

� eval(""): Định giá trị cho các statement hoặc expression

Javascript


� eval(""): Định giá trị cho các statement hoặc expression được lưu trữ.

� alert(“…”): Dùng để gởi một thông báo cho User

� prompt("string_a","string_b"): Dùng để tạo ra một dialog box tương tác với User, có 2 nút là OK ,CANCEL� string_a: ghi một nhãn lên dialog box

� string_b:giá trị mặc định trong text box

THẢO LUẬN – CÂU HỎI


� Thực hành các ví dụ

� Tìm hiểu mở rộng về CSS3.

� Thiết kế website cho đề tài được giao.

BÀI TẬP


LẬP TRÌNH WEBfit.lqdtu.edu.vn/files/DanhSach/Bai2.pdfMột số đặc tính cơ bản của CSS...

Documents

Transcript of LẬP TRÌNH WEBfit.lqdtu.edu.vn/files/DanhSach/Bai2.pdfMột số đặc tính cơ bản của CSS...