CSS

1) CSS là gì !?

- CSS là chữ viết tắt của cụm từ Cascading Style Sheets, nó được sử dụng để "định dạng" cho
các phần tử trên trang web

Nhận xét : /* nhận xét*/

2) CSS Selectors

Selector Example Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p> elements

element1 element2 Chọn ele2 với ele2 là con của ele1

element1 > element2 Chọn ele2 với ele2 là con của ele1 không phải cháu
element1 ~ element2 Chọn tất cả ele2 sau ele1
element1 + element2 Ele2 sát sau ele1
3) CSS Color

red - Xác định dựa theo tên màu

rgb(255,0,0 - Xác định dựa theo giá trị RGB

)

#ff0000 - Xác định dựa theo giá trị HEX

background-color:Tomato;
color:Tomato;
border:2px solid Violet;

4) CSS Background

 background-color
 background-image: p {background-image: url("paper.gif");}
 background-repeat: background-repeat: repeat-x/ repeat-y/no-repeat;
 background-attachment: background-attachment: fixed/scroll;
 background- position: background-position: right top;

 body {background: #ffffff url("img_tree.png") no-repeat

fixed/scroll right top;}

5) CSS table

Tạo div cho cả cái bảng rồi overflow : auto;

tr:nth-child(even) {background-color: #f2f2f2;}
To create a responsive table, add a container element (like div) with overflow-
x:auto around the table element: <div style="overflow-x:auto;">
A responsive table will display a horizontal scroll bar if the screen is too small to
display the full content
6) CSS Border
p {border-style: dotted/solid;
border-width: 2px;
border-color: red green blue yellow; /* red top, green right, blue
bottom and yellow left */
}

 p {
border: 5px solid red;
border-radius: 5px; //bo viền
}
7) CSS Margin
p {
margin: 25px 50px 75px;
}

8) CSS Text
Text Alignment
div {
text-align: justify;
}
#text{ // chia văn bản thành nhiều cột
text-align:justify;
column-count:3;
}
Text Decoration
  text-decoration-line: h1 {
text-decoration-line: overline/ line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
 p {
text-decoration: underline red double 5px;
}

Text Indentation

p {
text-indent: 50px;
}

9) CSS fonts

p {
font-family: Tahoma, Verdana, sans-serif; // danh sách phông chữ dự phòng
font-style: italic;
font-size: 2.5em;
}

Phông chữ google:

https://www.w3schools.com/css/css_font_google.asp

10) CSS Link

a {
color: hotpink;
} /* unvisited link */
a:link {
color: red;
text-decoration: none;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: hotpink;
text-decoration: underline;
}
/* selected link */
a:active {
color: blue;

11) CSS List

Chỉ định một hình ảnh làm điểm đánh dấu mục danh sách

ul {
list-style-image: url('sqpurple.gif');
}

menu ngang: li { display: inline; }

12) CSS image

img {
float: right;
}

13) CSS Display

display: inline; // hiển thị trên cùng 1 dòng
display: inline-block;// hiển thị trên cùng 1 dòng có khối
display: block; // hiển thị từng khối hàng dọc nối tiếp

inline - Phần tử sẽ hiển thị dưới dạng nội tuyến:

o Phần tử hiển thị tiếp nối trên hàng hiện tại.

o Chiều rộng của phần tử phụ thuộc vào kích cỡ của nội dung
nằm ở bên trong nó.

o Chúng ta không thể sử dụng các thuộc tính width & height
để thiết lập kích thước cho phần tử.

block
- Phần tử sẽ hiển thị dưới dạng khối:

o Phần tử luôn bắt đầu trên một hàng mới.

 o Chiều rộng của phần tử sẽ trải dài từ trái qua phải (chiếm
toàn bộ chiều rộng phần content của cha nó)

o Chúng ta có thể sử dụng các thuộc tính width & height để

thiết lập lại kích thước cho phần tử.

inline-block
- Phần tử sẽ hiển thị dưới dạng khối nội tuyến:

o Phần tử hiển thị tiếp nối trên hàng hiện tại.

o Chiều rộng của phần tử phụ thuộc vào kích thước của nội
dung nằm ở bên trong nó. Tuy nhiên, chúng ta có thể sử
dụng các thuộc tính width & height để thiết lập lại kích
thước cho phần tử

14) CSS lớp giả

