CSS (Cascading Style Sheets)

2m time read

#frontend

Khi đã có HTML rồi thì chúng ta cần phải có CSS để trang web của chúng ta trở lên đẹp và thu hút hơn.

Bây giờ chúng ta học qua chút CSS nhá:

CSS được viết ngay trong thẻ HTML, hoặc chúng ta có thể dùng id or class để viết bên ngoài với đuôi . css  rồi link nó vô.  Cú pháp: Thẻ {Thuộc tính: Giá trị; ...}.

  • COLOR: Có 3 dạng kiểu để có thể truy cập đến là Color Names || RGB Values || Hex Codes.
  • TEXT: Chúng ta có font-style (Kiểu in đậm hay nghiêm hay ...), font-family (Kiểu chữ), font-size (Cỡ chữ), font-weight (Dịch vui là độ nặng của chữ, có là độ in đậm của chữ), text-transform (có thể in hoa hay viết thường), text-decoration (Kiểu underline hay strike, ...), line-height (Leading), letter-spacing, word-spacing, text-align (căn chỉnh ngang), vertical-align (căn chỉnh dọc), text-indent (Thò thụt), text-shadow (Bóng). Mình có ảnh sau khá hay về cỡ chữ:
  • TRONG TEXT: :first-letter (Đầu thư), :first-line (Đầu dòng), Styling links: :link, :visited, :hover, :active, :focus.
  • BOXES: Chúng ta có các định dạng width và height thì với hai giá trị này cũng có min-width, max-width và min-height, max-height. overflow thì dạng hidden hay scroll. Và ta có 3 giá trị khá là quan trọng trong CSS đó là border, margin & padding. Margin --> Border --> Padding đi từ ngoài vô trong. Các bạn nhớ nha, nếu không nắm rõ cái này thì trang web của các bạn sẽ không được đẹp đâu. Tiếp là display thì có block là hộp và inline là dòng.
  • LISTS, TABLES AND FORMS: list-style-type: với <ul> có disc, circle, square; với <ol> thì có decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman. Chúng ta cũng có thể set list bằng image với list-style-image. và list-style-position thì có outside hay inside.