báo cáo bài tập lớn đề tài “tìm hiểu về CSS3” môn cơ sở, kĩ thuật và các ứng dụng của XML

B GIÁO D C VÀ ĐÀO T OỘ GIÁO DỤC VÀ ĐÀO TẠOỤC VÀ ĐÀO TẠOẠO

TRƯỜNG ĐẠI HỌC NÔNG NGHIỆP HÀ NỘING Đ I H C NÔNG NGHI P HÀ N IẠOỌC NÔNG NGHIỆP HÀ NỘIỆP HÀ NỘIỘ GIÁO DỤC VÀ ĐÀO TẠOKHOA CÔNG NGH THÔNG TINỆP HÀ NỘI

Đ tài: ề tài:

“Tìm hi u v CSS3”ểu về CSS3”ề tài:

Môn:

C s , kĩ thu t và các ng d ng c a XMLơ sở, kĩ thuật và các ứng dụng của XML ở, kĩ thuật và các ứng dụng của XMLật và các ứng dụng của XMLứng dụng của XMLụng của XMLủa XML

Giáo viên hướng dẫn:ng d n:ẫn: Nguy n Văn Hoàngễn Văn Hoàng

Sinh viên th c hi n: Nguy n Minh Phực hiện: Nguyễn Minh Phươngện: Nguyễn Minh Phươngễn Văn Hoàngươ sở, kĩ thuật và các ứng dụng của XMLng543745 Nguy n Th Huêễn Văn Hoàngị Huê543242

Mục lục:

I Giới thiệu:

i Những mẫu thiết kế "cực đẹp" bằng CSS3ii Sự hình thành và quá trình phát triển của CSS:II Nội dung:

i Các đặc điểm cơ bản của CSS31 Một Số Quy Ước Về Cách Viết CSS2 Đơn vị CSS

3 Vị trí đặt CSS4 Background

1 Màu nền2 Ảnh nền

3 Lặp lại hình ảnh nền4 Khóa ảnh nền

5 Thuộc tính background rút gọn5 Font Chữ

1 Thuộc tính Font-Family2 Thuộc tính Font-style3 Thuộc tính Font-variant4 Thuộc tính Font-size

5 Thuộc tính text- transform6 Text

1 Màu chữ

2 Thuộc tính text-indent3 Thuộc tính text-align4 Thuộc tính letter-spacing5 Thuộc tính text decoration

6 Thuộc tính text transform7 Pseudo-classes For Links

8 Class & ID

1 Nhóm các phần tử Class2 Nhóm các phần tử ID9 Span & Div

1 Nhóm phần tử với thẻ <span>2 Nhóm khối phần tử với thẻ <div>10.Box model

11.Margin & Padding

1 Thuộc tính Margin2 Thuộc tính Padding12.Border

1 Thuộc tính Border-Width2 Thuộc tính Border-color3 Thuộc tính Border-style4 Thuộc tính Border rút gọn13.Height & Width

1 Thuộc tính Width2 Thuộc tính max-width3 Thuộc tính min-width4 Thuộc tính height5 Thuộc tính max-height6 Thuộc tính max-height14.Float & Clear

Thuộc tính FloatThuộc tính Clear15.Position

1 Abosolute position2 Relative position16.Layers

2 Gradients3 Box shadow4 Border images3 Hiệu ứng văn bản

1 Text Show2 Word wrapping3 Web font

4 Giao diện người dùng1 Thay đổi kích thước2 Kích thước Box3 Out line

5 Tạo multiple columns với CSS36 Hình nền

1 Kích thước hình nền2 Sử dụng nhiều hình nền7 Fonts

8 Các tính năng khácIII Phụ lục – Tài liệu tham khảo:

4 Nhiều khối lập phương 3D

5 Các hình đẹp mắt khác như:

 Những hình ảnh rất thú vị này được làm bằng CSS3 Vậy giờ chúng ta sẽ tìm hiểu CSS3 là gì nhé?

II.Sự hình thành và quá trình phát triển của CSS:

Khi thế giới web mới ra đời người ta thường dùng các thẻ HTML để dàn trang Việc dàn trang đó bao gồm chia trang web thành các bảng, ô, để add text, add ảnh, kiểu chữ, màu sắc… Khi mà công nghệ web ngày càng phát triển người ta nhận thấy việc dàn trang bằng các bảng ngày càng trở nên bất tiện Khối lượng mã HTML lớn cùng việc khó khăn trong kiểm soát các vùng nội dung trên trang web (theo tôi biết) là những lý do khiến HTML ngày càng thất thế Nếu bạn vào các website chuyên nghiệp của nước ngoài

