/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1*/ #top-bar.open-menua{position:fixed; top:0.5em; left:0.5em; z-index:5; font-family: 'Nanum Gothic', san-serif; font-size:30px; font-weight:700; width:30px; height:30px; line-height:0.9em; text-align:center; border:0.2emsolid#888; background-color:#fff; border-radius:3em; color:#888; }@media (min-width: 768px) {.mobile-top-bar{display:block; }.mobile-top-barli{display:none; }#main-content{max-width:708px; margin:0auto; padding:0; transition: max-width 0.2s ease-in-out; }#side-bar{display:block!important; position:fixed; top:0; left: -19em; width:17em; height:100%; overflow-y:auto; z-index:10; padding:0.3em0.675em; background-color: rgba(0,0,0,0.1); transition:left0.5s ease-in-out; }#side-bar:target{display:block; left:0; width:17em; margin:0; z-index:10; }#side-bar:target.close-menu{display:block; position:fixed; width:100%; height:100%; top:0; left:0; z-index: -1; }#top-bar.open-menua:hover { text-decoration: none; }.close-menu{margin-left:19em; opacity:0; } }
Second essay. And this is my Author Page!
Này nhóc.
Ta là Fish^12 Fish^12 đây. Muốn học CSS không? Đây là hướng dẫn cho nó đây.
Vấn đề lớn nhất với việc tạo ra hướng dẫn cho CSS là ta sẽ chẳng phải là người đầu tiên. CSS là một phần của bộ ba trong thiết kế web cùng với HTML và JavaScript, và vì thế một phần của internet được dành ra chỉ để trình bày chi tiết công dụng của nó; MDN web docs, CodePen, StackOverFlow, cả những trang web khác nữa. Nếu nhóc muốn được hướng dẫn về CSS chỉnh chu và hoàn chỉnh hơn thì ngoài đó có nhiều tài nguyên ngoại trang cho nhóc đấy.
Dù sao thì, ta có thể nói cho nhóc biết cách lấy lợi thế của CSS trong khuôn khổ SCP wiki.
Lời đầu: Đây là quyển hướng dẫn cho siêu tân binh. Bất kì ai dù chỉ với kiến thức tầm trung về CSS có thể thoải mái downvote bài này. Thêm vào đó, cái quyển hướng dẫn phụ thuộc việc nhóc có cái máy tính hay không; dù rằng nó có thể được thực hiện trên mobile, nó như cục trĩ lòi 5 cm ấy.
Bắt đầu với cái blockquote nhé.
Chuyến tàu sệch xi đang rời trạm.
Một div; nó là một trong những thứ đầu tiên nhóc học với tư cách là một tác giả SCP mới. Nó giúp nhóc dễ dàng tạo ra các log thử nghiệm, bản sao phỏng vấn, báo cáo hành động, vân vân. Cổ điển thật.
nếu nhóc không biết làm cái blockquote, thì nó nhìn như này trong văn bản này.
[[div class="blockquote"]]
Chuyến tàu sệch xi đang rời trạm.
[[/div]]
Ghi chú: div là viết tắt cho division; căn bản thì, nó là một cách để chia trang web thành các phần. Còn nhiều loại nữa, nhưng hiện tại, biết nhiêu đó là đủ rồi nhóc à.
Điều đó khá thú vị nhưng...Nó hoạt động kiểu gì? Đằng sau bức màn ấy nhìn như nào? Giả sử tôi muốn thay đổi giao diện của cái này thì sao.
Với cái đó, chúng ta phải học về khí cụ đầu tiên của chúng ta đã.
DỤNG CỤ KIỂM TRA
Đem cái blockquote đó quay trở lại nào.
Chuyến tàu sệch xi đang rời trạm.
Chuột phải lên nó đi. Khi nhóc nhấn chuột phải lên một trang web(hoặc bất kì thành phần nào; trong trường hợp này nhóc nên nhấn chuột phải lên cái blockquote), nó sẽ hiện lên một cái context menu. Chúng thường thường nhìn như này.
Back
Forward
Reload
Save As
Print
View Page Source
Inspect
Ở cuối ấy, nhóc có thể thấy lựa chọn Kiểm Tra (Inspect); nhấn vào nó đi.
Nó sẽ mở lên Công cụ dành cho nhà phát triển; nó nhìn khá phức tạp đấy, vì thế bây giờ tập trung vào phần elements tab ở khúc nửa trên thôi. Thử tìm vị trí cái blockquote đi.
Nó nên nhìn như này.
<div class="blockquote">
<p>Chuyến tàu sệch xi đang rời trạm.</p>
</div>
Nhấp vào cái blockquote đi.
Cái Style tab nằm nửa dưới sẽ cho thấy chi tiết tất cả các mã CSS có liên quan tới cái blockquote đó.
div.blockquote {
border: 1px dashed #999;
background-color: #f4f4f4;
padding: 0 1em;
margin: 1em 3em;
}
Từ đây nhóc có chìa khóa cho mọi thứ rồi đấy. Cái Công cụ dành cho nhà phát triển này cho nhóc khả năng chỉnh sửa bất kì trang web nào và nhìn thấy sự thay đổi trong thời gian thực.
Nhóc có thể thay đổi các biến...
background-color: #f4f4f4 -> #b3ebf2;
...Thêm style mới…
border-radius: 100%;
...Và xóa cái style nào nhóc muốn.
border-color: #999 -> transparent;
Nhưng khoan. Nó rất ngầu nhưng mấy cái thay đổi đó chỉ là tạm thời thôi. Ta mà tải lại trang cái là chúng mất tiêu.
Thế lưu mấy cái đó kiểu gì?
CSS MODULE
Wikidot thực ra có module cho phép nhóc gắn CSS vào các trang viết mà nhóc gọi nó đấy, đoán chuẩn rồi, CSS module. Nó sẽ như này.
[[module css]]
[[/module]]
Để cho nó thực sự tác động lên trang của nhóc, tất cả những gì chúng ta cần làm là sao chép mã chúng ta vừa quậy tung cả lên hồi nãy vào module này.
Cùng làm vậy với blockquote của chúng ta nào.
[[module css]]
div.blockquote {
background-color: #b3ebf2;
border-radius: 100%;
border-color: transparent;
}
[[/module]]
Bây giờ thì tất cả các style mà chúng ta có hồi nãy đã được gắn vào cái blockquote rồi đấy. Mọi blockquote nên hiện mấy cái thay đổi này.
Chuyến tàu sệch xi đang rời trạm.
PHẦN HÓC BÚA
Giờ thì kết hợp đống kiến thức mới học và sự tự do đang có mà nhảy cầu nào
Chúng ta sẽ phải để cho blockquote tội nghiệp của chúng ta ra đi; thay vào đó. Chúng ta sẽ tạo ra sự sống mới.
Đầu tiên, cho nó cái tên đã. Ta sẽ đặt tên con của ta... chó ngu.
[[module css]]
.cho-ngu {
}
[[/module]]
Ghi chú: Để tạo div mới, nhóc cần phải cho dấu chấm ở đầu. Còn nhiều nữa nhưng mà hôm khác nói vậy.
Được rồi, giờ lấp đầy đứa trẻ này với mấy cái styles thôi. Ta sẽ sài một đống thứ ngẫu nhiên, phức tạp, chỉ để cho nhóc thấy chúng ta có thể tiến xa đến đâu.
[[module css]]
.cho-ngu {
border: 1rem double black;
box-shadow: 1rem 1rem lightblue;
background: linear-gradient(45deg, orange, purple);
color: white;
padding: 1rem;
margin: 1em 3em;
text-align: center;
}
[[/module]]
Giờ có thứ chúng ta muốn rồi, có thể triển khai div rồi!
[[div class="cho-ngu "]]
Chuyến tàu sệch xi đang rời trạm.
[[/div]]
Sẽ cho ra kết quả là…
Chuyến tàu sệch xi đang rời trạm.
Giờ chúng ta có nó rồi đấy.
TỔNG KẾT
Đây là những thứ cực kì tối thiểu trong việc học(hoặc sao chép, hoặc cả hai) CSS. Tất cả những thành phần trong một trang có thể được kiểm tra và thay đổi tùy nhu cầu, sau đó nhóc có thể áp dụng các thay đổi đó trong CSS module.
CSS là một thứ mà ta đam mê, nhưng về cơ bản nó giống việc học ngôn ngữ mới. Nó sẽ tốn thời gian để học các bước cơ bản, và sẽ tốn nhiều thời gian hơn nữa để thành thục nó. Cả ta cũng không giỏi ở cái này. Nhưng sao lại để nó dừng chúng ta lại?
Đón xem thêm vào lần sau nhé; Ta còn kế hoạch cho nhiều thứ lắm.
Trích dẫn trang này như sau:
"Hướng Dẫn Siêu Cơ Bản Về CSS Của Fish Cho Người Mới" bởi Fish^12, từ Wiki SCP. Nguồn bài viết: https://scpwiki.com/fish-s-absolute-beginner-s-guide-to-css. Xuất bản dưới giấy phép CC-BY-SA.
Bài viết được dịch bởi Simpai, từ Wiki SCP-VN. Nguồn bản dịch: http://scp-vn.wikidot.com/fish-s-absolute-beginner-s-guide-to-css. Xuất bản dưới giấy phép CC-BY-SA.
Để biết thêm thông tin sử dụng tính năng này, vui lòng truy cập Hộp Giấy phép. Để truy cập thêm thông tin về quy định giấy phép, vui lòng truy cập Quy Định Bản Quyền.