Cách tạo các biến thể khác nhau của đường ngang trong HTML. Đường ngang

Nhiệm vụ

Tạo một đường ngang trên trang.

Giải pháp

Các đường ngang rất tốt để phân tách khối văn bản này với khối văn bản khác. Văn bản nhỏ với các đường ngang ở trên và dưới thu hút sự chú ý của người đọc hơn văn bản thông thường.

Sử dụng thẻ, bạn có thể vẽ một đường ngang, hình thức của nó phụ thuộc vào thuộc tính được sử dụng cũng như trình duyệt. Thẻ đề cập đến các phần tử khối, do đó dòng luôn bắt đầu trên một dòng mới và sau đó tất cả các phần tử được hiển thị trên dòng tiếp theo. Nhờ có nhiều thuộc tính của thẻ nên dòng được tạo thông qua thẻ này rất dễ quản lý. Nếu bạn cũng kết nối sức mạnh của kiểu thì việc thêm dòng vào tài liệu sẽ trở thành một nhiệm vụ đơn giản.

Theo mặc định, dòng này được hiển thị bằng màu xám và có hiệu ứng âm lượng. Loại đường này không phải lúc nào cũng phù hợp với thiết kế trang web, vì vậy việc các nhà phát triển mong muốn thay đổi màu sắc và các thông số khác của đường thông qua kiểu dáng là điều dễ hiểu. Tuy nhiên, các trình duyệt có nhiều cách tiếp cận khác nhau đối với vấn đề này, đó là lý do tại sao bạn sẽ phải sử dụng nhiều thuộc tính kiểu cùng một lúc. Đặc biệt, các phiên bản Internet Explorer cũ hơn sử dụng thuộc tính color cho màu đường kẻ, trong khi các trình duyệt khác sử dụng màu nền. Nhưng đó không phải là tất cả, bạn phải chỉ định độ dày của đường (thuộc tính chiều cao) khác 0 và xóa khung xung quanh đường bằng cách đặt thuộc tính đường viền thành không. Bằng cách đặt tất cả các thuộc tính lại với nhau cho bộ chọn giờ, chúng ta sẽ có được một giải pháp phổ biến cho các trình duyệt phổ biến (ví dụ 1).

Ví dụ 1: Đường ngang

HTML5 CSS 2.1 IE Cr Op Sa Fx

