daipt
Well-known member
CSS là một ngôn ngữ lập trình để tạo kiểu cho website. Nhằm giúp bạn hiểu rõ hơn về CSS, trong phạm vi bài viết này, Hosting Việt sẽ chia sẻ CSS là gì, cũng như cách viết nó trong HTML.
CSS là gì?
CSS meaning là từ viết tắt của Cascading Style Sheets, tức là ngôn ngữ được dùng để định dạng các phần tử do ngôn ngữ đánh dấu (như HTML) tạo ra. Hay nói cách khác, HTML định dạng các phần tử có trên website như tiêu đề, bảng biểu, tạo đoạn văn bản…, còn CSS giúp cho các phần tử của HTML trở nên phong phú, nổi bật hơn, bằng cách trang trí, đổi màu chữ, thêm màu sắc cho trang hay thay đổi cấu trúc trang…
CSS hoạt động dựa vào việc tìm các vùng chọn, ví dụ như thẻ HTML, class, tên ID… Kế đến, nó áp dụng những thuộc tính cần thay đổi lên các vùng chọn.
CSS3 là gì?
CSS3 là phiên bản 3 của CSS và cũng là phiên bản mới nhất của ngôn ngữ này. CSS3 không chỉ thừa hưởng tất cả các ưu điểm của những phiên bản trước, mà nó còn có thêm các tính năng cải tiến hơn. Từ đó, CSS3 mang lại nhiều sự tiện lợi cho người dùng. Vì thế, đây cũng là phiên bản được giới lập trình ưa chuộng và sử dụng nhiều trong quá trình thiết kế website.
Ưu điểm của CSS3 là gì?
HTML và CSS là gì?
HTML là từ viết tắt của cụm từ HyperText Markup Language. Đây là một ngôn ngữ siêu văn bản có chức năng xác định cấu trúc của nội dung như tiêu đề, hình ảnh, phân đoạn văn. Trong khi đó, ngôn ngữ CSS giúp định dạng kiểu hiển thị của văn bản.
HTML và CSS là hai ngôn ngữ độc lập nhưng lại được sử dụng để bổ trợ cho nhau, nhằm tạo sự hoàn hảo, đa dạng và trực quan cho trang web. Hay nói cách khác, HTML là đại diện của nội dung, còn CSS thể hiện định dạng xuất hiện của nội dung.
Cấu trúc một đoạn CSS
Mỗi đoạn CSS gồm 4 phần sau:
Điều này có nghĩa, CSS được khai báo trong vùng chọn, các thuộc tính cùng giá trị nằm ở cặp dấu “{}” và không giới hạn số lượng các thuộc tính. Từng thuộc tính có một giá trị riêng, tồn tại ở dạng số, hoặc tên giá trị được liệt kê trong danh sách của CSS.
Các phần giá trị và thuộc tính sẽ được phân cách bằng dấu “:” Mỗi dòng khai báo thuộc tính luôn có dấu “;” ở cuối dòng.
Các thuật ngữ phổ biến trong HTML
Trong HTML có khá nhiều thuật ngữ, tuy nhiên có 3 loại phổ biến mà bạn cần biết là elements, tags, và attributes.
Tên mỗi element được đặt bên trong dấu “< >”.
Cuối cùng, nội dung nằm ở phần giữa thẻ mở với thẻ đóng chính là nội dung element.
Những thuộc tính này sẽ được xác định ngay sau tên của thành phần và nằm bên trong thẻ mở. Hay nói cách khác, thuộc tính gồm tên và giá trị. Định dạng cho thuộc tính có tên của nó đứng sau dấu “=”, kế tiếp là giá trị thuộc tính. Ví dụ: element <a> có thuộc tính href sẽ có dạng như sau:
<a href=”http://domain.com/”>Domain</a>
Các thuật ngữ phổ biến của Cascading style sheet là gì?
Một số thuật ngữ phổ biến mà bạn cần biết của ngôn ngữ CSS là selectors, properties, và values.
Selector bao gồm nhiều vòng style khác nhau kết hợp lại để chọn những yếu tố duy nhất, tùy thuộc vào mức độ cụ thể theo nhu cầu của người dùng. Ví dụ, người dùng chọn một đoạn xác định trên một trang hoặc chọn mỗi đoạn trên một trang.
Mỗi Selector thường có một giá trị thuộc tính mục tiêu, điển hình như một id, class hoặc loại phần tử (ví dụ <h1> hoặc <p>).
Các Selector sẽ theo sau dấu “{}” trong CSS.
Có nhiều loại thuộc tính mà người dùng được phép sử dụng như color, background, height, width, font-size cùng một số thuộc tính mới khác.
Ví dụ đoạn code sau sẽ xác định thuộc tính color, front-size áp dụng cho tất cả <p>:
p {
color: …;
font-size: …;
}
Người dùng thường chọn một Element với Selector, đồng thời xác định kiểu thuộc tính sẽ áp dụng với Property. Sau đó, họ tiến hành xác định hành vi Property tương ứng với một giá trị Value. Những giá trị được xác định là văn bản nằm giữa dấu “:” và dấu “;”.
Ví dụ: Chọn toàn bộ thuộc tính của <p> và đặt giá trị thuộc tính color thành blue, giá trị thuộc tính front-size là 16 pixel. Lúc này, đoạn mã có dạng như sau:
p {
color: blue;
font-size: 16px;
}
Cách viết CSS trong HTML
Để ngôn ngữ CSS có thể nói chuyện được với HTML, người dùng phải thực hiện tham chiếu tệp tin CSS trong HTML. Cách tham chiếu CSS tốt nhất là gồm toàn bộ kiểu trong một style sheet, và tham chiếu từ bên trong phần <head> của file HTML. Cách này cho phép người dùng có thể sử dụng cùng kiểu trang trí cho tất cả trang web. Đồng thời, nó cũng giúp tiết kiệm thời gian thực hiện thay đổi.
Có 3 cách viết CSS trong HTML:
- Trực tiếp: Bạn dùng thuộc tính style trong thẻ HTML.
- Nội bộ: Bạn dùng thuộc tính <style> trong phần <head> của trang HTML.
- CSS ngoài: Bạn dùng một hay một số tập tin CSS bên ngoài.
Hiện nay, cách dùng phổ biến là chia CSS thành những tập tin riêng biệt (CSS ngoài) rồi gọi chúng vào trang HTML. Phần sau, Hosting Việt sẽ đề cập chi tiết từng kiểu viết.
- Kiểu viết CSS trực tiếp (còn được gọi là Inline CSS)
Kiểu viết này chỉ hữu dụng trong trường hợp bạn trang trí một kiểu cho một thành thẻ của trang HTML.
Inline CSS được viết qua thuộc tính style.
Ví dụ: Để đổi màu chữ của đề mục, bạn viết đoạn CSS có mã như sau:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Đây là đề mục đỏ</h1>
</body>
</html>
- Kiểu viết CSS nội bộ (hay còn được gọi là Internal CSS)
Kiểu viết này dùng để trang trí cho toàn bộ thành phần có trong HTML.
Ví dụ: Cách viết CSS nội bộ như sau.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: grey}
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
- CSS ngoài (hay còn gọi là External CSS)
Nếu có nhiều trang HTML cùng một phong cách trang trí, bạn chỉ nên sử dụng cách viết CSS bên ngoài rồi gọi chúng vào trang HTML. Bởi nếu dùng CSS trực tiếp hay nội bộ thì bạn bắt buộc phải lặp lại chúng ở mỗi trang. Ngoài ra, khi muốn thay đổi bất kỳ thành phần trang trí nào, bạn cũng thực hiện sửa ở tất cả các trang.
Cách viết CSS ngoài rất hữu ích khi bạn trang trí nhiều trang. Đồng thời, nếu cần thay đổi chi tiết trang trí, bạn chỉ việc điều chỉnh trên một tệp tin CSS và các trang HTML sẽ được thay đổi theo.
Viết CSS ngoài vào tệp tin .css, sau đó thông qua <head> để gọi vào trang HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/wp-content/uploads/2015/05/demo_style.css">
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
- Color : Quy định màu chữ dùng cho các thành phần có trong trang HTML.
- Font-family: Quy định kiểu chữ của các thành phần có trong trang HTML.
- Font-size : Quy định kích cỡ chữ cho các thành phần có trong HTML.
Ví dụ: Một đoạn mã CSS quy định về kiểu chữ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:Tahoma;
font-size:200%;
}
p {
color:red;
font-family:Arial;
font-size:120%;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
Mặc dù có thể bạn không nhìn thấy nhưng từng thành phần trong HTML luôn có một khung bao xung quanh. Còn trong CSS có thuộc tính border quy định về định dạng hiển thị của đường viền này.
Ví dụ: Đoạn mã về hình thức hiển thị của đường viền có dạng như sau.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:2px solid grey;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
</body>
</html>
Trong CSS cũng có thêm thuộc tính padding đóng vai trò quy định khoảng cách từ đường viền đến những thành phần có trong trang HTML.
Ví dụ: Đoạn mã về thuộc tính padding có dạng:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:2px solid grey;
padding:6px;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
</body>
</html>
Trái ngược với padding, thuộc tính margin lại quy định khoảng cách giữa đường viền đến thành phần bên ngoài.
Ví dụ: Đoạn mã về thuộc tính margin có dạng:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:2px solid grey;
padding:6px;
margin:12px;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
</body>
</html>
Đây là thuộc tính được dùng khi bạn muốn trang trí một thành phần đặc biệt của trang HTML. Cách thực hiện khá đơn giản, trước tiên, bạn thêm id vào thành phần cần trang trí, đoạn code có dạng:
<p id="element1">Đoạn văn bản có thuộc tính id</p>
Kế đến, bạn định nghĩa kiểu trang trí.
<!DOCTYPE html>
<html>
<head>
<style>
p#element1 {
color: red;
}
</style>
</head>
<body>
<p>Đoạn văn bản.</p>
<p>Đoạn văn bản.</p>
<p>Đoạn văn bản.</p>
<p id="element1">Đoạn văn bản có thuộc tính id</p>
</body>
</html>
Đây là thuộc tính được dùng để trang trí cho một nhóm thành phần đặc biệt. Cách thực hiện cũng tương tự như thuộc tính id. Đó là, bạn thêm thuộc tính class vào thành phần muốn trang trí:
<p class="classname">Đoạn văn bản có thuộc tính class</p>
Sau đó, bạn định nghĩa cho kiểu trang trí của các thành phần cùng thuộc tính class:
<!DOCTYPE html>
<html>
<head>
<style>
p.classname {
color:blue;
}
</style>
</head>
<body>
<p>Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p class="classname"> Đoạn văn bản có thuộc tính class.</p>
<p>Đây là đoạn văn bản.</p>
<p class="classname"> Đoạn văn bản có thuộc tính class cùng tên.</p>
</body>
</html>
Các thuộc tính bị loại bỏ trong HTML5 của CSS là gì?
Mặc dù, có một số thẻ cùng thuộc tính dùng để trang trí các thành phần trang HTML phiên bản thấp hơn, nhưng có thể chúng sẽ không được hỗ trợ đối với HTML5. Đó là các thẻ <font>, <center> và <strike>. Vì vậy, bạn nên tránh sử dụng chúng.
Trên đây là chia sẻ về CSS là gì. Hi vọng, bài viết mang đến cho bạn nhiều thông tin hữu ích trong quá trình làm việc với CSS và HTML.
Nhà cung cấp Tên Miền - Hosting - VPS tốt nhất Việt Nam
Là đơn vị thuộc top 3 lĩnh vực dịch vụ lưu trữ website tại Việt Nam, Hosting Việt được đánh giá là nơi có hosting giá rẻ và luôn nhận được nhiều lời giới thiệu từ diễn đàn tin học về nơi mua host ở đâu tốt . Chỉ từ 50.000đ/tháng, người dùng đã có ngay cho mình một host để thỏa sức học tập, nghiên cứu hoặc chạy demo website… Bên cạnh đó, Hosting Việt còn là đơn vị luôn tiên phong trong công nghệ điện toán đám mây (cloud hosting),gói thuê server với băng thông khủng không giới hạn.
Hosting Việt có đa dạng gói dịch vụ, bên cạnh những gói giá siêu rẻ 50.000đ/tháng, nhà cung cấp còn có những vps giá rẻ chất lượng dành cho nhiều nhóm doanh nghiệp khác nhau. Các gói này luôn đáp ứng đủ nhu cầu lưu trữ, truy cập hàng chục nghìn người mỗi ngày.
Ngoài ra, với dịch vụ chăm sóc khách hàng chuyên nghiệp, đội ngũ kỹ thuật viên có chuyên môn cao sẽ nhanh chóng hỗ trợ, xử lý các vấn đề phát sinh. Từ đó, giúp người dùng có được sự trải nghiệp mượt mà, thú vị.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn
CSS là gì?
CSS meaning là từ viết tắt của Cascading Style Sheets, tức là ngôn ngữ được dùng để định dạng các phần tử do ngôn ngữ đánh dấu (như HTML) tạo ra. Hay nói cách khác, HTML định dạng các phần tử có trên website như tiêu đề, bảng biểu, tạo đoạn văn bản…, còn CSS giúp cho các phần tử của HTML trở nên phong phú, nổi bật hơn, bằng cách trang trí, đổi màu chữ, thêm màu sắc cho trang hay thay đổi cấu trúc trang…
CSS hoạt động dựa vào việc tìm các vùng chọn, ví dụ như thẻ HTML, class, tên ID… Kế đến, nó áp dụng những thuộc tính cần thay đổi lên các vùng chọn.
CSS3 là gì?
CSS3 là phiên bản 3 của CSS và cũng là phiên bản mới nhất của ngôn ngữ này. CSS3 không chỉ thừa hưởng tất cả các ưu điểm của những phiên bản trước, mà nó còn có thêm các tính năng cải tiến hơn. Từ đó, CSS3 mang lại nhiều sự tiện lợi cho người dùng. Vì thế, đây cũng là phiên bản được giới lập trình ưa chuộng và sử dụng nhiều trong quá trình thiết kế website.
Ưu điểm của CSS3 là gì?
- Tương thích với HTML5
- Hiển thị trên mọi loại thiết bị
- Tối ưu công cụ tìm kiếm
- Tương thích với mọi trình duyệt
HTML và CSS là gì?
HTML là từ viết tắt của cụm từ HyperText Markup Language. Đây là một ngôn ngữ siêu văn bản có chức năng xác định cấu trúc của nội dung như tiêu đề, hình ảnh, phân đoạn văn. Trong khi đó, ngôn ngữ CSS giúp định dạng kiểu hiển thị của văn bản.
HTML và CSS là hai ngôn ngữ độc lập nhưng lại được sử dụng để bổ trợ cho nhau, nhằm tạo sự hoàn hảo, đa dạng và trực quan cho trang web. Hay nói cách khác, HTML là đại diện của nội dung, còn CSS thể hiện định dạng xuất hiện của nội dung.
Cấu trúc một đoạn CSS
Mỗi đoạn CSS gồm 4 phần sau:
| 01 02 03 04 05 | vùng chọn { thuộc tính : giá trị; thuộc tính: giá trị; ..... } |
Các phần giá trị và thuộc tính sẽ được phân cách bằng dấu “:” Mỗi dòng khai báo thuộc tính luôn có dấu “;” ở cuối dòng.
Các thuật ngữ phổ biến trong HTML
Trong HTML có khá nhiều thuật ngữ, tuy nhiên có 3 loại phổ biến mà bạn cần biết là elements, tags, và attributes.
- Elements
Tên mỗi element được đặt bên trong dấu “< >”.
- Tags
Cuối cùng, nội dung nằm ở phần giữa thẻ mở với thẻ đóng chính là nội dung element.
- Attributes
Những thuộc tính này sẽ được xác định ngay sau tên của thành phần và nằm bên trong thẻ mở. Hay nói cách khác, thuộc tính gồm tên và giá trị. Định dạng cho thuộc tính có tên của nó đứng sau dấu “=”, kế tiếp là giá trị thuộc tính. Ví dụ: element <a> có thuộc tính href sẽ có dạng như sau:
<a href=”http://domain.com/”>Domain</a>
Các thuật ngữ phổ biến của Cascading style sheet là gì?
Một số thuật ngữ phổ biến mà bạn cần biết của ngôn ngữ CSS là selectors, properties, và values.
- Selectors
Selector bao gồm nhiều vòng style khác nhau kết hợp lại để chọn những yếu tố duy nhất, tùy thuộc vào mức độ cụ thể theo nhu cầu của người dùng. Ví dụ, người dùng chọn một đoạn xác định trên một trang hoặc chọn mỗi đoạn trên một trang.
Mỗi Selector thường có một giá trị thuộc tính mục tiêu, điển hình như một id, class hoặc loại phần tử (ví dụ <h1> hoặc <p>).
Các Selector sẽ theo sau dấu “{}” trong CSS.
- Properties
Có nhiều loại thuộc tính mà người dùng được phép sử dụng như color, background, height, width, font-size cùng một số thuộc tính mới khác.
Ví dụ đoạn code sau sẽ xác định thuộc tính color, front-size áp dụng cho tất cả <p>:
p {
color: …;
font-size: …;
}
- Values
Người dùng thường chọn một Element với Selector, đồng thời xác định kiểu thuộc tính sẽ áp dụng với Property. Sau đó, họ tiến hành xác định hành vi Property tương ứng với một giá trị Value. Những giá trị được xác định là văn bản nằm giữa dấu “:” và dấu “;”.
Ví dụ: Chọn toàn bộ thuộc tính của <p> và đặt giá trị thuộc tính color thành blue, giá trị thuộc tính front-size là 16 pixel. Lúc này, đoạn mã có dạng như sau:
p {
color: blue;
font-size: 16px;
}
Cách viết CSS trong HTML
Để ngôn ngữ CSS có thể nói chuyện được với HTML, người dùng phải thực hiện tham chiếu tệp tin CSS trong HTML. Cách tham chiếu CSS tốt nhất là gồm toàn bộ kiểu trong một style sheet, và tham chiếu từ bên trong phần <head> của file HTML. Cách này cho phép người dùng có thể sử dụng cùng kiểu trang trí cho tất cả trang web. Đồng thời, nó cũng giúp tiết kiệm thời gian thực hiện thay đổi.
Có 3 cách viết CSS trong HTML:
- Trực tiếp: Bạn dùng thuộc tính style trong thẻ HTML.
- Nội bộ: Bạn dùng thuộc tính <style> trong phần <head> của trang HTML.
- CSS ngoài: Bạn dùng một hay một số tập tin CSS bên ngoài.
Hiện nay, cách dùng phổ biến là chia CSS thành những tập tin riêng biệt (CSS ngoài) rồi gọi chúng vào trang HTML. Phần sau, Hosting Việt sẽ đề cập chi tiết từng kiểu viết.
- Kiểu viết CSS trực tiếp (còn được gọi là Inline CSS)
Kiểu viết này chỉ hữu dụng trong trường hợp bạn trang trí một kiểu cho một thành thẻ của trang HTML.
Inline CSS được viết qua thuộc tính style.
Ví dụ: Để đổi màu chữ của đề mục, bạn viết đoạn CSS có mã như sau:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Đây là đề mục đỏ</h1>
</body>
</html>
- Kiểu viết CSS nội bộ (hay còn được gọi là Internal CSS)
Kiểu viết này dùng để trang trí cho toàn bộ thành phần có trong HTML.
Ví dụ: Cách viết CSS nội bộ như sau.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: grey}
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
- CSS ngoài (hay còn gọi là External CSS)
Nếu có nhiều trang HTML cùng một phong cách trang trí, bạn chỉ nên sử dụng cách viết CSS bên ngoài rồi gọi chúng vào trang HTML. Bởi nếu dùng CSS trực tiếp hay nội bộ thì bạn bắt buộc phải lặp lại chúng ở mỗi trang. Ngoài ra, khi muốn thay đổi bất kỳ thành phần trang trí nào, bạn cũng thực hiện sửa ở tất cả các trang.
Cách viết CSS ngoài rất hữu ích khi bạn trang trí nhiều trang. Đồng thời, nếu cần thay đổi chi tiết trang trí, bạn chỉ việc điều chỉnh trên một tệp tin CSS và các trang HTML sẽ được thay đổi theo.
Viết CSS ngoài vào tệp tin .css, sau đó thông qua <head> để gọi vào trang HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/wp-content/uploads/2015/05/demo_style.css">
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
- Kiểu chữ trong CSS là gì?
- Color : Quy định màu chữ dùng cho các thành phần có trong trang HTML.
- Font-family: Quy định kiểu chữ của các thành phần có trong trang HTML.
- Font-size : Quy định kích cỡ chữ cho các thành phần có trong HTML.
Ví dụ: Một đoạn mã CSS quy định về kiểu chữ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:Tahoma;
font-size:200%;
}
p {
color:red;
font-family:Arial;
font-size:120%;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
- Định dạng kiểu đường viền trong CSS
Mặc dù có thể bạn không nhìn thấy nhưng từng thành phần trong HTML luôn có một khung bao xung quanh. Còn trong CSS có thuộc tính border quy định về định dạng hiển thị của đường viền này.
Ví dụ: Đoạn mã về hình thức hiển thị của đường viền có dạng như sau.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:2px solid grey;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
</body>
</html>
Trong CSS cũng có thêm thuộc tính padding đóng vai trò quy định khoảng cách từ đường viền đến những thành phần có trong trang HTML.
Ví dụ: Đoạn mã về thuộc tính padding có dạng:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:2px solid grey;
padding:6px;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
</body>
</html>
Trái ngược với padding, thuộc tính margin lại quy định khoảng cách giữa đường viền đến thành phần bên ngoài.
Ví dụ: Đoạn mã về thuộc tính margin có dạng:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:2px solid grey;
padding:6px;
margin:12px;
}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
</body>
</html>
- Thuộc tính id
Đây là thuộc tính được dùng khi bạn muốn trang trí một thành phần đặc biệt của trang HTML. Cách thực hiện khá đơn giản, trước tiên, bạn thêm id vào thành phần cần trang trí, đoạn code có dạng:
<p id="element1">Đoạn văn bản có thuộc tính id</p>
Kế đến, bạn định nghĩa kiểu trang trí.
<!DOCTYPE html>
<html>
<head>
<style>
p#element1 {
color: red;
}
</style>
</head>
<body>
<p>Đoạn văn bản.</p>
<p>Đoạn văn bản.</p>
<p>Đoạn văn bản.</p>
<p id="element1">Đoạn văn bản có thuộc tính id</p>
</body>
</html>
- Thuộc tính class
Đây là thuộc tính được dùng để trang trí cho một nhóm thành phần đặc biệt. Cách thực hiện cũng tương tự như thuộc tính id. Đó là, bạn thêm thuộc tính class vào thành phần muốn trang trí:
<p class="classname">Đoạn văn bản có thuộc tính class</p>
Sau đó, bạn định nghĩa cho kiểu trang trí của các thành phần cùng thuộc tính class:
<!DOCTYPE html>
<html>
<head>
<style>
p.classname {
color:blue;
}
</style>
</head>
<body>
<p>Đoạn văn bản.</p>
<p> Đoạn văn bản.</p>
<p class="classname"> Đoạn văn bản có thuộc tính class.</p>
<p>Đây là đoạn văn bản.</p>
<p class="classname"> Đoạn văn bản có thuộc tính class cùng tên.</p>
</body>
</html>
Các thuộc tính bị loại bỏ trong HTML5 của CSS là gì?
Mặc dù, có một số thẻ cùng thuộc tính dùng để trang trí các thành phần trang HTML phiên bản thấp hơn, nhưng có thể chúng sẽ không được hỗ trợ đối với HTML5. Đó là các thẻ <font>, <center> và <strike>. Vì vậy, bạn nên tránh sử dụng chúng.
Trên đây là chia sẻ về CSS là gì. Hi vọng, bài viết mang đến cho bạn nhiều thông tin hữu ích trong quá trình làm việc với CSS và HTML.
Nhà cung cấp Tên Miền - Hosting - VPS tốt nhất Việt Nam
Là đơn vị thuộc top 3 lĩnh vực dịch vụ lưu trữ website tại Việt Nam, Hosting Việt được đánh giá là nơi có hosting giá rẻ và luôn nhận được nhiều lời giới thiệu từ diễn đàn tin học về nơi mua host ở đâu tốt . Chỉ từ 50.000đ/tháng, người dùng đã có ngay cho mình một host để thỏa sức học tập, nghiên cứu hoặc chạy demo website… Bên cạnh đó, Hosting Việt còn là đơn vị luôn tiên phong trong công nghệ điện toán đám mây (cloud hosting),gói thuê server với băng thông khủng không giới hạn.
Hosting Việt có đa dạng gói dịch vụ, bên cạnh những gói giá siêu rẻ 50.000đ/tháng, nhà cung cấp còn có những vps giá rẻ chất lượng dành cho nhiều nhóm doanh nghiệp khác nhau. Các gói này luôn đáp ứng đủ nhu cầu lưu trữ, truy cập hàng chục nghìn người mỗi ngày.
Ngoài ra, với dịch vụ chăm sóc khách hàng chuyên nghiệp, đội ngũ kỹ thuật viên có chuyên môn cao sẽ nhanh chóng hỗ trợ, xử lý các vấn đề phát sinh. Từ đó, giúp người dùng có được sự trải nghiệp mượt mà, thú vị.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn