Sử Dụng CSS | Hướng Dẫn Học

Trang chủ » Phần Mềm Chạy Css » Sử Dụng CSS | Hướng Dẫn Học

Có thể bạn quan tâm

Sử dụng CSS
  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS
  • Sử dụng CSS

Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

  • Html

    • index.html

    • css

      • style.css

Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Tiêu đề trang web</title> </head> <body> ...Phần thân viết ở đây... </body> </html>

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Kết nối file CSS vào file HTML

Chúng ta kết nối file CSS vào file HTML thông qua thẻ <link>, cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Tiêu đề trang web</title> <link href="css/style.css" rel="stylesheet" media="screen,print" /> </head> <body> ...Phần thân viết ở đây... </body> </html>

Thuộc tính href ta phân tích như sau:

  • style.css là một file có tên là style với định dạng file là .css
  • css là folder chứa file style.css

Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.

Cách viết một nội dung CSS

Viết nội dung CSS theo cấu trúc như sau:

Bộ chọn { thuộc tính: giá trị; }

p { color: red; }

Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.

p { color: red; float: left; padding-left: 10px; }

Đoạn code trên tương tự như đoạn code sau:

p { color: red; float: left; padding-left: 10px; }

Cách viết bộ chọn CSS

Giả sử ta có file HTML như sau:

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Tiêu đề trang web</title> <link href="css/style.css" rel="stylesheet" media="screen,print" /> </head> <body> <div id="content"> <ul> <li>Mục 01</li> <li>Mục 02</li> <li>Mục 03</li> <li>Mục 04</li> </ul> <p>Đoạn văn</p> </div> <div class="navi"> <p>Nội dung navi</p> </div> </body> </html>

Bộ chọn theo tên id

tag#tênid { thuộc tính: giá trị; }

  • Bắt buộc phải có ký tự dấu "#" và tênid
div#content { width: 600px; }

Bộ chọn theo tên class

tag.tênclass { thuộc tính: giá trị; }

  • Bắt buộc phải có ký tự dấu "." và tênclass
div.navi { background: #333333; }

Bộ chọn theo cấp bậc

[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }

  • Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
  • Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần <p> nếu sử dụng cách chọn tag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:
div#content p { color: #333333; } /* Chon thanh phan p theo content*/ div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/ div#content ul li { display: inline; } /* Chon thanh phan li theo content*/

Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo.

Cách viết một comment trong file CSS

Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:

/* Đây là dòng comment */

Giới thiệu về CSS

Các thuộc tính định dạng cho text

Học web chuẩn

HƯỚNG DẪN HỌC

Hướng dẫn học CSS

  • Hướng dẫn học CSS
  • Giới thiệu về CSS
  • Sử dụng CSS

  • Các thuộc tính định dạng cho text

    • color
    • font-family
    • font-size
    • font-style
    • letter-spacing
    • line-height
    • text-decoration
    • word-spacing

  • Các thuộc tính định dạng chung

    • background
    • border
    • height
    • width
    • text-align

  • Các thuộc tính điều khiển nội dung

    • padding
    • margin
    • float
    • clear
    • Thủ thuật clearfix
    • display
    • position
  • Xem thêm ví dụ về CSS
  • Bài tập CSS & CSS3 cơ bản
  • Bài tập CSS & CSS3 nâng cao

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • BẠN SẼ TÀI TRỢ?DONATE
  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Phần Mềm Chạy Css