Kiến thức cơ bản & các cách selecter trong css

by

Các cách sử dụng css

  • Sử dụng CSS theo kiểu Inline Style (Not a good idea)
<h1 style="color: purple">Hello word</h1>
<button style="background-color: palegreen">I am button</button>
  • Sử dụng CSS theo kiểu trong thành phần , kiểu này dễ nhưng không thể chia sẻ css ra để cùng sử dụng (Not a good idea)
 <title>CSS intro</title>
    <style>
      h2 {
        color: palevioletred;
      }
    </style>
  • Sử dụng CSS theo kiểu tạo ra một file css và sử dụng link trong phần head của trang web
 <head>   
    <title>CSS intro</title>
    <link rel="stylesheet" href="app.css" />
  </head>

Cấu trúc thẻ css:

selector {
    property: value;
}

Các mẫu CSS có sẵn

Link chỉ tới các mẫu css để tham khảo: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Website chứa các kiến thức về css để tham khảo
Các mẫu css có sẵn

Ngoài ra có thể sử dụng google để tìm thêm vd gõ : CSS Shadow text..các mẫu css là rất nhiều sẽ không thể ghi nhớ được hết, hãy chỉ tập trung vào cú pháp.

Khác biệt giữa thẻ background và background-color:

2 thẻ này đều có tác dụng giống nhau nếu bạn chỉ muốn thay đổi màu nền nhưng chúng có khác biệt:

  • Nếu sử dụng background là một màu bất kỳ thì nếu sau đó dùng thẻ background-color sẽ có thể thay thế được màu đó. (vd: http://jsfiddle.net/Z57Za/12/)
  • Nếu sử dụng background là một file ảnh, thì thẻ background-color sau không thể đè lên ảnh background sử dụng ở trước. (vd: http://jsfiddle.net/Z57Za/11/)
  • Với background, có các thuộc tính như background-color; background-image; background-repeat; background-position và chúng có thể viết chung vào một dòng như sau:
background: url(image.jpg) no-repeat center center #f000f;

Còn background-color thì chỉ có màu sắc

background-color: #fff;
background-image: url(image.jpg);
background-position: center center;
background-repeat: no-repeat;

Background-color sẽ không thể sử dụng thuộc tính gradient, với background thì có thể.

Thuộc tính phổ biến trong text.

Thuộc tính text-decoration

  • Chữ gạch chân là underline, gạch trên đầu là overline, gạch ngang là line-through.(vd: text-decoration: line-through).
  • Muốn tạo màu cho gạch chân của chữ thì thêm giá trị màu vào đằng trước: text-decoration: blue line-through hoặc text-decoration: #f78120 line-through
  • Muốn thay đổi kiểu của đường gạch có thể thêm giá trị vào cuối như vd: text-decoration: line-through wavy
  • Chữ nằm trong thẻ <a> sẽ tự động được gạch chân, nếu muốn bỏ gạch chân chữ dùng text-decoration: none
  • Text decorations sẽ bỏ qua các thuộc tính của các thành phần con, nếu các thuộc tính đó trùng với thuộc tính được thay đổi trước đó trong Text decorations.(tham khảo thêm tại https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration#constituent_properties)
  • Muốn chọn màu thì vào google gõ: color picker hoặc vào trang https://coolors.co/ (chọn màu nào được yêu thích nhất)

Một số các thuộc tính khác:

  • Line-height: điều chỉnh chiều cao của các dòng
  • Letter-spacing: điều chỉnh khoảng cách của chữ
  • text-align: chỉnh căn lề trái phải.
  • font-weight: điều chỉnh độ đậm của chữ

Các cách Selecter trong css

Universal & Element Selectors

Cú pháp 

selector {
     property: value;
}
  • Muốn chọn tất cả các thành phần trong trang web dùng dấu *
* {
color: blue;
}

Selecter List

Chọn tất cả h1 và h2

h1, h2 {
   color: magenta;
}

ID Selector

Tên của Id sẽ là duy nhất không được trùng lặp

#id {
   color: magenta;
}

Class

Class tương tự như ID nhưng class có thể sử dụng chung được cho nhiều phần tử khác nhau

Khi gọi class thì sẽ dùng dấu chấm. “

Lưu ý mỗi thẻ có thể có nhiều class và các class cách nhau bằng khoảng trắng vd: <h1 class=”lop1 lop1.1> khi gọi class ra bạn phải gọi qua nhiều class .lop1.lop1.1

Trường hợp có 1 class nằm trong 1 class khác

<div class=lop1>

<p class=lop1.1>

</div>

Khi muốn gọi class con sẽ gọi .lop1 lop1.1 (chú ý là có dấu cách)

Descendant Selector (thuộc tính nằm trong thuộc tính khác)

Lựa chọn tất cả các thẻ a nằm trong li

li a {
   color: teal;
}

The adjacent & direct-descendant selectors (chọn liền kề và con trực tiếp)

Adjacent Selector (lựa chọn thuộc tính liền kề)

Chọn đoạn ở ngay sau H1

h1 + p {
    color: red;
}

Direct child

Lựa chọn những li là con trực tiếp của div

div > li {
    color: white;
}
div > li {
color: white;}
Ví dụGiải thích
.lop1Chọn tất cả các thẻ có class=”lop1″
.lop1.lop1.2Chọn tất cả các thẻ có cả lop1 và lop1.2 đặt trong thuộc tính class
.lop1 .lop1.2Chọn tất cả các thẻ có class là lop1.2 là con của phần tử có class là lop1
div.boxChọn tất cả các thẻ div có chứa class là box
div, h1Chọn tất cả các thẻ div và thẻ h1
div pchọn tất cả các thẻ p trong thẻ div
div > pchọn tất cả các thẻ p là con trực tiếp của thẻ div
div + pchọn thẻ p đứng liền ngay sau thẻ div
div ~ pchọn tất cả thẻ p đứng sau thẻ div
Các CSS Selecter thường được xử dụng

3.12 bai 73

Pseudo-classes cho phép chọn những trạng thái như click, hover, visited…:nth-of-type() cho phép chọn vị trí của từng phần tử..ví dụ đoạn code sau sẽ chọn đoạn đầu tiên và đổi thành màu trắng.

.post:nth-of-type(1) {
  background-color: white;
}

Pseudo-elements: cho phép chọn một phần tử của một thành phần được chọn vd như chọn chữ cái đầu tiên của đoạn

h2::first-letter {
  font-size: 50px;
}

Hoặc chọn dòng đầu tiên của 1 đoạn, và chọn màu khi bất kỳ nội dung nào được quét chọn bằng chuột

p::first-line {
  color: #e63946;
}
p::selection {
  background-color: pink;
}

Độ ưu tiên trong CSS (Priority)

CSS cascade: một trang sẽ có thể link đến 2 style css, kiểu style nào được link đến sau sẽ đè lên style trước.

Specificity: tính cụ thể, nếu một selecter nào càng cụ thể thì sức mạnh của selecter đó càng lớn và khi đó trình duyệt sẽ lựa chọn selecter đó.

.post button:hover {
  background-color: red;
}
button:hover {
  background-color: blue;
  font-size: 20px;
}

Với 2 đoạn code trên trình duyệt web sẽ ưu tiên chọn màu cho button là red vì đoạn code trên chỉ cụ thể hơn đoạn code dưới. Ngoài ra bạn có thể truy cập website: https://specificity.keegan.st/ để tính toán xem độ ưu tiên nào nhiều hơn.

Có 2 cách để thiết lập giá trị để bắt buộc trình duyệt phải sử dụng nó (nhưng không nên sử dụng)

Cách 1: <button id="signup" style="color: black">Sign Up</button>
Cách 2: color: white !important; // thêm chữ important vào sau.

Mức độ ưu tiên trong CSS sẽ tính theo điểm số giảm dần như sau:

  • Inline – 1000 điểm (chèn trực tiếp trong thẻ)
  • id-100 điểm
  • .class -10 điểm
  • tag – 1 điểm (gọi tên thẻ)

Khi một thuộc tính có cả ID và Class thì có thể gọi

#heading-id.heading-class{
color: red
}

Ngoài ra có thể thêm cả tag vào để tăng thêm điểm

h1#heading-id.heading-class{
color: red
}

!important: là ưu tiên, nếu thuộc tính nào có !important thì nó sẽ được tính điểm mạnh nhất, vượt qua cả Inline..nếu trong trường hợp Inline muốn được ưu tiên hơn thì bắt buộc Inline cũng phải có important

Inheritance trong css

Input, Button thường sẽ không kế thừa giá trị màu của cha mẹ gần nhất của nó, để button, input kế thừa màu phải gõ button {  color: inherit; }

Margins, padding, borders cũng không kế thừa.

1 thought on “Kiến thức cơ bản & các cách selecter trong css”

  1. Pingback: Các đơn vị đo hay dùng trong CSS - Tin học dạo - Blog chia sẻ kiến thức IT

Leave a Comment