CSS cơ bản

Các thuộc tính điều khiển nội dung

Các thuộc tính điều khiển nội dung được sử dụng để sắp xếp, bố cục cho các thành phần HTML như float, display, position, margin, padding …

Code HTML

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=0.5">
<title>Tiêu đề website</title>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" media="all" href="css/style.css" />
</head>
<body>
<div>
<p class="item01">Đối tượng 01</p>
<p class="item02">Đối tượng 02</p>
</div>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS

Đối tượng 01

Đối tượng 02

float

  • Thành phần nào sử dụng float sẽ được giải phóng vùng không gian, vùng không gian này sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần liền kề nó lập tức chiếm lấy.
  • Khi sử dụng float, các thành phần không chồng chập lên nhau, mà sẽ sắp xếp vị trí tùy thuộc vào chiều rộng của vùng trống.
  • Khi sử dụng float: left, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang trái.
  • Khi sử dụng float: right, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang phải.
* {
   margin: 0;
   padding: 0;
}
p.item01 {   
   float: left;
   height: 100px;
}
p.item02 { 
   height: 100px;
}

Kết quả

Đối tượng 01 Đối tượng 02

position

Thuộc tính position xác đinh vị trí tương đối và tuyệt đối cho thành phần, vị trí này phụ thuộc vào các giá trị khai báo của thành phần và thành phần bao ngoài nó.

Vị trí này có gốc được tính phía trên, bên phải, phía dưới và bên trái thành phần.

Các giá trị của thuộc tính position: relative, absolute, fixed, static

Code HTML

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=0.5">
<title>Tiêu đề website</title>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" media="all" href="css/style.css" />
</head>
<body>
<div>
<p class="tagA">Thành phần A</p>
<p class="tagB">Thành phần B</p>
</div>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS

Thành phần A

Thành phần B

position: relative

Thuộc tính position: relative; định vị trí tương đối cho thành phần, khi sử dụng thuộc tính này thành phần sẽ định vị trí theo mốc vùng hiển thị của chính nó, vị trí này không phụ thuộc vào vùng không gian, vùng không gian vẫn được giữ như ban đầu

Code CSS

* {
   margin: 0;
   padding: 0;
}
div {
   border: 1px solid red;
   height: 100px;
   margin: 30px 40px;
}
p.tagA {
   background: #f3f3cf;
   width: 150px;
   height: 30px;
   position: relative;
   top: 40px;
}
p.tagB {
   background: #e0e0fc;
   width: 150px;
   height: 30px;
}

Kết quả

Thành phần A lúc này đã ở vị trí bên dưới cách vị trí ban đầu một khoảng 40px và chồng chập lên Thành phần B

position: absolute

Thuộc tính position: absolute; định vị trí tuyệt đối cho thành phần, khi sử dụng thuộc tính này vùng không gian của thành phần sẽ biến mất (trở thành vùng trống), thành phần sẽ thoát khỏi vùng không gian của nó,

giá trị mặc định top: 0 và left: 0

– Nếu có sử dụng các thuộc tính định vị trí, thì thành phần sẽ lấy gốc theo vùng không gian của trình duyệt đây cũng chính là vùng văn bản HTML

Code CSS

* {
   margin: 0;
   padding: 0;
}
div {
   border: 1px solid red;
   height: 100px;
   margin: 30px 40px;
}
p.tagA {
   background: #f3f3cf;
   width: 150px;
   height: 30px;
   position: absolute;
   left: 20px;
   top: 20px;   
}
p.tagB {
   background: #e0e0fc;
   width: 150px;
   height: 30px;
}

Kết quả

– Nếu có thành phần bao ngoài được định vị trí tương đối (position: relative;) thì gốc của nó (thành phần sử dụng thuộc tính position: absolute;) sẽ được tính theo vùng hiển thị của thành phần bao ngoài nó

Code CSS

* {
   margin: 0;
   padding: 0;
}
div {
   border: 1px solid red;
   height: 100px;
   margin: 30px 40px;
   position: raletive;
}
p.tagA {
   background: #f3f3cf;
   width: 150px;
   height: 30px;
   position: absolute;
   top: 20px;
   left: 30px;
}
p.tagB {
   background: #e0e0fc;
   width: 150px;
   height: 30px;
}

Kết quả

position: fixed

Tương tự như thuộc tính Absolute, Fixed cũng hoạt động dựa vào một thẻ cha làm chuẩn bên ngoài. Chỉ có khác một điều là đối với Fixed thì khi bạn scrolling thì nó sẽ nằm luôn trên màn hình ngay tại vị trí chuẩn đó và đè lên trên các phần tử bên dưới.

Theo mặc định thì Fixed sẽ lấy luôn cửa sổ trình duyệt làm nơi để làm chuẩn. Nhưng nếu các thẻ cha của nó có khai báo position: relative thì nó sẽ lấy thẻ cha đó chứ không lấy của sổ trình duyệt nữa. Tuy nhiên nếu bạn khai báo một trong bốn thuộc tính sau: top – left- bottom – right thì lúc này nó sẽ không lấy thẻ cha đó nữa mà nó sẽ lấy cửa sổ trình duyệt làm chuẩn

position: static

Đây là dạng position mặc định của thành phần, thường được sử dụng để phục hồi dạng position cho thành phần

display

Thuộc tính display : Xác định sự hiển thị cho thành phần, chuyển đổi thành phần từ dạng dạng này sang dạng khác

Code HTML

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=0.5">
<title>Tiêu đề website</title>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" media="all" href="css/style.css" />
</head>
<body>
<div>
<p class="first">Thành phần A</p>
<p class="second">Thành phần B</p>
<p class="third"><a>thẻ inline a</a> <span>thẻ inline span</span></p>
</div>
</body>
</html>

Do Thành phần A và Thành phần B sử dụng thẻ <p>, nên nó thuộc dạng block.

Do thẻ inline a sử dụng thẻ <a>, thẻ inline span sử dụng thẻ <span> nên nó thuộc dạng inline.

Thành phần A.

Thành phần B.

Thẻ inline a thẻ inline span

display: block

Code CSS

* {
   margin: 0;
   padding: 0;
}
p.third a {   
   display: block;
}
p.third span {   
   display: block;
}

Kết quả

Thành phần A.
Thành phần B.
Thẻ inline a
thẻ inline span

display: inline

Thuộc tính display: inline;: hiển thị thành phần thành dạng inline

Code CSS

* {
   margin: 0;
   padding: 0;
}
p.second {
   display: inline; 
}

Kết quả

Thành phần A.Thành phần B.
Thẻ inline athẻ inline span

display: none

Thuộc tính display: none;: không hiển thị thành phần

Code CSS

* {
   margin: 0;
   padding: 0;
}
p.second {
   display: none; 
}

Kết quả

Thành phần A.
Thẻ inline athẻ inline span

dgdg

Leave a Comment