Tạo một reset style sheet cho dự án
Bạn đã học về style mặc định của trình duyệt và display style trong học phần sau:
https://giaiphapwebtl.vn/cac-dac-tinh-phuong-thuc-bo-cuc-trang-phan-1/
Để làm việc với clean slate, bạn cần phải tạo một reset style sheet cho dự án như sau:
1. Sử dụng text editor hay HTML editor lựa chọn của bạn để mở file pc_reset_txt.css từ thư
mục html03 > tutorial. Nhập tên của bạn và ngày tháng vào phần chú giải của file và lưu
tài liệu thành pc_reset.css.
2. Bên trong phần Structural Styles, điền quy tắc style sau để định nghĩa đặc tính display
của một vài phần tử cấu trúc HTML5:
article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}
Bạn sẽ hoàn chỉnh reset style sheet bằng cách thêm các quy tắc style khác cái thiết lập padding
và các margins mặc định quanh các phần tử trang được sử dụng phổ biến, định nghĩa một vài đặc tính
typographic cơ bản, và loại bỏ gạch chân khỏi các siêu liên kết được tìm thấy trong các danh sách
điều hướng.
Để hoàn chỉnh reset style sheet, bạn làm như sau:
1. Bên trong phần Typographic Styles, điền quy tắc style sau để định nghĩa typographic styles
cho một vài phần tử trang:
address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, ol, p, section, span, ul {
background: transparent;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
2. Thêm các quy tắc style sau để loại bỏ list markers khỏi các vật danh sách được tìm thấy bên
trong các danh sách điều hướng:
nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}
3. Thiết lập khoảng cách dòng thành 1 (khoảng trắng đơn) bằng cách áp dụng quy tắc style sau
vào page body:
body {
line-height: 1;
}
4. Lưu thay dổi vào file.
Bắt đầu với trang chủ Pandaisia Chocolates
Trang đầu tiên bạn sẽ làm việc với trên Pandaisia Chocolates là trang chủ của site.
Anne đã tạo một typographical style sheet trong file pc_styles1.css. Liên kết file style
sheet bây giờ cũng như pc_reset.css style sheet bạn vừa tạo và pc_home.css style sheet
cái bạn sẽ làm việc trên cho phần còn lại của phiên làm việc này để thiết kế bố cục trang:
1. Sử dụng editor của bạn để mở file pc_home_txt.css từ thư mục html03 > tutorial. Nhập
tên của bạn và ngày tháng vào phần chú giải của file và lưu tài liệu như pc_home.css.
2. Sử dụng editor của bạn mở file pc_home_txt.html từ cùng thư mục. Nhập tên của bạn
và ngày tháng vào phần chú giải và lưu file như pc_home.html.
3. Bên trong head tài liệu, trực tiếp sau phần tử title, điền các phần tử link sau để liên
kết trang chủ với pc_reset.css, pc_styles1.css, và pc_home.css style sheets.
<link href=”pc_reset.css” rel=”stylesheet” />
<link href=”pc_styles1.css” rel=”stylesheet” />
<link href=”pc_home.css” rel=”stylesheet” />
4. Giành một vài thời gian để nghiên cứu nội dung và cấu trúc của tài liệu pc_home.html.
Chú ý đặc biệt tới việc sử dụng ID và các tên class suốt dọc tài liệu.
5. Lưu thay đổi của bạn đối với file. Bạn có thể muốn giữ file này mở khi bạn làm việc với
pc_home.css style sheet để rằng bạn có thể tham chiếu tới nội dung và cấu trúc của nó.
Anne đã phác thảo bố cục chung cô ta muốn cho home page, được thể hiện ở ảnh dưới. So sánh
nội dung file pc_home.html với phác thảo trong ảnh để có hiểu tốt hơn về nội dung trang
liên quan như thế nào tới bố cục được đề nghị của Anne.
