HTLMMM

<h1 >hình ảnh nam mặc váy </h1>
<input type="text"> 

<input name="gioi tinh" type="checkbox">  
<input type="radio"> 
<button>xem ngay</button> 
<div> 
<h2>khối đang bao quanh h2</h2>
</div>
<table> 
<thead> 
<th>stt</th> 
<th>tên</th>
</thead>
<tbody> 

<tr> 
<td>1</td> 
<td>nam ngu vl</td>
</tr>
</tbody>
</table>
Viết nhanh #header + tab = id
.header =class
Chọn nhanh
Bôi đencais cần trọn
Ctrl +d(giữ )
Ctrl + shift + mũi tên trái phải để chọn
Tạo danh sách nhanh
ul#id>li*5>a
Kết quả
<ul id="id">
<li><a href=""></a></li>
</ul>
Chỉnh con trỏ chuột khi di vào

Vào trang
css cursor property
m.facebook.com.vn
Miền phụ.Domain name.Second lever domain(SLD).Top lever domain(TLD)
1.Header <đầu trang>

2.navigation <điều hướng>
3. braedrumb <cho bt đang ở đâu>
4. sidebar <menu con>
5. slider <dạng trược>
6. content <nội dung>
7. footer <chân trang>
Index.html // là trang chủ
<html>
</html>
1 file html chir có 1 cặp html


Bấm vào 1 đong rồi ctrl / tự động biến cả dòng đấy thành comment
Ký tự Tên đày đủ Ý nghĩa Lưu ý

<h1>- <h6> Heading tiêu đề, chứ nhỏ lại dần từ 1 đến chỉ có 1 h1
6
<p> Paragrap Thường viết ở dưới <h>

Là chữ bình thường
<img src="" alt=""> Image Src = source//nguồn

Oneerror= néu ảnh lỗi.ảnh này
onerror="this.src='placeholder-200x200- sẽ lên trước
Alt=nếu ảnh lỗi, chữ này sẽ thay
1.png'"
ảnh
<a href=" "> </a> Anchor: mỏ neo Để link, đặt linh vô đây Herf mới là lịnk
Chữ thay cho link
<ul> Unordered list: Tên danh sách Đổi ol thàng il, dấu .
<li></li> danh sách sắp trước danh sách sẽ
xếp tùy ý thành số
<li></li>
List item: danh Thẻ trong danh sách
<li></li> sách chứa phần
</ul> tử bên trong
<table> Tạo bảng <Table> :tạo bảng Tr*3 // để tạo nhanh 3

<thead> <Thead> :tên các mục đầu bảng dòng
<Tbody> :thân bảng
<th>stt</th>
<tr> :dòng đầu tiên
<th>ten</th> <td> :nội dung cột 1 dòng 1
</thead>
<tbody>
<tr>
<td>1</td>
<td>nam</td>
</tr>
</tbody>
</table>
<input type="text"> Ô để viết chữ

trên web
<input type="checkbox"> Ô vuông để tích Đa tích
<input name="gioi tinh" type="radio"> Ô tròn để tích Đơn tích Trùng name thì chỉ dc
tích 1 ô
<button>xem ngay</button> Nút bấm
Ký tự Tên đày đủ Ý nghĩa Lưu ý

<div> Khối đang bao quanh h2
<h2>khối đang bao quanh h2</h2>
</div>
<h1 title="đây là tiêu đề"> hìnhdsf </h1> Thuộc tính Hiện chữ nhỏ khi di chuột vào Tên là attribute
title=""
CSS:
Có 3 cách
1. Internal//
<style>
h1{
color: aqua;
font-size: 10 px;
}
</style>
Viết bên trên
2. External
Tạo file style.css, sau đó dùng
<link rel="stylesheet" href="style.css">
Để liên kết 2 file lại
3. Inline
Viết trong thẻ h1
<h1 style "color: aqua;font-size: 10 px">
Ngăn cách 2 style bằng ;
Thêm ID
<p id="mot">dong thu 3</p>
Dùng id
#mot{
color:gold ;
}
Thêm class
<h3 class="hai">dong thu 4</h3>
Dùng class
.hai{
color: blue;
}
Lưu ý: muốn chọn các class bên trong giống nhau .hai.ba,bon{color:gold ;}
Selector Ví dụ Mô tả
.class .intro Chọn tất cả các thẻ có class=“intro”
Chọn tất cả các thẻ có cả name1 và name2 được đặt trong thuộc tính class của
.class1.class2 .name1.name2
nó
.class1 .class2 .name1 .name2 Chọn tất cả các thẻ có class=“name2” là con của một phần tử có class=“name1”
* * Chọn tất cả các thẻ
element h2 Chọn tất cả các thẻ h2
element.class div.box Chọn tất cả thẻ div có class=“box”
element, element div, h2 Chọn tất cả thẻ div và h2
element element div p Chọn tất cả thẻ p trong thẻ div
element >
div > p Chọn tất cả thẻ p là con trực tiếp của thẻ div
element
element +
div + p Chọn thẻ p đứng liền kề sau thẻ div
element
element ~
div ~ p Chọn tất cả thẻ p đứng sau thẻ div
element
Chọn cả class và id #hai.ba
Mức độ ưu tiên
1. Intrnal,external
2. Inline 1000
3. #id 100
4. Class 1
5. Equal specificity
6. Universal selector and inherited
CSS VARIBLE; biến trong css
Sửa giá trị màu nhanh
:root {
--text-color:green ;
}
h1{
color: var(--text-color);
}
Giá trị tương đối:

