Bài 6: Tiếp cận sâu hơn, hiểu rõ hơn về CSS

Ở bài "Xây dựng website đầu tiên", mình đã giới thiệu đến bạn về CSS, và cách sử dụng một số thuộc tính cơ bản rồi. Nhưng đó chỉ là cưỡi ngựa xem hoa thôi :). Ở bài này mình sẽ giới thiệu sâu hơn, để các bạn hiểu rõ hơn về cách sử dụng CSS. Sau bài này, mình tin rằng, bạn sẽ đủ kiến thức để biết cách sử dụng CSS linh hoạt hơn với HTML.

Chú ý: Trước khi tiếp tục bài này, bạn hãy ôn lại các kiến thức về CSS mà mình đã giới thiệu ở bài 3 nhé. Đặc biệt là khái niệm về Selectors (Bộ chọn), Properties (Thuộc tính), và Values (Giá trị)

1. Làm việc với Selectors (Bộ chọn).

Như bài trước mình đã đề cập, bộ chọn dùng để xác định phần tử nào đó trong HTML mà bạn muốn áp dụng kiểu. Nhưng điều quan trọng, là bạn cần phải hiểu cách sử dụng bộ chọn một cách đầy đủ.

Bài học này mình sẽ để các bạn làm quen với các loại bộ chọn khác nhau, và chúng ta chỉ bắt đầu với các loại bộ chọn phổ biến nhất thường xuyện được sử dụng, còn các loại bộ chọn phức tạp hơn mình sẽ từ từ giới thiệu đến bạn trong các bài học sau.

Element Selectors (Bộ chọn theo phần tử)

Bộ chọn này các bạn đã sử dụng trong bài "Xây dựng website đầu tiên" rồi đấy. Tức là chúng ta có thể xác định các phần tử muốn tạo kiểu theo tên của phần từ đó. Tên của phần tử chính là Tag (Thẻ) tạo nên phần từ đó đấy các bạn, ví dụ như div, p, h1, a,...

Các bạn xem ví dụ dưới đây, css sẽ chọn ra tất cả các phần tử được tạo nên từ thẻ <h1>, và thiết lập màu chữ cho nó là màu đen. Tương tự, css thiết lập màu chữ là màu nâu cho tất cả các phần tử được tạo từ thẻ <p>.

CSS

h1{
    color: black;
}
p{
    color:Brown;
}

HTML

<h1>Hoàng Phi IT's Blog</h1>
<p>Cảm ơn mọi người đã ghé thăm website của mình.</p>
<p>Rất vui khi được làm quen với các bạn :)</p>

Xem kết quả

Class Selectors (Bộ chọn theo class)

Bộ chọn này cho phép chúng ta chọn ra một phần tử dựa trên giá trị của thuộc tính class. Bạn nào không còn nhớ thuộc tính (Attributes) là gì thì nên đọc lại bài 2 xí nhé :).

Để chọn phần tử theo class chúng ta chỉ cần khai báo thuộc tính class cho phần tử đó và gọi nó ở css theo giá trị của thuộc tính class. Như ví dụ dưới đây, mình tạo ra một phần tử <p> có thuộc tính class với giá trị là center. Sau đó ở css mình gọi phần tử đó bằng cách khai báo một dấu chấm (.) kèm theo tên của class.

CSS

.center {
  text-align: center;
  color: red;
}

HTML

<p class="center">Rất vui khi được làm quen với các bạn :)</p>

Xem kết quả

Bộ chọn class cho phép chúng ta áp dụng cùng một kiểu cho nhiều phần tử khác nhau cùng lúc, bằng cách chúng ta đặt cùng tên class cho các phần tử đó. (Xem ví dụ dưới)

CSS

.awesome {
   text-align: left;
   color: red;
   font-size: 14px;
}

HTML

<h1 class="awesome">Hoàng Phi IT's Blog</h1>
<p class="awesome">Cảm ơn mọi người đã ghé thăm website của mình.</p>
<p class="awesome">Rất vui khi được làm quen với các bạn :)</p>

