Cách tạo css viền trang bên ngoài. Mô hình hộp CSS

Chúng ta hãy xem một số tài liệu. Các phần tử HTML được hình thành trên đó (hiển thị trên màn hình trong trình duyệt). Chúng được hình thành dựa trên các thẻ. Bạn đặt thẻ, chúng được xử lý bởi trình phân tích cú pháp html (có sẵn trong bất kỳ trình duyệt nào) và xây dựng các phần tử html. Và những phần tử này trông như thế nào sẽ được xác định bởi CSS.

Tất cả các phần tử html đều có 4 vùng: vùng lề, đường viền, phần đệm và nội dung của phần tử. Họ cần chúng để làm gì?

• Lề ngoài (margin) cần thiết để điều chỉnh sự tương tác của phần tử này với đường viền của các phần tử khác.
• Khoảng đệm là khoảng cách từ khung đến nội dung của một phần tử nhất định.
• Nội dung của chính phần tử đó. Rõ ràng ở đây. Nếu có các phần tử lồng nhau thì chúng nằm trong khu vực này.
• Khung (viền). Phác thảo ranh giới của một phần tử. Về mặt sơ đồ, 4 khu vực có thể được biểu diễn như sau:

Cần hiểu rằng mỗi yếu tố nằm trong một khu vực nào đó. Khu vực dành cho phần tử nằm bên trong nó được gọi là vùng chứa. Những thứ kia. container là khu vực nội dung phần tử cha. Khu vực này xác định không gian để xây dựng phần tử bên trong. Điều này có nghĩa là phần tử bên trong sẽ điều chỉnh theo kích thước của khu vực này.

Lề

Đây là khi phần tử của chúng ta tương tác với ranh giới của vùng chứa và với ranh giới của các phần tử lân cận (những phần tử nằm bên cạnh nó trong mã). Quy tắc cơ bản:

• lề trên: tự động|độ lớn|% - lề trên.
• lề phải: auto|độ lớn|% - lề phải.
• lề-dưới: auto|độ lớn|% - lề dưới.
• lề trái: auto|độ lớn|% - lề trái.
• lề: lề trên lề phải lề phải lề dưới lề trái – một quy tắc đúc sẵn.

Giá trị “auto” có nghĩa là trình duyệt sẽ phân tích các giá trị này một cách độc lập. Kích thước thụt lề có thể được chỉ định theo các giá trị sau: em, ex, px. Tỷ lệ phần trăm (%) được tính từ chiều rộng của vùng chứa (từ vùng nội dung của phần tử cha). Nếu bạn chỉ định một giá trị âm thì đường viền của các phần tử bên trong vùng chứa gốc sẽ va vào nhau.

Quy tắc “lề” là quy tắc tổng hợp, giá trị của cả 4 lề được chỉ định ở đây (bắt đầu từ trên cùng và theo chiều kim đồng hồ). Ví dụ:

Lề: 10px 20px 20px 30px; lề: 10px 20px 30px; - lề từ trái qua phải bằng nhau: 10px 20px; - lề trên-dưới và lề trái-phải bằng nhau: 10px; - tất cả các vết lõm đều giống nhau

Phần đệm

Không thể có giá trị âm ở đây, bởi vì Không thể di chuyển nội dung ra ngoài khung của phần tử. Tỷ lệ phần trăm được tính dựa trên chiều rộng của container.

• đệm-top: giá trị|%.
• phần đệm bên phải: value|%.
• đệm-đáy: giá trị|%.
• đệm-trái: giá trị|%.
• phần đệm: đệm-đệm trên-đệm phải-đệm dưới-trái - quy tắc đúc sẵn. Tương tự như “lề”.

Đường viền trong CSS

Tất cả các khung có các đặc điểm sau:

• Độ dày - chiều rộng đường viền: giá trị (mỏng|trung bình|dày). Mặc định là trung bình.
• Color - màu viền: màu sắc. Mặc định là màu phông chữ trong phần tử này.
• Loại - kiểu đường viền: không có|chấm|nét đứt|rắn|đôi|rãnh|góc|inset|outset. Các loại: không có khung | dấu chấm | chấm | rắn | đôi | sự giả tạo nhẹ nhõm.