bạn sẽ việc dàn trang của họ hoàn toàn bằng các thẻ DIV của CSS mà không dùng các thẻ HTML, nếu có thì cũng rất ít.

Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996 Theo định nghĩa của W3C (Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add kiểu vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv ) Bạn có thể tạo ra kiểu một lần nhưng có thể dùng lại nhiều lần trong các tài liệu web tiếp theo Ví dụ như nếu bạn muốn hiển thị một bức ảnh trong web với màu khung màu xanh, đường viền bức ảnh là đường kẻ liền thì bạn có thể định nghĩa khung đó thành một kiểu, giả dụ đặt tên là “frame” đi Và sau đó khi bạn muốn các khung ảnh khác cũng có kiểu dáng như vậy thì bạn chỉ việc gọi kiểu mà bạn đã định nghĩa để sử dụng lại lần nữa Cụ thể ở đây là gọi kiểu “frame”.

ngoài ra có thêm đặc điểm ưu việt hơn CSS.

II.Nội dung

Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS Đây chỉ là một định nghĩa giàu hình ảnh của Pearl thôi (nhưng cũng thực tế nhỉ (smile) Còn CSS (Cascading Style

Sheets mà Pearl tạm dịch là tờ mẫu theo Style Sheets) là một ngôn ngữ quyđịnh cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…

CSS làm cho việc thiết kế và xây dựng một trang Web trở nên dễ dànghơn Trước khi có CSS, bạn phải sử dụng HTML để thực hiện tất cả các tiêuđề cũng như các thành phần của một trang Web Mặc dù đã có một số cáchkhác nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Websẽ phải thay đổi từng thành phần riêng lẻ trên mỗi trang CSS đã giúp choviệc thay đổi phong cách của một trang Web đơn giản hơn và đỡ tốn thờigian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đóapply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trêntừng mục riêng lẻ như trước đây.

CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà

chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc ) cho một tài liệu Web.

Các đặc điểm cơ bản của CSS3

1.Một Số Quy Ước Về Cách Viết CSSCú pháp CSS:

Cú pháp CSS cơ bản:

Selector { property:value; }

Trong đó:

Selector: Các đ i tối tượng mà chúng ta sẽ áp dụng các thuộc tính ượng mà chúng ta sẽ áp dụng các thuộc tính ng mà chúng ta sẽ áp d ng các thu c tính ụng các thuộc tính ộc tính trình bày Nó là các tag HTML, class hay id

Ví dụ: body, h2, p, img, #title, #content, username,…

Trong CSS ngoài viết tên selector theo tên tag, class, id Chúng ta còn có thểviết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết selector là #entry img, nh v y thì các thu c tính ch đ như ậy thì các thuộc tính chỉ định ộc tính ỉ định ịnhsẽ ch áp d ng riêng cho các nh n m trong #entry.ỉ định ụng các thuộc tính ảnh nằm trong #entry ằm trong #entry.

Property: Chính là các thu c tính quy đ nh cách trình bày Ví d : ộc tính ịnh ụng các thuộc tính background-color, font-family, color, padding, margin,…

Mỗi thuộc tính CSS phải được gán một giá trị Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các thuộc tính Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector

Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }

Value: Giá tr c a thu c tính Ví d : nh ví d trên value chính là ịnh ủa thuộc tính Ví dụ: như ví dụ trên value chính là ộc tính ụng các thuộc tính ư ụng các thuộc tính #FFF dùng đ đ nh màu tr ng cho n n trang ể định màu trắng cho nền trang ịnh ắng cho nền trang ền trang

Đối với một giá trị có khoảng trắng, bạn nên đặt tất cả trong một dấu ngoặckép Ví dụ: font-family:”Times New Roman”.

Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo với đơn vị của nó Ví dụ: width:100 px Nó sẽ làm CSS của bạn bị vô hiệu trên Mozilla/Firefox hay Netscape.

Chú thích trong CSS:

Cũng như nhiều ngôn ngữ web khác Trong CSS, chúng ta cũng có thể viết chú thích cho các đoạn code để dễ dàng tìm, sửa chữa trong những lần cập nhật sau

