Home-theater-designers
CSS thuộc bộ ba công nghệ web cốt lõi cùng với HTML và JavaScript. Với việc lập kế hoạch cẩn thận, CSS góp phần tách biệt các mối quan tâm. Các tài nguyên độc lập kiểm soát cấu trúc, cách trình bày và hành vi của nội dung.
Style Sheets đóng một vai trò quan trọng trong khả năng truy cập, khả năng mở rộng và thậm chí cả hiệu suất web. Với tư cách là tác giả nội dung hoặc nhà thiết kế web, họ cung cấp cho bạn quyền kiểm soát cách thiết bị hiển thị nội dung. Từ bố cục đến kích thước phông chữ và màu sắc, CSS chuyển nội dung thành các trang đẹp mắt.
CSS trông như thế nào?
CSS là một ngôn ngữ lớn — có rất nhiều thứ khác nhau để tạo kiểu! Nhưng cú pháp của nó rất đơn giản, chỉ có một số quy tắc để tìm hiểu.
Các phần tử HTML có các thuộc tính khác nhau mà CSS có thể tạo kiểu. Các màu sắc thuộc tính đặt màu nền trước (ví dụ: văn bản). Kích thước phông chữ phụ thuộc vào cỡ chữ bất động sản.
Mỗi thuộc tính có thể được đặt thành một giá trị được hỗ trợ. Việc gán giá trị cho một thuộc tính là một 'khai báo'. Nói chung, chúng trông như thế này:
property: valueVí dụ:
cách tăng ram video chuyên dụng mà không cần bios
color: redGiá trị cho các thuộc tính khác nhau có thể trông rất khác nhau, ngay cả các giá trị cho cùng một thuộc tính. Ví dụ, đây là hai cách khác để viết khai báo trước:
color: #ff0000
color: rgb(255, 0, 0)
Cách HTML và Style Sheets kết hợp với nhau
Bạn có thể kết hợp HTML và CSS theo một số cách khác nhau, mỗi cách đều có những ưu điểm của nó.
Viết nội tuyến kiểu viết
Phương pháp đơn giản nhất là đính kèm trực tiếp khai báo kiểu vào một phần tử trong tệp HTML. Bạn có thể làm điều này bằng cách sử dụng Phong cách thuộc tính như vậy:
Most of this text is red …
… but this isn’t!
Trong khi các yếu tố tạo kiểu nội tuyến như thế này có thể thuận tiện, nó có một số nhược điểm. Đầu tiên, nó làm phức tạp HTML, khiến nó khó đọc hơn trong nháy mắt. Thật khó để duy trì: hãy tưởng tượng một tài liệu dài trong đó chúng ta muốn đặt màu cho mọi đoạn văn. Đây là CSS, nhưng không phải là 'Style Sheets'.
Nhúng kiểu vào đầu
Bạn có thể bắt đầu xem Biểu định kiểu trông như thế nào với cơ chế thứ hai, nhúng . Sử dụng cách tiếp cận này, chúng tôi tập hợp tất cả các khai báo kiểu lại với nhau bên trong Phong cách phần tử trong cái đầu tài liệu của chúng tôi. Nó sẽ trông giống như thế này:
/* style instructions go here */
...Tuy nhiên, hướng dẫn kiểu của chúng tôi cần chi tiết hơn một chút so với trước đây. Vì chúng tôi đã chuyển chúng vào phần đầu, nên mỗi quy tắc không còn được liên kết với một phần tử nữa. Chúng tôi có thể đã tuyên bố màu đỏ , nhưng những gì nên có màu đó?
Đây là nơi các bộ chọn CSS xuất hiện. Chúng cho phép chúng tôi nhắm mục tiêu các phần cụ thể của trang và xác định phong cách của chúng ở một nơi, bằng cách sử dụng cú pháp sau:
tên của bộ nhớ đệm bộ nhớ được tìm thấy trên bộ xử lý là gì?
selector {
declaration1;
declaration2;
/* etc. */
}
Ví dụ, để tạo kiểu cho văn bản của đoạn văn là màu xanh lam, chúng ta có thể chỉ định như sau:
p {
color: blue;
}Trong ví dụ này, bộ chọn chỉ đơn giản là P , phù hợp với tất cả các thành phần đoạn văn trong tài liệu của chúng tôi. Nó sẽ tô màu toàn bộ văn bản là màu xanh lam, miễn là nó có màu Phương pháp cuối cùng để đề cập là liên kết. Cho đến nay, đây là cách tiếp cận hữu ích nhất và là cách bạn nên chọn trong hầu hết thời gian. Thay vì nhúng các quy tắc CSS vào Phong cách trực tiếp trong tài liệu của bạn, bạn có thể chuyển chúng ra một tệp riêng biệt. Dán mã này vào bên trong của tệp HTML của bạn để liên kết trang định kiểu bên ngoài của bạn. Với phương pháp được liên kết, chúng tôi đang khai thác sức mạnh cốt lõi của CSS: tách các mối quan tâm. Tất cả thông tin ngữ nghĩa — nội dung nghĩa là gì — được chứa trong tài liệu HTML. Kiểu dáng — trông như thế nào — nằm trong một tệp riêng biệt, bảng kiểu. Dưới đây là một số lợi ích của sự tách biệt này: Bạn đã học rất nhiều về kiểu và bảng định kiểu, nhưng còn phần xếp tầng của CSS thì sao? Tầng là yếu tố quyết định các kiểu sẽ sử dụng khi có nhiều biểu định kiểu. Bạn đã thấy cách một tác giả có thể chỉ định kiểu cho nội dung của họ. Nhưng một tính năng khác của CSS là nó cung cấp cho người đọc và một số nhà sản xuất trình duyệt cũng nói về vấn đề này. Bạn có thể đã thắc mắc về các kiểu mặc định. Ví dụ, làm thế nào để một H1 phần tử xuất hiện lớn và đậm, ngay cả khi không có bất kỳ trang kiểu tác giả nào? Điều này là nhờ vào một tập hợp các quy tắc đặc biệt tạo nên biểu định kiểu tác nhân người dùng. Các quy tắc này ban đầu được trình duyệt web của bạn áp dụng cho mọi trang bạn truy cập. Phân tầng chỉ định rằng một biểu định kiểu tác giả áp dụng sau các kiểu tác nhân người dùng. Nếu trình duyệt của chúng tôi cho biết các tiêu đề được in đậm nhưng tác giả của trang tuyên bố các tiêu đề trên trang này là nhạt, thì cuối cùng chúng sẽ sáng. Có một nguồn biểu định kiểu khác chuyển giao một số quyền kiểm soát cho người đọc. Về lý thuyết, bất kỳ người dùng web nào cũng có thể duy trì biểu định kiểu người dùng với các quy tắc tùy chỉnh. Những điều này nằm ở giữa: quy tắc người dùng sẽ ghi đè cài đặt trình duyệt mặc định, nhưng bản thân sẽ bị ghi đè bởi kiểu tác giả. Đáng buồn thay, việc hỗ trợ các biểu định kiểu người dùng chưa bao giờ được phổ biến rộng rãi. Bạn có thể sử dụng Style Sheets trong các ngữ cảnh khác nhau, ngoài màn hình. Các một nửa thuộc tính của liên kết phần tử xác định loại phương tiện mà bảng định kiểu áp dụng. Ví dụ, bạn có thể xác định một tờ kiểu để in sử dụng đánh dấu như sau: Bạn có thể tập hợp các kiểu chung trong một biểu định kiểu chung và các kiểu dành riêng cho phương tiện trong các tệp riêng biệt. Thậm chí còn có các loại phương tiện truyền thông để phục vụ cho các bài thuyết trình bằng âm thanh hoặc chữ nổi về nội dung của bạn. CSS là một công cụ quan trọng trong việc cải thiện khả năng truy cập. Có liên quan: Cách duyệt web nếu bạn bị mù hoặc khiếm thị Các trang web như Wikipedia sử dụng CSS để kiểm soát kiểu in của chúng, ẩn các phần tử không mong muốn và đơn giản hóa bố cục. Cascading Style Sheets bao gồm rất nhiều thứ: tầng, kế thừa, bộ chọn, nguồn, phương tiện, v.v. Nhưng sức mạnh của chúng cho phép web hiện đại. Đây là một phương tiện cung cấp các tính năng tái sử dụng, tính linh hoạt và khả năng tiếp cận được tích hợp sẵn. Để xem toàn bộ sức mạnh của CSS và mức độ cung cấp của CSS, hãy xem bảng lừa đảo của chúng tôi bao gồm tất cả các thuộc tính CSS3 cần thiết. Nắm vững cú pháp CSS cần thiết với bảng gian lận thuộc tính CSS3 của chúng tôi. Bobby là một người đam mê công nghệ, người đã làm việc như một nhà phát triển phần mềm trong gần hai thập kỷ. Anh ấy đam mê chơi game, làm Biên tập viên đánh giá tại Tạp chí Switch Player và đắm mình trong tất cả các khía cạnh của xuất bản trực tuyến và phát triển web. Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!Liên kết một trang định kiểu bên ngoài
Sức mạnh của CSS
Giải thích về Cascade
Nhắm mục tiêu các phương tiện khác nhau
Làm thế nào để biết nếu điện thoại di động của bạn bị nghe trộm
CSS làm cho HTML trông đẹp mắt
Giới thiệu về tác giả Bobby Jack(58 bài báo đã xuất bản) Theo dõi bản tin của chúng tôi