Các quy tắc của khuôn khổ:

• viền-trên-(chiều rộng|màu|kiểu).
• viền-phải-(chiều rộng|màu|kiểu).
• viền-dưới- (chiều rộng|màu|kiểu).
• viền-trái- (chiều rộng|màu|kiểu).
• đường viền: chiều rộng đường viền màu viền kiểu viền. Quy tắc đội.

Trong quá trình thiết kế trang web, nhiều người mới xây dựng trang web thắc mắc làm thế nào để thay đổi phông chữ, kích thước và màu sắc của tiêu đề. Vâng, đây thực sự là một lựa chọn tuyệt vời mà bạn có thể thêm chút mới mẻ vào thiết kế trang web của mình. Nhưng có một câu hỏi không kém phần hấp dẫn khác: làm thế nào để tạo khung html.

Khung html dùng để làm gì?

Thực ra không có chức năng gì đặc biệt phần tử này không mang theo. Tuy nhiên, văn bản được đóng trong khung được thiết kế đẹp mắt vẫn khơi dậy sự quan tâm nhất định của người đọc. Do đó, khung bao quanh văn bản có thể được gọi một cách an toàn là một trong những cách để nhấn mạnh tầm quan trọng của văn bản được đóng khung.

Tính năng tạo khung bao quanh văn bản

Tất nhiên, các biến thể trong thiết kế khung sử dụng CSS nhiều hơn nữa, nhưng đó là một câu chuyện hoàn toàn khác. Ngoài ra, phương pháp này phù hợp với những người xây dựng trang web cao cấp hơn. Tôi nghĩ bạn và tôi và với sự trợ giúp của việc chỉnh sửa Mã HTML nó sẽ trở nên không kém khung đẹp html.

Ở giai đoạn đầu tiên, bạn cần hiểu rằng khung có thể được tạo cho tất cả mọi người phần tử html bất kể nó là loại thẻ gì

,

, , vân vân.

Đổi lại, có sự khác biệt giữa các khung của phần tử nội tuyến và khối.

Khung của loại tích hợp được đặt bên trong các thẻ, hay nói đúng hơn là người chịu trách nhiệm về nó hiển thị html mã được đặt giữa các thẻ nhất định. Kết quả là, chúng ta nhận được một khung html xung quanh văn bản mà chúng ta cần viết một số lệnh nhất địnhđể thiết lập lề nội bộ.

Các khung khối được hình thành trên toàn bộ chiều rộng của khối, điều này dẫn đến nhu cầu chỉ định các lệnh liên quan đến giới hạn chiều rộng.

Tất nhiên, để tạo văn bản theo khung html, chúng ta sẽ phải chuyển sang các kiểu có sẵn. Phương pháp này sẽ phù hợp nhất để làm nổi bật một số cụm từ, đoạn văn riêng lẻ trong văn bản và hình ảnh. Nếu bạn cần làm nổi bật một phần cụ thể của mẫu được hiển thị trên tất cả các trang của trang web, việc chỉnh sửa tệp style.css của mẫu là hợp lý.

Cách tạo khung bao quanh văn bản trong html

Tôi nghĩ có rất nhiều lý thuyết. Đã đến lúc luyện tập. Ví dụ: tôi sẽ đặt trong một khung màu xanh nhạt tươi sáng với nền màu xám một trong những đề xuất quan trọng của bài viết này.

Tâm điểm! Các kiểu tích hợp hoạt động hoàn hảo và không gây tổn hại đến tính hợp lệ HTML của trang web.

Để thực hiện cùng một khung, bạn cần tham khảo thẻ

ĐỀ XUẤT CỦA BẠN.

Vì trong trong ví dụ nàyđược xây dựng trong phong cách css, Tôi coi việc giới thiệu cho bạn từng người trong số họ cũng quan trọng không kém.

