[CSS] Bài 9. Border trong CSS

Border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,… Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để định border cho các đối tượng web.

Viết Bởi : Rain Lúc : 9/06/2013 0

[CSS] Bài 8. Định Dạng Liên Kết Với CSS

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 font chữ, gạch chân, màu chữ,… cho một liên kết. Hơn nữa, CSS còn cung cấp mộ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.

Viết Bởi : Rain Lúc : 9/06/2013 0

[CSS] Bài 7. Định Dạng Text

Trong thiết kế web, việc trình bày và định dạng nội dung rất quan trọng, Bên cạnh nội dung tốt thì nội dung còn phải được được trình bày rõ ràng, mạch lạc. Bài viết này chúng ta sẽ cùng tìm hiểu một số thuộc tính định dạng văn bản trong CSS.

Viết Bởi : Unknown Lúc : 9/02/2013 0

[CSS] Bài 6: Font chữ for Website

Trong bài trước chúng ta đã học về cách tạo màu nền ảnh nền bằng cách sử dụng thuộc tính Background hôm nay chúng ta sẽ học về các thuộc tính CSS liên quan đến font chữ của các thành phần trong trang web.

Viết Bởi : Unknown Lúc : 9/02/2013 0

[CSS] Bài 5 : Thuộc Tính Background

Trong bài các bài trước chúng ta đã tìm hiểu Css là gì? Cú pháp viết CSS và CSS selector hôm nay chúng ta sẽ bắt đầu các bài viết nói về các thuộc tính của CSS. Bài viết hôm nay sẽ là bài viết đầu tiên giới thiệu về thuộc tính Background - thuộc tính này sẽ giúp bạn có thể tạo màu nền và ảnh nền cho các thành phần trên trang web.

Viết Bởi : Rain Lúc : 9/02/2013 0

[CSS] Bài 4.2 : CSS Selector

8.Attribute selectors:

Attribute selectors là cách chọn các thành phần trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó, với Attribute selectors chúng ta có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc Id vào trong thẻ HTML mà vẫn có thể hướng được đến các thành phần đó.

Ví dụ sau sẽ quy định tất cả các thành phần có thuộc tính title được tô màu đỏ
Ví dụ sau sẽ quy định tất cả các thành phần có thuộc tính title được tô màu đỏ

1	[title]{color: red}

Chúng ta có thể chỉ định chính xác một thành phần nào đó với Attribute selectors dựa vào giá trị của thuộc tính tính đó.
Ví dụ sau quy định tất cả các thành phần form có thuộc tính type=”text” được hiển thị với đường viền màu đỏ. Còn các thành phần type=”submit” không bị ảnh hưởng.
Mã HTML

1	<p>Email: <input type="text" name="email" /></p>

2	<p>Address <input type="text" name="address" /></p>

3	<p>Address <input type="submit" name="submit" /></p>

Mã CSS

1	input[type="text"]{border: 1px solid red}

Viết Bởi : Rain Lúc : 9/01/2013 0

[CSS] Bài 4.1: CSS Selectors

CSS Selectors là một khái niệm rất quan trọng trong CSS. Những Propety của CSS nếu không biết hay bạn đã quên thì bạn có thể Google ra, nhưng nếu bạn không nắm được CSS Selector thì gióng như bạn đi đường mà không biết đường vậy. Nắm được cách sử dụng Css Selector sẽ là chìa khóa để bạn học Css dể dàng hơn.
Nếu như trong thực tế nếu bạn muốn đến thăm một ai đó thì bạn cần biết được địa chỉ của người bạn muốn thăm nằm ở đâu, thì trong CSS bạn phải nắm vững khái niệm về CSS Selector bạn mới có thể xác định chính xác đối tượng bạn muốn định dạng. Việc không nắm rõ khái niệm CSS Selector có thê dẫn đến việc đi nhằm đường, hướng đến không đúng đối tượng cần định dạng dẫn đến tình trạng định dạng không như ý, lạm dụng ID và Class làm code bạn trở nên rối rắm và khó hiểu...
Trong bài viết này mình sẽ giới thiệu đến các bạn tổng quan về CSS selector và một số CSS Selector quan trọng và thường được sử dụng nhất trong CSS.

1. Khái niệm Quan hệ gia đình trong HTML

Để hiểu rỏ Quan hệ gia đình trong HTML ta xét ví dụ sau:
Code HTML:

<body>
<h1>CSS selector</h1>
<ul id="wrapper">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">JQuery</a></li>
</ul>
<p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p><strong>Pellentesque nibh</strong> purus, volutpat faucibus a, dictum in dolor.</p>
<img src="image1.jpg" alt="tree"/>
<img src="image2.jpg" alt="plant"/>
</body>

Nếu xem tài liệu HTML như 1 "cây phả hệ" thì body chính là gốc của "cây phả hệ" đó. Các thẻ h1, ul, 2 thẻ p và 2 thẻ img được bao bởi thẻ body chính là "con" của gốc body. Thẻ ul chứa trong nó 4 thẻ li, các thẻ li này là "con" của thẻ ul và là "cháu" của gốc body trên "cây phả hệ". Cứ tiếp tục như thế, ta sẽ lập được "cây phả hệ" tương ứng với tài liệu HTML đã cho ở trên:

Viết Bởi : Rain Lúc : 8/30/2013 0

[CSS] Bài 3: CLASS Và ID Trong CSS

