CSS (Cascading Style Sheets) 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,… CSS rất quan trong trong việc qui định giao diện cho website, bài hôm nay mình sẽ giới thiệu đến các bạn cách dùng CSS định dạng trang Web.
Các điểm nổi bật:
- Định dạng trang web rất nhanh nhờ các style định dạng các tag, các style dạng class.
- Giúp cho website của bạn có một sự nhất quán về cách trình bày các trang web.
- Việc hiệu chỉnh trên CSS sẽ tự động cập nhật trên tất cả các nơi có dùng CSS.
Chú thích trong CSS:
/*
nội dung chú thích
*/
Import trong css:
trong một sô trường hợp ta muốn sử dụng file khác vào file css đang dùng thì cách import:
@import url(đường dần file css);
Cách trình bày CSS:
hiện nay có 3 cách thông dụng.
Định dạng ngay trên tag của thẻ html:
<!--
<body style="background:#000066;">
</body>
-->
Cách này tuy đinh dạng được nhưng khó chỉnh sử, kiểm soát định dạng khi site lơn.
Các khai báo nằm trong tag head:
<!--
<head>
<style type="text/css">
<!-- body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; font-weight: bold; text-decoration: none; } -->
-->
Xuất các file định dạng ra 1 file mới có đuôi mở rộng là .css
<!--
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
-->
Đây là cách khai báo, và hiển nhiên bạn có một file là css.css đặt đúng đường dẫn thì các định dạng mới thực thi được cách này hay được sử dụng vì làm cho công việc trình bày trang web được độc lập với thiết kế cấu trúc trang web, thích hợp với các dự án làm việc nhiều người.
Định danh trong CSS:
Tên: ID=”ten” khi style trong css thì cấu trúc là: #ten{thuộc tính định dạng}. Định dạng kiểu này chỉ có hiệu lực cho những tag nào có ID=”ten”.
Tag: cấu trúc: tên_tag{thuộc tính định dạng}: định dạng chỉ có tác dụng với các tag có tên như khai báo.
Class: Cấu trúc: .tenclass{thuộc tính định dạng}: khi muốn áp dụng cho đối tượng nào đó thi ta khai báo
ví dụ:
<!--
<div class="tenclass">Noi dung</div>
-->
Cách khai báo này sẽ tiện lợi có thể sử dụng lại nhiều lần.
Đối tượng liên kết: do liên kết là một đối tượng siêu liên kết không phải là văn bản html thông thường, do vậy muốn định đạng chúng css có các qui định riêng cho liên kết xem phần dưới.
Các thuộc tính cơ bản của CSS:
Type:
- Font : Font chữ. Mỗi lần 3 font để dự phòng máy user không có font. Có thể thêm.
- Size : Cỡ chữ
- Weight : độ dày font. Thường dùng Normal và Bold. Các giá trị 100-900 diễn tả độ dày nhưng không phải browser nào cũng hỗ trợ.
- Style(Italic và Oblique là như nhau): nghiêng
- Variant : Bình thường hoặc Small-Cap (hoa nhỏ)
- Line Height: độ cao hàng chữ trong paragraph. Có thể dùng % (>100% là giãn ra, Case: capitalize: chữ hoa đầu từ, uppercase: toàn chữ hoa, lowercase: toàn chữ thường
- Decoration: cách gạch ngang
- Underline: gạch dưới chữ
- Strikethrough: gạch giữa chữ
- Overline: gạch đầu chữ
- None: không gạch (thường dùng với liên kết)
- Color: màu chữ. Có thể chọn từ bảng màu hiện ra hoặc trích màu từ đối tượng khác, trong trang web khác
Background
- Background color: màu nền. Có thể chọn từ bảng màu hiện ra hoặc trích màu từ đối tượng khác, trong trang web khác
- Background image: ảnh nền
- Repeat: cách lặp lại ảnh nền (repeat-x, repeat-y, repeat: 2 chiều)
- Attachment: (fixed, scroll) ảnh nền sẽ cuộn theo chữ hay cố định. Mặc định là scroll.
- Horizontal position, Vertical position: vị trí ảnh nền theo chiều ngang/dọc.
Block:
- Word Spacing: Khoảng cách giữa các từ (một inch bằng 72 point. Một pica bằng 12 point, ems là đơn vị đo tương đối, 1 ems = default font size. Ví dụ brower đang hỗ trợ cỡ font mặc định là 14 pixel thì mỗi ems= 14 pixel.)
- Letter Spacing: Khoảng cách giữa các ký tự
- Vertical Alignment:
- Đưa chữ lên (super), hạ chữ xuống (sub) nhưng không làm nhỏ cỡ chữ
- Có thể gõ 90% (số>0) để đưa chữ lên, -90% (số âm) để hạ chữ xuống)
- Chọn top, bottom, middle để canh nội dung cell trong table
- Chọn baseline để canh theo chân hàng chữ
- Text-top, text-bottom: canh hình
- Text Align: canh chữ, left, right, center, justify
- Text Indent: canh hàng đầu tiên của paragraph, số dương: thụt vào, số âm: thụt ra
- Whitespace: normal, pre, nowrap: bình thường, giữ nguyên định dạng, không wraptext
- Display:
- block: đối tượng là khối tách biệt với những cái khác ở trên và dưới nó. Giống paragraph. Có thể apply cho link để toàn chiều rộng có thể click thay vì user chỉ click vào text của link
- inline: các đối tượng có giá trị này sẽ nằm cùng 1 hàng. Vd: các li cùng 1 hàng, để làm menu ngang thay vì dọc (không gán cho ul)
- none: đối tượng không xuất hiện.
Box:
- Width: độ rộng
- Height: độ cao
- Float: (left, right) Cho đối tượng trôi qua trái hoặc qua phải
- Clear: Thuộc tính ngược với float: left, right, both, none.
- Padding: Khoảng cách từ lề của đối tượng với nội dung bên trong
- Margin: Khoảng cách từ lề của đối tượng với những đối tượng bên ngoài
Border:
- Style: kiểu đường viền. (Bỏ qua same for all để chỉ định riêng từng đường viền)
- Width: độ dày. Có thể dùng thick, medium, thin hoặc 1 con số
- Color: Màu đường viền.
List:
- Type: Kiểu bullet (disc: tròn đen; circle: tròn trắng; square: vuông; decimal: 1 2 3; lower-roman: i ii, iii; upper-roman: I II III; lower
- Alpha: a b c; upper-alpha: A B C)
- Bullet image: hình dùng thay thế ký tự bullet
- Position: vị trí của ký hiệu bullet (ở ngoài hay bên trong lề trái của các item)
Định dạng các liên kết:
- A:link: định dạng cho tất cả liên kết chưa được nhắp trong trang
- A:visited: định dạng cho tất cả liên kết đã được nhắp trong trang
- A:hover: định dạng cho liên kết trong trang đang được đưa chuột vào
- A:active: định dạng cho liên kết trong trang đang được nhắp (chưa nhả chuột)
- A: định dạng cho tất cả liên kết trong trang
- #menu A:link: định dạng cho tất cả liên kết chưa được nhắp trong vùng có tên là menu
- #menu A:visited: định dạng cho tất cả liên kết đã được nhắp trong vùng có tên là menu
- #menu A:hover: định dạng cho liên kết đang được đưa chuột vào trong vùng có tên là menu
- #menu A: định dạng cho tất cả liên kết trong vùng có tên là menu
- .menu A:link: định dạng cho tất cả liên kết chưa được nhắp trong vùng có class là menu
- .menu A:visited: định dạng cho tất cả liên kết đã được nhắp trong vùng có class là menu
- .menu A:hover: định dạng cho liên kết đang được đưa chuột vào trong vùng có class là menu
- .menu A: định dạng cho tất cả liên kết trong vùng có class là menu
- .tieudetin:link: định dạng cho liên kết có class là tieudetin, chưa được nhắp
- .tieudetin:visited: định dạng cho liên kết có class là tieudetin, đã được nhắp
- .tieudetin:hover: định dạng cho liên kết có class là tieudetin, đang được đưa chuột vào
- .tieudetin: định dạng cho liên kết có class là tieudetin
![[infographic] Hành vi của khách hàng – Những con số biết nói](/upload/news/infographic-Hanh-vi-cua-khach-hang-–-Nhung-con-so-biet-noi.png)
![[Infographic] – Truyền thông xã hội cho Startups](/upload/news/Infographic-–-Truyen-thong-xa-hoi-cho-Startups.png)