Ngôn ngữ CSS là gì? CSS3 là gì? Phân biệt CSS và HTML

CSS là một ngôn ngữ lập trình để tạo kiểu cho website. Đây là các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL. Các đặc điểm kỹ [ ...] [ ...]

Giới thiệu về CSS

CSS giúp ích rất nhiều khi viết một trang web bằng HTML. CSS là gì? CSS là viết tắt của Cascading Style Sheets. CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương tiện khác. CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các [ ...] [ ...]

Cú pháp và Selector trong CSS

Cú pháp CSS Bộ quy tắc của CSS gồm có công cụ chọn (selector) và khối khai báo (declaration). Công cụ chọn trỏ tới phần từ HTML mà bạn muốn tạo kiểu cách. Khối khai báo chứa một hoặc nhiều khai báo, phân tách với nhau bằng các dấu chấm phẩy. Mỗi khai báo gồm tên và [ ...] [ ...]

Cách chèn CSS để tạo kiểu cách cho trang HTML

Khi trình duyệt đọc tập tin định dạng (stylesheet), nó sẽ định dạng văn bản HTML theo thông tin trong tập tin định dạng đó. 3 cách thêm CSS Có 3 cách để thêm tập tin định dạng cho văn bản HTML. Tập tin định dạng nội bộ Tập tin định dạng ngoài Nội dòng Tập tin [ ...] [ ...]

Màu sắc trong CSS

Tương tự HTML, trong CSS, màu sắc được chỉ định bằng tên màu định sẵn hoặc các giá trị RGB, HEX, HSL, RGBA và HSLA. Tên màu Trong HTML, màu sắc có thể được chỉ định bằng tên màu. HTML hỗ trợ 140 tên màu chuẩn. Bạn đọc xem thêm tại bài viết Màu sắc trong HTML . [ ...] [ ...]

Nền trong CSS

Đặc tính nền trong CSS được dùng để định nghĩa hiệu ứng nền cho các phần tử. Các đặc tính của nền trong CSS gồm: background-color background-image background-repeat background-attachment background-position Màu nền Đặc tính backgroud-color xác định màu nền cho phần tử. body { background-color: lightblue; } Màu sắc trong CSS thường được xác định bằng [ ...] [ ...]

Border trong CSS

Đặc tính border trong CSS cho phép xác định kiểu cách, độ rộng và màu sắc cho viền của một phần tử. Kiểu cách của đường viền trong CSS Đặc tính border-style xác định kiểu đường viền sẽ hiển thị. Các giá trị có thể sử dụng gồm: dotter – đường chấm chấm dashed – đường nét đứt solid – đường [ ...] [ ...]

Margin – Lề trong CSS

Đặc tính margin trong CSS được dùng để tạo khoảng trắng xung quanh phần tử, bên ngoài các đường viền. Các đặc tính này sẽ đặt lề cho từng cạnh của phần tử (trên, dưới, trái, phải). Các cạnh của lề trong CSS CSS có các đặc tính xác định lề cho từng cạnh trong phần tử: [ ...] [ ...]

Padding trong CSS

Đặc tính padding trong CSS được dùng để tạo khoảng trắng xung quanh nội dung của phần tử và nằm bên trong các đường viền trong CSS. Các đặc tính thiết lập cả 4 phía (trên, dưới, trái, phải) cho từng phần tử. Padding của từng cạnh CSS có các đặc tính xác định padding cho từng cạnh [ ...] [ ...]

Chiều cao và độ rộng trong CSS

Thiết lập chiều cao và độ rộng trong CSS Các đặc tính height và width được dùng để thiết lập chiều cao và độ rộng của phần tử trong CSS. Chúng có thể nhận các giá trị sau: auto – là chế độ mặc định, trong đó trình duyệt tự tính toán chiều cao và độ rộng length – [ ...] [ ...]

Outline trong CSS

