3. CSS Selector
Cách sử dụng CSS căn bản
Cài đặt CSS
Hướng dẫn cài đặt CSS cho HTML:
- Sử dụng extenal CSS:
<link rel="stylesheet" href="style.css"> - Sử dụng internal CSS:
<style>...</style> - Sử dụng inline CSS:
<h1 style="color:blue;">This is a Blue Heading</h1>
Cú pháp CSS
- Tag selector / locator:
tagname { property: value; }
h1 {
color: blue;
font-size: 12px;
}
- Class selector / locator:
.classname { property: value; }
.center {
text-align: center;
color: red;
}
- ID selector / locator:
#idname { property: value; }
#intro {
font-family: Arial;
font-size: 20px;
}
Các nhóm thuộc tính CSS căn bản
Nhóm font chữ
Gồm các thuộc tính:
- font-family: tên font chữ, tham khảo: https://www.w3schools.com/cssref/css_websafe_fonts.asp
- Ví dụ:
font-family: Arial, Helvetica, sans-serif;
- Ví dụ:
- font-size: kích thước font chữ, tham khảo: https://www.w3schools.com/cssref/css_units.asp
- Ví dụ:
font-size: 20px;
- Ví dụ:
- font-weight: độ đậm nhạt của font chữ, tham khảo: https://www.w3schools.com/cssref/pr_font_weight.asp
- Ví dụ:
font-weight: bold;
- Ví dụ:
- font-style: kiểu chữ, tham khảo: https://www.w3schools.com/cssref/pr_font_font-style.asp
- Ví dụ:
font-style: italic;
- Ví dụ:
- font-variant: kiểu chữ, tham khảo: https://www.w3schools.com/cssref/pr_font_font-variant.asp
- Ví dụ:
font-variant: small-caps;
- Ví dụ:
- font: gộp các thuộc tính trên
- Ví dụ:
font: italic small-caps bold 20px Arial, Helvetica, sans-serif;
- Ví dụ:
Nhóm màu sắc
Gồm các thuộc tính:
- color: màu chữ, tham khảo: https://www.w3schools.com/cssref/css_colors.asp
- Ví dụ:
color: red;
- Ví dụ:
- background-color: màu nền, tham khảo: https://www.w3schools.com/cssref/css_colors.asp
- Ví dụ:
background-color: yellow;
- Ví dụ:
Nhóm văn bản
Gồm các thuộc tính:
- text-align: căn lề văn bản, tham khảo: https://www.w3schools.com/cssref/pr_text_text-align.asp
- Ví dụ:
text-align: center;
- Ví dụ:
- text-decoration: gạch chân văn bản, tham khảo: https://www.w3schools.com/cssref/pr_text_text-decoration.asp
- Ví dụ:
text-decoration: underline;
- Ví dụ:
- text-transform: định dạng văn bản, tham khảo: https://www.w3schools.com/cssref/pr_text_text-transform.asp
- Ví dụ:
text-transform: uppercase;
- Ví dụ:
- text-indent: thụt lề văn bản, tham khảo: https://www.w3schools.com/cssref/pr_text_text-indent.asp
- Ví dụ:
text-indent: 50px;
- Ví dụ:
- letter-spacing: khoảng cách giữa các chữ cái, tham khảo: https://www.w3schools.com/cssref/pr_text_letter-spacing.asp
- Ví dụ:
letter-spacing: 3px;
- Ví dụ:
- word-spacing: khoảng cách giữa các từ, tham khảo: https://www.w3schools.com/cssref/pr_text_word-spacing.asp
- Ví dụ:
word-spacing: 5px;
- Ví dụ:
- line-height: khoảng cách gi ữa các dòng, tham khảo: https://www.w3schools.com/cssref/pr_dim_line-height.asp
- Ví dụ:
line-height: 1.5;
- Ví dụ:
- white-space: khoảng trắng, tham khảo: https://www.w3schools.com/cssref/pr_text_white-space.asp
- Ví dụ:
white-space: nowrap;
- Ví dụ:
- word-break: cách ngắt từ, tham khảo: https://www.w3schools.com/cssref/css3_pr_word-break.asp
- Ví dụ:
word-break: break-all;
- Ví dụ:
- word-wrap: cách ngắt từ, tham khảo: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
- Ví dụ:
word-wrap: break-word;
- Ví dụ:
- text-shadow: đổ bóng văn bản, tham khảo: https://www.w3schools.com/cssref/css3_pr_text-shadow.asp
- Ví dụ:
text-shadow: 2px 2px 5px red;
- Ví dụ:
Nhóm định dạng
Gồm các thuộc tính:
- width: chiều rộng, tham khảo: https://www.w3schools.com/cssref/pr_dim_width.asp
- Ví dụ:
width: 100px;
- Ví dụ:
- height: chiều cao, tham khảo: https://www.w3schools.com/cssref/pr_dim_height.asp
- margin: tham khảo: https://www.w3schools.com/cssref/pr_margin.asp
- Ví dụ:
margin: 10px;
- Ví dụ:
- padding: tham khảo: https://www.w3schools.com/cssref/pr_padding.asp
- Ví dụ:
padding: 10px;
- Ví dụ:
Nhóm border (viền)
Gồm các thuộc tính:
- border: tham khảo: https://www.w3schools.com/cssref/pr_border.asp
- Ví dụ:
border: 1px solid red;
- Ví dụ:
- border-radius: tham khảo: https://www.w3schools.com/cssref/css3_pr_border-radius.asp
- Ví dụ:
border-radius: 5px;
- Ví dụ:
- border-style: tham khảo: https://www.w3schools.com/cssref/pr_border-style.asp
- Ví dụ:
border-style: solid;
- Ví dụ:
- border-width: tham khảo: https://www.w3schools.com/cssref/pr_border-width.asp
- Ví dụ:
border-width: 1px;
- Ví dụ:
- border-color: tham khảo: https://www.w3schools.com/cssref/pr_border-color.asp
- Ví dụ:
border-color: red;
- Ví dụ:
- border-top: tham khảo: https://www.w3schools.com/cssref/pr_border-top.asp
- Ví dụ:
border-top: 1px solid red;
- Ví dụ:
- border-bottom: tham khảo: https://www.w3schools.com/cssref/pr_border-bottom.asp
- Ví dụ:
border-bottom: 1px solid red;
- Ví dụ:
- border-left: tham khảo: https://www.w3schools.com/cssref/pr_border-left.asp
- Ví dụ:
border-left: 1px solid red;
- Ví dụ:
- border-right: tham khảo: https://www.w3schools.com/cssref/pr_border-right.asp
- Ví dụ:
border-right: 1px solid red;
- Ví dụ:
Nhóm background (nền)
Gồm các thuộc tính:
- background: tham khảo: https://www.w3schools.com/cssref/pr_background.asp
- Ví dụ:
background: red;
- Ví dụ:
- background-color: tham khảo: https://www.w3schools.com/cssref/pr_background-color.asp
- Ví dụ:
background-color: red;
- Ví dụ:
- background-image: tham khảo: https://www.w3schools.com/cssref/pr_background-image.asp
- Ví dụ:
background-image: url("paper.gif");
- Ví dụ:
- background-repeat: tham khảo: https://www.w3schools.com/cssref/pr_background-repeat.asp
- Ví dụ:
background-repeat: repeat-x;
- Ví dụ:
- background-position: tham khảo: https://www.w3schools.com/cssref/pr_background-position.asp
- Ví dụ:
background-position: right top;
- Ví dụ:
Các thuộc tính FlexBox
Gồm các thuộc tính:
- display: dùng để thiết lập hiển thị cho phần tử, tham khảo: https://www.w3schools.com/cssref/pr_class_display.asp
- Ví dụ:
display: flex;
- Ví dụ:
- flex: dùng để thiết lập tỉ lệ phần trăm chiếm, tỉ lệ phần trăm co lại và kích thước của các phần tử con, tham khảo: https://www.w3schools.com/cssref/css3_pr_flex.asp
- Ví dụ:
flex: 1
- Ví dụ:
- flex-direction: dùng để thiết lập hướng của các phần tử con, tham khảo: https://www.w3schools.com/cssref/css3_pr_flex-direction.asp
- Ví dụ:
flex-direction: row;hoặcflex-direction: column;
- Ví dụ:
- flex-wrap: dùng để thiết lập các phần tử con có được phép xuống dòng hay không, tham khảo: https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
- Ví dụ:
flex-wrap: wrap;hoặcflex-wrap: nowrap;hoặcflex-wrap: wrap-reverse;
- Ví dụ:
- justify-content: dùng để căn chỉnh các phần tử con theo chiều ngang, tham khảo: https://www.w3schools.com/cssref/css3_pr_justify-content.asp
- Ví dụ:
justify-content: center;
- Ví dụ:
- align-items: dùng để căn chỉnh các phần tử con theo chiều dọc, tham khảo: https://www.w3schools.com/cssref/css3_pr_align-items.asp
- Ví dụ:
align-items: center;
- Ví dụ:
- align-content: dùng để căn chỉnh các phần tử con theo chiều dọc khi xuống dòng, tham khảo: https://www.w3schools.com/cssref/css3_pr_align-content.asp
- Ví dụ:
align-content: center;
- Ví dụ:
- order: dùng để thiết lập thứ tự hiển thị của các phần tử con, tham khảo: https://www.w3schools.com/cssref/css3_pr_order.asp
- Ví dụ:
order: 1;
- Ví dụ:
- flex-grow: dùng để thiết lập tỉ lệ phần trăm chiếm của các phần tử con, tham khảo: https://www.w3schools.com/cssref/css3_pr_flex-grow.asp
- Ví dụ:
flex-grow: 1;
- Ví dụ:
- flex-shrink: dùng để thiết lập tỉ lệ phần trăm co lại của các phần tử con, tham khảo: https://www.w3schools.com/cssref/css3_pr_flex-shrink.asp
- Ví dụ:
flex-shrink: 1;
- Ví dụ:
- flex-basis: dùng để thiết lập kích thước của các phần tử con, tham khảo: https://www.w3schools.com/cssref/css3_pr_flex-basis.asp
- Ví dụ:
flex-basis: 100px;
- Ví dụ:
- align-self: dùng để căn chỉnh các phần tử con theo chiều dọc, tham khảo: https://www.w3schools.com/cssref/css3_pr_align-self.asp
- Ví dụ:
align-self: center;
- Ví dụ:
CSS Selector Reference
| Selector | Example Name | Example description |
|---|---|---|
| * | * | Selects all elements |
| .class | .intro | Selects all elements with class="intro" |
| .class1.class2 | .name1.name2 | Selects all elements with both name1 and name2 set within its class attribute |
| .class1 .class2 | .name1 .name2 | Selects all elements with name2 that is a descendant of an element with name1 |
| #id | #firstname | Selects the element with id="firstname" |
| element | p | Selects all <p> elements |
| element.class | p.intro | Selects all <p> with class="intro" |
| element,element | div, p | Selects all <div> elements and all <p> elements |
| element element | div p | Selects all <p> elements inside <div> elements |
| element > element | div > p | Selects all <p> elements where the parent is a <div> element |
| element + element | div + p | Selects the first <p> element that is placed immediately after <div> elements |
| element ~ element | p ~ ul | Selects every <ul> element that is preceded by a <p> element |
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target="_blank"] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~="flower"] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang |="en"] | Selects all elements with a lang attribute value equal to "en" or starting with "en-" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$="https"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :default | input:default | Selects the default <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children (including text nodes) |
| :enabled | input:enabled | Selects every enabled <p> element |
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the input element which has focus |
| :hover | input:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects input elements with a value within a specified range |
| :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
| :invalid | input:invalid | Selects all input elements with an invalid value |
| :last-child | p:last-child | Selects every <p> element that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| ::marker | ::marker | Selects the markers of list items |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p>> element that is the only <p>> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects input elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
| ::placeholder | input::placeholder | Selects input elements with the "placeholder" attribute specified |
| :read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
| :required | input:required | Selects input elements with the "required" attribute specified |
| ::selection | ::selection | Selects the portion of an element that is selected by a user |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all input elements with a valid value |
| :visited | a:visited | Selects all visited links |
Try CSS Selector
Using tool to practive
https://chrome.google.com/webstore/detail/css-selector-tester/gkdinamekianhihakaefhphphhodpgha