NTM Solutions

Facebook Youtube Google+

Thứ Ba, 27 tháng 3, 2018

Tự học CSS – Bài 01 – Giới thiệu và cài đặt

Quay về MỤC LỤC HỌC CSS

1.    CSS – Cascading Style Sheets

Dùng để định kiểu, layout, cách thức hiển thị trên nhiều thiết bị khác nhau của trang web.
Ra đời nhằm mục đích xóa bỏ việc định kiểu trên trang HTML, nhờ đó quản lý tập trung hơn.

2.    Các cách chèn CSS vào trang web

Có 03 cách
a.       File bên ngoài
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
       
        Nội dung file “mystyle.css”
body {  background-color: lightblue;}

h1
{color: navy;margin-left: 20px;}
b.      Bên trong file HTML
<head>
<style>
body
{
    background-color
: linen;
}

h1
{
    color
: maroon;
    margin-left
: 40px;
}
</style>
</head>

c.       Ngay trong thẻ HTML
<h1 style="color:blue;margin-left:30px;">Lớp học vi tính .COM</h1>

Chúng ta nên hạn chế dùng cách này, vì mỗi lần chỉnh sửa phải tìm đúng thẻ HTML trong trang web => Điều này làm mất đi tính tiện dụng của CSS.

3.    Cú pháp CSS

Selector – Declaration (đối tượng – mô tả)
Đối tượng ở đây là các phần tử HTML, name, id, class, attribute,…
Mô tả là các thuộc tính và giá trị của chúng.
Ví dụ 1: tất cả đối tượng h1 có màu đỏ và cỡ chữ 11px
h1{color:red;font-size:11px;}
Ví dụ 2: tất cả đối tượng có id=”tieude”
#tieude {
    text-align
: center;
    color
: red;
}
Ví dụ 3: tất cả đối tượng có lớp class=”tacgia”
.tacgia {
    text-align
: center;
    color
: red;
}
Chú ý: ta có thể khai báo 01 thẻ thuộc nhiều lớp
<p class="center large">Đoạn văn này thuộc 02 lớp.</p>

Hoặc kết hợp cả thẻ HTML và lớp trong mô tả CSS
p.tacgia {
    text-align
: center;
    color
: red;
}
Ta cũng có thể gộp nhiều đối tượng lại với nhau nếu chúng có chung thuộc tính
h1, h2, p {
    text-align
: center;
    color
: red;
}
Cuối cùng là cách ghi chú thích trong CSS => Ghi trong cặp dấu /*…*/
p {
    color
: red;
   
/* This is a single-line comment */
    text-align
: center;
}

/* This is
a multi-line
comment */

4.    Thứ tự ưu tiên

Trong trường hợp cùng 01 đối tượng nhưng được mô tả nhiều lần, lần mô tả sau chót sẽ được ưu tiên áp dụng.
Khai báo mô tả CSS trực tiếp bên trong thẻ HTML sẽ được ưu tiên nhất.
Ví dụ:
Ta mô tả đối tượng h1 trong file bên ngoài “mystyle.css” => màu đỏ
h1 {
    color
: red;
}
và bên trong trang HTML => màu vàng
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1
{
    color
: yellow;
}
</style>
</head>

Trong trường hợp này thẻ h1 sẽ có màu vàng do khai báo trong cặp thẻ <style></style> nằm dưới cùng.
Các bạn thử đảo ngược cho phần thẻ <link…> nằm bên dưới cùng xem kết quả ra sao nhé.
Sau đây là file ví dụ html:

Nếu vẫn chưa hiểu chỗ nào các bạn vui lòng xem thêm video clip ví dụ sau đây: