I. Class và div trong CSS
1. Class và id là gì:
- Class và id là hai thành phần rất quan trọng trong css. Nó giúp cho việc định dạng một hoặc một tập hợp các thẻ html có chung những thuộc tính như màu sắc, kích thước hay cỡ chữ... trở nên nhanh hơn và hiệu quả hơn. Việc sử dụng class và id trong css còn giúp cho việc quản lý code css trở nên dễ dàng hơn.
2. Phân biệt class và id:
- Class và id đều là các thuộc tính trong thẻ HTML, tuy nhiên chúng khác nhau về cách sử dụng:
+ id: Đối với id trong một trang HTML thì chỉ xuất hiện duy nhất một lần. Trong một trang không có 2 thẻ id cùng tên. Id mang tính chất tuyệt đối và duy nhất trong một trang web.
+ class: class được gán cho mọi đối tượng có cùng class, các nhóm có cùng class thì sẽ chịu sự điều khiển của css cho class đó. Class sẽ được gán cho các thành phần sẽ lặp lại nhiều lần.
3. Cách viết:
- Class và id được viết trong các thẻ. Ví dụ:
<div id="head"></div><div class="menu"></div>4. Bộ chọn CSS
- Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css. Ta có các bộ chọn sau:
+ * : chọn tất cả thành phần html. Ví dụ:
* {thì tất cả thành phần trong html sẽ có đường viền màu đen dày 1px.
border: 1px solid black;
}
+ tag : Chọn các thành phần cùng một loại. Ví dụ: p , h1, a....
+ tag1 tag2: Chọn tất cả thành phần <tag2> bên trong thành phần <tag1>. Ví dụ: div p, div div p,....
+ tag1 + tag2: Chọn tất cả các thành phần tag1 và tag2. Ví dụ: div + p
+ .class: Chọn tất cả thành phần có cùng tên class.
+ #id: Chọn tất cả thành phần của id đó.
+ :first-child: Chọn thành phần đầu tiên của thành phần chứa nó. Ví dụ ta có 3 dòng:
<p>Line 1</p>Muốn chọn dòng đầu tiên trong css viết:
<p>Line 2</p>
<p>Line 3</p>
p:first-child{+ :nth-child(n): Chọn thành phần thứ n. Ví dụ:
}
<p>Line 1</p>Muốn chọn dòng thứ 3 trong css viết:
<p>Line 2</p>
<p>Line 3</p>
p:nth-child(3){+ :hover: Chọn các liên kết được hover (di chuyển chuột lên thành phần). Ví dụ:
}
a:hover{Trong đoạn css trên, khi ta di chuyển chuột đến một link của trang HTML thì link đó sẽ mất gạch chân và chuyển màu chữ sang đỏ.
text-decoration: none;
color: red;
}
+ :link: Định dạng cho các liên kết khi chưa được click. Ví dụ:
a:link{Khi chưa được click, màu chữ sẽ có màu đỏ.
color: red;
}
+ :visited: Định dạng cho các thành phần đã được click. Ví dụ:
a:visted{Khi link đã được click sẽ chuyển màu chữ sang vàng.
color: yellow;
}
II. Định dạng vị trí cho các thành phần trong CSS
1. Thuộc tính display
- Thuộc tính display xác định loại hiển thị của thành phần.
+ display: block; Thành phần đứng hiển thị như một khối. Khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó.
+ display: inline; Thành phần sẽ hiển thị trong một dòng, đây là dạng mặc định.
+ display: inline-block; Thành phần sẽ hiển thị trong một dòng và không đè lên nhau.
+ display: none; Không hiển thị thành phần.
2. Margin, border và padding
- margin: Thuộc tính margin canh lề cho các thành phần. Ví dụ:
margin: 10px 10px 10px 10px;Cách viết ngắn gọn canh lên bên trên, phải, dưới, trái. Đơn vị có thể là px, em, %...
+ margin-top: canh lề bên trên
+ margin-right: canh lề phải
+ margin-bottom: canh lề dưới
+ margin-left: canh lề trái
- border: Thuộc tính border được dùng để định dạng đường viền cho các thành phần. Ví dụ:
border: 1px solid #FF0000;Có các kiểu border như:
+ solid: đường viền là thẳng nét.
+ dashed: đường viền là gạch ngang
+ dotted: đường viền là dấu chấm
+ none: không hiển thị đường viền
+ hidden: đường viền bị ẩn, giống giá trị none nhưng thường được dùng cho table
+ double: đường viền là hai đường thẳng nét
+ inset: đường viền là đường bóng bên trong
+ outset: đường viền là đường bóng bên ngoài
...
- padding: Thuộc tính padding thêm khoảng không cho thành phần. Ví dụ:
padding: 10px 10px 10px 10px;Cách viết ngắn gọn thêm vào khoảng không bên trên, phải, dưới, trái cho thành phần. Đơn vị có thể là px, em, %...
+ padding-top: thêm khoảng không bên trên
+ padding-right: thêm khoảng không bên phải
+ padding-bottom: thêm khoảng không bên dưới
+ padding-left: thêm khoảng không bên trái
- Phân biệt margin và padding:
Margin là khoảng cách giữa thẻ đó và các thẻ bên cạnh khác, còn padding là khoảng cách từ nội dung của chính thẻ đó và đường viền của nó.
3. Floating
- float: Thuộc tính float quyết định một thành phần có được trôi (float) hay không
+ float: left; Thành phần được trôi qua bên trái
+ float: right; Thành phần được trôi qua bên phải.
+ float: none; Thành phần không được trôi qua bên trái hay phải. Đây là giá trị mặc định
+ float: inherit: Xác định thừa hưởng thuộc tính từ thành phần bao ngoài.
- clear: Thuộc tính clear xác định hai bên left, right của phần từ, ngăn cản thành phần không được float trái, phải hoặc cả hai
+ clear: left; Bên trái của thành phần không được float
+ clear: right; Bên phải của thành phần không được float
+ clear: both; Bên phải và trái của thành phần đều không được float
+ clear: none; Bên phải và trái của thành phần đều được float
+ clear: inherit; Xác định thừa hưởng thuộc tính của thành phần bao ngoài
4. Thuộc tính position
- Thuộc tính position xác định loại của phương pháp định vị trí cho thành phần
+ position: static; Thành phần sẽ nằm theo thứ tự. Đây là dạng mặc định
+ position: relative; Nếu bạn muốn di chuyển một đối tượng khỏi vị trí thông thường của nó thì có thể sử dụng
position: relative và các thuộc tính top, bottom, left, right. Ví dụ:Ở ví dụ trên, #id-one đã được di chuyển, cách bên trái một khoảng 10px.#id-one{position: relative;left: 10px;}
+ position: absolute; Khi thiết lập giá trị
position: absolute, đối tượng sẽ được đặt tại bất kỳ vị trí nào bạn chỉ ra tại các thuộc tính top, bottom, left, right. Ví dụ: #id-one{Ở ví dụ trên, #id-one sẽ được đặt ở vị trái cách top 30px và cách left 20px.
position: absolute;
top: 30px;
left: 20px;
}
+ position: fixed: cho kết quả tương tự như
position: absolute, chỉ khác là khi kéo thanh cuộn ngang, dọc thì vị trí của đối tượng được giữ nguyên không thay đổi. Thuộc tính hay hay được sử dụng để tạo các thành phần như quảng cáo, nút bấm,....Bài tập:
0 nhận xét:
Đăng nhận xét