Xem kết quả

Đặc biệt, chúng ta có thể tạo nhiều class cho một phần tử, để cùng lúc phần tử đó có thể nhận nhiều áp dụng kiểu khác nhau từ CSS. Như ví dụ dưới đây, các bạn thấy mình tạo phần tử <h1> có 2 class là awesome và heading (Bạn có thể tạo bao nhiêu class tuỳ mục đích của bạn, mỗi class được tách biệt nhau bằng một khoảng trống, và chú ý, tên class không được bắt đầu bằng số nhé).

CSS

.heading {
    font-size: 20px;
    color: blue;
}
.awesome {
    text-align: center;
}
p.awesome {
    font-size: 14px;
    color: black;
}

HTML

<h1 class="awesome heading">Hoàng Phi IT's Blog</h1>
<p class="awesome">Cảm ơn mọi người đã ghé thăm website của mình.</p>
<p class="awesome">Rất vui khi được làm quen với các bạn :)</p>

Xem kết quả

Mình phân tích một chút ở ví dụ này cho bạn dễ hiểu hơn nhé:

1. Đầu tiên, phần tử <h1> có 2 class awesome và heading, nên cùng lúc, nó nhận 2 áp dụng kiểu từ CSS trong khai báo .awesome và .heading. Như vậy tổng số kiểu mà thằng này nhận được là: font-size: 20px; color: blue; text-align: center;

2. Tiếp theo, 2 phần tử <p> đều có class awesome, nên tất nhiên 2 thằng này sẽ nhận áp dụng kiểu từ CSS trong khai báo .awesome. Nhưng có một chổ đặc biệt, các bạn thấy mình khai báo p.awesome không?. Cách khai báo như này dùng để xác định, chỉ những phần tử <p> có class là awesome bị ảnh hưởng thôi, chứ như ví dụ trên, phần tử <h1> cũng có class awesome, nhưng sẽ không bị ảnh hưởng bởi khai báo này nhé.

ID Selectors (Bộ chọn theo id)

Bộ chọn này cho phép chúng ta chọn ra một phần tử dựa trên giá trị của thuộc tính ID. Cũng giống như class, để chọn phần tử theo ID chúng ta chỉ cần khai báo thuộc tính id cho phần tử đó và gọi nó ở css theo giá trị của thuộc tính ID đó.

Như ví dụ dưới đây, mình tạo ra một phần tử <p> có thuộc tính id với giá trị là introduction. Sau đó ở css mình gọi phần tử đó bằng cách khai báo một dấu chấm (#) kèm theo tên của id.

CSS

#introduction {
    text-align: center;
    color: red;
}

HTML

<p id="introduction">Chào bạn, mình là Hoàng Phi. Rất vui khi được làm quen với các bạn :)</p>

Xem kết quả

Một điều quan trọng, mọi người cần lưu ý giúp mình. ID của một phần tử là duy nhất trong một trang HTML. Có nghĩa là: nếu bạn đã tạo một phần tử có ID là introduction rồi, thì không thể có một phần tử thứ hai có ID là introduction nữa. Thuộc tính id cũng chỉ được thiết lập một giá trị duy nhất thôi, không giống như class, một phần tử có thể có nhiều class đâu nhé. Và tên của ID không được bắt đầu bằng số.

Grouping Selectors (Bộ chọn theo nhóm)

Bộ chọn nhóm giúp chúng ta có thể chọn nhiều phần tử cùng lúc để tạo kiểu, nếu chúng có định nghĩa kiểu giống nhau.

Các bạn xem ví dụ ở dưới, các phần tử <h1>, <h2> và <p> có cùng định nghĩa kiểu:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

Các bạn thấy 3 thằng trên đều được định nghĩa kiểu giống nhau cả, mà phải tách ra thế thì nhìn code dài dòng quá. Vậy nên, sẽ tốt hơn nếu chúng ta gom nhóm nó lại như sau:

