Đặc tính Css trong html

CSS  ngôn ngữ giúp trình duyệt hiểu được các thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định dạng (CSS).

CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong 1 trang web hoặc ở trong một file CSS bên ngoài

Hình ảnh minh họa html css

Ví dụ hình minh họa CSS 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 elements bằng 3 cách:

  • Inline – Sử dụng  style attribute như là thuộc tính của HTML elements
  • Internal – Sử dụng <style> element trong thẻ <head> section
  • External – Sử dụng ở file mở rộng external CSS files

Ở trong phần này chúng ta chỉ học Inline Style.

Đào tạo seo website

CSS Syntax ( quy tắc)

CSS styling có quy tắc viết:

ví dụ minh họa CSS systax
ví dụ minh họa CSS systax

element là tên của HTML element. property tên thuộc tính CSS.value giá trị của CSS.

Nhiều style trong cùng một element thì cách nhau bởi dấu

Inline Styling (Inline CSS)

Inline styling chỉ áp dụng cho duy nhất chính HTML element đó:

Ví dụ Styling CSS html
Ví dụ Styling CSS html

hiển thị inline stylings html

Internal Styling(Internal CSS)

Một internal style sheet có thể được dùng để định nghĩa một style chung cho  tất cả HTML elements trong một trang.

Internal styling định nghĩa ở thẻ <head>, Sử dụng thẻ <style> element:

Ví dụ Internal Stylings html

Hiển thị html Internal Styling

External Styling (External CSS)

External style sheet là lựa chọn tốt để dùng chung cho nhiều trang khác.

Với external style sheets, bạn chỉ cần thay đổi style ở 1 file.

External styles định nghĩa trong thẻ <head>, sử dụng thẻ <link> element:

Ví dụ External Styling

Hiện thị External Styling

CSS Fonts

The CSS property color định nghĩa màu chữ của HTML element.

The CSS property font-family định nghĩa font chữ của HTML element.

The CSS property font-size định nghĩa cỡ chữ HTML element.

Ví dụ font styling

Hiển thị font styling

The CSS Box Model

Mỗi HTML element luôn có 1 phạm vi bao quanh, có thể không nhìn thấy nhưng nó luôn tồn tại

Thuộc tính CSS border property định nghĩa một đường bao quanh HTML element:

ví dụ 1 cssbox html
ví dụ 1 cssbox html

Thuộc tính CSS padding property định nghĩa khoảng trắng nữa nội dung của HTML element và Border:

ví dụ 2 cssbox html
ví dụ 2 cssbox html

Thuộc tính CSS margin property định nghĩa khoảng trắng từ border tới các HTML element bên ngoài khác:

Ví dụ 3 cssbox html
Ví dụ 3 cssbox html

The id Attribute

Tất cả những ví dụ trên dùng chung CSS style cho HTML elements.

Để chỉ rõ sử dụng CSS cho element riêng biệt nào đó, bạn có thể thêm id attribute cho element:

Ví dụ:

<p id=“p01”>I am different</p>

và:

p#p01 {
    color:blue;
}

Hiển thị color html css

The class Attribute

Để định nghía style cho thành phần riêng biệt nào đó bạn cũng có thể sử dụng (class) of elements, thê một class attribute vào element:

<p class=“error”>I am different</p>

Now you can define a different style for all elements with the specified class:

p.error {
    color:red;
}

Deprecated Tags and Attributes in HTML5

In older HTML versions, several tags and attributes were used to style documents.

Những thẻ không hỡ trợ ở HTML5.

Tránh sử dụng elements: <font>, <center> and <strike>.

Tránh sử dụng attributes: color and bgcolor.

Tổng hợp chương

  • Dùng HTML style attribute for inline styling
  • Dùng HTML <style> element to define internal CSS
  • Dùng HTML <link> element to define external CSS
  • Dùng HTML <head> element Chứa <style> và <link> elements
  • Dùng CSS color property cho màu chữ
  • Dùng CSS font-family cho font chữ
  • Dùng CSS font-size cho cỡ chữ
  • Dùng CSS border cho đường bao quanh element
  • Dùng CSS padding cho khoảng trắng giữa nội dung và border
  • Dùng CSS margin cho khoảng trắng giữa border và các thành phần bên ngoài

 

Xem thêm >>>

Dạy thiết kế web giá rẻ

 

Khóa học seo giá rẻ tại Hà Nội

Trả lời