css

Học CSS – Các thuộc tính CSS và cách sử dụng (Phần 1)

Yêu cầu: Khuyên dùng chrome, firefox để làm việc. Một số add on cài cho firefox hỗ trợ rất tốt cho thiết kế và lập trình web:

  • Fire Bug: Bug code trực tiếp, sửa html, css trực tiếp, show console, net…
  • MeasureIT: Đo kích thước phần tử trên web
  • Color Zilla: Lấy mã màu trực tiếp trên web

I. Css là gì ?

  • CSS là chữ viết tắt của Cascading Style Sheets (tờ mẫu theo 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,…
  • Một file css phải có phần mở rộng là .css

Nói 1 cách đơn giản css là ngôn ngữ biểu diễn giao diện của web, một tài liệu html như ví dụ ở bài trước rất lộn xộn và không giống 1 website bạn hay nhìn thầy lắm thì qua sự giúp đỡ của css nó sẽ có giao diện trông đẹp hơn …

II. Một số quy ước và cách sử dụng css

1. Cú pháp CSS cơ bản

  • Cú pháp:

 

Ví dụ:

Giải thích ví dụ trên : qua đoạn mã trên, phần body của trang web sẽ có màu nền(background) là màu đỏ, màu chữ(color) mặc định trên toàn bộ trên trang sẽ là màu đen

  • Đối tượng: Nó là các thẻ HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở phần sau, tý nữa thôi :D).

Ví dụ: body, h2, p, img, #title, #content, .username,…

  • Thuộc tính: Chính là các thuộc tính quy định cách trình bày. Ví dụ: background-color, font-family, color, padding, margin,…
  • Chú thích trong css: /* Nội dung đoạn chú thích */

Ví dụ:

2. Đơn vị trong css

  • Chiều dài: %, in(inch), cm, mm, em, pt, px, pc …Thường xuyên dùng các đơn vị

+)   % (phần trăm kích thước phần tử)

+)   px (điểm ảnh trên màn hình)

+)   em (1 em tương đương kích thước font  hiện  hành,  nếu  font  hiện hành có kích cỡ 14px thì 1 em = 14 px.)

  • Màu sắc:

+)   Color-name (tên tiếng anh của màu, ví dụ: red, blue, green, black, white, …)

+)   RGB (r,g,b) (Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với nhau tạo ra vô số màu.)

+)   RGB (%r,%g,%b) (Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.)

+)   Hexadecimal RGB (Mã  màu  RGB  dạng  hệ  thập  lục.  Ví  dụ:  #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi.)

 

3. Vị trí đặt css (có 3 cách)

  • Cách 1: Trong thẻ (kiểu thuộc tính)

Cách này ít sử dụng, chỉ sử dụng trong 1 số trường hợp đặc biệt, độ ưu tiên của các câu lệnh sử dụng cách này là cao nhất (nếu trùng câu lệnh với 2 cách sau thì câu lệnh ở cách này sẽ thắng)

Ví dụ: (các bạn nên làm luôn ví dụ cho dễ hiểu nhé)

  • Cách 2: Trong thẻ <style>

Cách này cũng không được sử dụng nhiều, thường sử dụng cho những trang đơn có đặc tính riêng, độ ưu tiên của câu lệnh trong cách này thấp hơn cách thứ nhất.

Ví dụ: Giống như ví dụ trên nhưng ta đặt trong thẻ style trên head

  • Cách 3: Bên ngoài

Cách này hay được sử dụng và khuyến khích sử dụng cách này. Độ ưu tiên của câu lệnh thấp nhất trong 3 cách.

Bạn sẽ tạo 1 file css riêng, rồi trên file html của bạn sẽ có link dẫn đến file css đó.

Ví dụ: Bạn tạo 1 file test.html và 1 file style.css ở cùng 1 thư mục code 2 file đó như sau

File style.css với nội dung:

Dòng <link rel=”stylesheet” type=”text/css” href=”style.css” /> trong file html có nhiệu vụ dẫn lệnh từ file css cho tài liệu html đó

Chú ý:

+)   Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type