h1, h2, p {
    text-align: center;
    color: red;
}

Như vậy sẽ gọn hơn rất nhiều đúng không nào?. Các bạn muốn nhóm bao nhiêu phần tử cũng được cả, và mỗi phần tử được tách biệt nhau bằng dấu phẩy (,) như ví dụ trên. À có thể sử dụng được cả với ID, hoặc class nữa nha. Ví dụ:

h1, h2, p, #introduction, .awesome {
    text-align: center;
    color: red;
}

Combining Selectors (Bộ chọn kết hợp)

Bộ chọn này giúp chúng ta có thể xác định cụ thể một phần tử con nằm trong một phần tử cha nào đó, hoặc là chúng ta có thể kết hợp các bộ chọn mà mình đã giới thiệu ở trên cùng lúc, để cụ thể hoá hơn trọng việc xác định một phần tử nào đó muốn tạo kiểu.

Các bạn xem ví dụ dưới. Mình tạo ra 2 phần tử cha có class introduction1 và introduction2, trong chúng đều có phần tử con <p>, nhưng mình muốn định nghĩa kiểu cho phần tử <p> trong introduction1 và phần tử <p> trong introduction2 khác nhau.

CSS

.introduction1 p {
    font-size: 20px;
    color: blue;
}
.introduction2 p {
    font-size: 15px;
    color: red;
}

HTML

<div class="introduction1">
    <p>Cảm ơn mọi người đã ghé thăm website của mình.</p>
</div>
<div class="introduction2">
    <p>Rất vui khi được làm quen với các bạn :)</p>
</div>

Xem kết quả

Các bạn chú ý cách khai báo CSS ở trên nha. Mình đã sử dụng cùng lúc 2 loại bộ chọn là Class Selector và Element Selector, để xác định cụ thể phần tử con của phần tử cha nào đó. Trong HTML, một phần tử con có thể được bao bọc bởi rất nhiều phần tử cha. Nên nếu bạn muốn xác định cụ thể thì chỉ cần khai báo từ trái qua phải, từ phần tử cha lớn nhất đến phần tử con muốn xác định để tạo kiểu, được tách biệt bằng một khoảng trống. Xem ví dụ dưới để hiểu nhé.

CSS

.introduction p #spanname{
    font-size: 20px;
    color: red;
}

HTML

<div class="introduction">
    <p>Mình là <span id="spanname">Hoàng Phi</span>. Cảm ơn mọi người đã ghé thăm website của mình.</p>
</div>

Xem kết quả

2. Làm việc với màu sắc (CSS Colors)

Màu sắc rất quan trọng trong cuộc sống đúng không nào?, có màu sắc thì thế giới quan của chúng ta mới đẹp được. Trong website cũng thế, bạn thử làm ra một website toàn màu đen với trắng thì ai nhìn đúng không? :D. May mắn là trong CSS hỗ trợ rất tốt về mặt màu sắc, chúng ta có thể tạo ra hàng triệu màu khác nhau, và gần như bất kỳ màu nào mà chúng ta muốn.

Hiện tại, có bốn cách chính để thế hiện màu sắc trong CSS. Đó là theo Tên màu (Color names), theo mã màu HEXA, RGB hoặc HSL. Kiểu như cùng một màu thôi, nhưng CSS hỗ trợ bốn cách khai báo khác nhau, bạn muốn dùng cách nào thì tuỳ sở thích hay mục đính của bạn. Nhưng riêng cách khai báo theo Color names thì CSS chỉ hỗ trợ đâu đó khoảng 140 màu thôi nhé, chứ không hỗ trợ hết mấy triệu màu luôn đâu :). Bạn có thể xem toàn bộ danh sách Color names ở đây.

