Chương 4 Bảng kiểu CSS (Thiết kế web)

Khái niệm DHTMLDHTML Dinamic HyperText Markup Language DHTML = HTML + CSS + Script Language CSS- Cascading Style Sheets phép ñưa dữ liệu lên trang web ñộng: User Webpage... Giới thiệu C

Trang 2

Khái niệm DHTML

DHTML (Dinamic HyperText Markup Language)

DHTML = HTML + CSS + Script Language

CSS- Cascading Style Sheets

phép ñưa dữ liệu lên trang web ñộng:

User Webpage

Trang 3

Giới thiệu CSS

CSS- Cascading Style Sheets

– Dùng ñể mô tả cách hiển thị các thành phần trên trang WEB

– Sử dụng tương tự như dạng TEMPLATE

– Có thể sử dụng lại cho các trang web khác

– Có thể thay ñổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading)

Bng kiu xác ñnh cách b trí, trình bày, màu sc,… cho các tags ca HTML

- VD: cho tag body màu hồng, cho tag p màu ñỏ, loại font Times NewRoman, loại chữ nghiêng,…

- CSS ñ&'c l)u trong:

- Bảng kiểu nhúng trong file HTML

- Bảng kiểu ngoại trú trong File bảng kiểu riêng có ñuôi *.css

Trang 4

Ưu, khuyết ñiểm của CSS

Ưu ñiểm:

-Kiểm soát bố cục trang, kỹ thuật thiết kế phông và dạng chữ tốt hơn

-Dễ duy trì hoạt ñộng của site hơn

-Thông tin kiểu ñược tách ra khỏi cấu trúc site

Không ñược hỗ trợ rộng rãi, hoặc hỗ trợ không hết

Trang 5

Cách hoạt ñộng của các CSS

Bảng kiểu nhúng trong file HTML

– Phần ñịnh dạng kiểu thường ñặt trong tag <head>

– Các kiểu trong dòng: ñặt trong một tag

Dạng kiểu nào ñược dùng cho tag khi có nhiều kiểu

ñược ñịnh nghĩa cho nó?

– Browser default

– External style sheet

– Internal style sheet (inside the <head> tag)

– Inline style (inside an HTML element)

ðộ ưu tiên tăng

Trang 6

Syntax- qui tắc tạo CSS

The CSS syntax is made up of three parts: a

selector, a property and a value:

selector { property : value }

body {color: black}

p {font-family: "sans serif"}

p {text-align:center;color:red}

p {

text-align: center;

color: black;

font-family: arial }

Trang 7

Các giá trị kích thước phông chữ

– Tương ñối:

• Larger

• Smaller– Kích thước tuyệt ñối: xx-small,x-small,small,medium, large, x-large, xx-large

Trang 8

Phân loại CSS và cách sử dụng

Gồm 3 loại CSS

1 Inline Style Sheet

2 Embedding Style Sheet

3 External Style Sheet

Trang 9

Inline Style Sheet

ðịnh nghĩa style trong thuộc tính style của từng tag HTML

Trang 10

Embedding Style Sheet

Nhúng trong tag <style> của trang HTML

<head>

SelectorName {

Trang 11

VD Embedding Style Sheet

<head>

p {

color:blue;

font-size:14pt;

font-family:Verdana;

text-align:center }

p.left{text-align:left}

</style>

</head>

<body>

<p> Dinh dang trong P mau blue font co 14</p>

<p class=left> Trong class left</p>

</body>

Trang 12

External Style Sheet

Syntax giống như trong embedding SS

ðể dùng bảng kiểu cần tạo liên kết ñến file CSS

Trang 13

VD External Style Sheet

<body > < h1 >This header is 36 pt </h1 >

< h2 >This header is blue< /h2 >

<p> This paragraph has a left margin of 50 pixels </p>

Trong file “ex1.css”:

body {background-color: yellow}

Trang 14

So sánh, ñánh giá 3 loại CSS

Trang 15

Qui tắc tạo Selector

Qui tắc ñơn giản:

color: green }

Nhóm các bộ chọn cách nhau bởi dấu phảy

Trang 16

Dạng ña kiểu (Multiple style sheets)

font-size: 20pt }

color: red;

text-align: right;

font-size: 20pt

Trang 17

Qui tắc tạo Selector (tt)

The class Selector

p.right {text-align: right}

p.center {text-align: center}

.center {text-align: center}

<h1 class="center"> This heading will be center-aligned </h1>

<p class="center"> This paragraph will also be center-aligned </p>

Trang 18

Bộ chọn thuộc tính class

– Trong trường hợp có hơn một class cho một phần tử kiểu?

dl.center{

text-align: center;

color: blue}

dl.bold {font-weight: bold}

…

<dl class="center bold"> Trong phan DL co center va bold</dl>

p.right{text-align:right}

p.left{text-align:left}

<p class=left> Trong class left</p>

<p class=right> Trong class right</p>

Do NOT start a class name with a number! It will not work

in Mozilla/Firefox

Trang 19

#green {color: green}

<p id=green > Tin tức thị trường</p>

<p id=para1 > Thị trường chứng khoán</p>

Do NOT start an ID name with a number! It will not work in

Mozilla/Firefox

Trang 21

Thẻ div và span ( Contextual Selection)

Ph4n t5 trang theo ý, không có thu9c tính ch: dùng class

– div : ñnh d=ng cho m9t vùng văn bn

– span: ñnh d=ng cho m9t dòng văn bn

Thiên hạ hà nhân khóc Tố Như </p>

</div>

<span class=mauxanh> Một người

có văn hóa phải xả rác ñúng nơi qui ñịnh </span>

Trang 22

Thiên hạ hà nhân khóc Tố Như </p>

qui ñịnh </span>

</div>

</body>

Trang 23

Bộ chọn giả

Bộ chọn giả - Pseudo Class

Bộ chọn giả: ñược xác ñịnh bởi dấu hai chấm

p:first-line { font-size: larger}

p:first-letter { font-size:24px;color:orange}

ðịnh dạng dựa vào trạng thái của liên kết, sự kiện chuột.

Có thể kết hợp với Selector khác.Thường ñược dùng với các link

{color:blue;text-a:hover weight:bold}

Trang 25

Các thuộc tính thừơng dùng

Kiểu văn bản:

– font-style: normal | italic | oblique

– text-decoration: none | underline | overline

– text-align: left | right | center | justify

Trang 26

Các thuộc tính thừơng dùng

– background-attachment: fixed |scoll

– background-color: white / Hex: #ffffff hoặc transparent

</style>

Trang 27

Bài tập 1

Dùng CSS ñể viết trang web như sau với các màu của từng tiêu ñề khác nhau:

Trang 28

Bài tập 2

Dùng file CSS bên ngoài ñể viết trang nhu sau:

Trang 29

Bài tập 3

Không dùng bảng, dùng danh sách UL, CSS ñể tạo

trang web với menu như hình sau

– Màu nền: purple

– Màu khi di chuột vào: #FF3300

Trang 30

<li><a href="#">Link three</a></li>

Định dạng
Số trang	31
Dung lượng	254,38 KB