1. ranh giới– thuộc tính chịu trách nhiệm hiển thị khung. Để đơn giản hóa công việc, tôi không chỉ định riêng từng thuộc tính - border-width (độ dày của viền khung), border-color (màu khung html). Thay vào đó, tôi rút ngắn mã html một chút bằng cách viết tất cả các thuộc tính sau dấu hai chấm.

Để thay đổi vẻ bề ngoài frame chỉ thay đổi giá trị chất rắn. Các ranh giới khung sau đây tồn tại:

Sườn núi - nhẹ nhõm.

Chấm - chấm.

Gấp đôi.

Nét đứt - chấm.

Rắn - vững chắc.

2. phần đệm– một thuộc tính chịu trách nhiệm về khoảng cách giữa khung và đối tượng nằm trong đó.

Nếu muốn, bạn có thể thử nghiệm nhiều kiểu hơn một chút bằng cách thêm vào số lượng lệnh được đặt giữa thẻ mở và thẻ đóng

Tài sản lề. Bằng cách này, bạn có thể thụt lề các phần tử nằm ngoài khung.

để thay đổi bối cảnh Chỉ cần đăng ký thuộc tính màu nền, chỉ định mã của màu mong muốn sau dấu hai chấm là đủ.

Khung xung quanh hình ảnh html được thực hiện theo cách tương tự, vì vậy bạn sẽ không gặp bất kỳ vấn đề nào với nó. Điều duy nhất mà người mới bắt đầu cần biết là để hiển thị nó, các thuộc tính phải được viết trong một thẻ duy nhất .

Tóm lại, chúng ta có thể nói rằng để tạo khung xung quanh hình ảnh hoặc văn bản, chỉ cần mở màn hình hiển thị mã html của bài viết và viết các thuộc tính đặc biệt trong đó giữa các thẻ nhất định là đủ.

Cảm ơn bạn đã quan tâm và hẹn sớm gặp lại trên các trang của Stimylrosta.

Tìm thấy trong văn bản lỗi ngữ pháp? Vui lòng báo cáo điều này với quản trị viên: chọn văn bản và nhấn tổ hợp phím nóng Ctrl+Enter

Thuộc tính này tạo đường viền xung quanh một phần tử. Bạn có thể đọc thêm về thuộc tính này tại liên kết và trong bài viết này tôi phác thảo chung Tôi sẽ mô tả cách nó hoạt động. Thông tin này sẽ đủ để hiểu cách tạo khung bằng CSS.

Cú pháp thuộc tính biên giớiđơn giản: đường viền: 1px màu đen; . Thuộc tính này có ba ý nghĩa:

• 1px - độ dày đường viền.
• kiểu khung liền nét, nét liền là đường nét liền, double là đường nét liền đôi, nét đứt là đường chấm. Có một số loại đường viền khác, bạn có thể tìm thấy thông tin về chúng ở đây: Đường viền CSS.
• màu đen - đặt màu đường viền. Màu sắc có thể được chỉ định theo tên, giá trị hợp lệở đây: bảng màu CSS hoặc bằng cách mã thập lục phân. Cách thực hiện điều này được mô tả trong bài viết: màu sắc trong CSS.

khung văn bản CSS

Dưới đây là ví dụ về cách sử dụng thuộc tính đường viền để tạo đường viền rộng một pixel và màu đen:

Đoạn này được gán lớp example-1.

Trong ví dụ này chúng ta cũng sử dụng thuộc tính Phần đệm CSS, hoặc phần đệm. Thuộc tính này chỉ định mức độ thụt lề từ văn bản đến nét vẽ (đường viền của phần tử).

Hãy xem một ví dụ đơn giản khác để hiểu rõ hơn. Hãy tạo một khung rộng ba pixel, màu đỏ và không có bất kỳ phần đệm nào ( Thuộc tính CSSđệm).

Đoạn này được gán lớp ví dụ-2.

Như chúng ta có thể thấy, nếu không có phần đệm, khung văn bản trông có vẻ sừng sững.

