Bài tập cho html css. Công việc thực tế về HTML

1.1. Trên máy chủ Xampp cục bộ của bạn, hãy tạo một thư mục test trong thư mục htdocs có tên test , với các thư mục css , hình ảnh và trang trong đó, cũng như một trang chính index.html trống của trang web thử nghiệm của chúng tôi. Sau đó, trong thư mục trang, tạo một trang web trống, page_1.html và trong thư mục css, hai tệp css trống: styles_1.css và styles_2.css. Đừng xóa thư mục kiểm tra trong tương lai; chúng tôi sẽ thực hiện tất cả các bài tập trong đó. Trong tài liệu html, đừng quên chỉ định mã hóa utf-8 và tiêu đề trang "title". Để truy cập nhanh vào trang chính, hãy tạo dấu trang trong trình duyệt của bạn. Đường dẫn địa chỉ đến trang sẽ trông giống như http://localhost/test/index.html. Hiển thị giải pháp.

Giải bài toán số 1.1

1.2. Tạo lại mã cho trang web như trong hình. Sử dụng bảng định kiểu nội bộ, bộ chọn phần tử p và span, thuộc tính css màu sắc và chiều rộng. Đặt chiều rộng đoạn văn thành 300px. Sử dụng màu đỏ và xanh. Hiển thị giải pháp.

Điều kiện nhiệm vụ số 1.2

Giải bài toán số 1.2

1.3. Sử dụng điều kiện của tác vụ thứ hai, nhưng đặt biểu định kiểu vào tệp bên ngoài styles_1.css . Để kết nối một biểu định kiểu bên ngoài, hãy sử dụng phần tử dịch vụ "liên kết". Hiển thị giải pháp.

Văn bản đoạn văn phải có màu đỏ. Nhưng không, bởi vì... Nội dung của phần tử "span" phải có màu xanh lam.

Giải bài toán số 1.3

1.4. Sử dụng điều kiện của tác vụ thứ ba, nhưng kết nối biểu định kiểu bên ngoài bằng thuộc tính @import, đặt quy tắc trong thành phần dịch vụ "style". Hiển thị giải pháp.

Văn bản đoạn văn phải có màu đỏ. Nhưng không, bởi vì... Nội dung của phần tử "span" phải có màu xanh lam.

Giải quyết vấn đề số 1.4

1.5. Sử dụng điều kiện của bài toán thứ hai, nhưng đặt quy tắc đoạn văn trong tệp bên ngoài styles_1.css và quy tắc cho phần tử "span" trong tệp bên ngoài styles_2.css . Kết nối một trong các tệp này bằng phần tử dịch vụ "liên kết" và tệp thứ hai bằng thuộc tính @import, đặt quy tắc trong phần tử dịch vụ "style". Trong cả bốn nhiệm vụ, kết quả phải giống nhau! Hiển thị giải pháp.

Văn bản đoạn văn phải có màu đỏ. Nhưng không, bởi vì... Nội dung của phần tử "span" phải có màu xanh lam.

Giải bài toán số 1.5

1.6. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Sử dụng bộ chọn ID, lớp và thuộc tính. Hiển thị giải pháp.

"Nhịp" màu xanh lam.
"Nhịp" màu xanh lá cây.

Mã trang của nhiệm vụ số 1.6

Trang bắt buộc phải xuất hiện trong task 1.6

#p_1( color: red; width: 300px; ) .s_1( color: blue; ) span( color: green; )

Giải bài toán số 1.6

1.7. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Nó chỉ được phép sử dụng các bộ chọn theo ngữ cảnh, con và liền kề trong các quy tắc CSS. Hiển thị giải pháp.

Màu cam "em"

Dòng màu đỏ đầu tiên của đoạn văn.
"Nhịp" màu xanh lam.

Mã trang cho nhiệm vụ số 1.7

Trang bắt buộc phải xuất hiện trong task 1.7

Giải bài toán số 1.7

1.8. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Sử dụng bộ chọn lớp giả và phần tử giả :hover , :visited , ::first-letter . Đối với một đoạn văn, hãy sử dụng bộ chọn phần tử thông thường. Hiển thị giải pháp.

Khi bạn di chuột qua tôi, tôi chuyển sang màu cam.

Dòng màu đỏ đầu tiên của đoạn văn.
Tôi đã được viếng thăm rồi.

Mã trang cho nhiệm vụ số 1.8

Trang bắt buộc phải xuất hiện trong task 1.8

P( color: red; width: 300px; ) em:hover( color: orange; ) p::first-letter( color: blue; ) a:visited( color: green; )

Giải bài toán số 1.8

