Scribd
Upload
5 views

frontend

The document outlines HTML structure for an accessibility quiz, including radio button options for account types and CSS styles for visually hidden text. It also provides examples of CSS selectors for targeting specific elements and explains the 'object-fit' property for image positioning. Overall, it serves as a guide for creating accessible web content with proper HTML and CSS practices.

Uploaded by

yongyao0919
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

frontend

The document outlines HTML structure for an accessibility quiz, including radio button options for account types and CSS styles for visually hidden text. It also provides examples of CSS selectors for targeting specific elements and explains the 'object-fit' property for image positioning. Overall, it serves as a guide for creating accessible web content with proper HTML and CSS practices.

Uploaded by

yongyao0919
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

-- 同样的 name 能确保只能选其一 -->


<!== label 的 for 和 input 的 id 要一样 -->
<label for="personal-account"><input id="personal-account" type="radio"
name="account-type" checked /> Personal</label>
<label for="business-account"><input id="business-account" type="radio"
name="account-type" />

<!-- 基本结构 -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice
project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header></header> // introduce the page + navigation
<main></main>
<footer></footer>
</body>
</html>

<!-- Common pattern to visually hide text for only screen readers to read -->
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

// select any span element whose class includes sr-only


span[class~="sr-only"]

// select `tr` elements where the only class is `total`


tr[class="total"]
// select `tr` elements where the class includes `total`
tr.total

// select any of span elements that do not have the sr-only class
span:not(.sr-only)

// target any span element that has a class attribute set, regardless of the
attribute's value
#years span[class]

:first-of-type // target the first element that matches the selector (e.g.
h1 .flex span:first-of-type)
:last-of-type // targets the last element that matches the selector (e.g.
h1 .flex span:last-of-type)
:nth-of-type // target specific elements based on their order among siblings of
the same type (e.g. tr.total td:nth-of-type(3) targets the third `td` element
within `total` table row)

object-fit: cover
The object-fit property tells the browser how to position the element within its
container. In this case, cover will set the image to fill the container, cropping
as needed to avoid changing the aspect ratio.

You might also like