CSS là gì? CSS là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…HTML cũng hỗ trợ một số thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự phong phú. CSS cung cấp cho bạn các thuộc tính trình bày dành cho các đối tượng html nhằm mang lại hiệu quả tốt hơn (Trông đẹp hơn).
Quy Ước Về Cách Viết CSS Cú pháp CSS cơ bản: Selector { property:value; } VD: body { background-color:#00BFF3; } h1 { color:#FFFFFF; } a{ background-color:#0000FF; }
Selector Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là các tag HTML, class hay id (chúng ta sẽ coi 2 thành phần này ở slide sau). Ví dụ: body, h2, p, img, #title, #content, .username,…
Selector là các tag HTML
Các tag html bao gồm 1 số cái như sau: <head> <body>
<div> <a> ….. Cách áp dụng css cho tag html như sau: têntag{ property:value;} VD: body{ color:#00FF00;}
Selector là id Khi khai báo 1 tag trong html ta bổ sung thêm id vào thành phần tag đó như sau: <div id=”myID”> Khi trình duyệt đọc file css nó sẽ tìm đến tag có id giống như khai báo này để áp dụng định dạng tương ứng.
Selector là id Cách khai báo css cho tag có id như sau: # id_name{property:value;} VD: #myID1{color:#FF00FF;} #myID2{color:#FF00FF;} #myID3{color:#FF00FF;}
Selector là class Tương tự như id ta chỉ sửa lại tag html như sau: <body class=”myclass”>
Và khai báo trong css củng tương tự chỉ thay đổi ký tự nhận diện class lúc này là dấu chấm (“.”)
Selector là class Khai báo class trong css như sau:
.class_name{property:value;} VD:
.myClass{color:#ff00ff;}
Phân biệt giữa class và id Trong 1 trang html mỗi tag chỉ có duy nhất 1 id, trong khi đó có thể có nhiểu tag có cùng class. Điểm thú vị là 1 tag có thể có nhiều class cách nhau bởi khoản trắng. VD: <div class=”myclass1 myclass2 myclass3”> Ta sẽ quay lại phần này sau.
Property Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: background-color, fontfamily, color, padding, margin,… Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều thuộc tính trong một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân
cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector.
Property VD như sau: #myID { color:#000000; background-color:#0000FF;
} Ta sẽ xem 1 số thuộc tính trong slide sau
Value Mỗi thuộc tính sẽ có 1 giá trị( value )riêng, khác nhau, quy định sự thay đổi định dạng của thuộc tính đó. Cụ thể thì khai báo FONT với giá trị khác nhau thì sẽ có chữ to hay chữ nhỏ khác nhau. VD : a{color:red; padding:1px;}
Cách chèn css vào file html Có 3 cách làm: 1)Chèn trực tiếp trong tag html: <a style:”color=red;margin=1px;”></a> 2)Khai báo css trong 2 tag <style></style>
html trong phần head của trang. 3)Khai báo id & class trong file zzZ.CSS và khai báo đường dẫn đến file trong html
Cách chèn css vào file html VD cách 2: <head> <style type='text/css'> #myID{...} .myClass{...}
</style>
</head>
Cách chèn css vào file html VD cách 3: Ta có file zzZZ.css đặt cùng thư mục với file html . Ta thêm đoạn code sau vào phần head: <head> href=”zzZZ.css” /> </head>
Thứ tự ưu tiên Với cùng 1 tag ta khai báo = 3 cách trên, cùng thuộc tính color, khác giá trị thì nó nhận của
thằng nào ? Trả lời: theo thứ tự sau cách 1>cách 2>cách 3 Các bạn tự vd để biết kết quả !!!
Thứ tự ưu tiên Trong cùng 1 tag có khai báo nhiều class và mổi class có cùng thuộc tính khác giá trị thì nó nhận của class nào? Trả lời: class đến sau cùng thắng vd: <div class='class1 class2 class3'>
Xem xét 1 số Property Để trang trí trang web ta cần biết property nào sẽ quy định kiểu định dạng nào. Sau đây chúng ta sẽ xem qua 1 số property cơ bản để làm những ví dụ cơ bản. Phần nâng cao các bạn tự tìm hiểu !!!
Background Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web.Các giá trị mã màu của background-color cũng giống như color. Vd: h1 { background-color:red
}
Background Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image. Vd: body { background-image:url(logo.png) }
Background Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị: ●
repeat-x: Chỉ lặp lại ảnh theo phương ngang.
●
repeat-y: Chỉ lặp lại ảnh theo phương dọc.
●
repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
●
no-repeat: Không lặp lại ảnh.
Background Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị: ●
●
scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.
Background Khi sử dụng quá nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc rút gọn cho các thuộc tính cùng nhóm. Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau : background-color:transparent; background-image: url(logo.png);
background-repeat: no-repeat; background-attachment: fixed; => Thành một dòng ngắn gọn: background:transparent url(logo.png) no-repeat fixed;
Background Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background: background:<background-color> | <background-image> | <background-repeat> | <background-attachment> ●
Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.
Font Chữ Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Vd: ●
Body { font-family: ”TimesNewRoman”,Tohama,sans-serif }
