CSS Giới thiệu
CSS có hàng nghìn thuộc tính, nhưng đừng lo lắng, theo nguyên tắc 80-20, chỉ có vài chục thuộc tính phổ biến mà bạn hoàn toàn có thể nắm vững.
Lịch sử HTML và CSS
Thời kỳ đầu chỉ có HTML, để làm cho HTML đẹp hơn, các nhà phát triển trang web đã viết màu sắc vào bên trong thẻ, tưởng tượng một đống thẻ với nhiều thuộc tính: màu sắc, phông chữ, v.v., tóm lại là "lộn xộn".
Để giải quyết vấn đề này, Liên minh Web Toàn cầu (W3C), một tổ chức tiêu chuẩn phi lợi nhuận, đã đảm nhận sứ mệnh tiêu chuẩn hóa HTML và tạo ra kiểu dáng (Style) ngoài HTML 4.0.
Tất cả các trình duyệt chính đều hỗ trợ CSS.
Cú pháp CSS và độ ưu tiên
1. Quy tắc CSS gồm hai phần chính: bộ chọn (selector) và một hoặc nhiều khai báo.
2. Ba loại CSS:
Định kiểu nội tuyến (Inline)
Khi bạn gõ <h2 style="color: red">CatPhotoApp</h2>, bạn đã thêm kiểu nội tuyến cho thẻ h2.
Định kiểu tầng (Internal)
Định kiểu nội tuyến là cách đơn giản và hiệu quả nhất để thêm kiểu cho phần tử, nhưng cách dễ bảo trì hơn là sử dụng CSS (Cascading Style Sheets).
<!-- Tạo một phần tử style ở đầu tài liệu:
Trong phần tử style này, bạn có thể tạo một bộ chọn phần tử cho tất cả các thẻ h2. Ví dụ, nếu bạn muốn đặt tất cả các thẻ h2 thành màu đỏ,
mã của bạn sẽ trông như thế này:
-->
<style>
/* Bộ chọn {tên thuộc tính: giá trị thuộc tính;} */
h2 {color: red;}
</style>
Định kiểu ngoài (External)
Tách riêng CSS vào một tệp được gọi là định kiểu ngoài.
<!-- Nhúng tệp CSS -->
<link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
3. Độ ưu tiên: Định kiểu nội tuyến > Định kiểu tầng > Định kiểu ngoài
Bộ chọn (Selector)
Bộ chọn có thể lồng nhau, nếu không hiểu câu này thì không sao, hãy tiếp tục đọc.
Bộ chọn phần tử (Element selector)
Bộ chọn CSS phổ biến nhất là bộ chọn phần tử. Nói cách khác, các phần tử của tài liệu là bộ chọn cơ bản nhất.
Nếu định kiểu HTML, bộ chọn thường sẽ là một phần tử HTML, như p, h1, em, a, thậm chí là html:
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
Bộ chọn lớp (Class selector)
Bộ chọn lớp có thể hiểu là đóng gói nhiều kiểu vào một biến. Khi sử dụng biến này, thực chất là gọi nhóm kiểu đó.
<!-- Định nghĩa bộ chọn lớp -->
<style type="text/css">
.container-main {
background-color: aqua;
}
</style>
<!-- Áp dụng bộ chọn lớp -->
<div class="container-main">
Thông tin kiểm tra
</div>
Bộ chọn ID
Tương tự như bộ chọn lớp, khi sử dụng bộ chọn lớp, chúng ta sử dụng thuộc tính class, khi sử dụng bộ chọn ID, chúng ta sử dụng thuộc tính id.
/* Bộ chọn ID */
#footer {
background-color: aqua;
}
<!-- Áp dụng bộ chọn ID -->
<div id="footer">
Thông tin kiểm tra
</div>
Các bộ chọn trên (lớp, ID, phần tử) có thể lồng nhau.
<style type="text/css">
#footer div .container-main div {
background-color: aqua;
}
</style>
<!-- Sử dụng -->
<div id="footer">
<div class="container-main">
Thông tin kiểm tra
<div>
Thông tin kiểm tra
</div>
</div>
</div>
Bộ chọn phần tử con (Child selector)
h1 > strong {color:red;}
<!-- Sử dụng -->
<h1>Đây là <strong>rất</strong> <strong>rất</strong> quan trọng.</h1>
<h1>Đây là <em>thật sự <strong>rất</strong></em> quan trọng.</h1>
Bộ chọn thuộc tính (Attribute selector)
/* Đặt kiểu cho tất cả các phần tử có thuộc tính title: */
[title] { color:red; }
/* Đặt kiểu cho tất cả các phần tử có title="shuaige":*/
<img title="shuaige" src="/i/w3school_logo_white.gif" />
/* Đặt kiểu cho tất cả các phần tử có giá trị thuộc tính title chứa giá trị chỉ định. Phù hợp với các giá trị thuộc tính được phân tách bằng khoảng trắng: */
[title~=hello] { color:red; }
<h2 title="hello world">Hello world</h2>
<h2 title="hello shuaige">Hello world</h2>
/* Dùng để chọn mỗi phần tử có giá trị thuộc tính bắt đầu bằng giá trị chỉ định. Giá trị phải là toàn bộ từ. Trong CSS, dấu phân cách là "-" ví dụ en-shuaige, en-name*/
[lang|=en] {background:yellow;}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
/* Khớp với mỗi phần tử có giá trị thuộc tính bắt đầu bằng giá trị chỉ định. */
div[class^="test"]
<div class="test-shuaige">Phần tử div thứ ba.</div>
/* Khớp với mỗi phần tử có giá trị thuộc tính kết thúc bằng giá trị chỉ định. */
div[class$="test"]
<div class="test">Phần tử div thứ ba.</div>
/* Khớp với mỗi phần tử có giá trị thuộc tính chứa giá trị chỉ định. Chỉ cần chứa là được. */
div[class*="test"]
<div class="first_test">Phần tử div đầu tiên.</div>
Bộ chọn giả (Pseudo-class selector)
a:link {color: #FF0000} /* Liên kết chưa truy cập */
a:visited {color: #00FF00} /* Liên kết đã truy cập */
a:hover {color: #FF00FF} /* Di chuột qua liên kết */
a:active {color: #0000FF} /* Liên kết đang được chọn */
CSS Kiểu dáng
Nền (Background)
background-color không được kế thừa, giá trị mặc định là transparent. Transparent có nghĩa là "trong suốt". Điều này có nghĩa là nếu một phần tử không chỉ định màu nền, thì nền sẽ trong suốt, cho phép nền của phần tử tổ tiên hiển thị.
1. Nền màu thông thường và nền ảnh
/* Nền thông thường */
p {background-color: gray;}
/* Nền ảnh */
body {background-image: url(/i/eg_bg_04.gif);}
2. Lặp lại nền
Nếu chúng ta định nghĩa phần tử div là 100px, ảnh nền là 10px, theo mặc định ảnh sẽ được lặp lại để lấp đầy toàn bộ 100px. Nếu chúng ta không muốn nó lặp lại, chúng ta có thể sử dụng thuộc tính repeat.
Giá trị repeat làm cho hình ảnh lặp lại theo cả chiều ngang và chiều dọc, giống như cách làm thông thường với hình ảnh nền. repeat-x và repeat-y lần lượt làm cho hình ảnh chỉ lặp lại theo chiều ngang hoặc chiều dọc, no-repeat thì không cho phép hình ảnh lặp lại theo bất kỳ hướng nào.
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
3. Vị trí ảnh nền
Có thể sử dụng thuộc tính background-position để thay đổi vị trí của hình ảnh trong nền.
<html>
<head>
<style type="text/css">
body {
background-image: url(/i/eg_bg_03.gif);
background-repeat: no-repeat;
background-position:center;
}
</style>
</head>
<body>
</body>
</html>
Cách định vị:
Có từ khóa: (center, top, bottom, right, left) - trung tâm, trên, dưới, trái, phải. Kết hợp hai từ để định vị.
<style type="text/css">
body {
background-image: url(/i/eg_bg_03.gif);
background-repeat:no-repeat;
background-position:top left;
}
</style>
Cách phần trăm
Đôi khi các từ khóa trên không đủ, chúng ta có thể sử dụng cách phần trăm.
<style type="text/css">
body {
background-image: url(/i/eg_bg_03.gif);
background-repeat:no-repeat;
background-position:20% 100%;
}
</style>
Phần trăm này cũng được tạo thành từ hai số phần trăm. Số phần trăm đầu tiên đại diện cho "cách bên trái bao xa", số phần trăm thứ hai đại diện cho "cách phía trên bao xa".
4. Đính kèm nền
Nếu tài liệu dài, khi tài liệu cuộn xuống, hình ảnh nền cũng sẽ cuộn theo. Khi tài liệu cuộn vượt qua vị trí của hình ảnh, hình ảnh sẽ biến mất.
Bạn có thể sử dụng thuộc tính background-attachment để ngăn chặn việc này. Thông qua thuộc tính này, bạn có thể khai báo hình ảnh cố định so với vùng hiển thị (fixed), do đó không bị ảnh hưởng bởi việc cuộn.
<html>
<head>
<style type="text/css">
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
<p>Hình ảnh không cuộn theo phần còn lại của trang.</p>
</body>
</html>
Văn bản (Text)
Thuộc tính văn bản CSS có thể định nghĩa giao diện của văn bản.
Bằng cách sử dụng thuộc tính văn bản, bạn có thể thay đổi màu văn bản, khoảng cách ký tự, căn chỉnh văn bản, trang trí văn bản, thụt lề văn bản, v.v.
Phông chữ (Font)
Thuộc tính phông chữ CSS định nghĩa họ phông chữ, kích thước, độ đậm, kiểu (như nghiêng) và biến thể (như chữ hoa nhỏ) của văn bản.
Danh sách (List)
Thuộc tính danh sách viết tắt:
ul { list-style:square inside url('/i/arrow.gif'); } /* Giá trị đầu tiên là kiểu, giá trị thứ hai là vị trí, giá trị thứ ba là URL ảnh */
1. Kiểu danh sách - list-style-type
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frontend Development-CSS-1</title>
<style type="text/css">
ul.circle {list-style-type:circle} /* Hình tròn */
ul.square {list-style-type:square} /* Hình vuông*/
ol.upper-roman {list-style-type:upper-roman} /* Ký hiệu La Mã I II */
ol.lower-alpha {list-style-type:lower-alpha} /* Ký hiệu Hy Lạp --! a b c d */
</style>
</head>
<body>
<div>
<p>Hình tròn:</p>
<ul class="circle">
<li>Cà phê</li>
<li>Trà</li>
<li>Coca Cola</li>
</ul>
<p>Hình vuông:</p>
<ul class="square">
<li>Cà phê</li>
<li>Trà</li>
<li>Coca Cola</li>
</ul>
<p>Ký hiệu La Mã:</p>
<ol class="upper-roman">
<li>Cà phê</li>
<li>Trà</li>
<li>Coca Cola</li>
</ol>
<p>Ký hiệu Hy Lạp:</p>
<ol class="lower-alpha">
<li>Cà phê</li>
<li>Trà</li>
<li>Coca Cola</li>
</ol>
</div>
</body>
</html>
2. Ảnh danh sách list-style-image
<html>
<head>
<style type="text/css">
ul { list-style-image: url('/i/eg_arrow.gif')}
</style>
</head>
<body>
<ul>
<li>Cà phê</li>
<li>Trà</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
3. Vị trí biểu tượng list-style-position
<html>
<head>
<style type="text/css">
ul.inside { list-style-position: inside }
ul.outside { list-style-position: outside }
</style>
</head>
<body>
<p>Giá trị của list-style-position của danh sách này là "inside":</p>
<ul class="inside">
<li>Trà Earl Grey - Loại trà đen</li>
<li>Trà Jasmine - Loại trà "đa năng" kỳ diệu</li>
<li>Trà Honeybush - Loại trà trái cây dễ chịu</li>
</ul>
<p>Giá trị của list-style-position của danh sách này là "outside":</p>
<ul class="outside">
<li>Trà Earl Grey - Loại trà đen</li>
<li>Trà Jasmine - Loại trà "đa năng" kỳ diệu</li>
<li>Trà Honeybush - Loại trà trái cây dễ chịu</li>
</ul>
</body>
</html>
Mô hình hộp (Box Model)
Có thể bạn đã nhận thấy, tất cả các phần tử HTML về cơ bản là các khối hình chữ nhật nhỏ, đại diện cho một vùng nhất định.
Lấy trang web của Xiaomi làm ví dụ, màn hình đầu tiên được chia thành nhiều hộp như vậy, và giống như các hộp thông thường, chúng cũng có thể chứa các hộp nhỏ.
Từ hình trên, chúng ta có thể thấy phạm vi của mô hình hộp chuẩn W3C bao gồm margin, border, padding, content, và phần content không chứa các phần khác.
content: Đây là nội dung thực tế (văn bản, ảnh) (thực tế là chiều cao và chiều rộng của nội dung)
border: Là đường viền, bao quanh hộp, hoặc mép (đường viền bao quanh nội dung và phần đệm, nó có thể có chiều rộng và có 4 hướng)
padding: Là khoảng cách từ nội dung đến đường viền, có thể có trên, dưới, trái, phải (khoảng cách từ nội dung đến mép trong của hộp, có 4 hướng)
margin: Phần đệm ngoài có thể hiểu là, đường viền mở rộng cần chiếm bao nhiêu không gian, cũng có trên, dưới, trái, phải (khoảng cách từ mép ngoài của đường viền hộp này đến mép ngoài của đường viền hộp khác)
Vấn đề tương thích mô hình
1. Giá trị margin: Nếu hai hộp được đặt theo chiều dọc, hộp trên có giá trị margin-bottom, hộp dưới có giá trị margin-top, thì giá trị thực tế giữa các hộp không phải là tổng của chúng mà là giá trị lớn nhất. Có một trường hợp đặc biệt khi chúng float lên, giá trị sẽ là tổng.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
border: 10px solid red;
margin-bottom: 30px
}
.box2 {
border: 10px solid blue;
margin-top: 10px
}
</style>
</head>
<body>
<div style="position: fixed; top: 50%; left: 50%; width: 200px; background-color: chartreuse">
<div class="box1"> Box1 </div>
<div class="box2"> Box2 </div>
</div>
</body>
</html>
Giải pháp: Chỉ viết một trong hai, hoặc để hộp float lên.
2. Giá trị margin: Khi các hộp có mối quan hệ cha-con, nếu hộp cha không có giá trị margin-top và padding, thì margin-top của hộp con sẽ được kế thừa từ hộp cha.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 { width: 100px; height: 100px; background-color:red; }
.box2 { width: 100px; height: 100px; background-color:orange;}
p {width: 50px; height: 50px; margin-top: 20px; background-color: black}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<p></p>
</div>
</body>
</html>
Nguyên nhân vấn đề:
Xem thêm về overflow, đây cũng là một xử lý tràn, bản chất của overflow là ẩn tràn nhưng ở đây là thu lại tràn~
Giải pháp: Thêm vào hộp cha: overflow:hidden ẩn tràn
.box2 { width: 100px; height: 100px; background-color:orange; overflow: hidden}
3. Cách viết thuộc tính hộp
<!--
Kích thước:
width
height
----------------------------------------
Phần đệm trong [padding]:
padding: 10px 20px 30px 40px; Trên dưới trái phải
padding: 10px; 4 hướng
padding: 10px 20px 30px; Trên trái phải dưới
padding: 10px 20px; Trên dưới trái phải
----------------------------------------
Phần đệm ngoài [margin]: giống như padding
margin: 10px 20px 30px 40px; Trên dưới trái phải
margin: 10px; 4 hướng
margin: 10px 20px 30px; Trên trái phải dưới
margin: 10px 20px; Trên dưới trái phải
----------------------------------------
Đường viền [border]:
border-top-width: 20px;
border-top-style: solid;
border-top-color: red;
Viết tắt: border-top: 20px solid red; Độ rộng Kiểu màu
Tương tự: có 4 hướng trên dưới trái phải đều có thể cấu hình theo cách trên
Nếu 4 đường viền giống nhau:
border: 20px solid red; Tương tự
-->
Định vị CSS (CSS Positioning)
CSS có ba cơ chế định vị cơ bản: luồng thông thường, float và định vị tuyệt đối.
Trừ khi được chỉ định riêng, tất cả các khung đều được định vị trong luồng thông thường. Điều này có nghĩa là vị trí của các phần tử trong luồng thông thường được xác định bởi vị trí của chúng trong (X)HTML.
Các khung cấp khối được xếp chồng lên nhau từ trên xuống dưới, khoảng cách dọc giữa các khung được tính từ lề dọc của khung.
Định vị tương đối (Relative positioning)
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Khi sử dụng định vị tương đối, dù có di chuyển hay không, phần tử vẫn chiếm không gian ban đầu. Do đó, di chuyển phần tử sẽ làm nó che phủ các khung khác.
Định vị tuyệt đối (Absolute positioning)
Thuộc tính absolute thường bị hiểu sai. Nó luôn được định vị theo cửa sổ trình duyệt, thực ra đây là đặc điểm của thuộc tính fixed.
Khi sub1 có thuộc tính position được đặt thành absolute, nó định vị dựa trên đối tượng nào? Có hai trường hợp:
1. Khi đối tượng cha của sub1 (hoặc đối tượng tổ tiên, miễn là đối tượng cha) parent cũng có thuộc tính position và giá trị của position là absolute hoặc relative, tức là không phải giá trị mặc định, thì sub1 sẽ định vị theo parent (trong đối tượng cha).
2. Nếu sub1 không có đối tượng cha nào có thuộc tính position, thì nó sẽ định vị theo body, tức là theo cửa sổ trình duyệt.
<div style="position:relative;background-color: blue;height:100px;">
<!--Khi đối tượng cha của sub1 (hoặc đối tượng tổ tiên, miễn là đối tượng cha) parent cũng có thuộc tính position-->
<div style="position:absolute;right: 0px;bottom:0px;background-color: blueviolet">su1</div>
</div>
<div style="background-color: blue;height:100px;">
<!--Khi đối tượng cha của sub1 (hoặc đối tượng tổ tiên, miễn là đối tượng cha) parent cũng có thuộc tính position-->
<div style="position:absolute;right: 0;bottom:0;background-color: blueviolet">su1</div>
</div>
<div style="height: 1000px; background-color: aqua">
shuai
</div>
Ở đây, hãy nhìn kỹ vị trí tôi định vị là góc dưới bên phải. Khi mở trang web, nó ở góc dưới bên phải, nhưng khi di chuột, hãy xem kết quả, nó không còn ở góc dưới bên phải. Do đó, nếu cấp cha không sử dụng position, cần phải cẩn thận.
fixed là absolute đặc biệt, tức là fixed luôn định vị theo body, tức là theo cửa sổ trình duyệt.
Phụ lục
Tràn (Overflow)
Ứng dụng: Trong một div có nhiều nội dung, nếu khung div không lớn, nội dung tràn ra ngoài thì sao? Tình huống chi tiết như hình dưới, mã:
<div style="height:100px;width: 500px; background-color:green;">
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
</div>
Giải pháp: Thêm kiểu overflow, mã:
<div style="overflow:auto;height:100px;width: 500px; background-color:green;">
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
tianshuai <br/>
</div>
Độ trong suốt (Opacity)
Độ trong suốt được sử dụng nhiều, cần lưu ý, ví dụ mã đơn giản:
<div style="background-color:blue;height:100px;padding-top:30px">
<!--Đặt độ trong suốt cho div bên trong-->
<div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;">
</div>
</div>
Tầng (Z-index)
Hầu hết các trình duyệt chính đều hỗ trợ tầng. Chúng ta có thể sử dụng z-index + float + độ trong suốt để tạo một ví dụ.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frontend Development-CSS-1</title>
<style type="text/css">
.container-main {
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
background-color: rgba(0,0,0,0.1);
z-index: 1;
}
.cover-main {
position: absolute;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
Nội dung chính là màu trắng
<div class="container-main">
<div class="cover-main">
test
</div>
</div>
</body>
</html>
Độ cong (Border-radius)
Ngoài pixel, bạn cũng có thể sử dụng phần trăm để chỉ định giá trị bán kính đường viền border-radius. Khi border-radius là 50%, nó sẽ là một hình tròn.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.container-main{
position: fixed;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
background-color: chartreuse;
border-radius: 10%;
}
</style>
</head>
<body>
<div class="container-main">
</div>
</body>
</html>