Home / html
Hiển thị các bài đăng có nhãn html. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn html. Hiển thị tất cả bài đăng

Thứ Bảy, 7 tháng 3, 2015

HTML 13 - HTML Styles - CSS

V� d?:
 <!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>



Styling HTML with CSS

- CSS l� vi?t t?t c?a Cascading Style Sheets
- Styling c� th? ��?c th�m v�o HTML b?ng 3 c�ch: 
+ Inline - s? d?ng m?t thu?c t�nh phong c�ch trong c�c y?u t? HTML
<h1 style="color:blue">This is a Blue Heading</h1> 
+ Internal - s? d?ng th? <style> trong th? <head>
<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>
+ External - s? d?ng m?t ho?c nhi?u file CSS b�n ngo�i 

C�ch ph? bi?n nh?t l� s? d?ng file css ri�ng bi?t. Tuy nhi�n trong tut n�y ch�ng t�i s? d?ng phong c�ch n?i b? (Internal) �? ti?n cho vi?c th?c h�nh.

C� ph�p CSS 
CSS c� c� ph�p nh� sau
element { property:value; property:value }
- element: ph?n t? HTML
- property: Thu?c t�nh css
- value: Gi� tr? CSS
- M?i phong c�ch ��?c ph�n c�ch b?ng d?u ch?m ph?y.

Inline Styling (Inline CSS)

- Inline CSS r?t h?u �ch cho vi?c �p d?ng m?t phong c�ch �?c ��o v?i m?t ph?n t? HTML duy nh?t:- Inline CSS s? thay �?i m�u s?c v�n b?n c?a m?t �? m?c duy nh?t: 
 <h1 style="color:blue">This is a Blue Heading</h1>  




 Internal Styling (Internal CSS)
- M?t phong c�ch trang n?i b? c� th? ��?c s? d?ng �? x�c �?nh m?t phong c�ch ph? bi?n cho t?t c? c�c y?u t? HTML tr�n m?t trang. 
- Phong c�ch n?i b? ��?c �?nh ngh?a trong th? <head> c?a trang HTML, b?ng c�ch s? d?ng th? <style> :
<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>



External Styling (External CSS)
 - S? d?ng file css ri�ng l� l? t�?ng khi c�c phong c�ch ��?c �p d?ng cho nhi?u trang.
- B?ng c�ch s? d?ng file css ri�ng b?n c� th? thay �?i giao di?n c?a to�n b? trang web b?ng c�ch thay �?i m?t t?p tin.
-  External Styling s? d?ng file css ri�ng v� sau �� li�n k?t �?n trong ph?n <head> c?a trang HTML
 <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>



CSS Fonts
- C�c thu?c t�nh CSS color m�u v�n b?n ��?c s? d?ng cho c�c ph?n t? HTML. 
- C�c thu?c t�nh CSS font-family �?nh ngh?a c�c font ch? ��?c s? d?ng cho c�c ph?n t? HTML. 
- C�c thu?c t�nh CSS font-size x�c �?nh k�ch th�?c v�n b?n �? ��?c s? d?ng cho c�c ph?n t? HTML.
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>



The CSS Box Model
- M?i ph?n t? HTML c� m?t h?p xung quanh n�, ngay c? khi b?n kh�ng nh?n th?y n�.
- border d�ng �? ��ng khung xung quanh m?t ph?n t? HTML.
p {
    border:1px solid black;
}





- padding x�c �?nh kho?ng tr?ng (space) b�n trong khung (border)

p {
    border:1px solid black;
    padding:10px;
}


- margin x�c �?nh m?t bi�n �? (kh�ng gian) ? b�n ngo�i khung
p {
    border:1px solid black;
    padding:10px;
    margin:30px;
} 



Ch� ?: C�c v� d? tr�n s? d?ng pixels (px)  �? x�c �?nh k�ch th�?c

Thu?c t�nh id
T?t c? c�c v� d? tr�n s? d?ng CSS �? �?nh d?ng c�c ph?n t? HTML trong m?t c�ch t?ng qu�t.

�? x�c �?nh m?t phong c�ch �?c bi?t cho m?t y?u t? �?c bi?t, h?y th�m thu?c t�nh id cho ph?n t?:
 <p id="p01">I am different</p> 
v� d?:
<!DOCTYPE html>
<html>

<head>
<style>
p#p01 {
    color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>



Thu?c t�nh class
�? x�c �?nh m?t phong c�ch cho c�c ph?n t? �?c bi?t, h?y th�m m?t thu?c t�nh class
<!DOCTYPE html>
<html>