Chú thích trong CSS được viết như sau /* Nội dung chú thích */

Ví dụ:

/* Màu chữ cho trang web */ body {

color:red }

2.Đơn vị CSS:

Trong CSS hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời gian, cường độ âm thanh và màu sắc Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màu sắc Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS.

Đơn vị chiều dài

hiện hành, nếu font hiện hành có kích cỡ 14px thì 1 em = 14 px Đây là một đơn vị rất hữu ích trong việc hiển thị trang web

thường của font hiện hành Do đó,đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x của font Times và font Tohama là khác nhau.

white, red, green, blue, cyan, magenta,…

RGB (r,g,b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với nhau tạo ra vô số

RGB (%r,%g,%b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.

Hexadecimal RGB Mã màu RGB dạng hệ thập lục Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi.

3 Vị trí đặt CSS:

Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML

Cách 1: Nội tuyến (kiểu thuộc tính)

Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.

Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:

<html> <head>

<title>Ví dụ</title> </head>

<body style=”background-color=#FFF;”>

<p style=”color:green”>^_^ Welcome To WallPearl’s Blog ^_^</p> </body>

Cách 2: Bên trong (thẻ style)

Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để tiện cho công tác bảo trì, sửa chữa ấy mà)

Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:

<html> <head>

<title>Ví dụ</title> <style type=”text/css”>

body { background-color:#FFF } p { color:#00FF00 }

</style> </head> <body>

<p>^_^ Welcome To WallPearl’s Blog ^_^</p></body>

Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)

Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link

Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu Các ví dụ trong sách này cũng được trình bày theo kiểu này.

Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:<html>

p {

color:#00FF00 }

Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả.

Lưu ý: Để lưu 1 file với 1 đuôi khác txt trong Notepad chúng ta chọn Save as type là All Files Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt.

4 Background

Trong phần này được giới thiệu về cách định màu nền/ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.

4.1Màu nền (Thuộc tính background-color)

Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt

Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam.

body {

background-color:cyan }

h1 {

background-color:red }

h2 {

background-color:orange }

4.2Ảnh nền (thuộc tính background-image)

Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image.

Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộctính background-image sẽ hoạt động ra sao Đầu tiên hãy tìm một tấm ảnh mà bạn thích, ở đây Pearl sẽ lấy tấm ảnh logo của blog Pearl

Sau đó, chúng ta sẽ viết CSS để đặt logo này làmảnh nền trang web như sau:

body {

background-image:url(logo.png) }

h1 {

background-color:red }

h2 {

background-color:orange }

p {

background-color: FDC689 }

Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnhtrong cặp ngoặc đơn sau URL.

4.3 Lặp lại ảnh nền(Thuộc tính background-repeat)

Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa Thuộc tính

background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền Thuộc tính này có 4 giá trị:

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.Ví dụ:

body {

background-image:url(logo.png); background-repeat:no-repeat; }

4.4 Khóa ảnh nền( thuộc tính Background-attachment)

Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang 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

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.

Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền Có khá nhiều kiểu giá trị cho thuộc tính position Như đơn vị chính xá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

5 Font Chữ

5.1 Thu c tính font-familyộc tính font-family

Đ đ nh màu ch cho m t thành ph n nào đó trên trang ể định màu trắng cho nền trang ịnh ữ cho một thành phần nào đó trên trang ộc tính ần nào đó trên trang web chúng ta s d ng thu c tính color Giá tr c a thu c tính ử dụng thuộc tính color Giá trị của thuộc tính ụng các thuộc tính ộc tính ịnh ủa thuộc tính Ví dụ: như ví dụ trên value chính là ộc tính này là các giá tr màu CSS h tr ịnh ỗ trợ ợng mà chúng ta sẽ áp dụng các thuộc tính

Ví d sau chúng ta sẽ vi t CSS đ đ nh màu ch chung cho m tụng các thuộc tính ết CSS để định màu chữ chung cho một ể định màu trắng cho nền trang ịnh ữ cho một thành phần nào đó trên trang ộc tính trang web là đen, cho tiêu đ h1 màu xanh da tr i, cho tiêu đ ền trang ời, cho tiêu đề ền trang h2 màu xanh lá chúng ta sẽ làm nh :ư

body {

color:#000 }

h1 {

color:#0000FF }

h2 {

color:#00FF00 }

5.2 Thu c tính font-styleộc tính font-family

Thu c tính text-indent cung c p kh năng t o ra ộc tính ấp khả năng tạo ra ảnh nằm trong #entry ạo ra kho ng th t đ u dòng cho dòng đ u tiên trong đo n văn ảnh nằm trong #entry ụng các thuộc tính ần nào đó trên trang ần nào đó trên trang ạo ra b n Giá tr thu c tính này là các đ n v đo c b n dùng trong ảnh nằm trong #entry ịnh ộc tính ơn vị đo cơ bản dùng trong ịnh ơn vị đo cơ bản dùng trong ảnh nằm trong #entry.CSS

Trong ví d sau chúng ta sẽ đ nh d ng th t đ u dòng m t ụng các thuộc tính ịnh ạo ra ụng các thuộc tính ần nào đó trên trang ộc tính kho ng 30px cho dòng văn b n đ u tiên trong m i đo n văn ảnh nằm trong #entry ảnh nằm trong #entry ần nào đó trên trang ỗ trợ ạo ra b n đ i v i các thành ph n <p>:ảnh nằm trong #entry ối tượng mà chúng ta sẽ áp dụng các thuộc tính ới các thành phần <p>: ần nào đó trên trang

p {

text-indent:30px }

5.3 Thu c tính font-variantộc tính font-family

Thu c tính text-align giúp b n thêm các canh ch nh văn ộc tính ạo ra ỉ địnhb n cho các thành ph n trong trang web ảnh nằm trong #entry ần nào đó trên trang

Cũng tươn vị đo cơ bản dùng trong ng t nh các l a ch n canh ch nh văn b n trong ự như các lựa chọn canh chỉnh văn bản trong ư ự như các lựa chọn canh chỉnh văn bản trong ọn canh chỉnh văn bản trong ỉ định ảnh nằm trong #entry.các trình so n th o văn b n thông d ng nh MS Word, thu c ạo ra ảnh nằm trong #entry ảnh nằm trong #entry ụng các thuộc tính ư ộc tính tính này có t t c 4 giá tr : left (canh trái – m c đ nh), right ấp khả năng tạo ra ảnh nằm trong #entry ịnh ặc định), right ịnh(canh ph i), center (canh gi a) và justify (canh đ u) ảnh nằm trong #entry ữ cho một thành phần nào đó trên trang ền trang

Trong ví d sau chúng ta sẽ th c hi n canh ph i các thành ụng các thuộc tính ự như các lựa chọn canh chỉnh văn bản trong ện canh phải các thành ảnh nằm trong #entry.ph n h1, h2 và canh đ u đ i v i thành ph n <p> ần nào đó trên trang ền trang ối tượng mà chúng ta sẽ áp dụng các thuộc tính ới các thành phần <p>: ần nào đó trên trang

h1, h2 {

text-align:right

} p {

text-align:justify }

5.4 Thu c tính font-weightộc tính font-family

Thu c tính letter-spacing độc tính ượng mà chúng ta sẽ áp dụng các thuộc tính c dùng đ đ nh kho ng cách ể định màu trắng cho nền trang ịnh ảnh nằm trong #entry.gi a các ký t trong m t đo n văn b n ữ cho một thành phần nào đó trên trang ự như các lựa chọn canh chỉnh văn bản trong ộc tính ạo ra ảnh nằm trong #entry.

Mu n đ nh kho ng cách gi a các ký t trong thành ối tượng mà chúng ta sẽ áp dụng các thuộc tính ịnh ảnh nằm trong #entry ữ cho một thành phần nào đó trên trang ự như các lựa chọn canh chỉnh văn bản trong ph n h1, h2 là 7px và thành ph n <p> là 5px chúng ta sẽ ần nào đó trên trang ần nào đó trên trang vi t CSS sau:ết CSS để định màu chữ chung cho một

h1, h2 {

letter-spacing:7px }

p { letter-spacing:5px }

5.5 Thu c tính font-sizeộc tính font-family

Thu c tính text-decoration giúp b n thêm các hi u ng ộc tính ạo ra ện canh phải các thành ứng g ch chân (underline), g ch xiên (line-through), g ch đ u ạo ra ạo ra ạo ra ần nào đó trên trang (overline), và m t hi u ng đ c bi t là văn b n nh p nháy ộc tính ện canh phải các thành ứng ặc định), right ện canh phải các thành ảnh nằm trong #entry ấp khả năng tạo ra (blink)

Ví d sau chúng ta sẽ đ nh d ng g ch chân cho thành ụng các thuộc tính ịnh ạo ra ạo ra ph n h1, g ch đ u thành ph n h2ần nào đó trên trang ạo ra ần nào đó trên trang ần nào đó trên trang

h1 {

text-decoration:underline }

h2 {

text-decoration:overline }

Text-transform là thu c tính qui đ nh ch đ in hoa hay in ộc tính ịnh ết CSS để định màu chữ chung cho một ộc tính thười, cho tiêu đề ng c a văn b n mà không ph thu c vào văn b n g c trênủa thuộc tính Ví dụ: như ví dụ trên value chính là ảnh nằm trong #entry ụng các thuộc tính ộc tính ảnh nằm trong #entry ối tượng mà chúng ta sẽ áp dụng các thuộc tính HTML

Thu c tính này có t t c 4 giá tr : uppercase (in hoa), ộc tính ấp khả năng tạo ra ảnh nằm trong #entry ịnhlowercase (in thười, cho tiêu đề ng), capitalize (in hoa ký t đ u tiên ở ký tự đầu tiên ự như các lựa chọn canh chỉnh văn bản trong ần nào đó trên trang trong m i t ) và none (không áp d ng hi u ng – m c đ nh) ỗ trợ ừ) và none (không áp dụng hiệu ứng – mặc định) ụng các thuộc tính ện canh phải các thành ứng ặc định), right ịnhTrong ví d dụng các thuộc tính ưới các thành phần <p>:i đây chúng ta sẽ đ nh d ng cho thành ph n h1ịnh ạo ra ần nào đó trên trang là in hoa, h2 là in hoa đ u m i ký t ần nào đó trên trang ỗ trợ ự như các lựa chọn canh chỉnh văn bản trong

h1 {

text-transform:uppercase }

h2 {

text-transform:capitalize }

6 Text

Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào Như đã nói, ở bài học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản.

Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ

Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen, cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như sau:

body {

color:#000 }

h1 {

color:#0000FF }

h2 {

color:#00FF00 }

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 Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS

Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần <p>

p {

text-indent:30px }

Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web

Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính nàycó tất cả 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều).

Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đối với thành phần <p>

h1, h2 {

text-align:right }

p {

text-align:justify }

letter-spacing:7px }

p { letter-spacing:5px }

Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nháy (blink)

Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu phần h2

h1 {

text-decoration:underline }

h2 {

text-decoration:overline }

Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML

Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định)

Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự.

h1 {

text-transform:uppercase }

h2 {

text-transform:capitalize }

7 Pseudo-classes For Links

Một thành phần rất quan trọng trong mọi website chính là liên kết Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2 bài trước như định fontchữ, gạch chân, màu chữ,… cho một liên kết Hơn nữa, CSS còn cung cấpmột điều khiển đặc biệt được gọi là pseudo- classes Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active) Với điều khiển pseudo-classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web.

Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang trí cho một liên kết dựa trên pseudo-classes.

Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng

trạng thái liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và cácliên kết đang kích hoạt có màu tím.

a:link {

color:#00FF00 }

a:hover {

color:#FF00FF }

a:visited {

color:#FF0000 }

a:active { color:# 662D91 }

Ví dụ 2: Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên

chưa thăm có màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font 1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.

a:link {

color:#00FF00; font-size:14px }

a:hover {

color:#FF00FF; font-size:1.2em; text-decoration:blink }

a:visited {

color:#FF0000;

text-decoration:none }

a:active {

color:# 662D91;

font-variant:small-caps }

Ví dụ 3: Ví dụ này cũng tạo cho liên kết hiệu ứng màu sắc giống ví dụ 2

nhưng sẽ có thêm 1 số hiệu ứng: các liến kết sẽ có khung viền màu đen, kích cỡ font 14px; liên kết mouse over có nền light cyan; các liên kết đã thăm có nền light yellow.

a {

border:1px solid #000; font-size:14px

} a:link {

color:#00FF00; }

a:hover {

background-color:#00BFF3; color:#FF00FF;

font-size:1.2em; text-decoration:blink }

a:visited {

background-color:#FFF568; color:#FF0000;

text-decoration:none }

a:active { color:#662D91; font-variant:small-caps }

Ba ví dụ trên chỉ là một tí gợi ý về khả năng kết hợp các thuộc tính CSS với pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web.

8 Class & ID

Trong các bài học trước, chúng ta đã được học các thuộc tính CSS về background, color, font,… Tuy nhiên, bạn cũng nhận ra là khi áp dụng một thuộc tính CSS cho một thành phần nào đó ví dụ như h1, h2, p, a, img,… thì toàn bộ các thành phần này trong trang web đều nhận thuộc tính này Sau đây chúng ta sẽ hiểu rõ hơn sẽ phải làm thế nào?

- Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó

<li>Hà Nội</li>

<li>TP Hồ Chí Minh</li> <li>Đà Nẵng</li>

<li>Thừa Thiên Huế</li>

<li>Khánh Hòa</li> <li>Quãng Ninh</li> <li>Tiền Giang</li> </ul>

Yêu cầu đặt ra là làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu xanh da trời Để giải quyết vấn đề này chúng ta sẽ dùng một thuộc tính HTML gọi là class để tạo thành 2 nhóm là thành phố và tính Ta sẽ viết lại đoạn HTML sau

thành như thế này:

<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p> <ul>

<li class=”tp”>Hà Nội</li>

<li class=”tp”>TP Hồ Chí Minh</li> <li class=”tp”>Đà Nẵng</li>

<li class=”tinh”>Thừa Thiên Huế</li> <li class=”tinh”>Khánh Hòa</li> <li class=”tinh”>Quãng Ninh</li> <li class=”t

inh”>Tiền Giang</li> </ul>

Với việc dùng class để nhóm các đối tượng như trên thì công việc củachúng ta sẽ

trở nên đơn giản hơn nhiều: li tp {

color:FF0000 }

li tinh {

color:0000FF }

Lưu ý: Không nên đặt tên class với ký tự đầu là chữ số, nó sẽ không làm

việc cho Firefox.

8.2 Nhóm các phần tử với id :

Ví dụ:

Cũng với đoạn HTML như ví dụ về class Nhưng yêu cầu đặt ra là Hà Nội sẽ có màu đỏ sậm, TP Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi còn các tỉnh màu xanh da trời Để giải quyết vấn đề này chúng ta

sẽ sử dụng thuộc tính HTML là id để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh Đoạn HTML của chúng ta bây giờ sẽ là : <p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>

<ul>

<li id=”hanoi”>Hà Nội</li>

<li id=”hcmc”>TP Hồ Chí Minh</li> <li id=”danang”>Đà Nẵng</li>

<li class=”tinh”>Thừa Thiên Huế</li> <li class=”tinh”>Khánh Hòa</li> <li class=”tinh”>Quãng Ninh</li> <li class=”tinh”>Tiền Giang</li></ul>

Và đoạn CSS cần dùng sẽ là : #hanoi { color:# 790000 } #hcmc { color:#FF0000 } #danang { color:#FF00FF } tinh { color:#0000FF }

Lưu ý: Không nên đặt tên id với ký tự đầu là chữ số, nó sẽ không làm việc cho

<p>Không có gì quý hơn độc lập, tự do.</p>

Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ <span> vào đoạn HTML như sau:

<p>Không có gì quý hơn <span class=”nhanmanh”>độc lập</span>, <span class=”nhanmanh”>tự do</span> Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên: nhanmanh {

font-weight:bold }

9.2Nhóm khối phần tử với thẻ <div>:

Tuy nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối

phần tử.

Trở lại ví dụ về danh sách tỉnh, thành trong phần class bài trước quyết vấn đề bằng cách nhóm các phần tử với <div> như sau:

<p>Danh Sách Các Tỉnh, Thành Phố Việt Nam:</p> <ul>

<div id=”tp”> <li>Hà Nội</li>

<li>TP Hồ Chí Minh</li> <li>Đà Nẵng</li>

</div>

<div id=”tinh”>

<li>Thừa Thiên Huế</li> <li>Khánh Hòa</li> <li>Quãng Ninh</li> <li>Tiền Giang</li> </div>

</ul>

Và đoạn CSS cho mục đích này sẽ là:#tp {

color:#FF0000 }

#tinh {

color:0000FF }

10.Box Model

Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web.