Tiếp bài làm web với HTML và Blogger.
Cách học nhanh nhất: https://www.w3schools.com/css/default.aspVí dụ bạn muốn lề trái để trống 150px thì sẽ dùng style thế này:
<div style="margin-left: 150px;">
Cứ đi sẽ đến. Cứ tìm sẽ thấy. Cứ gõ cửa sẽ mở. Cứ mơ mộng sẽ thành hiện thực.<br>
行けば着く。探せば見つかる。ドアを叩けば開く。夢見れば叶う。
</div>
Nhưng trong một file HTML rất dài thì mỗi lần viết style như thế khá tốn công. Nên chúng ta gộp lại vào "thư viện" trong một file CSS ví dụ file style.css:
html, body {
height: 100%;
font-family: "Arial", Courier, Serif, Meiryo, メイリオ, MS Mincho, ＭＳ 明朝;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.searchbody {
margin-left: 150px;
}
Trong file này thì chúng ta chỉ định một loạt font chữ dùng cho trang web theo thứ tự ưu tiên thấp dần (để nhỡ máy tính "nạn nhân" không có font đấy).
<div class="searchbody">
Cứ đi sẽ đến. Cứ tìm sẽ thấy. Cứ gõ cửa sẽ mở. Cứ mơ mộng sẽ thành hiện thực.<br>
行けば着く。探せば見つかる。ドアを叩けば開く。夢見れば叶う。
</div>
Tất nhiên, trong phần đầu file html phải chỉ định file CSS đã tạo:
<head>Bạn có thể tạo hàng tỉ file CSS và thêm vào thoải mái, nếu có thời gian. Khi làm web với Blogger, Wordpress vv sẽ có chỗ để bạn soạn thảo CSS (thêm vào CSS tùy chọn của bạn) cho trang của bạn.
<meta charset="UTF-8" />
<title>Yurica Dictionary</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Các ô trích dẫn (QUOTE) trong bài này cũng là CSS tùy biến. Cụ thể là thế này:
blockquote {background: #f5f5f5;font: 13px/20px;color: #444;border-left: 4px solid lightblue;padding: 15px;font-family: Courier New, Tahoma, Verdana, sans-serif, Meiryo UI;}
Màn hình thực tế Add CSS cho Blogger
Font chỉ định là "Courier New", nếu máy "nạn nhân" không có font này thì dùng font "Tahoma", tiếng Nhật thì các font này không trình diễn được nên sẽ là font "Meiryo UI", vì font Meiryo thì xem tiếng Nhật trên web sẽ đẹp hơn ^^
Hi vọng là các bạn hiểu về stylesheet CSS rồi và hãy thực hành trên máy ở nhà nhé.
Trong file CSS:Mark
.marker {
background: linear-gradient(transparent 60%, #ff9999 60%);
}
Trong bài viết:
<span class="marker">Hi vọng là các bạn hiểu về stylesheet CSS rồi và hãy thực hành trên máy ở nhà nhé.</span>
No comments:
Post a Comment