Dưới đây là bảng danh sách một số màu phổ biến, mình vẽ ra để ví dụ cho các bạn hiểu về 4 cách khai báo màu trong CSS. Ví dụ như màu đen, được thể hiện theo Color Name là black, thể hiện theo HEXA là #00000, theo RGB là rgb(0, 0, 0), và theo HSL là hsl(0, 0%, 0%).

Các bạn xem ví dụ dưới đây để hiểu hơn cách dùng bốn cách khai báo màu sắc trong CSS nha. Mình tạo ra bốn phần tử <p> có màu văn bản như nhau nhưng thể hiện dưới bốn cách khai báo khác nhau:

<p style="color: purple;">Cảm ơn mọi người đã ghé thăm website của mình.</p>
<p style="color: #800080;">Cảm ơn mọi người đã ghé thăm website của mình.</p>
<p style="color: rgb(128, 0, 128);">Cảm ơn mọi người đã ghé thăm website của mình.</p>
<p style="color: hsl(300, 100%, 25%);">Cảm ơn mọi người đã ghé thăm website của mình.</p>

Xem kết quả

Để tiện lợi hơn cho bạn có thể chọn bất kỳ màu nào mà bạn muốn, mình đã làm một công cụ chọn màu ở đây. Các bạn chỉ cần mở công cụ này lên, chọn một màu mà mình thích, nó sẽ hiển thị mã màu cho các bạn bao gồm (HEX, RGB và HSL).

3. Kích thước trong CSS.

Kích thước dùng để chỉ độ lớn của một thứ gì đó đúng không nào?. Trong CSS cũng có khái niệm kích thước, dùng để xác định độ lớn về tính chất nào đó của một phần tử. Ví dụ như: độ lớn của văn bản (font-size), chiều rộng (width) hay chiều cao (height) của một phần tử nào đó,..v.v.

Trong CSS có hai loại kích thước, đó là Tương Đối và Tuyệt Đối. Cụ thể hai loại này như nào?, các bạn hãy đi uống một tách trà, rồi quay lại đọc kỹ nhé :).

Kích thước tuyệt đối

Kích thước tuyệt đối chắc khá đơn giản bạn, chúng ta gặp hằng ngày ấy mà, chính là kích thước được đo bằng các đơn vị vật lý, ví dụ như centimet (cm), milimet (mm), rồi kích thước màn hình Tivi hay màn hình máy tính người ta dùng Inch chẳng hạn. Còn trong đồ hoạ thì đơn vị phổ biến nhất đó là Pixel được ký hiệu là px.

Pixel có nghĩa là điểm ảnh, mình nghĩ các bạn nghe thuật ngữ này rất nhiều rồi. Ví dụ như màn hình máy tính, người ta hay hỏi độ phân giải của nó là bao nhiêu. Người thì dùng 1336x768px, người thì 1400x900px, có nghĩa là màn hình đó có chiều rộng là 1336px, chiều cao là 768px đấy. Hay một ví dụ khác. Các bạn thấy người ta bán điện thoại hay giới thiệu về Camera, máy thì 10 Megapixel (MP), máy thì 12 MP. Thì Megapixel ở đây có nghĩa là triệu điểm ảnh, 1MP là 1 triệu điểm ảnh đó các bạn. Camera 12MP thì khi chụp hình, có thể tạo ra được một bức hình với 12 triệu điểm ảnh, đâu đó kích thước của nó sẽ là 4000 x 3000 Pixel (Chiều rộng 4000px, chiều cao 3000px).

Để hiểu hơn về kích thước, các bạn hãy xem ví dụ dưới đây. Trong ví dụ này, mình sẽ giới thiệu cho các bạn 2 thuộc tính mới của CSS:

1. Thứ nhất là width: Thuộc tính này dùng để xác định chiều rộng của một phần tử, như ví dụ dưới mình xác định phần tử #namebox có chiều rộng là 400px.
2. Thứ hai là height: Thuộc tính này dùng để xác định chiều cao của một phần tử, như ví dụ dưới mình xác định phần tử #namebox có chiều cao là 150px.

