Người Viết : ViKiMi Editor

Lập trình website không thể thiếu những tuỳ chỉnh hiển thị cần thiết đi cùng ngôn ngữ đánh dấu HTML. Với css là rất nhiều thuộc tính cần phải sử dụng đúng để có thể hiển thị như mong muốn. Nếu việc hiển thị không được như mong muốn thì cần kiểm tra lại cho đúng cú pháp. Sau đây là những thuộc tính điển hiển cho hiển thị của CSS mà chúng ta nên lưu ý :
1 ) Thuộc tính nhóm *
* {
margin : 0;
padding :0;
font-size : 2em;
font-size : 32px;
}
Trên đây là bộn chọn hay dùng với mỗi lập trình viên. Việc lựa chọn bộ chọn này sẽ giúp bạn tiết kiệm thời gian phát triển hơn.
Bộ chọn với biểu tượng * giúp bạn chọn tất cả các phần tử trong website của bạn để tuỳ chỉnh cho các thuộc tính trong bộ chọn mà bạn đã thiết lập các thuộc tính. Tuy nhiên, bạn cần nhớ rằng với các thuộc tính được dùng cho trang web cũng giống như bạn trang trí cho 1 gian hàng vậy. Thuộc tính được định nghĩa cho tất cả các phần tử web cũng chỉ là định nghĩa chung được định nghĩa với bộ chọn * và nó cũng sẽ được định nghĩa lại tại các phần tử con. Tại mỗi một phần tử con khi các thuộc tính được định nghĩa lại thì các phần tử con sẽ mang thuộc tính được định nghĩa riêng cho phần tử con.
Ví dụ ở trên là áp dụng cho tất cả các phần tử với bộ chọn * . Tuy nhiên giả sử ta có phần tử aftervalCal với định nghĩa ở dưới thì chúng ta sẽ có aftervalCal với các giá trị thiết lập đã khác :
#aftervalCal {
margin : 12px;
padding :12px;
font-size : 5em;
font-size : 80px;
}
Bộ chọn ngôi sao sẽ nhắm chọn mọi phần tử trên trang. Ở đây dùng để loại bỏ margin và padding. Chúng ta cũng cần lưu ý hãy để css tại header nhé. Nơi khác là không cần thiết.
Dấu * cũng cũng cho phép ta chọn tất cả các phần tử con trong 1 phần tử phân cấp lớn hơn. Ví dụ dưới đây là các phần tử trong phần tử #container sẽ được định nghĩa border. Tương tự cho các trường hợp khác.
#container * {
border: 1px solid black;
}
Điều này cho phép chọn các phần tử là con của div #container.
2 ) Thiêt lập id cho 1 phần tử website #X ( X: là tên id )
#container {
max-width: 960px;
min-height: auto;
}
Khi chúng ta định nghĩa id cho 1 phần tử của website thì chúng ta sẽ gán biểu tượng # cho bộ chọn mà chúng ta chọn để thiết lập id. Với mỗi id sẽ giúp chúng ta thiết lập các giá trị thuộc tính css cho bộ chọn ( giả dụ là thẻ div ) nhanh chóng gọn gàng và dễ quản lý. Chúng ta thấy ở trên là định nghĩa mà chúng ta thấy. Tuy nhiên do yêu cầu phát triển thì bạn cũng có thể tự định nghĩa theo cách bạn áp dụng. ví dụ :
#container {
max-width: 960px;
min-height: auto;
... /* Đoạn này bạn có thể định nghĩa theo ý mình
và đoạn max-width, min-height bạn cũng có thể bỏ nếu cần */
}
Đây là một cách sử dụng dễ dàng và phổ biến id.
Bộ chọn id cho phép bạn tái dùng nhiều lần tại một trang web. Nó rất hữu ích, đó là điều chúng ta đã thấy. Lưu ý rằng bạn có thể định nghĩa thêm class để bổ trợ cho id, như vậy sẽ thuận tiện cho tuỳ biến. Chúng ta lưu ý id như 1 định danh nên hãy chọn tên cho id thật dễ hiểu.
3 ) Thiết lập class .X cho các bộ chọn ( X là tên class )
.error {
color: red;
}
Trên đây là định nghĩa class cho các phần tử hay bộ chọn của website.
Chúng ta luôn dùng id và class để bổ trợ nhau. Và với class, bạn có thể chọn cho nhiều phần tử. Sử dụng các class khi bạn muốn phong cách của bạn được áp dụng cho một nhóm các phần tử. Sử dụng id để tìm một phần tử duy nhất, và chỉ định phong cách cho phần tử cụ thể đó.
Ví dụ :
<div id='PTSo1' class='class1 class2 class3'>Phần tử 1</div>
với trên thì có css (có thể viết tại file style.css) là:
#PTSo1{
..... /*Viết thuộc tính ở đây*/
}
.class1{
..... /*Viết thuộc tính ở đây*/
}
.class2{
..... /*Viết thuộc tính ở đây*/
}
.class3{
..... /*Viết thuộc tính ở đây*/
}
4 ) Cách thiết lập chọn phần tử con X Y ( Phần tử phân cấp cao hơn là X và phần tử phân cấp con là Y )
ul li a {
text-decoration: none; /* Gạch chân cho link liên kết a là không cần */
}
Ở trên thì chúng ta dùng bộ chọn phần tử con để chọn tới link liên kết a nhé. Lần lượt phân cấp của các phần tử cấu tạo nên website là ul đến li, tiếp đến là link liên kết a.
Chúng ta có thể hiểu như sau :
– Với file html là
<html>
<header>
<style>
ul li a {
text-decoration: none; /* Gạch chân cho link liên kết a là không cần */
}
</style>
</header>
<body>
<div id='idVIDU'>
<ul>
<li> <a href='comeon.html'/></li>
<li> <a href='comeon-next.html'/></li>
</ul>
</div>
</body>
<footer> </footer>
</html>
Bộ chọn phần tử bạn sẽ chọn dùng khi cần cụ thể hơn với các bộ chọn của bạn, thì bạn hãy sử dụng. Chúng ta cũng có áp dụng cho các phần tử theo thứ tự mong muốn thay vì như ví dụ trên chúng ta chọn cho tất cả link liên kết a trong ul nhé.
5 ) Bộ chọn cho 1 kiểu phần tử X của website. Ví dụ X là thẻ liên kết a
a { color: red; }
ul { margin-left: 0; }
Nếu bạn muốn chọn tới tất cả các kiểu phần tử thuộc 1 trang thì bạn có thể chỉ rõ kiểu phần tử đó như là : link liên kết a, hay kiểu phần danh sách ul …
Đó là cách bạn chọn và sử dụng một bộ chọn theo kiểu. Nếu bạn cần nhắm chọn tất cả các danh sách không có thứ tự, hãy sử dụng ul {}.
6 ) Bộ chọn cho link liên kết X:visited và X:link
a:link { color: red; }
a:visted { color: purple; }
Ở đây chúng ta sử dụng để thiết lập thuộc tính cho link liên kết. Cụ thể là với :link là để nhắm tới tất cả linh liên kết a chưa được nhấp vào. Và cũng có thể dùng :visited để nhắm tới link liên kết a trên trang đã được nhấp vào, hoặc đã truy cập để thiết lập thuộc tính.
7 ) Bộ chọn liền kề X + Y
ul + p {
color: red;
}
Khi sử dụng bộ chọn liền kề sẽ cho phép chọn phần tử mà nằm ngay sau phần tử trước đó. Trong trường hợp này, chỉ áp dụng đoạn văn thẻ p đầu tiên sau mỗi ul sẽ có chữ màu đỏ.
<ul>
<p> Đoạn văn bản này áp dụng css trên </p>
<p> Đoạn văn bản này thì không áp dụng css trên </p>
<p> Đoạn văn bản này thì không áp dụng css trên </p>
</ul>
8 ) Bộ chọn phần tử con trực tiếp X > Y
div#container > ul {
border: 1px solid black;
}
Tại đây, bộ chọn phần tử con trực tiếp cho phép ta chọn phần tử con trực tiếp của 1 phần tử có phân cấp cao hơn. Thay vì chọn tất cả các phần tử bên trong phần tử có phân cấp cao hơn mà không cần biết phần tử được chọn có phải là phần tử con trực tiếp không.
Chúng ta cần chú ý là : Sự khác biệt giữa X Y tiêu chuẩn và X > Y đó là cái sau sẽ chỉ chọn phần tử con trực tiếp. Ví dụ, Hãy thực hành đoạn mã đánh dấu.
div#container > ul {
border: 1px solid black;
}
<div id="container">
<ul>
<li> List Item
<ul>
<li>Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
Với đoạn css trên #container > ul sẽ chỉ áp dụng cho các ul mà là con trực tiếp của div container. Nó không áp dụng cho ul là phần tử con của li (phần bôi màu xanh).
Vì lý do này, có những lợi ích về hiệu năng trong việc sử dụng các phần tử con kết hợp. Khi làm việc với các công cụ chọn CSS dựa trên JavaScript sẽ ưu tiên hơn.
9 ) Bộ chọn áp dụng cho các phần tử theo sau X ~ Y (Chọn tất cả các phần tử Y theo sau X)
ul ~ p {
color: red;
}
<div id="container">
<ul>
<p> List Item
<ul>
<li>Child </li>
</ul>
</p>
<p> List Item </p>
<p> List Item </p>
<p> List Item </p>
</ul>
</div>
Bộ chọn này cho phép chọn tất cả các phần tử ngay sau phần tử có phân cấp cao hơn. Ở đây sẽ chọn tất cả các phần tử <p> sau phân cấp <ul>
Sự khác biệt giữa x ~ y và x + y là :
Trong khi một bộ chọn liền kề (ul + p) sẽ chỉ chọn phần tử (p) đầu tiên ngay sau (ul) .
Trong khi một bộ chọn phần tử tiếp theo (ul ~ p) Nó sẽ chọn bất kỳ phần tử <p> nào theo sau <ul>, miễn là chúng theo sau một ul.
10 ) Bộ chọn thuộc tính X[title]
a[title] {
color: green;
}
Với bộ chọn thuộc tính, sẽ cho phép chúng ta thiết lập thuộc tính css cho các phần tử được chọn theo thuộc tính đã thiết lập của chúng tại văn bản đánh dấu HTML.
Cụ thể :
– Văn bản đánh dấu HTML sẽ chứa thẻ <a> với title được thiết lập là ‘heaftich’
<html>
<header>
<style>
ul li a {
text-decoration: none; /* Gạch chân cho link liên kết a là không cần */
}
</style>
</header>
<body>
<div id='idVIDU'>
<ul>
<li> <a title = ‘heaftich’ href='comeon.html'/></li>
<li> <a href='comeon-next.html'/></li>
</ul>
</div>
</body>
<footer> </footer>
</html>
– Đoạn css này chỉ áp dụng cho các thẻ <a> đã thiết lập thuộc tính title trong mã đánh dấu HTML. Với các thẻ <a> không thiết lập thuộc tính tittle thì không được áp dụng đoạn css này nhé.
a[title] {
color: green;
}
Tương tự cho các phần tử khác được thiết lập thuộc tính nhé. Bạn có thể tìm hiểu thêm.
11 ) Bộ chọn cụ thể X[href=”foo”] chúng ta sẽ áp dụng cụ thể cho một phần tử có đúng chỉ định rõ đã yêu cầu
a[href="https://vikimi-infotech.com"] {
color: darkgreen; /* darkgreen */
}
Áp dụng css trên cho tất cả các thẻ liên kết liên kết có href=”https://vikimi-infotech.com“; chúng sẽ nhận được màu xanh của chúng ta. Tất cả các thẻ liên kết khác sẽ không bị ảnh hưởng.
Lưu ý rằng chúng ta đang bao các giá trị trong dấu ngoặc kép. Đồng thời hãy nhớ làm điều này khi sử dụng công cụ chọn CSS dựa trên JavaScript. Để đảm bảo hoạt động được đồng bộ.
Điều gì xảy ra nếu các liên kết không thực sự hướng đến https://vikimi-infotech.com, mà đường dẫn vikimi-grien.com sẽ thay vì url đầy đủ? Trong những trường hợp đó chúng ta có thể sử dụng một chút biểu thức chính quy ngôn ngữ lập trình nhé.
thức chính quy ngôn ngữ lập trình nhé.