<head>
<style>
p.error {
    color:red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>


* Ch� ?: S? d?ng id cho m?t y?u t? duy nh?t, s? d?ng class cho m?t nh�m y?u t?

Deprecated Tags and Attributes in HTML5
In older HTML versions, several tags and attributes were used to style documents.

These tags and attributes are not supported in HTML5!

Avoid using the <font>, <center>, and <strike> elements.

Avoid using the color and bgcolor attributes.


D?ch v� bi�n t?p t? w3schools b?i Qu? L?
Pada Komentar

HTML 13 - HTML Styles - CSS

Ví dụ:
 <!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>



Styling HTML with CSS

- CSS là viết tắt của Cascading Style Sheets
- Styling có thể được thêm vào HTML bằng 3 cách: 
+ Inline - sử dụng một thuộc tính phong cách trong các yếu tố HTML
<h1 style="color:blue">This is a Blue Heading</h1> 
+ Internal - sử dụng thẻ <style> trong thẻ <head>
<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>
+ External - sử dụng một hoặc nhiều file CSS bên ngoài 

Cách phổ biến nhất là sử dụng file css riêng biệt. Tuy nhiên trong tut này chúng tôi sử dụng phong cách nội bộ (Internal) để tiện cho việc thực hành.

Cú pháp CSS 
CSS có cú pháp như sau
element { property:value; property:value }
- element: phần tử HTML
- property: Thuộc tính css
- value: Giá trị CSS
- Mỗi phong cách được phân cách bằng dấu chấm phẩy.

Inline Styling (Inline CSS)

- Inline CSS rất hữu ích cho việc áp dụng một phong cách độc đáo với một phần tử HTML duy nhất:- Inline CSS sẽ thay đổi màu sắc văn bản của một đề mục duy nhất: 
 <h1 style="color:blue">This is a Blue Heading</h1>  




 Internal Styling (Internal CSS)
- Một phong cách trang nội bộ có thể được sử dụng để xác định một phong cách phổ biến cho tất cả các yếu tố HTML trên một trang. 
- Phong cách nội bộ được định nghĩa trong thẻ <head> của trang HTML, bằng cách sử dụng thẻ <style> :
<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>



External Styling (External CSS)
 - Sử dụng file css riêng là lý tưởng khi các phong cách được áp dụng cho nhiều trang.
- Bằng cách sử dụng file css riêng bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi một tập tin.
-  External Styling sử dụng file css riêng và sau đó liên kết đến trong phần <head> của trang HTML
 <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>



CSS Fonts
- Các thuộc tính CSS color màu văn bản được sử dụng cho các phần tử HTML. 
- Các thuộc tính CSS font-family định nghĩa các font chữ được sử dụng cho các phần tử HTML. 
- Các thuộc tính CSS font-size xác định kích thước văn bản để được sử dụng cho các phần tử HTML.
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>



The CSS Box Model
- Mỗi phần tử HTML có một hộp xung quanh nó, ngay cả khi bạn không nhìn thấy nó.
- border dùng để đóng khung xung quanh một phần tử HTML.
p {
    border:1px solid black;
}





- padding xác định khoảng trống (space) bên trong khung (border)

p {
    border:1px solid black;
    padding:10px;
}


- margin xác định một biên độ (không gian) ở bên ngoài khung
p {
    border:1px solid black;
    padding:10px;
    margin:30px;
} 



Chú ý: Các ví dụ trên sử dụng pixels (px)  để xác định kích thước

Thuộc tính id
Tất cả các ví dụ trên sử dụng CSS để định dạng các phần tử HTML trong một cách tổng quát.

Để xác định một phong cách đặc biệt cho một yếu tố đặc biệt, hãy thêm thuộc tính id cho phần tử:
 <p id="p01">I am different</p> 
ví dụ:
<!DOCTYPE html>
<html>

<head>
<style>
p#p01 {
    color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>



Thuộc tính class
Để xác định một phong cách cho các phần tử đặc biệt, hãy thêm một thuộc tính class
<!DOCTYPE html>
<html>

<head>
<style>
p.error {
    color:red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>


* Chú ý: Sử dụng id cho một yếu tố duy nhất, sử dụng class cho một nhóm yếu tố

Deprecated Tags and Attributes in HTML5
In older HTML versions, several tags and attributes were used to style documents.

These tags and attributes are not supported in HTML5!

Avoid using the <font>, <center>, and <strike> elements.

Avoid using the color and bgcolor attributes.


Dịch và biên tập từ w3schools bởi Quỷ Lệ
Pada Komentar

HTML 12 - HTML Comments

Th? comment <! - and -> ��?c s? d?ng �? ch� th�ch trong HTML.

HTML Comment TagsB?n c� th? th�m ngu?n HTML c?a b?n b?ng c�ch s? d?ng c� ph�p sau ��y:
<!-- Write your comments here --> 

L�u ?:  
- C� m?t d?u ch?m than trong th? m?, nh�ng kh�ng c� trong c�c th? ��ng. 
+ Th? m?:  <!--
+ Th? ��ng:  -->

- HTML Comment kh�ng hi?n th? b?i tr?nh duy?t, nh�ng h? c� th? gi�p �? t�i li?u HTML c?a b?n.

- B?n c� th? vi?t ? ki?n b?n ho?c c�c th�ng b�o v� nh?c nh? trong HTML c?a b?n:
 <!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->


C�c comment c?ng h? tr? �? g? l?i HTML, b?i v? b?n c� th? nh?n x�t c�c d?ng m? HTML, v� ch�ng s? h? tr? ki?m tra l?i nhanh h�n.

<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
Comment theo �i?u ki?n
B?n c� th? t?nh c? g?p comments c� �i?u ki?n trong HTML:
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
comments c� �i?u ki?n ? tr�n �?nh ngh?a c�c th? HTML ��?c th?c hi?n b?i Internet Explorer.

Software Program Tags (Th? comment ��?c t?o ra b?i c�c ph?n m?m)
Th? HTML comments n�y c?ng c� th? ��?c t?o ra b?i c�c ch��ng tr?nh ph?n m?m t?o HTML kh�c nhau.
V� d?: <! - Webbot bot -> th? comments HTML b?ng FrontPage v� Expression Web.


D?ch v� bi�n t?p t? w3schools b?i Qu? L? 
Pada Komentar

HTML 12 - HTML Comments

Thẻ comment <! - and -> được sử dụng để chú thích trong HTML.

HTML Comment TagsBạn có thể thêm nguồn HTML của bạn bằng cách sử dụng cú pháp sau đây:
<!-- Write your comments here --> 

Lưu ý:  
- Có một dấu chấm than trong thẻ mở, nhưng không có trong các thẻ đóng. 
+ Thẻ mở:  <!--
+ Thẻ đóng:  -->

- HTML Comment không hiển thị bởi trình duyệt, nhưng họ có thể giúp đỡ tài liệu HTML của bạn.

- Bạn có thể viết ý kiến bạn hoặc các thông báo và nhắc nhở trong HTML của bạn:
 <!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->


Các comment cũng hỗ trợ để gỡ lỗi HTML, bởi vì bạn có thể nhận xét các dòng mã HTML, và chúng sẽ hỗ trỡ kiểm tra lỗi nhanh hơn.

<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
Comment theo điều kiện
Bạn có thể tình cờ gặp comments có điều kiện trong HTML:
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
comments có điều kiện ở trên định nghĩa các thẻ HTML được thực hiện bởi Internet Explorer.

Software Program Tags (Thẻ comment được tạo ra bởi các phần mềm)
Thẻ HTML comments này cũng có thể được tạo ra bởi các chương trình phần mềm tạo HTML khác nhau.
Ví dụ: <! - Webbot bot -> thẻ comments HTML bằng FrontPage và Expression Web.


Dịch và biên tập từ w3schools bởi Quỷ Lệ 
Pada Komentar

HTML 11 - HTML Computer Code Elements

Computer Code
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}

Th? HTML �?nh d?ng Keyboard
- X�c �?nh ki?u nh?p v�o keyboard
- V� d?:
<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p>



Th?  <samp>
- Th? <samp> x�c �?nh m?t �?u ra m�y t�nh:
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>





Th? <code>
- Th? <code> x�c �?nh m? l?p tr?nh 
 <code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }
</code>



<p>Coding Example:</p>

<code>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</code>



�? hi?n th? ch�nh x�c b?n c?n th�m th? <pre>
<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>




Th? <var>
- Th? <var> x�c �?nh m?t bi?n to�n h?c:
  <p>Einstein vi?t:</p>

<p><var>E = m c<sup>2</sup></var></p>




D?ch v� bi�n t?p t? w3schools b?i Qu? L?
Pada Komentar

HTML 11 - HTML Computer Code Elements

Computer Code
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}

Thẻ HTML định dạng Keyboard
- Xác định kiểu nhập vào keyboard
- Ví dụ:
<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p>



Thẻ  <samp>
- Thẻ <samp> xác định một đầu ra máy tính:
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>





Thẻ <code>
- Thẻ <code> xác định mã lập trình 
 <code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }
</code>



<p>Coding Example:</p>

<code>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</code>



Để hiển thị chính xác bạn cần thêm thẻ <pre>
<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>




Thẻ <var>
- Thẻ <var> xác định một biến toán học:
  <p>Einstein viết:</p>

<p><var>E = m c<sup>2</sup></var></p>




Dịch và biên tập từ w3schools bởi Quỷ Lệ
Pada Komentar
Đăng ký: Bài đăng (Atom)