Cascading Style Sheet (CSS) là một hệ thống mã hóa trang web cho phép các nhà thiết kế thao tác một số tính năng cùng một lúc bằng cách gán các phần tử nhất định cho các nhóm. Ví dụ: bằng cách sử dụng mã cho nền trang web, các nhà thiết kế có thể thay đổi màu nền hoặc hình ảnh trên tất cả các trang của trang web bằng một lần thay đổi đối với tệp CSS. Đây là cách tạo CSS cho một trang web cơ bản.
Các bước
Phần 1/4: Viết CSS nội tuyến
Bước 1. Hãy chắc chắn rằng bạn có hiểu biết cơ bản về các thẻ HTML
Bạn nên biết các thẻ hoạt động như thế nào và
src
và
href
thuộc tính.
Bước 2. Tìm hiểu một số thuộc tính CSS cơ bản
Bạn sẽ thấy rằng có rất nhiều tài sản. Tuy nhiên, không nhất thiết phải học hết chúng.
-
Một số thuộc tính CSS cơ bản cần biết là
màu sắc
và
font-family
- .
Bước 3. Tìm hiểu về các giá trị cho từng thuộc tính tương ứng
Tất cả các thuộc tính cần một giá trị. Cho
màu sắc
tài sản, ví dụ, bạn có thể đặt
màu đỏ
giá trị.
Bước 4. Tìm hiểu về
Phong cách
Thuộc tính HTML.
Nó được sử dụng trong một phần tử như
href
hoặc
src
. Để sử dụng nó, trong dấu ngoặc kép sau dấu bằng, hãy đặt thuộc tính CSS, dấu hai chấm và sau đó là giá trị của thuộc tính. Đây được gọi là quy tắc CSS.
Bước 5. Hiểu rằng CSS nội tuyến thường không được các nhà phát triển web chuyên nghiệp sử dụng cho các trang web
CSS nội tuyến có thể thêm sự lộn xộn không cần thiết vào tài liệu HTML. Tuy nhiên, đó là một cách tuyệt vời để làm quen với cách hoạt động của CSS.
Phần 2/4: Viết CSS cơ bản
Bước 1. Khởi chạy chương trình bạn muốn sử dụng
Nó sẽ cho phép bạn tạo các tệp HTML và CSS.
Nếu bạn chưa cài đặt một chương trình đặc biệt, bạn có thể sử dụng Notepad hoặc một trình soạn thảo văn bản khác. Chỉ cần lưu tệp của bạn cả dưới dạng tệp văn bản và tệp CSS
Bước 2. Mở tệp HTML cho trang web của bạn
Bạn cũng nên mở nó bằng một trình soạn thảo HTML, nếu bạn đã cài đặt.
Trình chỉnh sửa HTML cho phép bạn chỉnh sửa HTML và CSS cùng một lúc
Bước 3. Tạo một thẻ trong phần đầu HTML của bạn
Điều này sẽ cho phép bạn viết CSS mà không cần tệp riêng.
Bước 4. Chọn một phần tử bạn muốn thêm kiểu và nhập tên của phần tử theo sau bởi một tập hợp các dấu ngoặc nhọn ({})
Để làm cho mã của bạn dễ đọc hơn, hãy luôn đặt dấu ngoặc nhọn thứ hai trên dòng riêng của nó.
Bước 5. Giữa các dấu ngoặc nhọn, hãy nhập các quy tắc CSS của bạn như khi bạn sử dụng
Phong cách
thuộc tính.
Mỗi dòng phải kết thúc bằng dấu chấm phẩy (;). Để làm cho mã của bạn dễ đọc, mỗi quy tắc nên bắt đầu trên dòng riêng của nó và mỗi dòng phải được thụt lề.
Điều rất quan trọng cần lưu ý là kiểu này sẽ ảnh hưởng đến tất cả các phần tử của kiểu đã chọn trên trang. Phong cách cụ thể hơn sẽ được đề cập trong phần tiếp theo
Phần 3/4: CSS nâng cao hơn
Bước 1. Tạo tệp CSS, không phải tệp HTML và lưu nó bằng cách sử dụng
.css
gia hạn.
Mở tệp HTML của bạn.
Bước 2. Tạo một thẻ trong phần đầu HTML của bạn
Điều này sẽ cho phép bạn liên kết một tệp CSS riêng biệt với tài liệu HTML của bạn. Thẻ liên kết của bạn cần có ba thuộc tính:
quan hệ
kiểu
và
href
-
quan hệ
có nghĩa là "mối quan hệ" và cho trình duyệt biết mối quan hệ với tài liệu HTML. Ở đây nó phải có giá trị là
"bảng định kiểu"
- .
-
kiểu
cho biết loại phương tiện nào đang được liên kết. Ở đây nó phải có giá trị là
"text / css"
-
href
- ở đây được sử dụng tương tự như cách nó được sử dụng trong một phần tử, nhưng ở đây nó phải liên kết đến một tệp CSS. Nếu tệp CSS nằm trong cùng thư mục với tệp HTML, thì chỉ cần viết tên tệp trong dấu ngoặc kép.
Bước 3. Chọn các phần tử thuộc các kiểu khác nhau mà bạn muốn thêm kiểu dáng giống nhau
Thêm một
lớp
thuộc tính cho các phần tử này và đặt chúng bằng tên lớp mà bạn chọn. Điều này sẽ cung cấp cho các yếu tố của bạn cùng một kiểu dáng.
Bước 4. Chỉ định kiểu dáng mà một lớp sẽ nhận được
Nhập tên lớp vào tệp CSS của bạn với dấu chấm (.) Trước nó (tức là
.lớp
).
Bước 5. Chọn các phần tử đơn lẻ mà bạn muốn thêm kiểu dáng đặc biệt và thêm một
Tôi
thuộc tính.
Id được tạo trong CSS sử dụng ký hiệu bảng Anh (#) thay vì dấu chấm.
Id cụ thể hơn các lớp, vì vậy id sẽ ghi đè bất kỳ kiểu lớp nào nếu nó có thuộc tính có giá trị khác với lớp
Phần 4/4: Tìm hiểu thêm
Bước 1. Ghé thăm các trường w3
Đây là một trang web chính thức nhằm dạy các kỹ năng phát triển web. W3 có rất nhiều tài liệu tham khảo được liệt kê cho HTML và CSS, cũng như các ngôn ngữ web khác.
Bước 2. Tìm các trang web khác dành riêng cho việc học và dạy HTML và CSS
Các trang web như CSS trick.com đặc biệt nhằm mục đích dạy CSS và các kỹ năng thiết kế web. Tìm được những nguồn uy tín sẽ giúp ích cho bạn trên hành trình học tập.
Bước 3. Liên hệ với các nhà thiết kế và phát triển web
Kinh nghiệm và bí quyết của họ có thể dạy cho bạn những kiến thức và kỹ năng quý giá.
Bước 4. Xem mã nguồn của các trang web mà bạn xem qua
Xem CSS của các trang web được phát triển tốt có thể chỉ cho bạn cách thiết kế các phần của trang web. Sao chép nó dưới dạng thực hành và tìm hiểu mã có thể giúp bạn học cách sử dụng các thuộc tính CSS khác nhau.
Video - Bằng cách sử dụng dịch vụ này, một số thông tin có thể được chia sẻ với YouTube