a.highlight:hover {
color: #ff0000;

h1::before {
content: url(smiley.gif);

::selection {
color: red;
background: yellow;

15) CSS Opacity (độ mờ ảnh)

img {
opacity: 0.5;
}

16) CSS Navigation Bar( Thanh điều hướng)

Thah ngang thêm : li {
 float: left;
}

17) CSS Drop-down

CSS Attribute Selectors

a[target] {
background-color: yellow;
} // chọn tất cả các phần tử <a> có thuộc tính đích

a[target="_blank"] {
background-color: yellow;
} //chọn tất cả các phần tử <a> có thuộc tính target="_blank"

[title~="flower"] {
border: 5px solid yellow;
}// chọn các phần tử có giá trị thuộc tính chứa một từ được chỉ định

[class|="top"] {
background: yellow;
}// Giá trị phải là cả một từ, một mình, như class="top" hoặc theo sau là
dấu gạch nối( - ), như class="top-text"

input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
cursor: pointer; // con trỏ chuột sẽ thay đổi thành biểu tượng "bàn tay"
} //bộ chọn thuộc tính có thể hữu ích cho việc tạo kiểu cho các biểu mẫu
không có lớp hoặc ID

CSS Search

CSS đặc hiệu

Inline> ID> Class> Element
Để ghi đè TẤT CẢ các quy tắc tạo kiểu trước đó cho thuộc tính
p {
background-color: red !important;
}

CSS variable
:root { // định nghĩa biến
--blue: #6495ed;
--white: #faf0e6;
}

body { background-color: var(--blue); } // sử dụng biến

h2 { border-bottom: 2px solid var(--blue); }

CSS Animation

transition: property(thuộc tính muốn tạo giá trị luân chuyển) duration(thời lượng) timing-function(tốc độ
chuyển động) delay;
CSS Position
position:absolute;

Static: phần tử sẽ xuất hiện ở vị trí mặc định dựa theo thứ tự khai báo, chúng ta không thể sử dụng các thuộc
tính top, right, bottom, left để thiết lập lại vị trí cho phần tử.
Relative: phần tử sẽ xuất hiện ở vị trí mặc định dựa theo thứ tự khai báo, có thể sử dụng các thuộc tính top,
right, bottom, left để thiết lập lại vị trí cho phần tử. Để thiết lập lại vị trí cho phần tử thì giữa hai thuộc
tính top & bottom các bạn chỉ có thể sử dụng một thuộc tính, giữa hai thuộc tính left & right cũng tương
tự như vậy.
 Khi sử dụng thuộc tính top, nếu nó nhận giá trị dương thì phần tử sẽ di chuyển xuống dưới, nếu nó
nhận giá trị âm thì phần tử sẽ di chuyển ngược lên trên.
 Khi sử dụng thuộc tính left, nếu nó nhận giá trị dương thì phần tử sẽ di chuyển sang phải, nếu nó
nhận giá trị âm thì phần tử sẽ di chuyển sang trái.
Fixed : dùng để thiết lập phần tử nằm tại một vị trí cố định trên màn hình trình duyệt mặc cho người dùng có
cuộn trang lên xuống hay trái phải
Absolute : để thiết lập vị trí cho một phần tử dựa theo vị trí của phần tử tổ tiên (khối con trong khối cha)

CSS Float & clear

- Lưu ý: Phần tử chỉ trôi lên khi thỏa hai điều kiện.

o Hàng phía trên còn đủ khoảng trống để chứa nó.

o Phần tử phía trước nó cũng được thiết lập thuộc tính float với giá trị left
hoặc righ
float:left;
Khối hồng không có thuộc tính float
Khối đỏ left nhưng khối hồng ko có lên ko trôi được lên hàng trên
Khối xanh right trôi lên nằm bên phải
Khối blue left còn khoảng trống thì trôi lên
Khối đen left ko đủ khoảng trống lên ko trôi lên được

clear:none;
Khi một phần tử được thiết lập thuộc tính float (với giá trị left hoặc right) thì phần tử nằm ở phía
sau nó mặc cho không có thiết lập thuộc tính float đi chăng nữa cũng sẽ bị ảnh hưởng. (ghi đè lên
phần tử trước)

z-index: value; value càng lớn thì càng ưu tiên hiển thị đè lên phần tử có value nhỏ hơn