超实用的CSS代码段习题一

最新推荐文章于 2024-06-03 17:00:11 发布

原创最新推荐文章于 2024-06-03 17:00:11 发布 · 921 阅读

5 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

0 篇文章

订阅专栏

通过一系列问题和代码示例，深入探讨CSS的特性和行为，包括选择器优先级、颜色继承、布局调整、媒体查询和资源加载策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《超实用的CSS代码段-习题一》

本题目来自于书籍《超实用的CSS代码段》

CSS对大小写敏感（CSS区分大写）吗？
A、是
B、否
对行内元素设置margin-top或margin-bottom属性是否有效？
A、是
B、否
对行内元素设置padding-top或padding-bottom属性是否有效？
A、是
B、否
假设对<p>元素设置样式font-size:10rem，当用户改变浏览器窗口大小时，该元素内字体大小是否会随着窗口大小变化而发生变化？
A、是
B、否
伪类:checked仅适用于type属性为radio或checkbox的input表单，并不使用与<option>表单，该说法正确吗？
A、是
B、否
在HTML文档中，伪类:root永远是<html>元素，该说法正确吗？
A、是
B、否
translate()方法可以在z轴方向上移到元素的位置，该说法正确吗？
A、是
B、否
有如下代码，文本Sausage将呈现什么颜色：

	//html代码
	<ul class="shopping-list" id="awesome">
		<li>
			<span>Milk</span>
		</li>
		<li class="favorite" id="must-buy">
			<span class="highlight">Sausage</span>
		</li>
	</ul>
	//css代码
	ul {
		color: red;
	}
	li {
		color: blue;
	}

A、红色
B、蓝色
C、以上都不是

有如下代码，文本Sausage将呈现什么颜色：

	//html代码
	<ul class="shopping-list" id="awesome">
		<li>
			<span>Milk</span>
		</li>
		<li class="favorite" id="must-buy">
			<span class="highlight">Sausage</span>
		</li>
	</ul>
	//css代码
	ul li {
		color: red;
	}
	#must-buy {
		color: blue;
	}

A、红色
B、蓝色
C、以上都不是

有如下代码，文本Sausage将呈现什么颜色：

	//html代码
	<ul class="shopping-list" id="awesome">
		<li>
			<span>Milk</span>
		</li>
		<li class="favorite" id="must-buy">
			<span class="highlight">Sausage</span>
		</li>
	</ul>
	//css代码
	.shopping-list .favorite {
		color: red;
	}
	#must-buy {
		color: blue;
	}

A、红色
B、蓝色
C、以上都不是

有如下代码，文本Sausage将呈现什么颜色：

	//html代码
	<ul class="shopping-list" id="awesome">
		<li>
			<span>Milk</span>
		</li>
		<li class="favorite" id="must-buy">
			<span class="highlight">Sausage</span>
		</li>
	</ul>
	//css代码
	ul#awesome {
		color: red;
	}
	ul.shopping-list li.favorite span {
		color: blue;
	}

A、红色
B、蓝色
C、以上都不是

有如下代码，文本Sausage将呈现什么颜色：

	//html代码
	<ul class="shopping-list" id="awesome">
		<li>
			<span>Milk</span>
		</li>
		<li class="favorite" id="must-buy">
			<span class="highlight">Sausage</span>
		</li>
	</ul>
	//css代码
	ul#awesome #must-buy {
		color: red;
	}
	.favorite span {
		color: blue !important;
	}

A、红色
B、蓝色
C、以上都不是

有如下代码，文本Sausage将呈现什么颜色：

	//html代码
	<ul class="shopping-list" id="awesome">
		<li>
			<span>Milk</span>
		</li>
		<li class="favorite" id="must-buy">
			<span class="highlight">Sausage</span>
		</li>
	</ul>
	//css代码
	ul.shopping-list li .highlight {
		color: red;
	}
	ul.shopping-list li .highlight:nth-of-type(odd) {
		color: blue;
	}

A、红色
B、蓝色
C、以上都不是

有如下代码，文本Sausage将呈现什么颜色：

	//html代码
	<ul class="shopping-list" id="awesome">
		<li>
			<span>Milk</span>
		</li>
		<li class="favorite" id="must-buy">
			<span class="highlight">Sausage</span>
		</li>
	</ul>
	//css代码
	#awesome .favorite:not(#awesome) .highlight {
		color: red;
	}
	#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
		color: blue;
	}

A、红色
B、蓝色
C、以上都不是

有如下代码，元素#example的位置将会发生什么变化？

	//html代码
	<p id="example">Hello</p>
	//css代码
	#example {
		margin-bottom: -5px;
	}

