CSS (4) - Bài tập & Ôn tập (Tổng quan)

-----

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.


 – In the chrome directory, make a file called userContent.css, and open it in the text editor of your choosing.

­– 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)

-----

Cập nhật: 21/5/2024
-----

Tải tài liệu đầy đủ: Tự học HTML căn bản