Bài giảng lập trình web chương 2 ths nguyễn minh vi

Cascading Style Sheets

ThS Nguyễn Minh Vi
BM Tin học – ĐH An Giang


Giới thiệu
CSS (Cascading Style Sheets):
 Hỗ trợ các kiểu định dạng phong phú, đa
dạng
 Tách nội dung và định dạng, dễ đọc mã
 Tạo phong cách thống nhất cho nhiều
trang một cách nhanh chóng
 Tái sử dụng được, chỉ cần thiết kế một lần
thật tốt


Giới thiệu
HTML

CSS + HTML


Cú pháp
Selector {properties:value;}
 Ví dụ:
hr {color:blue;}
p {margin-left:20px;}
body {background-color:lavender;}

Cú pháp


Chèn style sheet


External: dùng thẻ <link> liên kết file css bên
ngồi
 Có thể áp dụng cho nhiều tài liệu khác nhau



Internal: dùng thẻ <style> đặt trong phần
head
 Có hiệu lực trong tài liệu chứa nó



Inline: dùng thuộc tính style trong thẻ
 Chỉ có hiệu lực trong chính thẻ HTML đó


Chèn style sheet






External:

type="text/css"
href="tên_file.css" />
Internal:
<style type="text/css">
/*...*/
</style>
Inline:

This is a paragraph.

Độ ưu tiên


Khi có nhiều kiểu cùng áp dụng lên một
phần tử, thì độ ưu tiên sẽ tăng dần theo
thứ tự
External < Internal < Inline

External CSS

Internal CSS

Inline CSS


Cascading Style Sheets
BỘ CHỌN (SELECTORS)

ThS Nguyễn Minh Vi

BM Tin học – ĐH An Giang


Selectors


Html selector: tên thẻ html được dùng
làm tên của selector
 áp dụng kiểu cho một thẻ html
h1 {text-align:center;}
 hoặc áp dụng kiểu cho nhiều thẻ html
h1, h2 {text-align:center;}


Selectors


Id selector: bắt đầu bằng dấu #, theo sau
là tên selector
 chỉ áp dụng kiểu cho phần tử đơn lẻ, thơng
qua thuộc tính id (phần tử có thuộc tính id là
tên của id selector)

#id1 {text-align:center;}


Selectors


Class selector: bắt đầu bằng dấu . và

theo sau là tên selector
 dùng cho nhóm phần tử thuộc cùng class
(thơng qua thuộc tính class)

.center {text-align:center;}
 hoặc cho phần tử HTML mà thuộc class này
(kết hợp giữa html selector và class selector)

p.center {text-align:center;}


Pseudo class


Cú pháp:
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}



VD:
 trạng thái của liên kết:
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

 định dạng ký tự đầu đoạn:
p:first-letter {
color:#ff0000;

font-size:xx-large; }


Cascading Style Sheets
CÁC THUỘC TÍNH CƠ BẢN

ThS Nguyễn Minh Vi
BM Tin học – ĐH An Giang


Background
Thuộc tính

Giá trị

Ý nghĩa

background

thiết lập tất cả thuộc
tính nền trong cùng
một khai báo

background-attachment

ảnh nền cố định hoặc
cuộn theo nội dung

fixed
scroll

background-color

màu nền

màu (tên hoặc chỉ số)
transparent

background-image

ảnh nền

url(‘ ‘)

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

top left/center/right
center left/center/right
bottom left/center/right
x% y% / xpos ypos

cách lặp ảnh nền

no-repeat
repeat-x
repeat-y

background-position

background-repeat


Background


Ví dụ

body{
background-image: url('hinh.jpg');
background-position: center;
background-repeat: repeat-x;
}


Fonts
Thuộc tính

Ý nghĩa

Giá trị

font

thiết lập tất cả thuộc tính font
trong cùng một khai báo

font-family

font chữ

tên font

kích thước

(xx-/x-)small / smaller
medium
(xx-/x-)large / larger
length / %

font-style

kiểu chữ

normal
italic
oblique

font-variant

hiển thị theo dạng bình thường
hoặc small-caps

normal
small-caps

độ đậm nhạt

normal
bold / bolder

lighter
100  900

font-size

font-weight


Text
Thuộc tính

Ý nghĩa

Giá trị

color

màu chữ

direction

hướng chữ

ltr
rtl

canh lề theo chiều ngang

left
right

center
justify

vertical-align

canh lề theo chiều đứng

top
middle
bottom

text-decoration

none
underline
cách trang trí (các kiểu gạch) overline
line-through
blink

text-align


Text
Thuộc tính

Ý nghĩa

Giá trị

text-shadow

bóng chữ

letter-spacing

khoảng cách giữa các ký tự

normal
length

word-spacing

khoảng cách giữa các từ

normal
length

text-indent

lề dòng đầu của khối text

length
%

chữ hoa thường

none
capitalize
uppercase
lowercase

cách xử lý white-space

normal
pre
nowrap

text-transform

white-space


font, text


Ví dụ

.specialtext {
font-family: Verdana;
font-size: 48px; font-weight: 900;
color: #FF0000;
text-decoration: underline overline line-through;
text-transform: capitalize;
letter-spacing: 20;
}

web

List
Thuộc tính

Ý nghĩa

Giá trị

list-style

thiết lập tất cả thuộc tính
danh sách trong cùng
một khai báo

list-style-image

ảnh của list-item

none
url(‘ ’)

list-style-position

vị trí của list-item

inside
outside

kiểu của list-item

disc/circle/square
decimal/ decimal-leading-zero
lower-roman/upper-roman

lower-alpha/upper-alpha

list-style-type


List


Ví dụ
.bullet{
list-style-position: inside;
list-style-image: url(‘smiley.gif’);
}
<ul class="bullet">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>


Table
Thuộc tính

Ý nghĩa

Giá trị

border-collapse

kiểu đường viền bảng

collapse
separate

border-spacing

khoảng cách giữa các đường viền của
các ơ (kiểu separate)

length

caption-side

vị trí tiêu đề so với bảng

top
bottom
left
right

empty-cells

hiện hoặc ẩn đường viền các ô trống
(kiểu separate)

show
hide

table-layout

kiểu layout bảng

auto
fixed


Table


Ví dụ
table, td, th{
border:1px solid blue;
text-align: center; }
table{
border-collapse: separate;
empty-cells: hide;
border-spacing: 5px; }
th{
background-color:blue;
color:white; }

<table>
<tr><th>Nội dung</th><th>Số tiết LT</th><th>Số tiết TH</th></tr>
<tr><td>HTML</td><td>10</td><td>10</td></tr>
<tr><td>CSS</td><td>3</td><td>5</td></tr>
<tr><td>Javascript</td><td>7</td><td>10</td></tr>
<tr><td>PHP+MySQL</td><td>5</td><td>10</td></tr>
<tr><td>Ôn tập</td><td></td><td>5</td></tr>
</table>

Link


Liên kết có các trạng thái







link: bình thường, chưa được chọn
visited: đã được chọn
hover: đang được lướt chuột lên
active: đang được chọn

Có thể áp dụng các thuộc tính màu chữ,
nền, hiệu ứng chữ cho các trạng thái của
liên kết