là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng

Việt.

+)   Ngoài cách tạo file bằng cách save theo language của notepad ++ bạn có thể làm theo cách: chuột phải > new > text document > đổi tên mặc định New Text Document.txt thành style.css tuy nhiên máy tính của bạn phải để folder option ở dạng Show extentions file name

+) Độ ưu tiên:  thuộc tính có lệnh !important sau giá trị (ví dụ: color: red !important;) > cách 1 (trong thẻ) > cách 2 (trong file) > cách 3 ngoài file >  css mặc định của trình duyệt. Ngoài ra khi cùng loại thì, thuộc tính viết sau được ưu tiên hơn

 

III. Class và Id

Khi áp dụng một thuộc tính CSS cho một thành phần nào đó ví dụ như h1, h2, p, a, img,… thì toàn bộ các thành phần này trong trang web đều nhận thuộc tính này. Vậy có các nào để nhóm lại một số thành phần nào đó để áp dụng một thuộc tính đặc biệt. Ví dụ như bạn muốn các liên kết trên menu (thẻ a) trang web sẽ được in hoa, và có kích cỡ lớn hơn so với liên kết trong nội dung thì phải làm thế nào? Đây chính là vấn đề mà chúng ta sẽ cùng giải quyết trong phần này.

1. Nhóm phần tử với class

Ví dụ: Cũng với 2 file đã tạo ở phần trước các bạn thay đổi mã html và css lần lượt như sau:

Mã css:

 

2. Nhận dạng phần tử với id

Ví dụ: Tiếp tục với 2 file cũ và thay đổi mã:

Mã html:

Mã css:

3. Kết luận