Outline là một đường kẻ xung quanh phần tử, nằm bên ngoài border để làm nổi bật phần tử. HÌnh ảnh minh họa cho outline trong phần tử CSS có các đặc tính sau: outline-style outline-color outline-width outline-offset outline Lưu ý: Outline khác với Border trong CSS. Outline được vẽ bên phải border của phần tử [ ...] [ ...]

Text – Văn bản trong CSS

Màu sắc văn bản Đặc tính color được dùng để đổi màu cho văn bản, có thể xác định bằng: tên màu – như :”red” giá trị HEX – như “#ff0000” giá trị RGB – như “rgb(255, 0, 0)” Màu mặc định cho trang sẽ được định nghĩa trong phần body. body { color: blue; [ ...] [ ...]

Font trong CSS

Trong CSS, đặc tính font xác định font family, độ đậm nhạt, kích thước và kiểu cách cho văn bản. Font Family trong CSS Trong CSS có 2 kiểu tên của font family: generic family – nhóm font family có vẻ ngoài giống nhau (ví dụ như serif hay monospace) font family – nhóm font family cụ [ ...] [ ...]

Icon trong CSS

Cách thêm icon Cách đơn giản nhất để thêm icon (biểu tượng) vào trang HTML là dùng thư viện biểu tượng. như Font Awesome, chỉ cần thêm tên của lớp icon đó vào bất kì phần tử HTML nội dòng nào (như <i> hay <span>). Tất cả những icon trong thư viện icon dưới đây đều thuộc [ ...] [ ...]

Đường dẫn trong CSS

Với CSS, đường dẫn có thể được tạo kiểu cách rất đa dạng. Tạo kiểu cách cho đường dẫn Đường dẫn được tạo kiểu cách bằng các đặc tính như color, font-family, background… a { color: hotpink; } Ngoài ra, đường dẫn cũng được tạo kiểu cách khác nhau tùy theo trạng thái của chúng. Có [ ...] [ ...]

Danh sách trong CSS

Các đặc tính để tạo danh sách trong HTML và CSS Trong HTML có 2 kiểu danh sách chính: Không theo thứ tự (<ul>) liệt kê hạng mục bằng các kí tự đầu dòng Theo thứ tự (<ol> liệt kê hạng mục bằng số hoặc chữ cái Đặc tính danh sách trong CSS cho phép [ ...] [ ...]

Bảng trong CSS

Đường viền cho bảng trong CSS Để tạo đường viền cho bảng trong CSS, dùng đặc tính border. Ví dụ dưới đây cho biết dùng viền đen cho các phần tử <table>, <th> và <td>. table, th, td { border: 1px solid black; } Lưu ý là trong ví dụ trên bảng có đường viền [ ...] [ ...]

display trong CSS

Đặc tính display là đặc tính CSS quan trọng nhất để kiểm soát layout cho trang web. Đặc tính display Đặc tính display cho biết một phần tử có hiển thị hay không và hiển thị như thế nào. Mỗi phần tử HTML đều có giá trị hiển thị mặc định phụ thuộc vào kiểu phần tử. Giá trị [ ...] [ ...]

Max-width, độ rộng tối đa của phần tử trong CSS

Đặc tính width và max: width xác định độ rộng của phần tử. Như đã được đề cập trước đó, phần tử khối luôn chiếm hết chiều rộng có thể (kéo từ bên trái sang bên phải). Việc thiết lập độ rộng bằng đặc tính width cho phần tử khối sẽ ngăn nó kéo dài [ ...] [ ...]

Vị trí của phần tử trong CSS

Đặc tính position xác định phương pháp đặt vị trí cho một phần tử (static – tĩnh, relative – tương đối, fixed – cố định, absolute – tuyệt đối hoặc sticky – dán chặt). Đặc tính position trong CSS Đặc tính position được dùng để xác định phương pháp đặt vị trí cho phần tử [ ...] [ ...]