Màu đường kẻ ngang hr ( border: none; /* Xóa đường viền */ màu nền: đỏ; /* Màu đường kẻ */ color: red; /* Màu đường kẻ cho IE6-7 */ chiều cao: 2px; /* Độ dày đường kẻ * / )

Chuỗi văn bản

Kết quả của ví dụ này được hiển thị trong Hình. 1.

Cơm. 1. Đường ngang màu

Xin chào các độc giả thân mến! Hôm nay chúng ta sẽ nói về khối div và đường hr ngang.

Bên trong một thẻ< div>một khối vô hình (vùng chứa) được tạo mà chúng ta có thể thao tác bằng CSS. Không có CSS, khối này không có tác dụng lên khung trang.

Đầu tiên, hãy viết mã trang không có khối div. Ví dụ cái này:

Thực đơn chính

  • Đoạn 1
  • điểm 2
  • Điểm 3

Hãy xem trang này trông như thế nào trong trình duyệt:


Bây giờ hãy chia trang này thành hai khối div. Một cái có menu chính và cái kia có văn bản.

Thực đơn chính

  • Đoạn 1
  • điểm 2
  • Điểm 3

Có rất nhiều biến thể của các đoạn văn Lorem Ipsum, nhưng phần lớn đã được thay đổi dưới một hình thức nào đó, bằng cách thêm vào sự hài hước hoặc các từ ngẫu nhiên trông có vẻ không đáng tin chút nào. Nếu bạn định sử dụng một đoạn văn của Lorem Ipsum, bạn cần phải chắc chắn rằng không có điều gì đáng xấu hổ ẩn ở giữa văn bản. Tất cả các trình tạo Lorem Ipsum trên Internet đều có xu hướng lặp lại các đoạn được xác định trước khi cần thiết, khiến đây trở thành trình tạo thực sự đầu tiên trên Internet. Nó sử dụng một từ điển gồm hơn 200 từ tiếng Latinh, kết hợp với một số cấu trúc câu mẫu, để tạo ra Lorem Ipsum trông hợp lý. Do đó, Lorem Ipsum được tạo ra luôn không bị lặp lại, không có sự hài hước hoặc những từ không mang tính đặc trưng, ​​v.v.

Có rất nhiều biến thể của các đoạn văn Lorem Ipsum, nhưng phần lớn đã được thay đổi dưới một hình thức nào đó, bằng cách thêm vào sự hài hước hoặc các từ ngẫu nhiên trông có vẻ không đáng tin chút nào. Nếu bạn định sử dụng một đoạn văn của Lorem Ipsum, bạn cần phải chắc chắn rằng không có điều gì đáng xấu hổ ẩn ở giữa văn bản. Tất cả các trình tạo Lorem Ipsum trên Internet đều có xu hướng lặp lại các đoạn được xác định trước khi cần thiết, khiến đây trở thành trình tạo thực sự đầu tiên trên Internet. Nó sử dụng một từ điển gồm hơn 200 từ tiếng Latinh, kết hợp với một số cấu trúc câu mẫu, để tạo ra Lorem Ipsum trông hợp lý. Do đó, Lorem Ipsum được tạo ra luôn không bị lặp lại, không có sự hài hước hoặc những từ không mang tính đặc trưng, ​​v.v.

Chúng tôi nhìn vào trình duyệt:


Như bạn có thể thấy, giao diện của trang không hề thay đổi, đây là toàn bộ sức mạnh của khối này, nó là một khối logic. Khối này là một phần tử rất quan trọng vì nó thường được sử dụng trong bố cục trang và bạn phải biết về nó. Trực tiếp thông qua CSS, chúng ta có thể đặt chiều rộng cho một khối nhất định, đặt khung cho nó, chỉ định rằng tất cả các đoạn bên trong khối phải có một màu nhất định, v.v.

Và bây giờ giữa hai khối này, chúng ta sẽ viết một đường ngang, được tạo bằng một thẻ duy nhất< hr />

Dòng này trông như thế này trong trình duyệt:


Chúng ta có thể tác động đến đường này bằng cách sử dụng các thuộc tính sau:
Chiều rộng - Đặt độ rộng của dòng
Kích thước – Đặt độ dày
Align – Căn chỉnh đường thẳng
Màu sắc – Đặt màu

Ví dụ: hãy giảm chiều rộng của nó, căn chỉnh nó với cạnh phải của trang, tạo độ dày 5px và làm cho nó có màu đỏ.
Mã dòng bây giờ sẽ trông như thế này:

Hãy nhìn vào kết quả:


Đó có lẽ là tất cả những gì tôi muốn nói với bạn trong bài viết này. Bây giờ bạn đã biết div là gì và nó được tạo ra như thế nào. Bạn cũng đã học cách tạo một đường ngang và cách thay đổi hình thức của nó bằng cách sử dụng các thuộc tính.

Bạn chắc chắn đã thấy trên một số trang web có lệnh cấm sử dụng nút chuột phải. Tính năng này chủ yếu chống lại những kẻ muốn đánh cắp nội dung của bạn. Biện pháp này sẽ không bảo vệ bạn hoàn toàn khỏi hành vi trộm cắp nhưng nó sẽ bảo vệ bạn hoàn toàn khỏi việc sao chép thủ công. Sự lựa chọn khác .
Tôi không khuyên bạn nên tắt nút chuột phải nếu bạn đăng tài liệu nhằm mục đích sao chép trên blog của mình. Đây có thể là mã, tập lệnh, công thức nấu ăn, tài liệu tham khảo, v.v. Lệnh cấm sao chép trong trường hợp này sẽ khiến khách truy cập rời bỏ bạn và blog của bạn sẽ trở nên ít hữu ích hơn đối với khách truy cập. Nếu việc bảo vệ chống đạo văn là quan trọng đối với bạn thì tốt hơn là thêm url của bạn vào cuối bản sao. Sau đó, bạn sẽ chắc chắn rằng nếu ai đó muốn xuất bản nội dung nào đó được sao chép của bạn ở nơi khác trên Internet, mục sư sao chép sẽ có nhiều khả năng chia sẻ liên kết tới blog của bạn hơn.
Công thức này phù hợp cho bất kỳ trang web nào. Tất cả những gì bạn cần làm là dán mã vào tất cả các trang trên blog của bạn:



Trong Blogger, thêm mã vào tiện ích HTML/Javascript trong tab Thiết kế. Nếu bạn đang sử dụng một trong những chủ đề mới nhất trên blog của mình (Emporio, Contempo, Soho, Notable), thì đừng quên kích hoạt khả năng hiển thị của tiện ích (hộp kiểm bên cạnh “Hiển thị cho mọi người”, “Hiển thị tiện ích " HTML/ JavaScript "").
Trên Wordpress, thêm mã vào tiện ích “Văn bản”.

Tác giả: Ivanova Natalya 2019-03-03

Ngày lễ đang đến gần - Ngày Quốc tế Phụ nữ. Hãy chuẩn bị cho nó trước. Bạn có thể chúc mừng các cô gái và phụ nữ theo cách nguyên bản bằng cách sử dụng các dịch vụ bưu thiếp được thảo luận bên dưới.

Bạn có thể sử dụng các dịch vụ tương tự mà chúng tôi đã sử dụng. Dịch vụ bưu thiếp làm sẵn Tạo bưu thiếp cho ngày 8 tháng 3 trực tuyến

Sử dụng các dịch vụ sau để tạo bưu thiếp một cách thực tế ngay từ đầu.

  • Canva là một trình chỉnh sửa ảnh chức năng nổi tiếng. Ở đây bạn sẽ tìm thấy nhiều mẫu. Yêu cầu đăng ký.
  • Printclick Nếu bạn có công việc kinh doanh của riêng mình thì bạn có thể đặt hàng một loạt bưu thiếp có logo và địa chỉ liên hệ của công ty bạn. Bạn có thể sử dụng trình tạo bưu thiếp princlick. Khuyến mãi lớn và không tốn kém.
  • Crello là một biên tập viên yêu cầu đăng ký. Đừng sợ tiếng Anh, bạn có thể chuyển sang tiếng Nga trong cài đặt.
  • Bưu thiếp trực tuyến dành cho những người có trí tưởng tượng phát triển tốt, vì bạn sẽ phải tạo một tấm bưu thiếp từ đầu.
  • Mumotiki - chuẩn bị một bức tranh đẹp và bạn có thể thêm dòng chữ chúc mừng vào đây. Nhân tiện, nếu bạn chỉ cần thêm văn bản vào ảnh thì bạn có thể xem qua.
  • Tôi hy vọng rằng bằng cách sử dụng một trong những máy phát điện này, bạn sẽ có thể chúc mừng xứng đáng những người phụ nữ của mình vào ngày 8 tháng 3!

    Tác giả: Ivanova Natalya 2019-02-17

    Nội dung của bài viết:

    Google Plus đang bị đóng cửa Nền tảng Google Plus đã không đáp ứng được kỳ vọng của các nhà phát triển và sẽ bị xóa hoàn toàn vào ngày 2 tháng 4 năm 2019. Cùng với đó, các album được liên kết với nó trong Google Photos sẽ biến mất và việc ủy ​​quyền trên các trang web có tài khoản Google Plus sẽ không còn khả dụng. Kể từ ngày 4 tháng 2, chức năng tạo hồ sơ, kênh và trang Google Plus sẽ không còn khả dụng. Nếu nội dung có giá trị được lưu trữ trên tài khoản của bạn thì bạn có thể tải xuống bản sao lưu.
    Những thay đổi này sẽ ảnh hưởng nhiều nhất đến các blogger điều hành blog của họ trên Blogspot. Một số tiện ích G+, nhận xét G+ và hồ sơ trên Google + của bạn sẽ không còn khả dụng. Điều này được nêu trong thông báo trong khu vực quản trị Blogger:
    Sau thông báo rằng API Google+ sẽ ngừng hoạt động vào tháng 3 năm 2019, một số thay đổi sẽ được thực hiện đối với việc tích hợp Blogger với Google+ vào ngày 4 tháng 2.
    Tiện ích Google+. Thiết kế blog sẽ không còn hỗ trợ các tiện ích Nút +1, Người theo dõi trên Google+ và Huy hiệu Google+ nữa. Tất cả các phiên bản của các tiện ích này sẽ bị xóa khỏi blog của bạn.
    nút +1. Các nút +1 và G+ cũng như các liên kết "Xuất bản lên Google+" bên dưới các bài đăng trên blog và trong thanh điều hướng sẽ bị xóa.
    Xin lưu ý rằng nếu bạn đang sử dụng mẫu tùy chỉnh có các tính năng của Google+ thì có thể cần phải sửa đổi mẫu đó. Vui lòng liên hệ với người đã cung cấp cho bạn mẫu này để nhận được đề xuất.
    Nhận xét trên Google+. Hỗ trợ nhận xét bằng Google+ sẽ ngừng hoạt động và tất cả các blog sử dụng tính năng này sẽ được khôi phục về nhận xét tiêu chuẩn của Blogger. Rất tiếc, nhận xét được đăng qua Google+ không thể chuyển sang Blogger nên chúng sẽ không xuất hiện trên blog của bạn nữa. Xóa nhận xét trên Google Plus Thật không may, các nhận xét đã được xuất bản trong hệ thống sẽ bị xóa vĩnh viễn. Bạn chỉ có thể sử dụng cùng một công cụ https://takeout.google.comđể nói các nhận xét dự phòng từ Google+ vào máy tính của bạn. Chỉ có điều là không có bộ nạp khởi động cho nó và bạn chỉ có thể khôi phục nhận xét theo cách thủ công theo một cách khá quanh co. Thật tốt là tôi đã đến đúng giờ. Cách thay thế hồ sơ Google Plus bằng hồ sơ Blogger Nếu bạn đang viết blog trên Blogspot thì bây giờ bạn nên quay lại từ hồ sơ Google Plus sang hồ sơ Blogger (dành cho những người đã chuyển đổi lên Google Plus cùng một lúc). Tôi khuyên bạn nên thực hiện việc này ngay bây giờ để tránh những tình huống không mong muốn có thể xảy ra khi xóa tài khoản Google Plus. Cách lấy lại hồ sơ Blogger của bạn. Điều này rất dễ thực hiện trong cài đặt quản trị viên Blogger:
    Cài đặt -> Cài đặt người dùng -> Hồ sơ người dùng - ở đây chọn Blogger


    Lưu các thay đổi của bạn.

    Xác nhận chuyển sang và nhập tên hoặc biệt hiệu của bạn.

    Đừng quên tải hình đại diện lên hồ sơ Blogger của bạn.

    Cách xóa hồ sơ Google Plus Nếu bạn quyết định xóa hồ sơ G+ của mình một lần và mãi mãi, hãy truy cập trang Google Plus của bạn -> Cài đặt -> cuộn xuống cuối trang -> xóa tài khoản Google Plus:


    Tác giả: Ivanova Natalya

    Hôm nay tôi sẽ cho bạn biết CSS3 là gì, nó được sử dụng với mục đích gì, tìm nó ở đâu và cách viết nó một cách chính xác. Tôi cảnh báo bạn, tôi sẽ tự mình nói, đơn giản hóa cho công chúng, như tôi thấy + ví dụ. Vì vậy, hãy bắt đầu từ xa.
    CSS là các kiểu trong đó các thuộc tính của một đối tượng được viết. Điều này có nghĩa là chúng có trong tất cả các công cụ hiện có, nếu bạn không thể tìm thấy chúng, thì có thể bạn đang tìm nhầm chỗ hoặc chúng thực sự không tồn tại ( trang web quanh co). Chúng thường được tìm thấy ở đâu? Thông thường đây là thư mục gốc của trang web, tên của tệp style.css, mặc dù về nguyên tắc, tên này không quan trọng bằng phần mở rộng .css nếu tệp có phần mở rộng như vậy là tệp kiểu.
    Xem thêm trên blog của tôi.

    Tìm chúng ở đâu? Đường dẫn đến tệp được chỉ định trong mẫu giữa