% , sẽ to lên phụ thuộc vào thẻ chứa nó
Rem, phụ thuộc vào thẻ html
Mặc định font-site 100% bằng 16 pĩxel
<html>
Color: blue;
</html>
Số đo
Vw,ngang 100% trình duyệt
Vh,cao 100% trình duyệt
Xóa khoảng trắng bị dư * {

margin: 0; /* Loại bỏ margin khoảng trắng bị lòi ra */
padding: 0; /* Loại bỏ padding bỏ chấm trước trong danh sách */}
Hàm
<var> in nghiêng chữ </var>
Màu rbga rgba(0, 0, 0, 0.5);

A từ 1.0 đến 0.1, a càng nhỏ màu càng mờ
Tạo box
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background-color: purple;
padding: 16px;
box-sizing: border-box;
}
.box{
background-color: red;
width: 700px;
height: 50px;
}
.box-child{
background-color: green;
width: 75%; /* Chiều ngang của thẻ div có class box-child sẽ phụ thuộc vào thẻ chứa nó,
trong trường hợp này là thẻ div có class box nên sẽ là 75% của 700px (px là đơn vị tuyệt đối, % và vw
là đơn vị tương đối), chiều ngang của thẻ div có class box-1-child sẽ thay đổi khi chiều ngang của thẻ
div có class box thay đổi*/
height: 50px;
}
.box-1{
background-color:blue;
width: 700px;
height: 50px;
}
.box-1-child{
background-color: aqua;
width: 75vw; /* Chiều ngang của thẻ div có class box-1-child sẽ phụ thuộc vào chiều
ngang trình duyệt và KHÔNG phụ thuộc vào thẻ chứa nó, trong trường hợp này là 75% của chiều ngang trình
duyệt, chiều ngang của thẻ div có class box-1-child sẽ thay đổi khi chiều ngang trình duyệt thay đổi
*/
height: 50px;
}
Pseeudo-classes : lớp giả
:root {
--text-color:green ;
}
h1{
color: var(--text-color);
}
Là tham chiếu cho thẻ html
h1:hover{
color: red;
}
Đổi màu khi di chuột vào
h1:active{
color: red;
}
Ấn đổi, nhả trở lại màu cũ

Pseeudo-element
Dùng để tạo khối trên cùng
.box::before{
content: ""; //bắt buộc
display: block; //bắt buộc
width: 50px;
height:50px;
}
Dùng để tạo khối dưới cùng

.box::after{
content: ""; //bắt buộc
display: block; //bắt buộc
width: 50px;
height:50px;
}
<br /> xuống dòng

Đổi màu khi bôi đen
::selection {
background-color: sandybrown ;
}
padding (đệm)
//nhét là tăng độ dài bên ngoài vùng nội dung của chữ
padding: 9px,8px,7px,6px ;
Theo kim đồng hồ,trên, trái,dưới,phải

Border: bo quanh padding
border-width: 5px;
border-style: dashed;
border-color: #456;
Viết nhanh
border: 2px solid #333333;
Khoangr cách lề
margin: 1px,2px,3px,4px;
Giữ số đo box
/* Bỏ gạch chân mặc định của thẻ a */
text-decoration: none;
Cách nhét ảnh vô box,

