CSS cơ bản dành cho những người mới học Web

GIỚI THIỆU  Bảng kiểu Cascading style sheet là một ngôn ngữ quy định cách trình bày cho các tài liệu web viết bằng HTML, XHTML, XML, UML … – Thẩm mỹ – Giữ tính thống nhất cho trang H

Trang 1

1

BẢNG KIỂU- CSS Cascading Style Sheets

8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH

Trang 2

GIỚI THIỆU

 Bảng kiểu (Cascading style sheet) là

một ngôn ngữ quy định cách trình bày cho các tài liệu web viết bằng HTML, XHTML, XML, UML …

– Thẩm mỹ

– Giữ tính thống nhất cho trang HTML

– Định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang

Trang 3

3

GIỚI THIỆU

 Tiện ích của CSS :

 Tiết kiệm thời gian thiết kế cấu trúc chung của website

 Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó

 Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt

 Tất cả các trình duyệt mới nhất đều hỗ trợ CSS

 Nhược điểm của CSS :

 Giao diện của trang web có thể bị xô lệch, di chuyển khi hiển thị trong các trình duyệt khác nhau

 Reset các thuộc tính CSS

Trang 5

Học CSS xong làm đƣợc gì?

 Định dạng văn bản các trang web theo cùng style

 Định dạng bảng biểu

 Thiết kế đƣợc menu ngang hoặc popup

 Tạo hiệu ứng động trên trang web…

8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 5

Trang 6

 Properties: các thuộc tính quy định cách trình bày

 Value: giá trị của thuộc tính

Trang 7

em 1em=kích thước của font hiện hành

 Đơnvị đo chiều dài:

Trang 8

RGB(r,g,b) Màu RGB với 3 giá trị r,g,b có giá trị từ

0-255 kết hợp với nhau để tạo ra màu khác nhau

RGB(%r,%g,%b) Màu RGB với 3 giá trị r,g,b có giá trị từ

0-100% kết hợp với nhau để tạo ra màu khác nhau

HexadecimalRGB Mã màu RGB dạng hệ thập lục phân

Ví dụ: #FFFFFF: Trắng, #000000:đen

Trang 9

9

 Dựa vào vị trí đặt CSS trong tài liệu HTML ta có 3 loại CSS:

 CSS Nội tuyến- Inline style

 CSS bên trong thẻ style- Internal style

 CSS bên ngoài- External style

 Nếu không sử dụng CSS thì nội dung trang web đƣợc định dạng theo style mặc định của trình duyệt

Phân loại CSS

Trang 10

 Inline style : Là kiểu đƣợc gán cho một

dòng hoặc một đoạn văn bản, bằng cách

sử dụng thuộc tính style bên trong tag muốn định dạng

Trang 11

This paragraph has an inline style applied to it

<P> This paragraph is displayed in the default style

<P> Can you see the <SPAN style = color:red> difference </SPAN> in this line

</BODY>

INLINE STYLE

Trang 12

 Internal style (embedded style) : Là

bảng kiểu thích hợp cho trang riêng lẻ với nhiều văn bản

Trang 13

p{ color: red; font-family: Tahoma }

h1 { color: limegreen; font-family: Arial }

</STYLE>

</HEAD>

<BODY>

<H1>This is the H1 element</H1>

<P >This is the P element</p>

<H3>This is the H3 element with its default style as

displayed in the browser</H3>

</BODY>

</HTML> 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH

Trang 14

Lưu ý

 Đối với các trình duyệt cũ sẽ không nhận ra thẻ

sẽ được hiển thị trong phần nội dung web

 Cách khắc phục: Thêm dấu <! ở trước và > vào sau khối lệnh CSS

 Ví dụ:

<! p{ color: red; font-family: Tahoma }

h1 { color: limegreen; font-family: Arial }

>

</STYLE>

Trang 15

15

 External style (linked style):

Là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML

Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một website

 Cách tạo :

– Tạo một tập tin văn bản mới

– Nhập tên các thẻ muốn định dạng thuộc tính theo mẫu:

TagName{property1: value1; property2:value2;…}

– Lưu tập tin với định dạng Text Only và có phần mở

rộng .css

– Có thể chọn Encoding là UTF-8 nếu có chú thích bằng

tiếng việt EXTERNAL STYLE /LINKED STYLES

8/3/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH

Trang 18

Ví dụ:

<HTML>

<HEAD><TITLE> Changing the rules</TITLE>

<LINK REL=stylesheet HREF=” sheet1.css”

TYPE=”text/css”>

</HEAD>

<BODY>

<H2> Changing the rules is fun</H2>

<P> Changing the rules may not be such fun

<H2>The H2 element again</H2>

</BODY>

</HTML>

Trang 19

19

ĐỊNH BẢNG MẪU CHO LỚP (CLASS)

Có thể chia các yếu tố trong HTML thành các lớp để

áp dụng kiểu mẫu hiệu quả hơn

Trang 20

<P class=“ water ”>test water</p>

<h1 class=“ danger ”>test danger<h/1>

<h2 class=“ danger ”> test danger</h2>

<P class=“water”> Test water </p>

<p class=“danger”> Test p danger</p>

<h1 class=“water”> Test p water </h1>

