Các thuộc tính của thẻ phong cách. Triển khai CSS trong tài liệu HTML. Các phần tử CSS cơ bản
Chúng ta đã biết rằng để trang web trông đẹp và phong cách, chúng ta cần phải làm việc với tệp CSS. Và để áp dụng các kiểu của chúng ta, chúng ta cần kết hợp tệp HTML và tệp CSS.
Có một số tùy chọn để thực hiện thao tác này: sử dụng các biểu định kiểu lồng nhau, các biểu định kiểu bên ngoài và kiểu nội tuyến.
Hôm nay chúng ta sẽ nói về phương pháp thứ hai.
Đưa kiểu vào thẻ HTML
Bản chất của phương pháp này là chúng tôi triển khai thiết kế cần thiết bên trong thẻ. riêng biệt thuộc tính - phong cách. Thuộc tính này có thể được áp dụng vào bất kỳ thẻ nào, nhưng chỉ trong phần nội dung của trang web, nghĩa là trong cơ thể. Giá trị của thuộc tính này là toán tử của các kiểu cần được áp dụng cho một phần tử nhất định.
Ví dụ: hãy đặt kích cỡ khác nhau phông chữ cho hai đoạn văn bản khác nhau:
< p style= "font-size:25px;" >Đặt đoạn văn bản này có chiều cao chữ cái là 25 pixel. < p style= "cỡ chữ:15px; màu:#2400ff;"> Và văn bản này sẽ có các chữ cái, cao 15 pixel và chúng tôi cũng sẽ tô màu xanh lam cho nó để thể hiện việc sử dụng nhiều kiểu cùng một lúc.
sai sót
Ví dụ này thể hiện một cách hoàn hảo cách kiểu dáng như vậy làm tắc nghẽn mã trang.
Bạn cũng có thể lưu ý thêm một số nhược điểm khi sử dụng kỹ thuật cách điệu này. Đầu tiên trong số đó là sự phổ biến về phong cách trong toàn bộ tài liệu, điều này trong tương lai việc chỉnh sửa sẽ làm phức tạp quá trình này một cách đáng kể.
Việc định dạng số lượng lớn văn bản cũng sẽ gặp khó khăn. Tôi nghĩ không ai hài lòng với viễn cảnh chỉ định cỡ chữ cho mỗi đoạn văn, đặc biệt nếu có 40 đoạn văn như vậy.
Ngay cả khi sử dụng các kiểu dựng sẵn, cũng không thể sử dụng các lớp giả, điều này đến một mức độ lớn ràng buộc bàn tay của một nhà thiết kế web.
Cũng cần lưu ý đến sự nhầm lẫn chắc chắn sẽ xuất hiện khi sử dụng thuộc tính style. Sự nhầm lẫn này sẽ phát sinh do việc sử dụng dấu ngoặc kép khác nhau khi thêm kiểu.
Để rõ ràng, chúng ta hãy xem ví dụ dưới đây:
< div style= "họ phông chữ: "Roboto Condensed", sans-serif"> Mục nhập là chính xác. < div style= "họ phông chữ: "Roboto Condensed", sans-serif"> Điều đó cũng đúng. < div style= "font-family: " Roboto Condensed ", sans-serif" >Đây không phải là một mục chính xác. < div style= "font-family: " Roboto Condensed ", sans-serif" >Và điều này cũng không đúng
Nhìn vào các tính toán được cung cấp ở trên, kết luận hợp lý cho thấy rằng việc sử dụng các kiểu cài sẵn có liên quan đến một số phức tạp và bất tiện đáng kể.
Khi nào nên sử dụng kiểu nội tuyến
Bất chấp tất cả những thiếu sót, phong cách tích hợp không được phát minh ra một cách vô ích. Quản trị viên web thường sử dụng chúng trong trường hợp gán phong cách có lập trình. Ví dụ: hãy xem mã này
< div id= "productRate" > < div style= "width: 40%" >
Việc ghi lại chiều rộng cần thiết cho khối này sẽ là một thao tác đơn giản.
Tình huống tương tự có thể xảy ra nếu cần thay thế. hình nền(ví dụ) người dùng có vai trò quản trị viên. Trong trường hợp này thẻ img có thể không phù hợp. Vì vậy, đáng để tham khảo thuộc tính style:
< div style= "background:url(fon.jpg)" >
Ngoài ra, các lập trình viên thường chuyển sang các kiểu có sẵn khi tạo cửa sổ bật lên. Thông thường quá trình này diễn ra như sau: khối có thiết kế đang được thực hiện được gán display:block và các cửa sổ còn lại được ẩn bằng cách sử dụng display:none để chúng không ảnh hưởng trực quan đến công việc của lập trình viên. Đây là một ví dụ:
< div class = "element" style= "display:block" >Cửa sổ bật lên hiện đang được thiết kế
Điểm mấu chốt
Việc sử dụng các style tích hợp đi kèm với một số khó khăn, bất tiện, tuy nhiên, trong quá trình thiết kế một số thành phần nhất định, các webmaster thường hướng tới phương pháp này để tối ưu hóa công việc của mình.
Xin chào! Bạn có muốn thay đổi kiểu CSS trên trang web của mình không? Bạn có nghĩ nó khó không? Hãy chú ý một chút đến bài đăng này và bạn sẽ học cách thay đổi kiểu CSS rất dễ dàng trên bất kỳ trang web WordPress nào! Bạn không cần phải là một quản trị viên web nâng cao, hãy nghiên cứu các kiểu CSS và những điều tinh tế khác, mọi thứ đơn giản hơn nhiều. Mọi thứ đều rất đơn giản và nhanh chóng! Nhìn xa hơn!
Cách thay đổi kiểu CSS trên trang web WordPress
Đi tới trang web của bạn, nhấp vào click chuột phải di chuột qua bất kỳ thành phần trang web nào mà bạn muốn thay đổi. Trong cửa sổ mở ra, nhấp vào tab – Xem mã. Trong ví dụ, chúng tôi sẽ thay đổi màu của tiêu đề trang trong menu trang web. Bằng cách này, bạn có thể thay đổi hoàn toàn bất kỳ kiểu trang web nào.
Tiếp theo, ở bên phải màn hình, bạn sẽ thấy một cửa sổ có mã nguồn phần tử của trang web mà bạn đã mở mã. Ở đây chúng ta quan tâm đến các kiểu, chúng sẽ được hiển thị trong cửa sổ trên tab - Kiểu. Bằng tên của kiểu và màu sắc, chúng ta có thể xác định ngay phần nào của kiểu CSS mà chúng ta cần thay đổi. Ảnh chụp màn hình hiển thị một đoạn trích của kiểu CSS có tên – menu chính và màu trắng (như menu trên trang web), đây là những gì chúng ta cần.
Có hai lựa chọn Thay đổi CSS phong cách.
Tùy chọn 1 sử dụng plugin
Tùy chọn đầu tiên rất phù hợp cho tất cả các trang web trên CMS WordPress. Sau khi chúng tôi tìm thấy các kiểu CSS mình cần, bạn cần cài đặt plugin trên trang web của mình - CSS tùy chỉnh đơn giản. Cài đặt plugin này bạn có thể trực tiếp từ bảng quản trị wordpress. Vào trang: Plugins – Add new, nhập tên plugin vào ô tìm kiếm, nhấn Enter, cài đặt và kích hoạt plugin.
Tiếp theo, đi đến trang plugin CSS tùy chỉnh đơn giản. Đến trang: Ngoại hình – . Dán phần đã sao chép của mã css vào trường, thay đổi kiểu (trong ảnh chụp màn hình bên dưới, màu đã được thay đổi) và nhấp vào nút – Cập nhật CSS tùy chỉnh.
Tất cả các kiểu, kích thước, màu sắc, phông chữ, đường viền, in ấn, khung, v.v. khác đều thay đổi theo cùng một cách. Mở bất kỳ thư mục nào có ký hiệu kiểu CSS và thay đổi kiểu theo ý bạn.
Chú ý! Tốt hơn là chuyển các kiểu CSS trực tiếp sang WordPress. Ngoại hình – Tùy chỉnh – Kiểu bổ sung. Tức là bạn không cần phải sử dụng plugin CSS tùy chỉnh đơn giản!
Tùy chọn 2: thay đổi kiểu trong tệp css của trang web
Chúng tôi muốn biết các kiểu CSS mà chúng tôi cần nằm ở đâu và việc thay đổi chúng không quá khó, hãy thay đổi các giá trị và mọi thứ đã sẵn sàng. Chỉ bằng cách xem mã thành phần trong cửa sổ trình duyệt, bạn có thể rất dễ dàng tìm ra vị trí của các kiểu CSS bạn cần. Truy cập lại trang web của bạn, nhấp chuột phải vào bất kỳ thành phần nào trên trang web của bạn, trong cửa sổ mở ra, nhấp vào tab - Xem mã.
Trong trình xem mã, bên cạnh mỗi kiểu css, có bên phải một liên kết sẽ được hiển thị, hãy di chuột qua nó, bạn sẽ thấy gợi ý về vị trí của kiểu này. Nghĩa là, họ sẽ cho bạn biết nó nằm ở thư mục và tập tin nào. đã cho css phong cách bạn cần thay đổi.
Bây giờ tất cả những gì bạn phải làm là vào thư mục gốc của trang web trên máy chủ lưu trữ, tìm tập tin này, đi theo đường dẫn được chỉ ra trong chú giải công cụ và thay đổi kiểu CSS. Như bạn có thể thấy, nếu bạn tìm ra, mọi thứ đều rất đơn giản!
Vẫn còn thắc mắc? Viết bình luận! Chúc may mắn!
Thay đổi kiểu CSS trên trang web thật dễ dàng và nhanh chóng cập nhật: ngày 22 tháng 7 năm 2018 bởi: Ilya Zhuravlev
Hãy cùng tìm hiểu Cascading Style Sheets là gì, chúng là gì nhé kiểu CSS và tìm hiểu cách thiết lập nó cho các phần tử HTML.
Qua bài viết này bạn đã hiểu rõ về ngôn ngữ đó đánh dấu siêu văn bảnđược sử dụng để mô tả nội dung của một trang web. Khi di chuyển trên Internet, chúng tôi nhận thấy rằng các trang trông khác nhau: màu sắc, phông chữ, khoảng cách dòng khác nhau, hình nền và thậm chí cả hoạt ảnh. Không cần gác lại, tôi muốn giải thích ngay cho bạn rằng giao diện của những trang này sẽ bị ảnh hưởng bởi những trang được sử dụng. Cascading Style Sheets (Cascading Style Sheets - CSS). Ở trong hướng dẫn HTML Chúng ta sẽ xem xét ngắn gọn cách sử dụng các biểu định kiểu xếp tầng, bạn có thể nghiên cứu chúng một cách chi tiết sau khóa học này trong phần hướng dẫn CSS.
Phong cách là gì? Bộ phong cách vẻ bề ngoài bất kỳ phần tử trang nào, tức là đại khái, đây là một quy tắc cho trình duyệt biết cách định dạng yếu tố cụ thể(ví dụ: thay đổi màu nền hoặc màu phông chữ).
Mỗi phần tử HTML có phong cách mặc định. Việc thay đổi kiểu mặc định của phần tử HTML có thể được thực hiện bằng thuộc tính kiểu chung. Thuộc tính chỉ định được xây dựng trong (nội tuyến) Kiểu CSS cho phần tử. CSS nội tuyến được sử dụng để áp dụng kiểu dáng độc đáo cho một phần tử HTML. Với mục đích học HTML, chúng ta sẽ chỉ xem xét việc sử dụng CSS nội tuyến.
Gợi ý: Ví dụ này sử dụng các màu sau: trắng(trắng), kaki(kaki), xám(xám). Phông chữ được sử dụng cho văn bản của bài thơ là Verdana.
Nếu bạn gặp khó khăn khi hoàn thành nhiệm vụ, hãy kiểm tra mã trang bằng cách mở ví dụ trong một cửa sổ riêng bằng cách nhấp vào hình ảnh.
Xin chào các độc giả thân mến của dự án Anatomy of Business. Quản trị viên web Alexander đồng hành cùng bạn! Trong bài viết trước, chúng ta đã xem xét các kiểu CSS là gì và tầm quan trọng của chúng trong lập trình WEB.
Rõ ràng là nếu các kiểu CSS có tác động đáng kể đến việc hiển thị tệp HTML thì chúng phải được kết nối bằng cách nào đó. Hôm nay chúng ta sẽ xem xét bốn cách chính để kết nối phong cách CSS với HTML.
Chúng ta đừng trì hoãn và hãy bắt đầu!
Bao gồm một tệp CSS riêng biệt!
Một trong những tiện lợi nhất và những cách đơn giản kết nối các kiểu đang kết nối một tệp riêng biệt với các kiểu. Để làm điều này bạn cần sử dụng soạn thảo văn bản notepad++ (hoặc bất kỳ tệp nào khác) tạo một tệp có phần mở rộng .css và đặt nó vào cùng thư mục với tệp mà chúng tôi muốn đặt nó.
Sau đó, trong tệp HTML giữa các thẻ
đăng đoạn mã sau:
Bây giờ chúng ta hãy xem điều này có nghĩa là gì:
Link # dịch từ tiếng Anh có nghĩa là “liên kết”. Bằng cách này, chúng tôi cho trình duyệt thấy rằng thứ chúng tôi sắp nói đến tiếp theo là một liên kết. rel= # với thuộc tính này, chúng tôi hiển thị cách tệp CSS liên quan đến tệp HTML. "biểu định kiểu" # cụ thể là tệp CSS là biểu định kiểu xếp tầng. type="text/css" # ở đây mọi thứ đều đơn giản: đây là dấu hiệu cho thấy tệp được ghi bằng định dạng văn bản và có phần mở rộng .css href="style.css" # đây là liên kết đến một tệp có kiểu CSS.
Theo tôi, đây là cách ưa thích nhất để đưa các kiểu CSS vào.
Chúng tôi viết kiểu trực tiếp trong tệp HTML (phương pháp đầu tiên)
Cách tiếp theo để chỉ định kiểu CSS là viết chúng trực tiếp vào tài liệu HTML. Nó trông như thế này:
Nếu chúng ta xem tài liệu HTML này sẽ được hiển thị như thế nào trong trình duyệt, chúng ta sẽ thấy rằng văn bản giữa các thẻ chuyển sang màu đỏ. Và sử dụng thuộc tính phong cách, chúng ta nói rằng tiếp theo chúng ta có các tham số kiểu hiển thị. Màu sắc là một bộ chọn chịu trách nhiệm về màu sắc. Màu đỏ là giá trị của bộ chọn này. Bằng cách này, chúng ta có thể làm nổi bật một số phần nhất định của văn bản bằng một kiểu hiển thị nhất định.
Đặt các biểu định kiểu xếp tầng bên trong HTML (phương pháp thứ hai)
Một cách khác để kết nối các kiểu CSS là đặt các bảng xếp tầng bên trong tập tin HTML. Theo tôi, phương pháp này không phải là thuận tiện nhất, vì sử dụng nó, việc phân tích mã trang web trở nên không thuận tiện lắm. Để bắt đầu viết kiểu CSS, bạn chỉ cần chèn thẻ vào file HTML . Trong thực tế nó trông như thế này:
Đây là một ví dụ: hiển thị các kiểu CSS trong tài liệu HTML
Xin lưu ý rằng bên trong thẻ chúng tôi cũng viết mã theo Quy tắc CSS, sử dụng dấu ngoặc nhọn. Trong các bài viết tiếp theo tôi sẽ nói chi tiết hơn về các quy tắc cú pháp trong CSS.
Kết nối nhiều tệp CSS với một tài liệu HTML.
Quy tắc HTML cho phép đưa nhiều tệp CSS cùng một lúc. Nhiều quản trị viên web sử dụng cách này: tạo các tệp CSS riêng biệt cho văn bản và hình ảnh. Hoặc tách các tệp cho đầu trang, chân trang và nội dung chính của trang. Hãy cùng tìm hiểu cách thực hiện điều này.
Chúng tôi đang tạo một số tệp kiểu CSS. Đặt tên của chúng là style-1.css và style-2.css. Chúng tôi đặt nó, như trong phương pháp số một, trong cùng thư mục với tệp HTML.
Đây là một ví dụ: hiển thị các kiểu CSS trong tài liệu HTML
Mọi thứ đều tương tự như phương pháp đầu tiên, chỉ ở trong trường hợp này chúng tôi cung cấp liên kết đến hai tập tin cùng một lúc.
Liên kết file CSS bên trong tới một file cùng loại.
Ngoại trừ tất cả mọi người ở trên các phương pháp được liệt kê, có một cách cho phép bạn liên kết với nhiều người khác trong một tệp CSS!
Điều này được thực hiện như sau:
Trước tiên, chúng tôi cần kết nối ít nhất một tệp CSS với mã của bạn theo cách tương tự.
Thứ hai, nhập đoạn mã sau vào tệp đã được kết nối:
@import url("style-2.css");
Dòng này kết nối với tập tin của chúng tôi tập tin bổ sung CSS. Nếu bạn có bất kỳ khó khăn nào với kết nối CSS, bạn có thể hỏi họ trong phần bình luận.
Như chúng ta đã học ở hai bài trước, Công nghệ CSS là công cụ mạnh mẽ nhất, điều mà mọi quản trị viên web nên nắm vững! Để cải thiện khả năng tiếp thu tài liệu, tôi quyết định thêm video đào tạo + bài kiểm tra vào cuối mỗi bài học để củng cố thông tin nhận được.
Kiểm tra cố định vật liệu:
Chúng ta cần đưa tệp CSS vào bằng cách đặt liên kết tới tệp đó trong tệp HTML. Phương pháp nào sau đây là đúng?
Lựa chọn 1:
Lựa chọn 2:
Tùy chọn 3:
Lựa chọn 4:
Chúng ta có thể đáp ứng được không? Các tầng CSS trực tiếp trong tệp HTML?
CSS (Cascading Style Sheets) là ngôn ngữ quản lý kiểu dáng của các trang Web.
Sử dụng CSS có thể làm giảm đáng kể khối lượng tài liệu HTML, đặc biệt nếu bạn có nhiều trang có cùng kiểu, đồng thời đơn giản hóa công việc tạo và thêm tài liệu mới. Bằng cách lưu trữ mô tả của các phong cách khác nhau trong tập tin riêng biệt, bạn có thể dễ dàng thao tác các kiểu.
Mô tả CSS
Tệp kiểu - thông thường tập tin văn bản, chứa mô tả kiểu trong CSS và nằm trên máy chủ Web. Để trang Web nhìn thấy kiểu dáng bên trong thẻ
một tham chiếu được tạo cho tệp kiểu, như trong ví dụ:tập tin style.css
tập tin Index.htm
Nếu tệp kiểu nằm trên máy chủ khác, bạn phải cung cấp URL đầy đủ của nó
href="("http://...")" Bạn cũng có thể mô tả các kiểu trong mã của trang Web, bên trong thẻ
tập tin Index.htm
Trong trường hợp này, bạn có thể sử dụng các kiểu này cho các thành phần nằm trong trang WEB. Nghĩa là, tất cả các thành phần văn bản nằm bên trong thẻ
, và trên trang này sẽ được hiển thị bằng chữ in nghiêng màu đỏ, với kích thước ký tự là 32 pixel.Và tùy chọn cuối cùng - mô tả kiểu nằm ngay bên trong thẻ của phần tử mà kiểu này được áp dụng, ví dụ:
Phong cách này chỉ áp dụng cho dòng chữ này
Tùy chọn này không phải là tốt nhất vì nó dẫn đến tăng kích thước của mã trang và mất đi sự tách biệt giữa các kiểu riêng biệt và dữ liệu trang riêng biệt.
Bây giờ, hãy xem xét trường hợp cần gán kiểu không phải cho tất cả các thành phần giống hệt nhau của trang mà chỉ cho một số thành phần - đối với điều này, chúng tôi sử dụng tham số LỚP = "tên lớp" hoặc ID="tên thành phần" có thể được gán cho bất kỳ thành phần trang nào (đoạn, bảng, v.v.).
Tham số LỚP được sử dụng khi bạn cần tạo cùng một kiểu cho một số thành phần trang, nhưng không phải tất cả các thành phần trang (giống hoặc khác nhau).
Ví dụ: bằng cách chỉ định trong mô tả kiểu:
Bold_italic (kiểu chữ: in đậm; kiểu chữ: in nghiêng)
Bạn có thể đảm bảo rằng chỉ một số ô trong bảng được hiển thị in nghiêng đậm. Để làm điều này, hãy gán cho chúng kiểu dáng của lớp bi:
Chú ý! Tên lớp có phân biệt chữ hoa chữ thường.
Việc chỉ định kiểu bằng cách sử dụng số nhận dạng được sử dụng khi chỉ có một thành phần trên trang khớp với số nhận dạng nhất định. Nếu có một số thành phần cần được gán kiểu này thì đây đã là một lớp.
Các lớp giả và các phần tử giả:
Các lớp giả và phần tử giả là các lớp và thành phần đặc biệt vốn có của CSS và được các trình duyệt hỗ trợ CSS tự động phát hiện.
Các lớp giả được phân biệt các loại khác nhau một phần tử, tạo khi xác định phong cách riêng cho mỗi người trong số họ.
Các phần tử giả là các phần của các phần tử khác, tạo cho các phần đó một phong cách khác với toàn bộ phần tử.
Cú pháp:
bộ chọn: lớp giả ( thuộc tính )
selector.class:pseudo-class ( thuộc tính )
bộ chọn: phần tử giả ( thuộc tính )
selector.class:pseudo-element ( thuộc tính )
Danh sách các lớp giả và các phần tử giả:
Các lớp giả liên kết là các lớp giả của phần tử biểu thị một liên kết.
tích cực ( liên kết hoạt động)
đã truy cập (URL đã truy cập trước đó)
di chuột (một lớp giả xảy ra khi con trỏ được đặt trên một liên kết, không hoạt động trong NN).
Các phần tử giả của dòng đầu tiên. Có thể được sử dụng với các phần tử cấp khối (p, h1, v.v.) Thay đổi kiểu dòng đầu tiên của các phần tử này.
Các yếu tố giả của chữ cái đầu tiên. Nó không ảnh hưởng đến toàn bộ dòng mà chỉ ảnh hưởng đến ký tự đầu tiên.
Mô tả ngắn gọn về ngôn ngữ CSS
Thuộc tính phông chữ họ phông chữ Thuộc tính này chỉ định phông chữ được phần tử sử dụng. Nếu bạn chỉ định URL, phông chữ sẽ được cài đặt tự động trên máy tính của người dùngVÍ DỤ: họ phông chữ: URL màu đen Arial("arialblack.ttf") font-style (bình thường, in nghiêng) Kiểu của phần tử. Nghiêng hoặc thường xuyên
VÍ DỤ: kiểu phông chữ: in nghiêng biến thể phông chữ (bình thường-bình thường, chữ hoa nhỏ-thay thế tất cả chữ thường sang chữ in hoa) Tùy chọn hiển thị phông chữ. Netscape không hỗ trợ thuộc tính này
VÍ DỤ: biến thể phông chữ: chữ hoa nhỏđộ dày phông chữ (bình thường-bình thường, đậm-đậm, đậm-rất đậm, nhẹ hơn, độ chính xác 100-900) Đánh dấu phần tử (độ dày)
VÍ DỤ:font-weight:cỡ chữ đậm (XX%, XXpt, XXpx)Cỡ chữ
VÍ DỤ: cỡ chữ: phông chữ 30pt (họ, kiểu, biến thể, trọng lượng, kích thước) Kết hợp tất cả các thuộc tính trên.
VÍ DỤ: phông chữ: in nghiêng đậm hơn Arial 12pt Thuộc tính văn bản. trang trí văn bản (không có, gạch chân, gạch chân, gạch ngang, nhấp nháy) Kiểu văn bản
VÍ DỤ:trang trí văn bản:xuống dòng khoảng cách chữ cái (số XX) Khoảng cách giữa các chữ cái
VÍ DỤ:khoảng cách chữ:100 Vertical-align (baseline, sub, super, top-text, top, middle, Bottom, Bottom-text, %) Sự sắp xếp các phần tử trong mối quan hệ với các phần tử khác trong cùng một hàng.
VÍ DỤ:vertical-align:top-text chuyển đổi văn bản (Viết hoa - mỗi từ bắt đầu bằng chữ in hoa, CHỮ HOA - mỗi chữ cái của văn bản trở thành chữ hoa, chữ thường - mỗi chữ cái của văn bản trở thành nhỏ.
VÍ DỤ:chuyển đổi văn bản:Viết hoa căn chỉnh văn bản (trái, phải, giữa, căn đều) Căn chỉnh văn bản.
VÍ DỤ:text-align:thụt lề văn bản bên phải (đơn vị độ dài hoặc tỷ lệ phần trăm) Thụt lề văn bản.
VÍ DỤ: thụt lề văn bản: 30 em chiều cao dòng (đơn vị chiều dài hoặc tỷ lệ phần trăm) Thụt lề trên cùng
VÍ DỤ:line-height:100% Thuộc tính màu. màu (#RRGGBB)Màu phần tử
VÍ DỤ:color:#f00000 backgroung-color (#RRGGBB)Màu nền phần tử
VÍ DỤ:màu nền:#f00000 hình nền (URL)Hình nền
VÍ DỤ:hình nền:URL("img.gif") lặp lại nền (lặp lại - sao chép hình nền theo mọi hướng, lặp lại-x - sao chép hình nền theo chiều ngang, lặp lại-y - tái tạo hình nền theo chiều dọc, không lặp lại - hình ảnh không lặp lại)Lặp lại hình nền
VÍ DỤ: lặp lại nền: không lặp lạiđính kèm nền (cuộn hình nền cùng với tài liệu, cố định hình nền) Chế độ cuộn của hình nền.
VÍ DỤ:đính kèm nền:đã sửa vị trí nền (% chiều rộng +% chiều cao; trên cùng, giữa, dưới cùng; trái, giữa, phải; khoảng cách từ cạnh trái + khoảng cách từ cạnh trên) Vị trí của hình nền
VÍ DỤ: vị trí nền:50%0% nền (màu sắc, hình ảnh, vị trí, tệp đính kèm, lặp lại) Kết hợp tất cả các thuộc tính trên.
VÍ DỤ:nền:màu đen không lặp lại cố định 50%0% thuộc tính viền. lề trên (độ dài, phần trăm, tự động) Lề trên
VÍ DỤ:margin-top:100 lề phải (độ dài, phần trăm, tự động)Lề phải
VÍ DỤ:lề-phải:100% lề-dưới (độ dài, phần trăm, tự động) Lề dưới
VÍ DỤ:margin-bottom:100em lề trái (độ dài, phần trăm, tự động)Lề trái
VÍ DỤ:margin-left:lề 100pt (trên, phải, trái, dưới) Kết hợp tất cả các thuộc tính trên.
VÍ DỤ:nền:phần đệm trên cùng 100pt (độ dài, phần trăm) Thụt lề từ đường viền trên cùng"a
VÍ DỤ: đệm-top:100pt đệm-phải (độ dài, tỷ lệ phần trăm) Thụt lề từ đường viền bên phải"a
VÍ DỤ: đệm-phải: 100% đệm-dưới (chiều dài, tỷ lệ phần trăm) Thụt lề từ đường viền dưới cùng"a
VÍ DỤ: phần đệm-dưới:100em phần đệm-trái (chiều dài, tỷ lệ phần trăm) Thụt lề từ đường viền bên trái"a
VÍ DỤ: phần đệm-top: phần đệm 100 (trái, phải, trên, dưới) Kết hợp tất cả các thuộc tính trên. Bạn có thể đặt nhiều giá trị đồng thời (tối đa bốn) cho các mặt khác nhau. Nếu một giá trị được đặt, một mức thụt lề duy nhất sẽ được đặt cho tất cả các cạnh, nếu hai thì các mức thụt lề khác nhau sẽ được đặt cho các cạnh liền kề và nếu bốn thì các mức thụt lề riêng lẻ sẽ được đặt cho tất cả các cạnh.
VÍ DỤ: phần đệm: độ dày 100px đường viền trên cùng (chiều dài, mỏng, trung bình, dày) của đường viền trên cùng"a
VÍ DỤ:border-top-width:100pt border-right-width (chiều dài, mỏng, trung bình, dày)độ dày của đường viền bên phải"a
VÍ DỤ:viền-phải-chiều rộng:đường viền dày-đáy-chiều rộng (dài, mỏng, trung bình, dày)độ dày của đường viền dưới"a
VÍ DỤ: border-bottom-width:100em border-left-width (chiều dài, mỏng, trung bình, dày) của đường viền bên trái"
VÍ DỤ:border-left-width:độ rộng đường viền trung bình (chiều rộng trên, chiều rộng bên phải, chiều rộng bên trái, chiều rộng dưới cùng) Kết hợp tất cả các thuộc tính trên. Bạn có thể đặt nhiều giá trị cùng một lúc (tối đa bốn) cho các đường viền khác nhau. Nếu một giá trị được đặt, một độ dày duy nhất được đặt cho tất cả các cạnh, nếu hai, thì các độ dày khác nhau được đặt cho các cạnh liền kề và nếu bốn, thì riêng lẻ độ dày được đặt cho tất cả các mặt
VÍ DỤ:độ rộng đường viền: 15pt màu đường viền (màu)Màu đường viền.
VÍ DỤ:border-color:green border-style Kiểu đường viền. Bạn có thể đặt nhiều giá trị cùng lúc (tối đa bốn) cho các đường viền khác nhau. Nếu một giá trị được đặt, nó sẽ được đặt phong cách thống nhất cho tất cả các cạnh, nếu có hai thì các kiểu khác nhau sẽ được đặt cho các cạnh liền kề và nếu có bốn thì các kiểu riêng lẻ sẽ được đặt cho tất cả các cạnh
VÍ DỤ:kiểu đường viền: đường viền trên có rãnh chấm (chiều rộng, kiểu dáng, màu sắc) Kết hợp tất cả các thuộc tính trên cho đường viền trên cùng.
VÍ DỤ: đường viền trên cùng: 100em rãnh màu đỏ viền bên phải (chiều rộng, kiểu dáng, màu sắc) Kết hợp tất cả các thuộc tính trên cho đường viền bên phải.
VÍ DỤ:đường viền bên phải: đường viền liền màu đỏ tươi 5pt bên trái (chiều rộng, kiểu dáng, màu sắc) Kết hợp tất cả các thuộc tính trên cho đường viền bên trái.
VÍ DỤ:border-left: 15pc san hô chèn vào đường viền dưới cùng (chiều rộng, kiểu dáng, màu sắc) Kết hợp tất cả các thuộc tính trên cho đường viền bên trái.
VÍ DỤ: đường viền dưới cùng: đường viền đầu tiên có màu cam 30 (chiều rộng, kiểu dáng, màu sắc) Kết hợp tất cả các thuộc tính trên.
VÍ DỤ: đường viền: chiều rộng gấp đôi màu đen (chiều dài, phần trăm) Chiều rộng phần tử
VÍ DỤ: chiều rộng: 10% chiều cao (chiều dài, tỷ lệ phần trăm) Chiều cao phần tử
VÍ DỤ: chiều cao: float 100pt (trái, phải) Vị trí phần tử
VÍ DỤ: float: right rõ ràng (trái, phải, cả hai) Vị trí của các phần tử khác xung quanh phần tử này
VÍ DỤ:rõ ràng:cả hai Phân loại. hiển thị (không hiển thị, ngắt dòng trước và sau phần tử, nội tuyến-không ngắt dòng, mục danh sách-ngắt dòng trước và sau phần tử + thêm điểm đánh dấu như mục danh sách) Xác định cách danh sách phần tử sẽ được hiển thị
VÍ DỤ: display:none khoảng trắng (bình thường - “nén” nhiều khoảng trắng liên tiếp thành một, trước - cho phép hiển thị nhiều khoảng trắng liên tiếp, nowrap - không cho phép ngắt dòng mà không có thẻ
) Xác định cách hiển thị khoảng cách giữa các phần tử
VÍ DỤ: white-space:nowrap kiểu kiểu danh sách (đĩa, hình tròn, hình vuông, số thập phân, chữ La Mã thường, chữ La Mã viết hoa, chữ alpha thấp hoặc chữ alpha trên) chỉ định hình thức của điểm đánh dấu mục danh sách.
VÍ DỤ: list-style-type:low-alpha list-style-image (URL) đặt giao diện của điểm đánh dấu mục danh sách dưới dạng hình ảnh
VÍ DỤ:list-style-image:URL(cool.gif) list-style-position (bên trong, bên ngoài)Xác định vị trí điểm đánh dấu tùy thuộc vào mục danh sách
VÍ DỤ:list-style-position:inside list-style (loại, vị trí, hình ảnh) Kết hợp tất cả các thuộc tính trên.
VÍ DỤ: kiểu danh sách: bên trong
Tiện ích bổ sung
Số đo độ dài (Cú pháp: đơn vị "+"/"-"XX)VÍ DỤ: -566pt em - ems chiều cao của thành phần phông chữ được sử dụng ex - chiều cao x của chữ "x" được sử dụng bởi thành phần phông chữ px pixel tính bằng inch cm cm mm mm điểm pt (1pt = 1/72in) pc picas ( 1pc = 12pt) Tỷ lệ phần trăm
VÍ DỤ: -566% -/+%XX Giảm/tăng phần trăm. Màu Tên màu VÍ DỤ: màu đỏ tươi #rrggbb Màu ở dạng RGB, trong đó rr,gg,bb là số thập lục phân.
VÍ DỤ: #00cc00 rgb(x,x,x) Màu theo RGB, trong đó "x" số thập phân từ 0 đến 255.
VÍ DỤ: rgb(0,204,0) # màu rgb trong RGB, trong đó r,g,b là số thập lục phân.
VÍ DỤ: #0c0 rgb (x%,x%,x%) Màu ở dạng RGB, trong đó "x%" là một số từ 0,0 đến 100,0.
VÍ DỤ: rgb(0%,80%,0%)
Một số thủ thuật quản lý phong cách
Bằng cách chỉ định kích thước phông chữ tuyệt đối, bạn tước đi khả năng tăng hoặc giảm kích thước phông chữ của những người xem trang của bạn bằng cách sử dụng một nút đặc biệt trong trình duyệt phù hợp với độ phân giải màn hình và tầm nhìn của họ. Phông chữ sẽ chỉ được hiển thị theo kích thước bạn đã chỉ định khi viết trang.
Vì vậy, nên sử dụng kích thước phần trăm cho những mục đích này. Trong trường hợp này, kích thước phông chữ sẽ nhỏ hơn (lớn hơn) theo tỷ lệ phần trăm bạn chỉ định so với khi được định dạng bằng thẻ HTML tiêu chuẩn.
Điều này được thực hiện để các trình duyệt lỗi thời không hiểu được thẻ
Thủ thuật này cho phép bạn phủ một lớp văn bản lên trên một lớp văn bản khác và nhận được kết quả rất thú vị và khác thường.
Đoạn mã sau tạo tiêu đề xuất hiện ở dạng 3D mà không cần sử dụng đồ họa.
Chỉ định trong mô tả phong cách
P ( thụt lề văn bản: 1cm; )Bây giờ những dòng đầu tiên của mỗi đoạn văn mới sẽ xuất hiện từ dòng “màu đỏ”.
