Selector :before trong CSS

Bộ chọn before trong CSS được dùng để chèn nội dung bất kỳ trước một nội dung của thẻ nào đó.
Ví dụ:

CSS:

p:before
{
content:"(Blog Mạng Lưới Toàn Cầu) ";
}

HTML: 

<h4>Bạn định làm gì</h4>

<p>Một ngày đẹp trời phải không? Sao bạn không đi chơi đâu đó? Sao lại ngồi trước máy tính học HTML và CSS thế này?! À ha. Ông anh không phải xoắn quẩy!</p>

Đoạn code ở trên sẽ chèn dòng chữ (Blog Mang Lưới Toàn Cầu) trước bất kỳ thẻ p nào. Kết quả:

Bạn định làm gì

Một ngày đẹp trời phải không? Sao bạn không đi chơi đâu đó? Sao lại ngồi trước máy tính học HTML và CSS thế này?! À ha. Ông anh không phải xoắn quẩy!

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ Selector :before

Lớp giả first-letter trong CSS

First-letter là lớp giả dùng để lấy ký tự đầu tiên trong thẻ bất kỳ nào đó.
Giả dụ chúng ta có đoạn code sau:

CSS:

h5:first-letter
{
font-size:250%;
color:green;

font-weight:bold;
}

Mã đánh dấu HTML:

<h4>Xin chào đến với Blog Mạng Lưới Toàn Cầu</h4>
<h5>Tôi tên là Nguyễn Đức Anh</h5>
<h5>Tôi sống ở Hà Nội, Việt Nam</h5>
<h5>Tôi thích thiết kế web, và các công nghệ liên quan</h5>

Thế thì bất kỳ ký tự đầu tiên nào nằm trong thẻ h5 đều được bôi đậm, có màu xanh và có kích thước gấp 2,5 lần bình thường.

Kết quả:

Xin chào đến với Blog Mạng Lưới Toàn Cầu

Tôi tên là Nguyễn Đức Anh

Tôi sống ở Hà Nội, Việt Nam

Tôi thích thiết kế web, và các công nghệ liên quan

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ lớp giả first-letter

Các thuộc tính có thể áp dụng cho first-letter

• Thuộc tính font
• Thuộc tính color
• Thuộc tính background 
• Thuộc tính margin
• Thuộc tính padding 
• Thuộc tính border 
• Thuộc tính text-decoration
• Thuộc tính vertical-align (chỉ khi float là none)
• Thuộc tính text-transform
• Thuộc tính line-height
• Thuộc tính float
• Thuộc tính clear

Lớp giả first-child trong CSS

First-child dịch ra tiếng Việt là đứa con cả, và trong CSS, điều này có nghĩa là nó sẽ tác động đến thẻ đầu tiên của thẻ cha.

Giả dụ tôi có 3 thẻ p như thế này:

<p>Họ và tên: Nguyễn Đức Anh</p>

<p>Chức vụ: Quản trị web, Thiết kế web</p>

<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>

Giờ nếu tôi viết trong CSS như thế này: 

p:first-child {color:blue} 

Thì dòng chữ đầu tiên Họ và tên: Nguyễn Đức Anh sẽ có màu xanh. 

Có một chú ý nhỏ, đó là câu lệnh p:first-child {color:blue} sẽ tác động đến tất cả thẻ p mà là con cả, chẳng hạn nếu chúng ta có mã đánh dấu như sau:

<!DOCTYPE html>

<html>

<head>

<title>Blog Mạng Lưới Toàn Cầu</title>

<style>

p:first-child

{

p:first-child {color:blue}

}

</style>

</head>

<body>

<p>Họ và tên: Nguyễn Đức Anh</p>

<p>Chức vụ: Quản trị web, Thiết kế web</p>

<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>

<div>

<p>Sở thích: Chơi thể thao, lướt web</p>

<p>Nhân vật ưa thích: Osho</p>

</div>

</body>

</html>

Theo bạn những đoạn văn bản nào sẽ có màu xanh? Câu trả lời là có 2 đoạn. Đoạn thứ nhất là Họ và tên: Nguyễn Đức Anh thì bạn đã hiểu. Đoạn thứ hai cũng có màu xanh, đó là Sở thích: Chơi thể thao, lướt web

Sở dĩ "Sở thích: Chơi thể thao, lướt web" có màu xanh là bởi vì nó cũng là con cả, cụ thể, nó là con cả của thẻ div.

Chốt hạ: lớp giả first-child tác động đến tất cả các con cả của các thẻ khác nhau.

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông đều hỗ trợ first-child, bao gồm: Chrome, FireFox, Opera, Safari, IE

Một số ví dụ khác

CSS:

p:first-child b
{
background:yellow;
}

Mã đánh dấu:

<p>Tôi là <b>Nguyễn Đức Anh</b>. Tôi quản trị trang web <b>Blog Mạng Lưới Toàn Cầu</b>.</p>

<p>Tôi sinh năm <b>1987<./b>. Quê ở <b>Hà Tây</b>.</p>

Kết quả: Làm cho tất cả các nội dung bôi đậm trong thẻ p đầu tiên có nền màu vàng.