1.9. Bộ chọn nào có độ đặc hiệu cao hơn: p em(...) hoặc p.class(...), #m_d(...) hoặc em.m_cl(...), div p#my_id span(... ) hoặc div span#s_id(...), div>div.my_class p.red_color span:hover(...) hoặc div p+div p.green_color span(...). Hiển thị giải pháp.

Chúng tôi xác định tính đặc hiệu và so sánh. p em(...) em.m_cl(...), bởi vì (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), bởi vì (0,4,4)>(0,2,5).

Giải pháp cho vấn đề số 1.9

§2. Thuộc tính CSS cho văn bản, phông chữ, danh sách, bảng và biểu mẫu

2.1. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Đặt chiều rộng (chiều rộng) của đoạn văn thành 500px, nền (màu nền) lần lượt đặt thành màu vàng và tím (tím), khoảng cách giữa các từ lần lượt là 3px và 12px, khoảng cách giữa các chữ cái riêng lẻ - 1px và 2px, chiều cao dòng - 1.1em và 1.6em, thụt dòng đầu tiên - 1% và 3%. Trong đoạn thứ hai, văn bản phải được căn chỉnh sang phải. Đừng quên gạch bỏ (gạch chân) những dòng thích hợp. So sánh kết quả định dạng của cả hai đoạn văn. Hiển thị giải pháp.

Câu đầu tiên của đoạn văn.

Câu đầu tiên của đoạn văn. Câu dài thứ hai của đoạn văn. Câu thứ ba và cuối cùng của đoạn văn.

Mã trang cho nhiệm vụ số 2.1

Trang bắt buộc phải xuất hiện trong bài tập số 2.1

P_1( chiều rộng: 500px; màu nền: màu vàng; khoảng cách từ: 3px; khoảng cách chữ: 1px; chiều cao dòng: 1.1em; thụt lề văn bản: 1%; ) #p_2( trang trí văn bản: xuyên suốt) .p_3( chiều rộng: 500px; màu nền: tím; khoảng cách từ: 12px; khoảng cách chữ: 2px; chiều cao dòng: 1,6em; thụt lề văn bản: 3%; căn chỉnh văn bản: phải; ) #p_4( văn bản -trang trí: gạch chân; )

Giải quyết vấn đề số 2.1

2.2. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Đặt chiều rộng (width) của đoạn văn là 500px, nền (background-color) lần lượt đặt thành màu vàng và tím (tím). Đối với đoạn đầu tiên, hãy sử dụng phông chữ Arial và đối với đoạn thứ hai - Times New Roman. Đặt cỡ chữ trong cả hai đoạn văn thành 1em. Sử dụng các thuộc tính font-variant , font-weight , font-style khi cần thiết. So sánh kết quả định dạng văn bản với kết quả định dạng ở bài 2.1. Hiển thị giải pháp.

Câu đầu tiên của đoạn văn. Câu dài thứ hai của đoạn văn. Câu thứ ba và cuối cùng của đoạn văn.

Câu đầu tiên của đoạn văn. Câu dài thứ hai của đoạn văn. Câu thứ ba và cuối cùng của đoạn văn.

Mã trang cho nhiệm vụ số 2.2

Trang bắt buộc phải xuất hiện trong bài tập số 2.2

P_1( chiều rộng: 500px; màu nền: màu vàng; họ phông chữ: arial; cỡ chữ: 1em; ) #p_2( biến thể phông chữ: chữ hoa nhỏ; ) .p_3( chiều rộng: 500px; màu nền: tím; họ phông chữ: "tiểu thuyết mới lần này"; cỡ chữ: 1em; font-weight: đậm; ) #p_4( kiểu phông chữ: in nghiêng; )

Giải quyết vấn đề số 2.2

2.3. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Đặt chiều rộng (width) của danh sách thành 500px, nền (background-color) lần lượt đặt thành màu vàng và tím (tím). Sử dụng các thuộc tính list-style-type và list-style-position khi cần thiết. So sánh kết quả định dạng của cả hai danh sách. Hiển thị giải pháp.

• Chúng tôi sử dụng loại dấu thập phân.

1. Chúng tôi đặt các điểm đánh dấu bên ngoài danh sách.
2. Chúng tôi sử dụng loại điểm đánh dấu hình vuông.

Mã trang cho nhiệm vụ số 2.3

Trang bắt buộc phải xuất hiện trong bài tập số 2.3

List_1 ( chiều rộng: 500px; màu nền: màu vàng; kiểu kiểu danh sách: số thập phân; kiểu danh sách-vị trí: bên ngoài; ) .list_2( chiều rộng: 500px; màu nền: tím; kiểu kiểu danh sách: hình vuông; danh sách kiểu-vị trí: bên trong; )

Giải bài toán số 2.3