CSS

#namebox{
    width: 400px;
    height: 150px;
    padding: 20px;
    background-color: #cccccc;
    text-align: center;
}
#nametext{
    font-size: 40px;
    color: #000000;
}

HTML

<div id="namebox">
    <p id="nametext">My name is Hoàng Phi.</p>
</div>

Xem kết quả

Kích thước tương đối

Kích thước tương đối không dùng đơn vị đo lường cố định như tuyệt đối, mà nó được tính theo tỷ lệ, dựa trên kích thước của một phần tử khác. Và đơn vị phổ biến nhất để dùng cho kích thước tương đối trong CSS là (%). Các bạn cùng xem ví vụ bên dưới, để hiểu về kích thước tương đối nha.

Ở ví dụ dưới, mình tạo ra một phần tử #parentbox có chiều rộng là 600px và chiều cao là 150px, sau đó mình tạo ra một phần tử con cho nó là #childbox, phần tử con này mình có xác định width: 50%;, có nhĩa là chiều rộng của nó sẽ bằng 50% so với chiều rộng của phần tử cha. Như vậy 50% của 600px sẽ là 300px đúng không nào. Chưa hết, các bạn thấy mình có xác định cho nó height: 100%;, có nghĩa là chiều cao của nó sẽ bằng 100% phần tử cha #parentbox, vậy nên chiều cao của nó sẽ tương đương là 150px;

CSS

#parentbox{
    width: 600px;
    height: 150px;
    background-color: #cccccc;
}
#childbox{
    width: 50%;
    height: 100%;
    background-color: #000;
}
#nametext{
    text-align: center;
    font-size: 40px;
    color: #ffffff;
}

HTML

<div id="parentbox">
    <div id="childbox">
        <p id="nametext">My name is Hoàng Phi.</p>
    </div>
</div>

Xem kết quả

4. Sử dụng CSS Resets.

Tại sao có khái niệm CSS Resets?.

Có thể bạn chưa biết rằng, hiện nay có rất nhiều trình duyệt web khác nhau được sử dụng rộng rãi (Như Chrome, Firefox, Safari, Opera...). Mỗi trình duyệt khác nhau sẽ được thiết lập một số thuộc tính CSS mặc định khác nhau, ví dụ như, cách mà trình duyệt chrome hiển thị phần tử tiêu đề <h1>, hay đoạn văn bản <p>, sẽ khác với cách mà trình duyệt Safari hiển thị.

Như vậy, để đảm bảo cho giao diện Website của chúng ta có thể hiễn thị một cách nhất quán trên tất cả các trình duyệt, người ta đã sinh ra kỹ thuật CSS Resets. Reset có nghĩa là đặt lại, ở đây các bạn cứ hiểu nôm na là đặt lại CSS mặc định mà thôi.

Nói ra có vẻ phức tạp, nhưng sử dụng nó đơn giản lắm các bạn à :). Bạn chỉ cần copy đoạn mã CSS bên dưới, vào trên cùng nội dung file CSS của trang web. Ví dụ trong mã ngồn của "Trang web đầu tiên" mà mình đã hướng dẫn các bạn xây dựng ở bài 2 và bài 3, các bạn copy đoạn mã này vào trên cùng nội dung của file style.css.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Bạn hãy nhớ, đây là công việc bạn cần thiết phải làm cho bất kỳ trang web nào bạn muốn xây dựng, vậy nên hãy lưu nó lại để sau này còn dòng nhé :).

OK, vậy là kết thúc nội dung bài học này, mình hy vọng rằng các bạn đã có thêm một lượng kiến thức nhất định về CSS, để hỗ trợ tốt cho những bài học tiếp theo. Và mình cũng hy vọng rằng các bạn có thể thực hành các kiến thức học được trong bài học này nhiều lần, bằng nhiều kiểu khác nhau, để có thể thông thạo về chúng.