.box {
width: 100%;
height: 100vh;
background-image:
url(https://i.9mobi.vn/cf/Images/huy/2021/12/6/anh-gai-xinh-3.jpg), // nhét 2 ảnh trồng lên nhau
url(https://i.9mobi.vn/cf/Images/huy/2021/12/6/anh-gai-xinh-3.jpg);
background-repeat: no-repeat;
border: 12px solid #333333;
margin: 10px,10px,10px,10px;
background-image: 100;
}
Đổ gadian
background-image: linear-gradient(0,#333,#aaa);
Số 0 là góc, 0 đến 360
Chinhr kích thước ảnh trong box

background-size: 100%;
Tự động chỉnh ảnh vừa

background-size: contain;
chèn ảnh vào boder,(boder che 1 phần ảnh)

background-origin: border-box;
Vị trí ảnh
background-position: 5px 10px;//x y, giá trị thứ mặc định là center(ở giữa)
//có thể viết
Top 20px right 330px
Viết nhanh căn chỉnh ảnh

background: center / contain no-repeat url(https://luv.vn/wp-content/uploads/2021/08/hinh-anh-gai-
xinh-11.jpg), url(https://img2.thuthuatphanmem.vn/uploads/2019/01/04/hinh-anh-gai-xinh_025104400.png)
no-repeat 35%;
Tạo khung mới đè lên
position: relative;// lấy chính nó làm ốc tọa độ điểm hiện ra
top: 100; // tạo 1 khoảng trống bên trên để tự đẩy mình xuốn 100px
Tạo khung này trong khung kia

b1
<div class="box">
<div class="box2"></div>
</div>
.box {
width: 100px;
height: 100px;
background-color: peachpuff ;
position: relative;
}
.box2 {
width: 50px;
height: 50px;
background-color: aquamarine;
position: absolute; //sẽ lấy thẻ bên ngoài gần nhất có thuộc tính position
}
// nếu xóa ưidth và height, để toàn bộ
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
, box2 sẽ phủ toàn bộ lên box 1
Tạo box chạy theo màn hình

<div class="box3"></div>
.box3 {
width: 100%;
height: 42px;
background-color: #333;
position: fixed;
top: 0;
left: 0;
}
h1 {
margin-top: 100px;
}// khoảng cách dòng 1 với top
Các cách căn giữa

text-align: center;// căn giữa cho chữ
line-height: 100px; // căn trên dưới
Tự động căn giữa và dính nhau

display: flex;//cho vào box cha
justify-content: center;//cho vào box con
/* begin: đưa chữ vào giữa*/

left: 50%;
transform: translateX(-50%);
text-align: center;
/*end đưa chữ vào giữa*/
font-weight: 500;/*cán mỏng chữ*/

letter-spacing: 4px;/*khoảng cách giữa các chữ cái*/
font-style: italic;/* chữ nghieng*/
opacity: 0.6;/*làm mờ chữ */

text-align: justify;/*chữ đều 2 bên*/

HTLMMM

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTLMMM

Uploaded by

Copyright:

Available Formats

<h1 >hình ảnh nam mặc váy </h1>

<input type="text">

<tbody>

Chỉnh con trỏ chuột khi di vào

1.Header <đầu trang>

Ký tự Tên đày đủ Ý nghĩa Lưu ý

<p> Paragrap Thường viết ở dưới <h>

<img src="" alt=""> Image Src = source//nguồn

<table> Tạo bảng <Table> :tạo bảng Tr*3 // để tạo nhanh 3

<input type="text"> Ô để viết chữ

Ký tự Tên đày đủ Ý nghĩa Lưu ý

Giá trị tương đối:

Xóa khoảng trắng bị dư * {

Màu rbga rgba(0, 0, 0, 0.5);

Là tham chiếu cho thẻ html

Đổi màu khi di chuột vào

Ấn đổi, nhả trở lại màu cũ

Dùng để tạo khối dưới cùng

<br /> xuống dòng

Theo kim đồng hồ,trên, trái,dưới,phải

Cách nhét ảnh vô box,

Số 0 là góc, 0 đến 360

Chinhr kích thước ảnh trong box

Tự động chỉnh ảnh vừa

chèn ảnh vào boder,(boder che 1 phần ảnh)

Viết nhanh căn chỉnh ảnh

Tạo khung này trong khung kia

Tạo box chạy theo màn hình

Các cách căn giữa

Tự động căn giữa và dính nhau

/* begin: đưa chữ vào giữa*/

font-weight: 500;/*cán mỏng chữ*/

opacity: 0.6;/*làm mờ chữ */

You might also like

font-weight: 500;/cán mỏng chữ/

opacity: 0.6;/làm mờ chữ /