<p> djshdsj</p>

</BODY>

</HTML>

Trang 21

21

ĐỊNH CÁC TAG RIÊNG BIỆT

Dùng áp dụng cho một phần tử riêng biệt trên trang Web

Trong tag Body nhập cú pháp:

<TagName ID=IDName> Nội dung</TagName>

Trang 22

 Ví dụ :

<HTML>

<HEAD><TITLE> ID Selectors</TITLE>

p#control {color: red;font-weight:bold; text-indent:18pt}

#id_control{color: blue; text-indent:10pt;}

<h1 id=id_control> A hardware device that allows the user to make

electronic copies of graphics or text.</h1>

<p id=id_control> Short for picture element A pixel refers to the small dots that make up an image on the screen </p>

<p> Short for picture element A pixel refers to the small dots that make

up an image on the screen </p>

</BODY>

</HTML>

Trang 23

23

TẠO CÁC THẺ TÙY Ý

 Có 2 loại thẻ chung có thể kết nối Class hay các

ID để tạo các thẻ tuỳ ý: DIV và SPAN

 Cần phân biệt đối tượng cấp khối và cấp hàng

 Đối tượng cấp khối như một đoạn văn, thường bắt

đầu một dòng mới và có thể chứa các đối tượng cấp khối khác gồm các thẻ: P, H1, Body, table

 Đối tượng cấp hàng không tạo dòng mới, thường chứa

văn bản và các yếu tố trong hàng khác gồm các tag:

Trang 24

Thẻ DIV:

 Thẻ div là một layer(lớp), có thể chứa mọi thành phần html khác Nó đơn thuần giống nhƣ một tag body nhƣng linh động hơn vì thẻ div xác định vị trí mà nó xuất hiện trên màn hình bất chấp nó ở đâu trên tài liệu

 Thuộc tính cơ bản của thẻ div: id, width,

height, style

 Với:

 Id: định danh của thẻ div

 Width, height: độ rộng, độ cao của thẻ div

 Style: thuộc tính định kiểu của thẻ div

Trang 25

</div>

Trang 26

Ý nghĩa các thuộc tính bên trong thuộc tính style của thẻ DIV

Ví dụ: <div style="position: absolute; width: 100%; height: 100px; z-index: 1; left: 77px; top: 60px" id="layer1">

 Position: cung cấp điểm tham chiếu cho thẻ div

 _z-index: nếu chồng hai thẻ div lên nhau bằng cách

cho các phần tử chỉ vị trí nó giống hệt nhau, thẻ div nào có giá trị z-index lớn hơn thì sẽ nổi lên trên Nếu z- index mà là số âm, thì thẻ div sẻ chìm xuống dưới các phần tử html khác

Trang 27

27

Thẻ SPAN

 Thẻ SPAN dùng để định dạng cho một phần text trong hàng Thẻ SPAN tạo ra một móc nối giữa phần text đƣợc định dạng với phần text còn lại mà không tạo ra dòng mới

 Ví dụ

Trang 28

Định kiểu CSS cho thẻ DIV

Trang 29

Áp dụng định kiểu cho thẻ DIV

Trang 30

<DIV class=“control”> A hardware device that allows the user

to make electronic copies of graphics or text.</DIV>

<DIV ID=“intro”> Short for picture element A pixel refers to the small dots that make up an image on the screen </DIV>

</BODY>

</HTML>

Trang 31

31

Định kiểu CSS cho thẻ SPAN

Ta có thể kết nối nhiều kiểu định dạng văn bản trong một tag

Trang 32

Tại đầu đoạn văn bản muốn định dạng, nhập cú

Trang 33

<SPAN ID=“intro”> Short for picture element A pixel refers to the small dots that make up an image on the screen </SPAN>

</BODY>

</HTML> 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH

Trang 34

Font-size: xx-small hoặc x-small, small,

medium, large, x-large, xx-large hoặc

Font-size:12pt (giá trị cụ thể)

 Chế độ chữ:

Font-vaviant: normal, small-caps

 Viết dạng rút gọn: Font: italic bold size

Trang 36

CÁC THUỘC TÍNH ĐỊNH DẠNG CHỮ

Text-Align: left, right, center, justify

Trang 37

37

ĐỊNH DẠNG DANH SÁCH

 List-style:circle chấm tròn rỗng

 List-style: disc chấm tròn đen

 List-style: square chấm đen vuông

 List-style: decimal đánh số ả rập

 List-style: lower-alpha thứ tự alpha

 List-style: upper-alpha thứ tự alpha chữ in hoa

 List-style: upper-roman số la mã hoa

Trang 38

38

 Ví dụ:

<ul

style="list-style-image:url( /image/b3.GIF)">

<li> <font size="+3"

color="#FF0000">Inline style </font>

<li> <font size="+3"

Trang 39

– Repeat: lặp trên cả trang

– Repeat-x: lặp theo chiều ngang

– Repeat-y: lặp theo chiều đứng

– No-repeat: Không lặp lại

 background-attachment: scroll/fixed -giữ ảnh cuộn

/không cuộn theo trang của trình duyệt

Trang 41

Định dạng
Số trang	41
Dung lượng	684,71 KB