Như ở bài trước chúng ta đã biết CSS quy định thuộc tính định dạng cho một hay nhiều phần tử trong HTML ví dụ như khi bạn viết CSS cho thành phần span, p, h1, h2 thì nó sẽ được áp dụng cho toàn bộ các thẻ span, p, h1, h2 trong tài liệu HTML của bạn nhưng không phải lúc nào bạn cũng muốn code của bạn ảnh hưởng đến tât cả các tag gióng nhau trong tài liệu HTML ví dụ như khi bạn đặt tiêu đề bạn muốn tiêu đề thứ nhất màu đỏ tiêu đề thứ hai màu xanh ..v...v... để giải quyết vấn đề này bạn có thể sử dụng CLASS và ID để có thể quy định từng đối tượng cụ thể.

Viết Bởi : Rain Lúc : 8/28/2013 0

[CSS] Bài 2: Cú Pháp CSS

Sau khi nắm được khái niệm CSS là gì, đặc tính của Css chúng ta tiếp tục tiềm hiểu về cú pháp và khai báo CSS.
Cú pháp của CSS gồm 2 phần chính là Selector và một hoặc nhiều declaration (khai báo).

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

Selector { property:value; }

Trong đó:
+ 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ó là
các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau).
Ví dụ: 

body, h2, p, img, #title, #content, .username,…

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

Ví dụ: 

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à #FFF dùng để định màu trắng cho nền trang.
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
}

Viết Bởi : Rain Lúc : 8/27/2013 0

[CSS] Bài 1 : CSS là gì ? Giới Thiệu CSS

1. CSS là gì ?

CSS là từ viết tắc của  cụm từ "Cascading Style Sheet" được hiểu là ngôn ngữ định dạng trang web,CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS là một ngôn ngữ quy định cách trình bày của các thẻ HTML trên trang web. Là ngôn ngữ được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo nên một cuộc cách mạng.Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các đoạn code mình viết hiển thị không giống nhau trên các trình duyệt khác nhau, CSS sẽ giúp các bạn giải quyết bài toán này.CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau,bằng cách quy định các thuộc tính cho thẻ HTML đó.

2. Thế Mạnh của CSS

Nếu bạn đã từng học qua HTML thì cũng biết HTML cũng hỗ trợ một số thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả. Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất. Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó. Hãy thử tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn giản cũng như là bạn có một trò ma thuật nào đó.

Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,… CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

3.Cách Dùng CSS?

Trong CSS có 3 cách để khai báo Css trong tài liệu HTML là CSS cục bộ, CSS nội tuyến và CSS ngoại tuyến.
3.1 CSS cục bộ:
Chèn thuộc tính Css trực tiếp vào bên trong các thẻ mở HTML, cụ thể thuộc tính style. Phạm vi ảnh hưởng của CSS cục bộ là phạm vi của thẻ HTML được chèn CSS.
Ví Dụ:

1	<p style="font-size: 16pt; color: blue">Đoạn văn bạn sẽ bị ảnh hưởng khi khai báo CSS cục bộ.</p>

3.2 CSS Nội Tuyến:
CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style> và đặt trong phần <head> của tài liệu HTML.
Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trong cùng một website.
Ví Dụ:

1

<style>

2	h1,h2,h3 {font-size: 14px;}

3	p {color:blue;}

4

</style>

3.3 CSS Ngoại Tuyến:
Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế. và cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi tài liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ.
Nó có phạm vi ảnh hưởng toàn bộ đến toàn bộ website chứ không chỉ một file .html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành phần nào đó trong website thì chỉ cần chỉnh sửa file CSS này thay vì phải chỉnh sửa tất cả các file .html trong ứng dụng. Đến đây chúng ta thấy được sự cần thiết và hiệu quả mà CSS đem lại.
Để khai báo css ngoại tuyến, ta chỉ cần tạo một file style.css chẳng hạn, sau đó chèn đoạn code sau trong phần <head></head> của trang web.

1	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Thứ tự ưu tiên trong CSS

Tại sao CSS lại có thứ tự ưu tiên?

Chắc sẽ có khi trong thiết kế của mình bạn sẽ sử dụng không chỉ 1, mà 2 hay thậm chí là 3 kiểu khai báo CSS đã nói trên, lúc đó ta sẽ phải cần nắm bắt đến thứ tự ưu tiên của CSS.

Thứ tự ưu tiên trong CSS như sau:

CSS cục bộ » CSS nội tuyến » CSS ngoại tuyến » CSS mặc định của trình duyệt.

Để hiểu hơn về thự tự ưu tiên của CSS ta xét ví dụ sau:

Giả sử trong tài liệu HTML ta có mã HTML như sau

1	<p>Nội dung sẽ được hiển thị theo khai báo của CSS</p>

Và khai báo CSS như sau

CSS cục bộ

1	<p style="color="red">...</p>

CSS nội tuyến có mã như sau

1	p{ color: green }

CSS ngoại tuyến như sau

1	p{ color: black }

Thì lúc này đoạn văn bản được hiện thị với màu đỏ. Bởi vì ta thấy thành phần
được khai báo CSS cục bộ lên sẽ được ưu tiên hơn CSS nội tuyến và CSS ngoại tuyến.
Tương tự như thế, khi ở ví dụ trên nếu ta không khai báo CSS cục bộ thì đoạn văn bản sẽ được hiện thị là màu xanh. Bởi vì CSS nội tuyến được ưu tiên hơn, tiếp theo nếu CSS nội tuyến không được khai báo thì CSS ngoại tuyến mới có tác dụng.

Viết Bởi : Rain Lúc : 8/26/2013 0