Tôi là Nguyễn Đức Anh. Tôi quản trị trang web Blog Mạng Lưới Toàn Cầu.

Tôi sinh năm 1987. Quê ở Hà Tây.

Danh sách các thẻ trong HTML

Bạn muốn có danh sách ngắn gọn các thẻ trong HTML? Bạn muốn xem lại bất cứ khi nào mình muốn? Thế thì bạn đã đến đúng nơi! Trong bài viết này Blog Mạng Lưới Toàn Cầu sẽ cung cấp cho bạn thông tin đơn giản nhưng đầy đủ về các thẻ HTML.

Tài Liệu HTML chuẩn

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề bài viết</title>
</head>

<body>
Nội dung bài viết...
</body>

</html>

Các thẻ cơ bản

<h1>Thẻ quan trọng nhất, có kích thước lớn nhất</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Thẻ quan trọng kém nhất, có kích thước nhỏ nhất</h6>

<p>Dùng cho văn bản</p>
<br> (Dùng để ngắt dòng)
<hr> (Tạo đường kẻ ngang)
<!-- Để lại chú thích trong HTML -->

Các thẻ dùng để định dạng

<b>Bôi đậm văn bản</b>
<i>Chữ in nghiêng</i>
<u>gạch chân văn bản</u>
<strong>Văn bản quan trọng</strong>
<em>Nhấn mạnh văn bản</em>
<code>Mã máy tính</code>
<small>Chữ nhỏ hơn</small>

<abbr> (giải thích chữ viết tắt)
<address> (địa chỉ liên hệ)
<blockquote> (dẫn nguồn trích dẫn)
<sub> (dùng để tạo chỉ số dưới)
<sup> (dùng để tạo chỉ số trên)

Liên kết

Liên kết dạng văn bản: <a href="http://www.mangluoitoancau.com/">Blog Mạng Lưới Toàn Cầu</a>
Liên kết dạng hình ảnh: <a href="http://www.mangluoitoancau.com/"><img src="URL nguồn ảnh" alt="Văn bản thay thế"></a>
Liên kết tới email: <a href="mailto:mangluoitoancau.com@gmail.com">Gửi email đến Blog Mạng Lưới Toàn Cầu</a>

Ảnh

<img src="URL nguồn ảnh" alt="Văn bản thay thế" height="100" width="100" title="mô tả ảnh khi hover qua">

Định dạng style và section

<style type="text/css">
a {color:red;}
h2 {color:blue; font-size:18px;}
</style>

<div>Định vị một khu vực Block trong tài liệu HTML</div>

<span>Định vị khu vực inline trong tài liệu HTML</span>

Danh sách không có thứ tự

<ul>
<li>Nội dung</li>
<li>Nội dung</li>
</ul>

Danh sách có thứ tự

<ol>
<li>Nội dung thứ nhất</li>
<li>Nội dung thứ hai</li>
</ol>

Bảng - table

<table border="1">
<tr>
<th>Tiêu đề cột</th>
<th>Tiêu đề cột</th>
</tr>
<tr>
<td>nội dung</td>
<td>nội dung</td>
</tr>
</table>

Iframe

<iframe src="http://www.mangluoitoancau.com"></iframe>

Thẻ Form

<form action="xyly.php" method="post/get">

<input type="email" name="email" size="50" maxlength="50" required>
<input type="password" required>
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Gửi">
<input type="reset" value="Xóa">
<input type="hidden">
<select>
<option>Bánh Mỳ Trứng</option>
<option selected="selected">Bánh Mỳ Thịt</option>
<option>Bánh Mỳ Trộn</option>
</select>

<textarea name="binhluan" rows="50" cols="40"></textarea>

</form>

Entities - Các ký tự không thể gõ trực tiếp từ bàn phím

&#169; đại diện cho ©

&#8482; đại diện cho ™

&#163; đại diện cho £

CSS cho thẻ table

Table là thẻ thường dùng trong HTML. Trong các bố cục kiểu Excel có hàng và cột thì table luôn được ưu tiên sử dụng mặc dù thẻ div cũng làm được điều tương tự về mặt hiển thị - lý do là vì div không thể hiện được sự liên quan giữa các dữ liệu với nhau. Nhưng mục đích chính của bài này lại ở phần khác, đó là trang trí cho thẻ table bằng CSS.

Tạo đường viền cho table

Code mẫu:

