1.1
Bài tập và thực hành
Bài
tập 1. Viết lại các đoạn mã trong phần lý thuyết.
Bài
tập 2. This is HTML document in the file named cooking.html. You can get any picture to replace for salads.jpg (with dimensions are 300 x
200px).
[cooking.html]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Cooking with Nada Surf</title>
<style>
</style>
</head>
<body>
<h1>Cooking with Daniel from Nada Surf</h1>
<p>I had the pleasure of spending a
crisp, Spring day in Portsmouth, NH cooking and chatting with Daniel Lorca of
the band Nada Surf as he prepared a gourmet, sit-down dinner for 28 pals.</p>
<p>When I first invited Nada Surf to be
on the show, I was told that Daniel Lorca was the guy I wanted to talk to. Then
Daniel emailed his response: "i'm way into it, but i don't want to talk
about it, i wanna do it." After years of only having access to touring
bands between their sound check and set, I've been doing a lot of <em>talking</em> about cooking with rockstars. To actually cook with a band was a dream
come true.</p>
<h2>Six-hour Salad</h2>
<p><img src="salads.jpg" alt="Smoked tomato salads on plates"></p>
<p>Daniel prepared a salad of arugula,
smoked tomatoes, tomato jam, and grilled avocado (it's as good as it sounds!).
I jokingly called it "6-hour Salad" because that's how long he worked
on it. The fresh tomatoes were slowly smoked over woodchips in the grill, and
when they were softened, Daniel separated out the seeds which he reduced into a
smoky jam. The tomatoes were cut into strips to put on the salads. As the day
meandered, the avocados finally went on the grill after dark. I was on
flashlight duty while Daniel checked for the perfect grill marks.</p>
<p>I wrote up a streamlined adaptation
of his recipe that requires <em>much</em> less time and serves 6 people instead of <em>five</em>times that amount.</p>
<h2>The Main Course</h2>
<p>In addition to the smoky grilled
salad, Daniel served tarragon cornish hens with a cognac cream sauce loaded
with chanterelles and grapes, and wild rice with grilled ramps (wild garlicky
leeks). Dinner was served close to midnight, but it was a party so nobody
cared.</p>
<p>We left that night (technically,
early the next morning) with full bellies, new cooking tips, and nearly 5 hours
of footage. I'm considering renaming the show "Cooking with Nada
Surf". </p>
</body>
</html>
This is the web page displayed on the browser, when we don’t style yet.
Following
these steps to style for web page:
–
Open cooking.html in a text editor.
In the head of the document you will find that I have set up a style element
for you to type the rules into. The style element is used to embed a style
sheet in an HTML document. To begin, we’ll simply add the small style sheet
that we just looked at in this section. Type the following rules into the
document, just as you see them here:
<style>
h1 {
color: green;
}
p {
font-size:
large;
font-family:
sans-serif;
}
</style>
–
Save the file, and take a look at it in the browser. You should notice some
changes (if your browser already uses a sans-serif font, you may see only a
size change). If not, go back and check that you included both the opening and
closing curly bracket and semicolons. It’s easy to accidentally omit these
characters, causing the style sheet not to work.
–
Now we’ll edit the style sheet to see how easy it is to write rules and see the
effects of the changes. Here are a few things to try.
IMPORTANT:
Remember that you need to save the document after each change in order for the
changes to be visible when you reload it in the browser.
–
Make the h1 element “gray” and take a
look at it in the browser. Then make it “blue”. Finally, make it “orange”.
–
Add a new rule that makes the h2
elements orange as well.
–
Add a 100-pixel left margin to paragraph (p)
elements by using this declaration:
margin-left: 100px;
Remember
that you can add this new declaration to the existing rule for p elements.
–
Add a 100-pixel left margin to the h2
headings as well.
–
Add an orange, 1-pixel border to the bottom of the h1 element by using this declaration:
border-bottom: 1px solid orange;
–
Move the image to the right margin, and allow text to flow around it with the float property. The shorthand margin property shown in this rule adds
zero pixels of space on the top and bottom of the image and 12 pixels of space
on the left and right of the image.
img {
float: right;
margin: 0 12px;
}
When
you are done, the document should look something like the one shown in below
figure.
Bài tập 3. Trước khi CSS với vai trò là lập trình viên,
chúng ta cùng trải nghiệm việc CSS trực tiếp trên trình duyệt, với vai trò là
người dùng (user style sheet). Bài tập này giúp chúng ta có thể thay đổi giao
diện một trang web theo ý thích cá nhân, mà không lệ thuộc vào nhà cung cấp
trang web.
Với trình duyệt Chrome, bạn cần sử dụng gói mở rộng
(extension) có tên là Stylish để làm. Phần này sẽ thực hiện trên trình duyệt
Firefox.
Tham khảo tài liệu này:
https://www.thoughtco.com/user-style-sheet-3469931
In the past, the Internet was filled with bad web design,
unreadable fonts, colors that clashed, and nothing adapted to fit the screen
size. At that time, web browsers allowed users to write CSS style sheets that
the browser used to override the styling choices made by page designers. This
user style sheet set the font at a consistent size and set pages to display a
specified color background. It was all about consistency and usability.
Now, however, user style sheets aren't common. Google Chrome
doesn't allow them, and Firefox is phasing them out. In the case of Chrome,
you'll need an extension to create user style sheets. Firefox requires you to
enable the option through a developer page. User style sheets vanished because
web design is better.
If you still want to experiment with user style sheets, you
can, but it's not recommended. You're more likely to break the pages you visit
or make them really ugly.
To get started with user style sheets in Firefox, enable
them. It only takes a few seconds, but the option is buried in the Firefox
config page.
– Open Firefox, and type about:config
into the address bar.
– Firefox takes you to a page warning you that going further
will allow you to mess up the browser. Press Accept the Risk and Continue to keep going.
– The next page you'll see is just a search bar. Type toolkit.legacyUserProfileCustomizations.stylesheets
into the search.
– There should only be one result. Double-click it to set
the value to true.
– Close Firefox.
Now that Firefox will accept your style sheet, you can
create one. The file is no different than any other CSS. It resides in a folder
within your browser's user profile directory.
– Locate the Firefox user profile directory. On Windows, you
can find it at C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\.
On Mac, it's located in Library/Application
Support/Firefox/Profiles. On Linux, it's in /home/username/.mozilla/firefox
– Inside that folder, there's at least one folder with a
name that's a string of random characters followed by a .default or
.default-release extension. Unless you created another one, that's the profile
folder you need.
– Create a new folder inside the profile one and name it chrome.
– You can put anything in this file, as long as it's valid
CSS. To illustrate a point, make all websites look ridiculous. Set the
background color to bright pink:
body, main {
background-color: #FF00FF !important;
}
The !important at the end is important. Usually, using
!important in CSS is a bad idea. It breaks the natural flow of the style sheet
and can make debugging a nightmare. However, it's needed in this case to
override the site's existing CSS. You'll need it for every rule you create.
– Save and exit the file.
– Open Firefox and navigate to a page to try it out. If you
set the rules used in this example, the site should look bad.
1.2 Câu hỏi ôn tập
Câu 1. CSS là viết tắt của các từ nào?
A. Code Style Sheets
B. Cascading Style Sheets
C. Cascading Style Source
D. Code Style Source
Câu 2. Quan sát đoạn mã p
{ color: red; font-size: 54px; }, theo thuật ngữ của CSS, phát biểu nào sau
đây không đúng?
A. p là bộ chọn
(selector)
B. Đoạn mã trên là một chỉ dẫn định dạng (style rule)
C. color là thuộc
tính (property)
D. Đoạn mã trên
là một khai báo (declaration)
Câu 3. Bạn có thể
viết mã CSS ở đâu? Phát biểu nào sau đây không đúng?
A. Viết ở trong
phần tử HTML, sử dụng thuộc tính style
B. Viết ở ngoài
tài liệu HTML, trong tập tin .css, sử
dụng phần tử link để liên kết
C. Viết ở trong
tài liệu HTML, sử dụng phần tử <script>
D. Viết ở trong
tài liệu HTML, sử dụng phần tử <style>
Câu 4. Theo kĩ
thuật xếp lớp (cascading) trong CSS, loại mã CSS nào có độ ưu tiên cao nhất ?
A. User agent style sheet
B. User style sheet
C. Author style sheet
D. Cả ba có độ ưu tiên như nhau
Câu 5. Khi áp dụng đoạn mã CSS sau, văn bản p có màu gì?
<style>
p { color: purple; }
p { color: green; }
p { color: gray; }
</style>
A. Tím
B. Xanh
C. Xám
D. Trắng
Câu 6. Trong các phương pháp để định chuẩn CSS (normalize
CSS, reset CSS), cách nào sau đây không đúng?
A. Dùng tập tin normalize.css
B. Dùng bộ mã reset CSS của Eric Meyer
C. Dùng bộ mã định chuẩn CSS của Bootstraps
D. Dùng lệnh Reset của CSS
Câu 7. In CSS, the term _____ is used when talking about
design and layout. The CSS ______ is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the actual content.
A. border
B. cascading
C. box mode
D. box model
Câu 8. Trong CSS, đơn vị đo nào sau đây không phải là đơn vị
đo tương đối (relative)?
A. em
B. rem
C. %
D. px
Đáp án: 1(B), 2(D), 3(C), 4(C), 5(C), 6(D), 7(D), 8(D)
-----
-----