2.4. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Sử dụng các thuộc tính caption-side , border-collapse border-spacing ,empty-cells . So sánh kết quả định dạng cả hai bảng. Hiển thị giải pháp.

Mã trang cho nhiệm vụ số 2.4

Trang bắt buộc phải xuất hiện trong nhiệm vụ số 2.4

Table_1( caption-side: top; border-collapse: thu gọn; ) .table_2( chú thích-side: dưới cùng; border-collapse: riêng biệt; border-spacing: 5px; ô trống: ẩn; )

Giải quyết vấn đề số 2.4

§3. Đặt kích thước, đường viền, phần đệm và lề của các phần tử

3.1. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Đặt chiều rộng của đoạn đầu tiên thành 400px, đoạn thứ hai thành 300px. Đặt chiều cao của đoạn đầu tiên thành 10vh, đoạn thứ hai thành 200px. Trong đoạn thứ hai, đặt giới hạn chiều rộng tối thiểu là 400px và giới hạn chiều cao tối đa là 100px. Sử dụng các thuộc tính chiều rộng, chiều cao, chiều rộng tối thiểu, chiều cao tối đa. Lưu ý kết quả cuối cùng về chiều rộng và độ lớn của đoạn thứ hai do các ràng buộc được áp dụng. Hiển thị giải pháp.

Chiều rộng đoạn văn là 400px, chiều cao bằng 10% chiều cao của vùng xem cửa sổ trình duyệt.

Chiều rộng đoạn văn sẽ là 400px, bởi vì... chiều rộng nhỏ hơn chiều rộng tối thiểu và chiều cao là 100px, vì chiều cao vượt quá chiều cao tối đa.

Mã trang cho nhiệm vụ số 3.1

Trang bắt buộc phải xuất hiện trong bài tập số 3.1

P_1( màu nền: vàng; chiều rộng: 400px; chiều cao: 10vh; ) .p_2( màu nền: tím; chiều rộng tối thiểu: 400px; chiều cao tối đa: 100px; chiều rộng: 300px; chiều cao: 200px; )

Giải bài toán số 3.1

3.2. Trong điều kiện của nhiệm vụ 3.1, mã của trang HTML được trình bày và bên dưới là hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Tận dụng kết quả của Vấn đề 3.1 bằng cách thêm các thuộc tính bổ sung vào biểu định kiểu để đặt ranh giới đoạn thích hợp: border , border-top , border-bottom . Đặt chiều rộng của tất cả các đường viền thành 4px. Hiển thị giải pháp.

Trang bắt buộc phải xuất hiện trong bài tập số 3.2

P_1( màu nền: màu vàng; chiều rộng: 400px; chiều cao: 10vh; đường viền: màu đỏ đặc 4px; đường viền trên: màu xanh chấm; đường viền dưới: màu xanh nét đứt; ) .p_2( màu nền: tím; chiều rộng tối thiểu: 400px; chiều cao tối đa: 100px; chiều rộng: 300px; chiều cao: 200px; đường viền: màu xanh lục đậm 4px; )

Giải bài toán số 3.2

3.3. Trong điều kiện của nhiệm vụ 3.1, mã của trang HTML được trình bày và bên dưới là hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Tận dụng kết quả của bài toán 3.1 và 3.2 bằng cách thêm các thuộc tính bổ sung vào style sheet đặt làm tròn các góc tương ứng của đoạn đầu tiên và các đường viền ngoài của đoạn thứ hai: border-radius , border-bottom-right-radius , bán kính đường viền dưới cùng bên trái, đường viền, đường viền- offset. Đặt đường viền làm tròn thành 1em và các góc dưới cùng thành 2em. Đặt khoảng cách giữa viền trong và viền ngoài là 2px. Đặt chiều rộng đường viền bên ngoài thành 4px. Hiển thị giải pháp.

Trang bắt buộc phải xuất hiện trong nhiệm vụ số 3.3

P_1( màu nền: màu vàng; chiều rộng: 400px; chiều cao: 10vh; đường viền: màu đỏ đậm 4px; đường viền trên: màu xanh chấm; đường viền dưới: màu xanh nét đứt; bán kính đường viền: 1em; bán kính đường viền dưới cùng bên phải: 2em; bán kính viền dưới bên trái: 2em; ) .p_2( màu nền: tím; chiều rộng tối thiểu: 400px; chiều cao tối đa: 100px; chiều rộng: 300px; chiều cao: 200px; đường viền: màu xanh lá cây đặc 4px; đường viền: màu xanh đậm 4px; đường viền ngoài: 2px; )

Giải bài toán số 3.3