A、下移5px
B、#example所有的后继节点将上移5px
C、以上都不是

有如下代码，元素#example的位置将会发生什么变化？

	//html代码
	<p id="example">Hello</p>
	//css代码
	#example {
		margin-left: -5px;
	}

A、左移5px
B、#example所有父元素将右移5px
C、以上都不是

有如下代码，未使用的样式表里的资源文件是否会被浏览器下载？

	//html
	<div id="test1">
		<span id="test2"></span>
	</div>
	//css
	#i-am-useless {
		background-image: url('mypic.jpg');
	}

A、是
B、否

有如下代码，页面加载时，图片mypic.jpg是否会被浏览器下载？

	//html
	<div id="test1">
		<span id="test2"></span>
	</div>
	//css
	#test2 {
		background-image: url('mypic.jpg');
		display: none;
	}

A、是
B、否

有如下代码，页面加载时，图片mypic.jpg是否会被浏览器下载？

	//html
	<div id="test1">
		<span id="test2"></span>
	</div>
	//css
	#test1 {
		display: none;
	}
	#test2 {
		background-image: url('mypic.jpg');
		visibility: hidden;
	}

A、是
B、否

有如下代码，选择器only的作用是：

	@media only screen and (max-width: 1024px) {
		margin: 0;
	}

A、阻止老版本浏览器解析剩下的选择器
B、仅对屏幕设备应用样式，忽略设备的max-width
C、什么都不做

有如下代码，样式overflow: hidden; 是否会创建一个新的块格式上下文？

	//html
	<div>
		<p>I am floated</p>
		<p>So am i</p>
	</div>
	//css
	div {
		overflow: hidden;
	}
	p {
		float: left;	
	}

A、是
B、否

有如下代码，关键词screen是适用于设备的物理屏幕还是浏览器的窗口：

	@media only screen and (max-width: 1024px) {
		margin: 0;
	}

A、设备物理屏幕
B、浏览器窗口

<keygen>是否是合法的HTML5标签？
A、是
B、否
<bdo>标签是否改变文本方向？
A、是
B、否
有如下代码，下面HTML代码是否合法?

	<figure>
		<img src=myimage.jpg" alt="My image">
		<figcaption>
			<p>This is my self portrait.</p>
		</figcaption>
	<figure>

A、是
B、否

在以下什么情况下可以使用<small>标签：
A、当需要在<h1>标签之后创建子标题时
B、当需要在<footer>标签内添加版权信息时
一个网页上含有结构性完整的多个<h1>标签，是否会优化SEO？
A、是
B、否
一个搜索结果页包含多条搜索结果，用哪个HTML标签突出标记搜索词：
A、<strong>
B、<mark>
C、<em>
D、<highlight>
有如下代码，属性scoped有什么作用？

	<article>
		<h1>Hello World</h1>
		<style scoped>
			p {
				color: red;
			}
		</style>
		<p>This is my text</p>
	</article>
	<article>
		<h1>This is awesome</h1>
		<p>i am some other text</p>
	</article>

A、将样式规则应用于与元素居右相同父节点的后继节点上
B、将样式规则应用于scoped标记的父元素的所有子节点
C、仅将样式规则应用于IE浏览器

有如下代码，HTML5是否支持块级链接？

	<article>
		<a href="#">
			<h1>Hello</h1>
			<p>I am some text</p>
		</a>
	</article>

A、是
B、否

有如下代码，以下HTML代码是否会触发HTTP请求？

	<img src="mypic.jpg" style="visibility: hidden" alt="my picture">

A、是
B、否

有如下代码，以下HTML代码是否会触发HTTP请求？

	<div style="display: none">
		<img src="mypic.jpg" alt="my picture"> 
	</div>

A、是
B、否

有如下代码，在Hello World被alert处理之前，main1.css文件是否被浏览器下载并解析？

	<head>
		<link href="main1.css" rel="stylesheet">
		<script>
			alert("Hello World");
		</script>
	</head>

A、是
B、否

有如下代码，在main2.css文件被获取之前，main1.css文件必须先被浏览器下载并解析？

	<head>
		<link href="main1.css" rel="stylesheet">
		<link href="main2.css" rel="stylesheet">
	</head>

A、是
B、否

有如下代码，在Paragraph1被渲染之前，main1.css文件是否被浏览器下载并解析？

	<head>
		<link href="main1.css" rel="stylesheet">
	</head>
	<body>
		<p>Paragraph 1</p>
		<p>Paragraph 2</p>
		<link href="main2.css" rel="stylesheet">
	</body>