Qua hai ví dụ trên chắc hẳn các bạn đã hiểu đôi chút về id và class, có thể hiểu đơn giản 2 thuộc tính này đều có tác dụng định danh (đặt tên) cho các phần tử. Tuy nhiên chúng khác nhau ở điểm id là tên riêng còn class là tên chung, như ngày xưa các bạn học danh từ riêng vào danh từ chung ở ngữ pháp lớp 1 ý.

  • Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần.
  • Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất.
  • Tên class và id được sử dụng các ký tự thường, các chữ số, ký tự đặc biệt như +, – , _, … có phân biệt chữ hoa thường, và không được bắt đầu bằng số
  • Một thẻ có thể có nhiều class, đặt ở dạng: class=ten_class_1 ten_class_2 …
  • Trong file css class được gọi bằng dấu chấm (.) còn id được gọi bằng dấu thăng (#)
  • Class và id có thể gọi ra các thành phần con của chúng

Ví dụ:

 

Từ ví dụ này css có thể gọi thẻ a bằng cách: .menu li a hoặc .menu > li > a

Ví dụ trên hơi đặc biệt một chút vì mình muốn chỉ ra sự khác nhau của 2 cách gọi thành phần con.

Ở cách thứ nhất không có mũi tên, các thẻ a được gọi là toàn bộ các thẻ nằm trong thẻ ul có class là menu.

Ở cách gọi thứ 2 thẻ a được gọi là thẻ con cấp gần nhất theo đúng thứ tự chỉ dẫn theo mũi tên, tức là trong trường hợp này các thẻ a trong class menu_con không được gọi

IV. Pseudo-class

Css cung cấp các class chung của 1 số thuộc tính cùng kiểu.

Pseudo-class for link (cho liên kết)

  • a:link (Liên kết chưa được thăm)
  • a:hover (Liên kết khi được rê chuột lên)
  • a:visited (Liên kết đã được thăm)
  • a:active (Liên kết đang được kích hoạt)

Ví dụ:

Pseudo-class for order element (thứ tự thẻ) khi các thành phần con của 1 thành là giống nhau, ví dụ :

  • ul li:first-child (gọi đến class1 – thẻ li đầu tiên)
  • ul li:last-child (gọi đến class6 – thẻ li cuối cùng)
  • ul li:nth-child(2n) (gọi đến các thẻ li có thứ tự chẵn, ở đây là class2, class4, class6)

 

V. Thẻ div và thẻ span

1. Nhóm phần tử với thẻ <span>

Thẻ <span> trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn.

Ví dụ:

Và bây giờ chúng ta có thể viết CSS:

Khi mở file trên sẽ in ra dòng chữ: “ Thủ đô của nước VIỆT NAM  là HÀ NỘI”

2. Nhóm khối phần tử với thẻ <div>

Cũng  như  <span>,  <div>  cũng  là  một  thẻ  trung  hòa  và  được  thêm  vào  tài  liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối phần tử.

Ví dụ:

Mã css:

3. Kết luận

Như vậy id, class, <div>, <span> và lợi ích của nó trong việc nhóm, đánh dấu phần tử để có thể dùng CSS để tạo ra các kiểu trình bày đặc biệt là điều cực kỳ quan trọng trong CSS, các bạn hãy chú ý đến những thành phần này.

 

VI. Các thuộc tính css thông dụng nhất

1. Background (nền)

  • Màu nền

Background-color: giá trị màu;

Ví dụ: background-color: #ffd500;

  • Ảnh nền

Background-image: url(đường dẫn ảnh);

Ví dụ: background-image: (anhnen.jpg);

  • Lặp ảnh nền

Background-repeat: từ khóa;

Từ khóa ở đây nhận các giá trị sau:

+ 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.

  • Khóa ảnh nền

Background-attachment: từ khóa;

Từ khóa ở đây nhận các giá trị sau:

+ 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.

  • Định vị ảnh nền

Background-position: giá_trị_so_với_left  giá_trị_so_với_top;

Ví dụ:

Background-position:5cm 2cm; –  Ảnh  được  định  vị  5cm  từ  trái  qua  và

2cm từ trên xuống.

Background-position:20% 30% ; – Ảnh  được  định  vị  20%  từ  trái  qua  và

30%  từ trên xuống.

Background-position: left  bottom; –  Ảnh được định vị ở góc trái phía dưới

 

  • Rút gọn thuộc tính background:

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;

background-position: right bottom;

 

thành một dòng ngắn gọn:

background:transparent url(logo.png) no-repeat fixed right bottom;

 

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> | <background-position>

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.

2. Font (font chữ)

  • Loại font:

font-family: giá trị;

Giá trị ở đây là tên các loại font

Ví dụ:

font-family: tahoma;

hoặc

font-family: tahoma, arial, “Time New Roman”, sans-serif;

Trình duyệt sẽ tự đọc các font và nó sẽ hiển thị font nó có theo độ ưu tiên viết trước là ưu tiên cao nhất.

Chú ý: Đối  với  các  font  có  khoảng  trắng  trong  tên  như  Times  New  Roman  cần được đặt trong dấu ngoặc kép.

  • Kiểu font:

Font-style: từ khóa;

Từ khóa nhận giá trị:

+ normal (thường – mặc định)

+ italic (nghiêng)

+ oblique (xiên)

  • Độ đậm font:

Font-weight: từ khóa;

Từ khóa nhận giá trị:

+ normal (thường)

+ bold (đậm)

  • Chế độ font:

Font-variant: từ khóa;

Từ khóa nhận giá trị:

+ normal (thường – mặc định)

+ small-caps (in hoa nhỏ)

  • Cỡ font:

Font-size: giá trị;

Ví dụ:

font-size:24px;

font-size: 2em;

  • Rút gọn:

Tương tự như các thuộc tính background, chúng ta cũng có thể rút gọn các thuộc

tính font lại thành một thuộc tính đơn như ví dụ sau:

h1 {

         font-style: italic;

         font-variant:small-caps;

         font-weight: bold;

         font-size: 35px;

         font-family: arial,verdana,sans-serif;

     }

 

Thành

h1 {

         font: italic bold 35px arial,verdana,sans-serif;

      }

Cấu trúc rút gọn cho các thuộc tính nhóm font:

Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>

 

3. Text (chữ)

  • Màu chữ

Color: giá_trị_màu;

Ví dụ:

p {

       color: #5656463;

    }

 

  • text-indent (khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản.)

Ví dụ:

p {

       text-indent:30px

    }

  • Căn lền chữ:

Text-align: từ khóa;

Từ khóa nhận giá trị:

+ left : căn trái

+ right : căn phải

+ center : căn giữa

+ justify : căn đều 2 bên

  • Hiệu ứng gạch chữ:

Text-decoration: từ khóa;

Từ khóa nhận giá trị:

+ underline : gạch chân

+ line-through : gạch xiên

+ overline : gạch đầu

+ blink : chữ nháy

+ none : không hiệu ứng

  • Chế độ hoa thường:

Text-transform: từ khóa;

Từ khóa nhận giá trị:

+ uppercase : in hoa

+ lowercase: in thường

+ capitalize : in hoa ký tự đầu

 

 

4. Height-Width (Kích thước phần tử)

Định dạng kích thước của phẩn tử.

Ví dụ:

div {

      height: 30px;

     width: 50px;

    }

  • Max-height: giá trị chiều cao tối đa của phần tử
  • Min-height: giá trị chiều cao tối thiểu của phần tử
  • Max-width: giá trị chiều rộng tối đa của phần tử
  • Min-width: giá trị chiều rộng tối thiểu của phẩn tử

5. Border (viền)

  • Độ rộng viền:

Border-width: giá trị;

  • Màu viền:

Border-color: giá trị màu;

  • Kiểu viền:

Border-style: từ khóa;

Giá trị từ khóa:

+ solid: kiểu viền liền

+ dotted: kiểu chấm chấm

+ dashed: kiểu gạch gạch

+ double: kiểu viền liền đôi

+ …

  • Ví dụ rút gọn:

div {

      border: 1px solid #fafafa;

}

6. Margin-Padding(căn chỉnh một đối tượng với thành phần khác)

Mô hình hộp (box model) trong css được sử dụng chủ yếu, margin và padding là cách định dạng khối không gian bao quanh 1 thành phần.

  • Margin: có thể hiểu margin là thuộc tính để căn lề đối tượng với thành phần chứa nó

+ margin-top, margin-right, margin-bottom, margin-left: lần lượt là cách so với lề trên, phải, dưới, trái.

+ margin: giá_trị_1 giá_trị_2;

giá_trị_1: cách trên – dưới ; giá_trị_2 : cách trái phải

+ margin: giá_trị;

Giá trị: các 4 chiều

Chú ý: giá trị sẽ ưu tiên cho phía trên và trái khi kích thước không chính xác 100%

  • Padding: vùng đệm trong, toàn bộ phần chứa trong phần tử sẽ cách viền phần tử một khoảng mà giá trị padding định nghĩa

Các thành phần và cách gọi padding giống margin

  • Ví dụ:

Tài liệu html:

<html>

<head>

<title>Ví dụ</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>

<body>

<div class=”test”>

<p>Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo thành một bản mẫu văn bản.</p>

</div>

</body>

</html>

File style.css cho tài liệu html trên:

div.test {

      width: 200px;

      border: 1px solid #666;

      margin-top: 100px;

      margin-left: 200px;

      padding: 30px 10px;

}

Trong ví dụ trên, div chứa nội dung của chúng ta sẽ cách lề trên 100px, cách lề trái 200px, đoạn văn nằm trong nó cách viền trên và dưới của nó 30px, cách viền trái và phải 10px.

 

Xem phần 2: Học CSS – Các thuộc tính CSS và cách sử dụng (Phần 2)

Like và chia sẻ bài viết này:

One thought on “Học CSS – Các thuộc tính CSS và cách sử dụng (Phần 1)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.