3.4. Trong điều kiện của nhiệm vụ 3.1, mã của trang HTML được trình bày và bên dưới là hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Tận dụng kết quả của nhiệm vụ 3.1, 3.2 và 3.3 bằng cách thêm các thuộc tính bổ sung vào biểu định kiểu để đặt mức thụt lề bên trong và bên ngoài của các đoạn văn: đệm, đệm-trái, lề, lề trên. Đặt khoảng đệm trong cả hai đoạn thành 0,5em, sau đó xác định lại khoảng đệm của chúng thành 0,8em. Đặt lề thành 30px, nhưng trong đoạn thứ hai, xác định lại lề trên thành 50px. So sánh kết quả của cả bốn bài toán. Hiển thị giải pháp.

Trang bắt buộc phải xuất hiện trong nhiệm vụ số 3.4

P_1( màu nền: màu vàng; chiều rộng: 400px; chiều cao: 10vh; đường viền: màu đỏ đậm 4px; đường viền trên: màu xanh chấm; đường viền dưới: màu xanh nét đứt; bán kính đường viền: 1em; bán kính đường viền dưới cùng bên phải: 2em; bán kính viền dưới bên trái: 2em; phần đệm: 0,5em; phần đệm bên trái: 0,8em; lề: 30px; ) .p_2( màu nền: tím; chiều rộng tối thiểu: 400px; chiều cao tối đa: 100px; chiều rộng: 300px; chiều cao: 200px; đường viền: màu xanh lá cây đặc 4px; đường viền: màu xanh lam đậm 4px; đường viền ngoài: 2px; phần đệm: 0,5em; phần đệm bên trái: 0,8em; lề: 30px; lề trên: 60px; )

Giải bài toán số 3.4

§4. Đặt màu và nền, sử dụng hình ảnh động

4.1. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Sao chép hình ảnh của chiếc cặp vào thư mục hình ảnh nằm trong thư mục kiểm tra mà chúng tôi đã tạo trước đó trên máy chủ cục bộ (nếu bạn đã xóa nó, hãy xem điều kiện của nhiệm vụ số 1.1 ở đầu sách bài tập và tạo mọi thứ một lần nữa). Văn bản đoạn đầu tiên phải có màu đỏ, nền màu vàng và chiều rộng đoạn văn phải là 300px. Chiều rộng của đoạn thứ hai phải là 300px, đặt nền thành màu tím. Đồng thời, thêm hình nền không được lặp lại, kích thước phải bằng 20% ​​chiều rộng và 40% chiều cao của đoạn văn, vị trí bắt đầu phải được xác định bởi tọa độ x =15px và y =15px . Chỉ chọn vùng nội dung của đoạn văn làm nền. Hiển thị giải pháp.

Văn bản của đoạn này phải có màu đỏ và nền màu vàng. Chiều rộng đoạn văn phải là 300px.

Chiều rộng đoạn văn phải là 300px, nền phải có màu tím. Hình ảnh không được lặp lại, kích thước phải bằng 20% ​​chiều rộng và 40% chiều cao của đoạn văn. Vị trí bắt đầu phải được xác định bởi tọa độ x=15px và y=15px. Chỉ chọn vùng nội dung của đoạn văn làm nền.

Mã trang cho nhiệm vụ số 4.1

Trang bắt buộc phải xuất hiện trong bài tập số 4.1

Background_1( màu: đỏ; màu nền: vàng; ) .background_2( màu nền: tím; hình nền: url("http://localhost/test/images/cabinet.png"); lặp lại nền: không -repeat; vị trí nền: 15px 15px; kích thước nền: 20% 40%; clip nền: hộp nội dung; ) .border_1( phần đệm: 15px; chiều rộng: 300px; đường viền: màu xanh lục 2px; )

Giải bài toán số 4.1

4.2. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Văn bản của đoạn đầu tiên phải có màu đen và nền phải có dải màu tuyến tính từ đỏ sang trắng. Chiều rộng đoạn văn phải là 300px và chiều cao của nó là 150px. Chiều rộng của đoạn thứ hai phải là 300px và chiều cao của nó là 150px. Nền phải có độ dốc xuyên tâm từ xanh sang trắng. Hình elip gradient phải có bán kính 250px và 280px và tâm phải nằm ở điểm có tọa độ x = 100px và y = 180px. Hiển thị giải pháp.

Văn bản của đoạn này phải có màu đen và nền phải có dải màu tuyến tính từ đỏ sang trắng. Chiều rộng đoạn văn phải là 300px và chiều cao của nó là 150px.

Chiều rộng đoạn văn phải là 300px và chiều cao của nó là 150px. Nền phải có độ dốc xuyên tâm từ xanh sang trắng. Hình elip chuyển màu phải có bán kính 250px và 280px và tâm phải nằm ở điểm có tọa độ x=100px và y=180px.

Mã trang cho nhiệm vụ số 4.2