table, th, td {border: 1px solid #000}

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

Chỉ sử dụng đường viền đơn cho table

Như bạn thấy ở bảng trên, đường viền đôi được tạo ra cho bảng - nó là kết quả tổng hợp của các đường viền của table, th và td, kể ra thì nó cũng không xấu, nhưng đa số chúng ta thích đường viền đơn hơn. Để đạt được kết quả đó chúng sử dụng thuộc tính border-collapse.

Code mẫu:

table {border-collapse:collapse;}
table,th, td {border: 1px solid #333;}

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

Đệm trong table

Code mẫu: 

td {padding:10px;}

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

Màu cho table

Bạn có thể đổi màu đường viền, màu chữ và màu nền cho bảng một cách tùy ý. 

Code mẫu:

table, td, th {border:1px solid red;}
th {background-color:blue; color:white;}

td {color:#321}

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

Thay đổi chiều rộng và chiều cao trong table

Không khó để đoán ra được chúng ta sẽ sử dụng thuộc tính gì để thay đổi chiều rộng và chiều cao cho table - vẫn thế thôi - đó là thuộc tính width và height.

Code mẫu:

td {height:60px; width:150px;}

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

Căn lề cho chữ trong table

Chữ trong table có thể căn thoải mái theo cả chiều ngang lẫn chiều dọc, theo chiều ngang chúng ta sử dụng thuộc tính text-align, theo chiều dọc dùng thuộc tính vertical-align.

Code mẫu:

td {height:60px; width:150px; text-align:center; vertical-align:center;}

Kết quả:

Họ và Tên	Quê Quán
Nguyễn Đức Anh	Hà Tây
Hạ Thị Mến	Hà Nội

Các thuộc tính trong HTML

Các thuộc tính trong HTML cung cấp thông tin bổ sung cho các thẻ. Nội dung của nó rất quan trọng, tuy nhiên sẽ không có ý nghĩa nhiều lắm nếu bạn chưa có tí kinh nghiệm nào với HTML và CSS.

Đặc điểm

• Các thẻ HTML có thể chứa một hoặc nhiều thuộc tính
• Các thuộc tính cung cấp thông tin bổ sung cho các thẻ
• Các thuộc tính luôn nằm trong các thẻ mở (chứ không phải thẻ đóng nhé)
• Các thuộc tính thường xuất hiện dưới dạng cặp tên/giá trị kiểu như: tên="giá trị"

Ví dụ

<a href="http://www.mangluoitoancau.com">Blog Mạng Lưới Toàn Cầu</a>

Trong ví dụ trên, href chính là một thuộc tính và http://www.mangluoitoancau.com là giá trị của thuộc tính href.

Luôn sử dụng dấu nháy cho giá trị

• Giá trị của thuộc tính phải được đặt trong dấu nháy kép (đóng và mở), điều đó có nghĩa là bạn không được phép viết kiểu này: <a href=http://www.mangluoitoancau.com>Blog Mạng Lưới Toàn Cầu</a>
• Bạn có thể đặt trong dấu nháy đơn nếu muốn nhưng dấu nháy kép là cách dùng phổ biến hơn, điều đó có nghĩa kiểu viết sau được chấp nhận: <a href='http://www.mangluoitoancau.com'>Blog Mạng Lưới Toàn Cầu</a>
• Đôi khi (nhưng rất hiếm thôi) các giá trị bao gồm dấu nháy kép, khi đó bạn buộc phải sử dụng dấu nháy đơn cho giá trị, ví dụ: name='Ngày "Bát Giới" Trở Về'

Sử dụng chữ thường cho các thuộc tính

HTML chấp nhận cả chữ thường và HOA cho tên và giá trị của thuộc tính, dù vậy World Wide Web Consortium (W3C) - tổ chức quốc tế về tiêu chuẩn web khuyến cáo chúng ta nên sử dụng chữ thường mà thôi.

Trong XHTML (phiên bản nghiêm ngặt hơn của HTML) việc viết chữ in thường là điều bắt buộc.

Các thuộc tính phổ biến

• Một số thuộc tính là hết sức phổ biến, nó có thể được sử dụng trong bất cứ thẻ nào của HTML. Nhóm thuộc tính quyền lực này có tên tiếng Anh là HTML Global Attributes - mà tôi cũng chưa biết phải dịch sao cho chuẩn.
• Vài ví dụ về các HTML Global Attributes là các thuộc tính như: class, id, style, title

Thẻ title trong HTML

Thẻ title dùng để tạo tiêu đề cho bài viết, đây là thẻ cơ bản vào bậc nhất trong HTML và nó có ý nghĩa đặc biệt quan trọng khi SEO.
Code mẫu:

<html>

<head>
<title>Tiêu đề bài viết</title>
</head>

<body>
Nội dung bài viết
</body>

</html>

Ứng dụng

• Cung cấp tiêu đề trên toolbar của trình duyệt

• Hiển thị tiêu đề cho trang khi được thêm vào danh sách ưa thích của trình duyệt

• Cung cấp tiêu đề cho các bài viết trong kết quả trả về của các cỗ máy tìm kiếm (thí dụ: Google, Bing...)

Trình duyệt hỗ trợ

Được hỗ trợ bởi tất cả các trình duyệt phổ biến gồm Chrome, FireFox, Opera, Safari và IE

Các chú ý

• Mỗi một trang HTML chỉ được phép chứa duy nhất một phần tử title mà thôi
• Nếu không có thẻ <title> nào trong trang HTML thì trang HTML đó sẽ được xác định là không hợp lệ

Tôi tạo một trang HTML không có thẻ title rồi sử dụng http://validator.w3.org để check lỗi, và đây là kết quả:

Thông báo nói với chúng ta rằng, thẻ head bị thiếu thẻ title và bạn cần bổ sung nó.