CSS ( Cascading Style Styles hoặc Waterfall Style Files ) là mã bạn sử dụng để tạo kiểu cho trang web của mình. Trong Kiến thức cơ bản về CSS, chúng tôi sẽ trình bày mọi thứ bạn cần để bắt đầu. Chúng tôi trả lời các câu hỏi như:
Làm cách nào để làm cho văn bản của tôi có màu đen hoặc đỏ?
Làm cách nào để làm cho nội dung của tôi xuất hiện ở vị trí như vậy trên màn hình?
Làm cách nào để trang trí trang web của tôi bằng hình ảnh và màu sắc?
Vậy CSS là gì?
Giống như HTML, CSS không thực sự là một ngôn ngữ lập trình. Nó cũng không phải là một ngôn ngữ đánh dấu. Nó là một ngôn ngữ biểu định kiểu, nghĩa là nó cho phép bạn áp dụng kiểu cho các thành phần được chọn trong tài liệu HTML của mình. Ví dụ: để chọn tất cả các thành phần đoạn văn trong trang HTML của bạn và làm cho văn bản bên trong chúng có màu đỏ, bạn sẽ viết CSS này:
p {
color: red;
}
Hãy thử: sao chép ba dòng CSS này vào một tệp mới trong trình chỉnh sửa mã nguồn của bạn. Sau đó, bạn đặt tên cho tệp stijl.cssvà lưu nó vào thư mục biểu định kiểu của bạn (ví dụ: css hoặc style).
Nhưng chúng tôi vẫn cần áp dụng CSS cho tài liệu HTML của bạn, nếu không kiểu CSS sẽ không ảnh hưởng đến cách trình duyệt của bạn hiển thị tài liệu HTML như ví dụ của chúng tôi từ: [#85] . Bạn thực hiện việc này bằng cách sử dụng mã bên dưới trong chỉ mục giữa <head>thuộc tính.
<link href="scss/stijl.css" rel="stylesheet" type="text/css">
Giải phẫu một bộ quy tắc CSS
Chúng ta hãy xem xét kỹ hơn về CSS ở trên. Toàn bộ cấu trúc được gọi là bộ quy tắc (nhưng thường được rút ngắn thành “quy tắc kiểu”). Mỗi phần cũng có tên riêng:
Bộ chọn - Đây là tên thành phần HTML ở đầu bộ quy tắc. Nó chọn các thành phần mà một kiểu sẽ được áp dụng (trong trường hợp này là p-elements). Để tạo kiểu cho một phần tử khác, chỉ cần thay đổi bộ chọn.
Khai báo kiểu - Khai báo kiểu là một quy tắc kiểu duy nhất, chẳng hạn như color: red;. Tuyên bố xác định thuộc tính nào của phần tử sẽ được tạo kiểu.
Thuộc tính (properties) - Với thuộc tính, bạn có thể tạo kiểu cho một phần tử HTML (Trong trường hợp này nó là colorthuộc tính của các pphần tử -). CSS cho phép bạn chọn các thuộc tính mà bạn muốn tác động với quy tắc của mình.
Giá trị kiểu (giá trị thuộc tính) - Ở phía bên phải của thuộc tính, sau dấu hai chấm ( :), chúng ta tìm thấy giá trị kiểu có thể có nhiều dạng khác nhau cho mỗi thuộc tính (ngoài màu đỏ, còn có nhiều màu khác).
Đây là những phần quan trọng khác của cú pháp:
Mỗi bộ quy tắc (ngoại trừ bộ chọn) phải được đặt trong dấu ngoặc nhọn ( { }).
Trong mỗi khai báo kiểu, bạn phải sử dụng dấu hai chấm ( :) để phân tách thuộc tính khỏi các giá trị kiểu của nó.
Trong mỗi bộ quy tắc, bạn phải ;sử dụng dấu chấm phẩy ( ) để phân tách từng khai báo kiểu với khai báo kiểu tiếp theo.
Vì vậy để sử dụng nhiều giá trị kiểu cùng một lúc, bạn phải viết chúng riêng biệt và phân tách bằng dấu chấm phẩy như dưới đây:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Chọn nhiều phần tử
Bạn có thể chọn nhiều loại phần tử và áp dụng một quy tắc duy nhất cho tất cả chúng. Chúng được phân tách bằng dấu phẩy. Ví dụ:
p, li, h1 {
color: red;
}
Các loại bộ chọn khác nhau
Có nhiều loại bộ chọn khác nhau. Ở trên chúng tôi chỉ xem xét các bộ chọn phần tử. Đây là các bộ chọn chọn tất cả các thành phần thuộc một loại nhất định trong tài liệu HTML. Nhưng chúng ta có thể lựa chọn chính xác hơn thế nhiều. Dưới đây là các loại bộ chọn phổ biến nhất (còn nhiều hơn nữa):
| Tên bộ chọn | Những gì nó chọn | Ví dụ |
|---|
| Bộ chọn phần tử (đôi khi được gọi là bộ chọn nhãn hoặc loại) | Tất cả các phần tử HTML thuộc loại đã chọn. | pchọn lọc<p> |
| bộ chọn ID | Phần tử trên trang đã được gán ID làm thuộc tính (trong trang HTML, chỉ cho phép một phần tử cho mỗi ID). | #devnl-voorbeeldchọn <p id="devnl-voorbeeld">hoặc ví dụ:<a id="devnl-voorbeeld"> |
| Bộ chọn lớp | Một hoặc nhiều thành phần trên trang đã được gán một lớp cụ thể làm thuộc tính. (Trong tiếng Hà Lan đây là một lớp, nhưng bạn phải sử dụng ‘lớp’ tiếng Anh làm bộ chọn.) (các phần tử khác nhau có thể có cùng một lớp). | .devnl-voorbeeldchọn <p class="devnl-voorbeeld">hoặc ví dụ:<a class="devnl-voorbeeld"> |
| Bộ chọn thuộc tính | Một hoặc nhiều thành phần trên trang có thuộc tính cụ thể. | imgchọn lọc<img src="myimage.png"> |
| Bộ chọn lớp giả | Một hoặc nhiều phần tử được chọn, nhưng chỉ khi chúng ở trạng thái cụ thể, chẳng hạn như khi bạn di chuột qua chúng (đó là “di chuột” trong tiếng Anh). | a:hoverchọn <a>, nhưng chỉ khi chuột di chuyển qua siêu liên kết. |
Phông chữ và văn bản
Bây giờ bạn đã giới thiệu xong về CSS, chúng tôi có thể style.cssthêm nhiều quy tắc và thông tin về kiểu dáng hơn vào tệp của bạn. Để làm điều đó, trước tiên hãy làm việc với phông chữ và văn bản.
Để bắt đầu, hãy tìm một phông chữ trên Google Fonts chẳng hạn mà bạn muốn sử dụng trên trang web của mình. Thêm <link ...>phần tử vào <head></head>chỉ mục của bạn. Dưới đây là một ví dụ nhỏ.
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
Nếu bạn đã sử dụng phần “văn bản màu đỏ” ở phần trước trong email của mình style.css, vui lòng xóa phần này vì nó không còn hữu ích vào lúc này. Thay thế phần này bằng các dòng bạn nhìn thấy trong ví dụ bên dưới và điều chỉnh chúng theo ý thích của bạn khi cần thiết. Bây giờ chúng tôi sẽ sử dụng để thêm font-familyphong cách của chúng tôi. đơn giản có nghĩa là một hoặc nhiều phông chữ mà bạn muốn sử dụng cho văn bản của mình. Dòng này đặt phông chữ cơ sở chung và kích thước phông chữ cho toàn bộ trang.<link ...>``font-family
html, body {
font-size: 10px; /* px betekent 'pixels': de basislettergrootte is nu 10 pixels hoog. */
font-family: 'Roboto', sans-serif;
}
Lưu ý: Trong ví dụ trên, một nhận xét đã được thêm vào để giải thích “px” nghĩa là gì. /*Mọi thứ ở giữa và trong tài liệu CSS */đều là nhận xét CSS mà trình duyệt sẽ bỏ qua khi tạo mã. Đây là nơi dành cho chính bạn, nơi bạn có thể đăng những nhận xét có thể hữu ích sau này (ví dụ: VIỆC CẦN LÀM).
Bây giờ chúng ta sẽ đặt kích thước phông chữ cho các thành phần trong nội dung HTML ( h*, <li>và <p>) có chứa văn bản. Chúng tôi cũng sẽ căn giữa văn bản của tiêu đề và đặt chiều cao dòng cũng như khoảng cách giữa các chữ cái với nội dung nội dung để làm cho nó dễ đọc hơn một chút.
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
Bạn có thể điều chỉnh giá trị px theo những gì bạn muốn và muốn thấy trong thiết kế trang web của mình.
Hộp, hộp, tất cả chỉ là về hộp
Có một điều bạn sẽ nhận thấy khi viết mã CSS. Thông thường, đây là về các hộp - cách đặt kích thước, màu sắc, vị trí của chúng, v.v. Hầu hết các thành phần HTML trên trang của bạn có thể được coi là các hộp xếp chồng lên nhau. Do đó, không có gì ngạc nhiên khi định dạng CSS chủ yếu dựa trên mô hình hộp. Mỗi khối chiếm không gian trên trang của bạn đều có các thuộc tính như bên dưới.
padding(điền, đệm) - khoảng trống bạn có xung quanh nội dung (ví dụ: xung quanh văn bản của một đoạn văn).
border(đường viền) - đường liền nét bao quanh phần đệm.
margin(lề) khoảng trống đó xung quanh bên ngoài phần tử (bao gồm cả xung quanh đường viền).
Trong phần này chúng tôi cũng sử dụng:
width(chiều rộng) - của một phần tử.
background-color(màu nền) - màu đằng sau nội dung và phần đệm của một phần tử.
color(color) - màu của nội dung của một phần tử (thường là văn bản).
text-shadow(bóng văn bản) - đặt bóng đổ trên văn bản trong một phần tử.
display(hiển thị) - đặt chế độ hiển thị của một phần tử.
Hãy bắt đầu với một số bổ sung CSS khác cho trang bạn đang thiết kế. Thêm tất cả các dòng mới này vào cuối trang của bạn và đừng ngại thử nghiệm các giá trị thuộc tính.
Thay đổi màu của trang
html {
background-color: #00539F;
}
Dòng này đặt màu nền của toàn bộ trang. Thay đổi mã màu ở trên thành màu bạn muốn.
Tìm hiểu cách cơ thể được kết hợp với nhau
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Và bây giờ là bodyphần tử. Có khá nhiều khai báo kiểu ở đây và chúng ta sẽ đi qua từng cái một.
width: (breedte) 600px;- Điều này buộc phần thân phải luôn rộng 600 pixel.
margin: (marge) 0 auto;- Nếu bạn đặt 2 giá trị này thành một thuộc tính như marginhoặc padding, giá trị thứ nhất (trong trường hợp này 0) sẽ xác định phần trên và phần dưới của phần tử và giá trị thứ hai ( auto) sẽ xác định phần bên trái và bên phải của phần tử (Ở đây auto là một giá trị đặc biệt chia đều không gian ngang có sẵn thành hai nửa bên trái và bên phải). Bạn cũng có thể nhập một, ba hoặc bốn giá trị.
background-color: (kleur) #FF9500;- Như đã đề cập, điều này đặt màu nền của phần tử. Một loại màu cam đỏ được sử dụng cho phần thân thay vì màu xanh đậm cho htmlphần tử.
padding: (vulling) 0 20px 20px 20px- Chúng tôi đặt bốn giá trị này trên phần đệm để tạo một khoảng trống nhỏ xung quanh nội dung của chúng tôi. Lần này chúng ta không đặt phần đệm ở phần trên cùng của phần thân và 20 pixel ở các cạnh bên trái, phía dưới và bên phải. Các giá trị được đặt trên cùng, bên phải, dưới cùng và bên trái theo thứ tự đó.
border: (boord) 5px solid black;- điều này đặt một đường viền màu đen liền nét rộng 5px xung quanh tất cả các cạnh của cơ thể.
Định vị và tạo kiểu cho tiêu đề chính của chúng ta
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Bạn có thể nhận thấy rằng có một cái lỗ gớm ghiếc ở phía trên cơ thể. Điều đó xảy ra vì trình duyệt áp dụng kiểu mặc định cho <h1>phần tử (và cho cả phần tử khác), ngay cả khi bạn chưa đặt bất kỳ CSS nào. Điều đó nghe có vẻ là một ý tưởng tồi nhưng chúng tôi muốn một trang chưa được định dạng vẫn có thể đọc được. Để loại bỏ lỗ hổng đó, chúng tôi đã ghi đè kiểu dáng mặc định bằng cách đặt lề 0: margin: 0;.
Chúng ta tiếp tục với phần đệm ở dưới cùng và trên cùng của tiêu đề lớn nhất (tức là tiêu đề chính). Chúng tôi đã cung cấp cho nó 20 pixel và chúng tôi đã cung cấp cho văn bản của tiêu đề cùng màu với màu nền của HTML.
Chúng tôi đã sử dụng một thuộc tính thú vị ở đây: text-shadow, áp dụng bóng đổ cho nội dung văn bản của phần tử. Nó nhận bốn giá trị sau:
Giá trị pixel đầu tiên đặt độ lệch ngang của bóng văn bản. - nó di chuyển ra xa chữ cái bao xa: một giá trị âm sẽ dịch chuyển nó sang trái.
Giá trị pixel thứ hai đặt độ lệch dọc của bóng thả văn bản - nó di chuyển xuống bao xa, trong ví dụ này giá trị âm sẽ đẩy bóng văn bản lên trên.
Giá trị pixel thứ ba đặt giá trị bán kính mờ của bóng văn bản - giá trị lớn hơn sẽ tạo ra bóng mờ hơn.
Giá trị thứ tư xác định màu cơ bản của bóng.
Hãy thử thử nghiệm lại với các giá trị khác nhau và xem bạn có thể nghĩ ra điều gì.
Căn giữa hình ảnh
img {
display: block;
margin: 0 auto;
}
Cuối cùng chúng ta sẽ căn giữa hình ảnh để trông đẹp hơn. Chúng tôi có thể sử dụng lại chiếc xe tải margin: 0 auto;như đã làm với phần thân xe, nhưng chúng tôi cũng phải làm điều gì đó khác biệt. Phần tử body ở cấp độ khối , nghĩa là nó chiếm không gian trên trang và có thể được gán các giá trị lề (nó cũng có thể được gán các giá trị khác xác định khoảng cách giữa các phần tử). Mặt khác, hình ảnh là các phần tử nội tuyến , có nghĩa là chúng không thể. Vì vậy, để tạo lề cho hình ảnh, hình ảnh phải hoạt động giống như một phần tử ở cấp khối. Chúng tôi làm điều đó với display: block;.
Theo Mitchel