Trang bắt buộc phải xuất hiện trong bài tập số 4.2

Background_1( màu: đen; hình nền: gradient tuyến tính(90deg, #ff0000, #ffffff); ) .background_2( nền: radial-gradient(250px 280px ở 100px 180px, #00ff00, #ffffff); ) .border_1( phần đệm: 15px; chiều rộng: 300px; chiều cao: 150px; đường viền: màu xanh đậm 3px; )

Giải bài toán số 4.2

4.3. Dưới đây là mã cho trang html, cũng như mã cho biểu định kiểu bên ngoài styles_1.css. Nhập chúng vào Notepad++ và thử nghiệm bằng cách thay đổi giá trị của thuộc tính hoạt ảnh.

Mã trang HTML cho nhiệm vụ số 4.3

Background_1( đệm: 0px; chiều rộng: 450px; chiều cao: 100px; đường viền: rắn 3px màu đỏ; tên hoạt hình: example_1; độ trễ hoạt hình: 1s; thời lượng hoạt ảnh: 4s; đếm hoạt hình-lặp: vô hạn; hướng hoạt hình: đảo ngược; chức năng định giờ hoạt ảnh: dễ dàng; chế độ điền hoạt ảnh: lùi; ) @keyframes example_1( 0%( nền: #ff0000; chiều cao: 0px; ) 100% ( nền: #0000ff; chiều cao: 200px; ) )

Mã bảng định kiểu bên ngoài cho nhiệm vụ số 4.3

4.4. Dưới đây là mã cho trang html, cũng như mã cho biểu định kiểu bên ngoài styles_2.css. Nhập chúng vào Notepad++ và thử nghiệm bằng cách thay đổi giá trị của thuộc tính chuyển tiếp.

Mã trang HTML cho nhiệm vụ số 4.4

Background_1( đệm: 10px; chiều rộng: 100px; chiều cao: 100px; đường viền: màu xanh lam 3px; màu nền: #ff0000; thuộc tính chuyển tiếp: chiều rộng, màu nền; độ trễ chuyển tiếp: 0,2 giây; thời lượng chuyển tiếp: 2 giây; transition-timing-function: easy-in; ) p:hover( con trỏ: con trỏ; màu nền: #0000ff; chiều rộng: 450px; )

Mã bảng định kiểu bên ngoài cho nhiệm vụ số 4.4

§5. Hiển thị các phần tử trong tài liệu

5.1. Dưới đây là mã cho trang html, cũng như mã cho biểu định kiểu bên ngoài styles_2.css. Nhập chúng vào Notepad++. Lưu ý cách các đoạn văn hoạt động khi bạn cuộn trang và giao diện của phần tử "span" thay đổi như thế nào khi bạn di chuột qua nó và do đó, giá trị của thuộc tính display được áp dụng cho nó sẽ thay đổi.

Thay đổi hiển thị

vị trí: cố định;

vị trí: tuyệt đối;

Mã trang HTML cho nhiệm vụ số 5.1

Div_0( đệm: 10px; chiều rộng: 200px; chiều cao: 200px; đường viền: màu cam 3px; ) span:hover( con trỏ: con trỏ; hiển thị: khối; ) .div_1( đệm: 10px; chiều rộng: 200px; chiều cao: 600px; đường viền : màu cam đậm 3px; nền: gradient tuyến tính(180deg, #0000ff, #ffffff); vị trí: cố định; trên cùng: 250px; ) .div_2( đệm: 10px; chiều rộng: 200px; chiều cao: 100px; đường viền: liền khối 3px màu đỏ; nền: gradient tuyến tính (90deg, #0000ff, #ffffff); vị trí: tuyệt đối; trên cùng: 1100px; bên trái: 0px; )

Mã bảng định kiểu bên ngoài cho nhiệm vụ số 5.1

5.2. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Các đặc tính cần thiết của các phần tử được chỉ ra trong bản vẽ. Hiển thị giải pháp.

Mã trang cho nhiệm vụ số 5.2

Trang bắt buộc phải xuất hiện trong nhiệm vụ số 5.2

Div_1( đệm: 15px; chiều rộng: 300px; chiều cao: 400px; đường viền: nét đứt 5px #00ff00; vị trí: cố định; trên cùng: 30px; bên trái: 35px; ) .div_3:hover( con trỏ: con trỏ; độ mờ: 0,3; ) .div_2 ( đệm: 5px; chiều rộng: 70px; chiều cao: 50px; đường viền: màu cam 2px; nền: radial-gradient(35px 35px tại 10px 10px, #00ffff, #ffffff); float: left; ) .div_3( đệm: 5px; chiều rộng: 70px; chiều cao: 50px; đường viền: chấm 2px màu đỏ; nền: gradient tuyến tính(45deg, #0000ff, #ffffff); float: right; )

Giải quyết vấn đề số 5.2

5.3. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Các đặc tính cần thiết của các phần tử được chỉ ra trong bản vẽ. Hiển thị giải pháp.

Mã trang cho nhiệm vụ số 5.3

Trang bắt buộc phải xuất hiện trong nhiệm vụ số 5.3

Div_1( đệm: 10px; chiều rộng: 500px; chiều cao: 200px; đường viền: nét đứt 5px #0000ff; màu nền: màu vàng; vị trí: tuyệt đối; trên cùng: 30px; bên trái: 35px; ) .div_2( đệm: 5px; chiều rộng: 200px ; chiều cao: 100px; đường viền: màu xanh đậm 2px; float: trái; tràn: cuộn; ) .div_3( đệm: 5px; chiều rộng: 200px; chiều cao: 100px; đường viền: chấm màu xanh 2px; float: phải; tràn: tự động; )

Giải bài toán số 5.3

§6. @-quy tắc. Đang chèn nội dung. In tài liệu.

6.1. Dưới đây là mã của trang html, cũng như hình thức của trang khi được trình duyệt hiển thị. Một biểu định kiểu bên ngoài được kết nối với trang, mã của nó cần được khôi phục. Để tạo bộ đếm cho nội dung tài liệu và phần tử h2, hãy sử dụng thuộc tính counter-reset và chèn các giá trị bộ đếm bằng cách sử dụng thuộc tính nội dung và bộ đếm tăng. Hiển thị giải pháp.

Giới thiệu về HTML

HTML là gì?

Trình duyệt hiển thị một tài liệu web.

Khái niệm về thẻ HTML và cú pháp của nó.

Định dạng văn bản

Khối và các phần tử nội tuyến.

Chia văn bản thành các đoạn văn. Áp dụng tiêu đề.

Mã trang cho nhiệm vụ số 6.1

Trang bắt buộc xuất hiện trong nhiệm vụ số 6.1

Body( counter-reset: parag_1; /* Tạo bộ đếm cho phần nội dung của tài liệu */ ) h2( counter-reset: parag_2; /* Tạo bộ đếm cho tiêu đề "h2" */ ) /* Đếm tất cả "h2 " trong phần tử "body" */ /* Chèn nội dung trước mỗi "h2": line+giá trị bộ đếm hiện tại+line */ h2:trước( counter-increment: parag_1 1; content: "§" counter(parag_1) ". "; ) /* Đếm trong phần tử "h2" tất cả "h3" */ /* Chèn nội dung trước mỗi "h3": giá trị bộ đếm hiện tại parag_1+line+giá trị bộ đếm hiện tại parag_2+line */ h3:trước( bộ đếm tăng: parag_2 1; nội dung: bộ đếm( parag_1) "." bộ đếm(parag_2) "."; )

Giải bài toán số 6.1

§7. Bố cục thực tế của các thành phần trang web trong HTML và CSS

7.1.1 Tải xuống mã hướng dẫn cho khung trang thích ứng, sử dụng các nhận xét để nghiên cứu mã đó và sau đó tự thiết kế mã đó.

7.1.2 Tải xuống mã hướng dẫn cho khung trang thích ứng, nghiên cứu mã bằng cách sử dụng nhận xét và sau đó tự thiết kế. So sánh với tùy chọn đầu tiên.

7.1.3 Tải xuống mã hướng dẫn cho khung trang thích ứng, nghiên cứu mã bằng cách sử dụng nhận xét và sau đó tự thiết kế. So sánh với các tùy chọn trước đó.

7.2.1 Hướng dẫn có thể tải xuống chỉ cho bạn cách tạo điều hướng bên của trang để cuộn lên hoặc xuống. Không có chú thích nhưng cũng không có nhiều code nên việc hiểu nó sẽ không quá khó khăn. Nghiên cứu ví dụ và sau đó biến nó thành của riêng bạn.

7.2.2 Sử dụng mã từ ví dụ trước, tạo nút "Quay lại đầu trang" ở cuối trang. Loại bỏ điều hướng bên. Nếu bạn không thể hoàn thành nhiệm vụ, hãy xem giải pháp và sau đó tự nhập mã.

7.2.3 Hướng dẫn có thể tải xuống cho biết cách tạo nút "Quay lại đầu trang" ở bên cạnh trang web xuất hiện sau khi cuộn trang theo một số được chỉ định, ví dụ: pixel. Comment thì ít nhưng code cũng không nhiều nên việc hiểu sẽ không khó. Nghiên cứu ví dụ và sau đó biến nó thành của riêng bạn.

7.3.1 Tạo menu ngang như hình. Sử dụng danh sách để thực hiện việc này, đặt liên kết vào các mục trong danh sách. Để làm cho các mục xuất hiện dưới dạng một dòng, hãy chuyển đổi chúng thành các phần tử cùng dòng. Khi bạn di chuột qua các mục menu, chúng sẽ đổi màu thành màu đen. Bạn có thể tải xuống giải pháp. Chuyển đổi menu sang dọc. Để xóa số mục, hãy sử dụng thuộc tính tương ứng cho điểm đánh dấu danh sách (xem tài liệu tham khảo CSS).

Yêu cầu xuất hiện menu nhiệm vụ số 7.3.1

7.3.2 Nghiên cứu mã menu thả xuống sau đây rồi tự nhập mã đó.

7.3.3 Nghiên cứu mã menu đa cấp thả xuống dọc sau đây rồi tự gõ.

7.3.4 Nghiên cứu đoạn mã sau để có menu thả xuống mượt mà theo chiều ngang, rồi tự nhập mã đó.

Xây dựng website giáo dục số 1

7.4.1 Trước tiên, hãy xem qua các trang của trang web giáo dục, tải xuống và nghiên cứu kỹ mã của nó, sau đó tự thiết kế trang web (không cần bình luận, chỉ có mã).

Giao diện website giáo dục số 2

7.5.1 Để thực hành thêm về bố cục trang web, hãy tải xuống một ví dụ đào tạo khác của một trang web và sử dụng các nhận xét để nghiên cứu mã của trang web đó, sau đó, sử dụng bố cục và mẫu đồ họa có sẵn, hãy tự thiết kế trang web.
Cố gắng tự tạo một biểu định kiểu cho độ phân giải cao. Nếu bạn đang làm việc trên máy tính xách tay, thì để mô phỏng độ phân giải cao hơn, hãy thay đổi độ phân giải trong truy vấn phương tiện từ 1366px, chẳng hạn như thành 1266px, để biểu định kiểu cho độ phân giải màn hình lớn hoạt động. Khi tạo biểu định kiểu, hãy sử dụng hệ số kích thước là 1,3. Sau đó nhìn kết quả hiển thị trên trình duyệt và điều chỉnh.
Kích thước hình ảnh có thể được thay đổi trong trình chỉnh sửa đồ họa hoặc được kéo dài bằng thuộc tính CSS thích hợp (xem ví dụ và tài liệu tham khảo).

Chỉ dành cho người đăng ký

Chỉ dành cho người đăng ký

Chỉ dành cho người đăng ký

Chỉ dành cho người đăng ký

Chỉ dành cho người đăng ký

Chỉ dành cho người đăng ký

Công việc thực tế về HTML

Nhiệm vụ số 1.

Tạo một tệp HTML cơ bản

1. Tạo một thư mục cá nhân nơi bạn sẽ lưu tất cả các tệp trên trang web của mình.

2. Nhấp chuột phải và chọn Mới - Tệp trống.

3. Nhập tên tệp rasp.html.

4. Nhấp chuột phải vào “Mở bằng” - “Bàn di chuột”

5. Nhập một tài liệu html đơn giản:

Tệp hướng dẫn HTML

Lịch học vào thứ Tư.

6. Lưu tài liệu và đóng trình chỉnh sửa.

7. Mở tài liệu rasp.html bằng cách nhấp đúp chuột và kiểm tra kết quả.

Nhiệm vụ số 2.

Kiểm soát vị trí của văn bản trên màn hình

1. Thực hiện theo bước số 4 trong tác vụ trước đối với tệp rasp.html

2. Thực hiện các thay đổi đối với tệp rasp.html, đặt các từLịch học, lớp học vào thứ Tư trên các dòng khác nhau.

Ví dụ:

Lịch trình

các lớp học

vào thứ Tư.

Đừng ngạc nhiên khi giao diện trang Web của bạn không thay đổi.

Nhiệm vụ số 3.

Kiểm soát vị trí văn bản trên màn hình 2

1. Thực hiện theo bước số 4 trong tác vụ đầu tiên đối với tệp rasp.html

2. Thực hiện các thay đổi đối với tệp rasp.html:

Ví dụ:

Lịch trình

các lớp học

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

Sự xuất hiện của các dòng sẽ thay đổi. Tại sao văn bản thay đổi?

Nhiệm vụ số 4.

Định dạng văn bản

Thẻ nguồn cấp dữ liệu dòng
tách một dòng khỏi văn bản hoặc đồ họa tiếp theo.

Thẻ đoạn văn

cũng phân tách dòng mà còn thêm một dòng trống, điều này trực quan

làm nổi bật một đoạn văn.

Tệp hướng dẫn HTML

Lịch trình

các lớp học

Cho thứ tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

Nhiệm vụ số 5.

Định dạng văn bản

1. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Lịch trình

các lớp học

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Trả lời câu hỏi: Thẻ nào dùng để đặt kiểu chữ gạch chân, in nghiêng, in đậm?

Nhiệm vụ số 6.

Đặt kích thước ký tự của trang Web

Có hai cách để kiểm soát kích thước văn bản được trình duyệt hiển thị:

sử dụng các kiểu tiêu đề,

Đặt kích thước phông chữ của tài liệu chính hoặc kích thước phông chữ hiện tại.

Sáu thẻ tiêu đề được sử dụng: từ

trước

(thẻ này gấp đôi, tức là nó yêu cầu đóng).

Mỗi thẻ có một kiểu cụ thể được cài đặt trình duyệt gán cho nó.

1. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Thời khóa biểu các lớp

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Thay thế thẻ h1 bằng h2-h6 và xem kích thước tiêu đề thay đổi như thế nào.

Nhiệm vụ số 7.

Đặt kích thước phông chữ hiện tại

Thẻ phông chữ cho phép bạn đặt kích thước của phông chữ hiện tại ở từng vị trí của văn bản trong

nằm trong khoảng từ 1 đến 7.

Tệp hướng dẫn HTML

Thời khóa biểu các lớp

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Thay thế kích thước phông chữ bằng các kích thước khác và xem kích thước văn bản thay đổi như thế nào.

Nhiệm vụ số 8.

Đặt màu phông chữ

Nhãn cung cấp khả năng kiểm soát kiểu chữ, màu sắc và kích thước văn bản.

Để thay đổi màu phông chữ, bạn có thể sử dụng nó trong thẻ thuộc tính MÀU=”X”. Thay vì

“X”, bạn phải thay thế tên tiếng Anh của màu trong dấu ngoặc kép (“ ”) hoặc hệ thập lục phân của nó

nghĩa. Khi chỉ định một màu là số thập lục phân, bạn phải biểu thị màu đó

bị phân hủy thành ba thành phần: đỏ (R – Red), xanh lục (G – Green), xanh lam (B – blue),

mỗi trong số đó có giá trị từ 00 đến FF. Trong trường hợp này chúng ta đang giải quyết cái gọi là

định dạng RGB.

Ví dụ về viết văn bản ở định dạng RGB được hiển thị trong Bảng 1:

1
. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Lịch trình

Các lớp học cho thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Thay đổi màu sang màu khác và xem kết quả của thẻ phông chữ.

Nhiệm vụ số 9.

Căn chỉnh văn bản theo chiều ngang.

Căn chỉnh văn bản xác định hình thức của nó và hướng của các cạnh đoạn văn và có thể sang trái, phải, giữa hoặc căn đều. Thẻ đoạn văn thường được sử dụng để thiết lập căn chỉnh văn bản

1. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Lịch trình

lớp học vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

Tạo một trang Web theo ví dụ sau.

Màu của văn bản được chỉ định trong ngoặc. Căn chỉnh văn bản phải có mặt.

Đặt tên cho tập tinbánh quy.html

Khả năng định dạng chính xác mã CSS rất quan trọng đối với mọi nhà thiết kế web. Bài học này được thiết kế dành cho những người mới bắt đầu bước những bước đầu tiên.

Giới thiệu

Bạn cần phải cực kỳ cẩn thận khi làm việc với CSS. Khi viết mã, bạn nên duy trì sự tập trung cao độ.

Bài học này sẽ đưa ra một ví dụ về cách tạo một trang HTML đơn giản bằng cách sử dụng bố cục khối (không sử dụng bảng). Chúng ta cũng sẽ học cách đặt các kiểu vào một biểu định kiểu riêng biệt.

Bước #1 - Đánh dấu và sử dụng thẻ

Đánh dấu HTML luôn đi trước phong cách. Sẽ chẳng ích gì nếu nhảy vào CSS mà không chuẩn bị sẵn HTML.

HTML là ngôn ngữ đánh dấu siêu văn bản, hay nói cách khác HTML mô tả cấu trúc thông tin văn bản của một trang. Trước khi bắt đầu áp dụng các kiểu CSS, chúng ta cần học cách áp dụng các thành phần cấu trúc.

Khi xây dựng đánh dấu, chúng tôi sử dụng "thẻ" được bao quanh bởi dấu ngoặc nhọn. Thẻ được sử dụng để xác định một cái gì đó trên một trang. CSS được sử dụng sau này để xác định vị trí (trong trình duyệt) nội dung của một thẻ cụ thể được hiển thị.

Các thẻ đơn giản nhất trên một trang là:

Hầu hết các thẻ và nội dung được sử dụng bên trong thẻ .

Một thẻ rất quan trọng để phân tách và xác định cấu trúc là