Cách tạo khung ảnh bằng CSS

Khung cho ảnh được thiết lập tương tự bằng thuộc tính border. Hãy làm một khung Màu xanh láĐộ dày 4 pixel cho hình ảnh.

Ví dụ-img ( border: 4px màu xanh lá cây; )

Đây là cách mã này sẽ hoạt động:

Cách làm tròn các góc của khung trong CSS

Làm tròn các góc của đường viền trong CSS được thực hiện bằng thuộc tính bán kính đường viền. Thuộc tính này được giới thiệu trong CSS3 và hoạt động trong tất cả các trình duyệt hiện đại.

Thuộc tính bán kính đường viền có thể có từ một đến bốn giá trị. Nếu có một giá trị thì nó sẽ đặt mức độ làm tròn cho tất cả các góc. Hãy đưa ra một ví dụ về cách hoạt động của thuộc tính này với một giá trị.

Ví dụ-3 ( đường viền: 1px màu đen; bán kính đường viền: 15px; phần đệm: 10px; )

Đây là cách nó hoạt động:

Thuộc tính bán kính đường viền: 15px.>

Nếu khối không có đường viền thì có đường viền border-width: 0; , khi đó vùng được tô sẽ được làm tròn màu nền(thuộc tính màu nền). Đây là một ví dụ:

Ví dụ-4 ( border-width: 0; // mặc dù giá trị này là 0 theo mặc định Background-color: #DDD; border-radius: 15px; đệm: 10px; )

Đây là cách ví dụ này hoạt động:

Thuộc tính bán kính đường viền: 15px.>

Như tôi đã viết trước đó, thuộc tính bán kính đường viền có thể được đặt từ một đến bốn giá trị. Bảng bên dưới mô tả cách hoạt động của từng tổ hợp giá trị.

Đối với thuộc tính bán kính đường viền, các giá trị có thể được chỉ định dưới dạng phần trăm.

Hãy vẽ một vòng tròn trong CSS. Để thực hiện việc này, hãy lấy một khối vuông có kích thước 100 x 100 pixel và làm tròn các góc quy tắc CSS bán kính đường viền: 50%.

Ví dụ-5 ( chiều rộng: 100px; chiều cao: 100px; màu nền: #F00; bán kính đường viền: 50%; )

Đây là cách ví dụ này hoạt động:

Điều này bao gồm hoàn toàn chủ đề về “khung trong CSS”. Chúc may mắn học CSS!

Đường viền CSS phần tử là một hoặc nhiều dòng bao quanh nội dung của phần tử và phần đệm. Khung được thiết lập bằng cách sử dụng tài sản ngắn ranh giới . Kiểu khung được đặt bằng ba thuộc tính: phong cách, màu sắc Và chiều rộng.

Trang trí khung và đường viền của phần tử HTML bằng thuộc tính CSS

1. Kiểu viền

Theo mặc định, đường viền luôn được vẽ phía trên nền của phần tử, với nền kéo dài đến cạnh ngoài của phần tử. Kiểu khung xác định cách hiển thị của nó; nếu không có thuộc tính này, các khung sẽ không hiển thị chút nào. Bạn có thể đặt đường viền cho một phần tử ở tất cả các phía cùng lúc bằng cách sử dụng thuộc tính kiểu viền hoặc cho từng bên riêng biệt bằng cách sử dụng các thuộc tính làm rõ border-top-style, v.v. Không được thừa kế.

Cú pháp

P (kiểu viền: liền khối;) p (kiểu viền trên cùng: liền khối;)

2. Màu khung viền-màu sắc

Thuộc tính đặt màu của khung ở tất cả các cạnh cùng một lúc. Sử dụng các thuộc tính làm rõ, bạn có thể đặt màu khác nhau cho đường viền của mỗi bên của phần tử. Nếu không có màu nào được chỉ định cho khung, nó sẽ giống với màu của văn bản của phần tử. Nếu phần tử không có văn bản thì màu đường viền sẽ giống với màu văn bản của phần tử cha. Không được thừa kế.

Cú pháp

P (màu viền: #cacd58;)

3. Độ rộng đường viền

Chiều rộng khung được chỉ định bằng đơn vị chiều dài hoặc từ khóa. Nếu thuộc tính kiểu đường viền được đặt thành không và đường viền của phần tử được đặt thành chiều rộng nào đó, thì trong trường hợp nàyĐộ rộng khung được đặt thành 0. Không được thừa kế.

Cú pháp

P (độ rộng đường viền: 2px;)

4. Đặt khung với một thuộc tính

Thuộc tính border cho phép bạn kết hợp các thuộc tính sau: border-width, border-style, border-color chẳng hạn:

Div ( chiều rộng: 100px; chiều cao: 100px; đường viền: 2px màu xám đậm; )

Trong trường hợp này, các thuộc tính được chỉ định sẽ được áp dụng đồng thời cho tất cả các đường viền của phần tử. Nếu bất kỳ giá trị nào không được chỉ định, giá trị mặc định sẽ thay thế.

5. Đặt khung cho một đường viền của phần tử

Trong trường hợp cần thiết lập phong cách khác nhau ranh giới của một phần tử, bạn có thể sử dụng ký hiệu viết tắt cho ranh giới tương ứng.
Các thuộc tính được liệt kê bên dưới kết hợp các thuộc tính sau thành một khai báo duy nhất: border-width , border-style và border-color . Danh sách các thuộc tính được chỉ định theo một thứ tự nhất định, trong khi một hoặc hai giá trị có thể được bỏ qua, trong trường hợp đó, giá trị của chúng sẽ lấy giá trị mặc định.

Kiểu của đường viền trên được đặt bằng cách sử dụng thuộc tính border-top, đáy - border-bottom, left - border-left và right - border-right.

Cú pháp

P (đường viền trên cùng: màu xám đậm 2px;)

6. Phác thảo đường viền bên ngoài

Thuộc tính chỉ định đường viền bên ngoài xung quanh các phần tử (tức là bên ngoài đường viền thông thường). Mục đích chính của thuộc tính này là làm nổi bật một phần tử. Không giống như thuộc tính border, việc áp dụng thuộc tính này không ảnh hưởng đến kích thước hoặc vị trí của phần tử, bởi vì đường viền được hiển thị trên đầu hộp của phần tử, do đó có thể dẫn đến phần đệm bên ngoài của phần tử và các khu vực lân cận chồng lên nhau.

Ngoài ra, đường viền bên ngoài, không giống như khung của phần tử, bao quanh phần tử ở tất cả các phía, tạo khung hoàn toàn cho phần tử đó.

Đường viền bên ngoài luôn là hình chữ nhật và không đi theo đường viền của khối được chỉ định bán kính đường viền.

Thuộc tính phác thảo cho phép bạn kết hợp các thuộc tính sau: màu phác thảo, kiểu phác thảo, chiều rộng phác thảo. Nếu bất kỳ giá trị nào không được chỉ định, giá trị mặc định sẽ thay thế.

Div ( chiều rộng: 100px; chiều cao: 100px; đường viền: #cacd58 Solid 2px; )

6.1. phong cách phác thảo

Hình thức của đường viền bên ngoài được thiết lập tương tự như kiểu khung của phần tử. Không được thừa kế.

Cú pháp

P (kiểu phác thảo: sườn núi;)

6.2. Màu đường viền bên ngoài màu đường viền bên ngoài

Màu sắc của đường viền bên ngoài chỉ có thể được xác định khi đặt giá trị phong cách phác thảo. Không được thừa kế.

Cú pháp

P (kiểu phác thảo: sườn núi; màu phác thảo: bạc; )

6.3. Độ dày đường viền bên ngoài chiều rộng đường viền bên ngoài

Độ dày của đường viền bên ngoài được đặt tương tự như độ dày của khung của phần tử. Không được thừa kế.

Cú pháp

P ( kiểu phác thảo: chấm; chiều rộng phác thảo: 5px; )