超实用的CSS代码段 习题一

最新推荐文章于 2024-06-03 17:00:11 发布
最新推荐文章于 2024-06-03 17:00:11 发布
阅读量921 收藏 5
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiexianhui207/article/details/94998011
通过一系列问题和代码示例，深入探讨CSS的特性和行为，包括选择器优先级、颜色继承、布局调整、媒体查询和资源加载策略。

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

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

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

  1. CSS对大小写敏感（CSS区分大写）吗？
    A、是
    B、否

  2. 对行内元素设置margin-top或margin-bottom属性是否有效？
    A、是
    B、否

  3. 对行内元素设置padding-top或padding-bottom属性是否有效？
    A、是
    B、否

  4. 假设对<p>元素设置样式font-size:10rem，当用户改变浏览器窗口大小时，该元素内字体大小是否会随着窗口大小变化而发生变化？
    A、是
    B、否

  5. 伪类:checked仅适用于type属性为radio或checkbox的input表单，并不使用与<option>表单，该说法正确吗？
    A、是
    B、否

  6. 在HTML文档中，伪类:root永远是<html>元素，该说法正确吗？
    A、是
    B、否

  7. translate()方法可以在z轴方向上移到元素的位置，该说法正确吗？
    A、是
    B、否

  8. 有如下代码，文本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、以上都不是
  1. 有如下代码，文本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、以上都不是
  1. 有如下代码，文本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、以上都不是
  1. 有如下代码，文本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、以上都不是
  1. 有如下代码，文本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、以上都不是
  1. 有如下代码，文本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、以上都不是
  1. 有如下代码，文本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、以上都不是
  1. 有如下代码，元素#example的位置将会发生什么变化？
	//html代码
	<p id="example">Hello</p>
	//css代码
	#example {
		margin-bottom: -5px;
	}

A、下移5px
B、#example所有的后继节点将上移5px
C、以上都不是
  1. 有如下代码，元素#example的位置将会发生什么变化？
	//html代码
	<p id="example">Hello</p>
	//css代码
	#example {
		margin-left: -5px;
	}

A、左移5px
B、#example所有父元素将右移5px
C、以上都不是
  1. 有如下代码，未使用的样式表里的资源文件是否会被浏览器下载？
	//html
	<div id="test1">
		<span id="test2"></span>
	</div>
	//css
	#i-am-useless {
		background-image: url('mypic.jpg');
	}

A、是
B、否
  1. 有如下代码，页面加载时，图片mypic.jpg是否会被浏览器下载？
	//html
	<div id="test1">
		<span id="test2"></span>
	</div>
	//css
	#test2 {
		background-image: url('mypic.jpg');
		display: none;
	}

A、是
B、否
  1. 有如下代码，页面加载时，图片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、否
  1. 有如下代码，选择器only的作用是：
	@media only screen and (max-width: 1024px) {
		margin: 0;
	}

A、阻止老版本浏览器解析剩下的选择器
B、仅对屏幕设备应用样式，忽略设备的max-width
C、什么都不做
  1. 有如下代码，样式overflow: hidden; 是否会创建一个新的块格式上下文？
	//html
	<div>
		<p>I am floated</p>
		<p>So am i</p>
	</div>
	//css
	div {
		overflow: hidden;
	}
	p {
		float: left;	
	}

A、是
B、否
  1. 有如下代码，关键词screen是适用于设备的物理屏幕还是浏览器的窗口：
	@media only screen and (max-width: 1024px) {
		margin: 0;
	}

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

  1. <keygen>是否是合法的HTML5标签？
    A、是
    B、否

  2. <bdo>标签是否改变文本方向？
    A、是
    B、否

  3. 有如下代码，下面HTML代码是否合法?

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

A、是
B、否

  1. 在以下什么情况下可以使用<small>标签：
    A、当需要在<h1>标签之后创建子标题时
    B、当需要在<footer>标签内添加版权信息时

  2. 一个网页上含有结构性完整的多个<h1>标签，是否会优化SEO？
    A、是
    B、否

  3. 一个搜索结果页包含多条搜索结果，用哪个HTML标签突出标记搜索词：
    A、<strong>
    B、<mark>
    C、<em>
    D、<highlight>

  4. 有如下代码，属性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浏览器
  1. 有如下代码，HTML5是否支持块级链接？
	<article>
		<a href="#">
			<h1>Hello</h1>
			<p>I am some text</p>
		</a>
	</article>

A、是
B、否
  1. 有如下代码，以下HTML代码是否会触发HTTP请求？
	<img src="mypic.jpg" style="visibility: hidden" alt="my picture"> 

A、是
B、否
  1. 有如下代码，以下HTML代码是否会触发HTTP请求？
	<div style="display: none">
		<img src="mypic.jpg" alt="my picture"> 
	</div>

A、是
B、否
  1. 有如下代码，在Hello World被alert处理之前，main1.css文件是否被浏览器下载并解析？
	<head>
		<link href="main1.css" rel="stylesheet">
		<script>
			alert("Hello World");
		</script>
	</head>

A、是
B、否
  1. 有如下代码，在main2.css文件被获取之前，main1.css文件必须先被浏览器下载并解析？
	<head>
		<link href="main1.css" rel="stylesheet">
		<link href="main2.css" rel="stylesheet">
	</head>

A、是
B、否
  1. 有如下代码，在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>

A、是
B、否


答案

1-5:      B B B B B
6-10:    A B B B B
11-15:  B B B A B
16-20:  A B A B A
21-25:  A B A A A
26-30:  B B B B A
31-35:  A A A B A
HTML/CSS笔试（四个代码题）
weixin_51000853的博客
04-01 629
要求:创建一个卡片，卡片有适当的间距。鼠标悬停在卡片上时，产生阴影效果。要求:让一个元素在呼吸的过程中改变透明度或颜色。动画应该是无限循环的。使用 Flexbox 确保这些元素在水平和垂直方向上都居中。要求：实现一条0.5像素的竖线/横线。要求：创建一个包含多个元素的容器。
css题库
qq_43543069的博客
06-16 473
圣杯布局和双飞翼布局的理解和区别，并用代码实现 https://lhammer.cn/You-need-to-know-css/#/zh-cn/double-wing-layout?v=1 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。 不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right
一道前端代码题，用很简单的CSS代码实现
一休~的博客
04-21 280
昨天去第一次面试前端这个岗位，有点新奇，去到那里技术就给了我一个电脑，一张设计图让用sublime敲出来。 设计图大概长这样吧，因为不能拍照，所以这是我回家后做的。 <!DOCTYPE html> <html> <head> <title>hello</title> <style type="text/css">...
css编程题,CSS面试笔试题
weixin_36206609的博客
08-04 492
CSS前端面试系列文章：1.CSS有什么书写顺序？1.位置属性：position，top等，z-index，display，float等。2. 大小：width，height，padding，margin。3. 文字系列：font系列，line-height，letter-space，color等。4. 背景与边框：background，border。5. 其他animation，transiti...
css题目汇总
宅神的博客
10-08 299
文章目录1. 媒体查询@media如何使用?2. animation动画属性3. transform使用4. 常用的清除浮动方法5. 三栏布局实现:6. calc属性7. css性能优化 1. 媒体查询@media如何使用? @media mediatype and|not|only (media feature){ CSS-Code; } 例: @media screen and (max-...
超实用的CSS代码段+源码
11-30
《超实用的CSS代码段》是一本专门为网页设计师和开发者准备的宝贵资源，它集结了400多个精心挑选的CSS代码片段，旨在解决实际网页设计中的各种问题。这本书不仅涵盖了CSS的基础知识，还深入到高级特性，为读者提供了...
web前端基础代码练习题
03-17
#### CSS 练习题 1. 定义一组样式规则来改变段落字体颜色为蓝色以及背景颜色为浅灰色。[^2] ```css p { color: blue; background-color: lightgray; } ``` 2. 利用浮动布局实现两栏式页面设计，左侧宽度固定为 ...
HTML+CSS测试题
wen110898的博客
08-20 2659
前言 近日对HTML与CSS的学习已经告一段落了，htm和css说难不难说易不易，难于记得东西很多，易于操作，而且在布局方面比较锻炼你的斯维逻辑。但是相对于后面js的学习还是算简单了，前两天我们也进行了一次阶段考试，我整理了一下考试的题目与答案详解，考后答案里面我会习惯性的将相关知识一起注解上去，方便复习学习。 下面试卷奉上： 一、选择题 第九题选择题详解： 1.定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。 默认地，表单数据会编码为 “application/x-ww
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-课后练习答案.zip
07-10
Bootstrap是目前最流行的前端开发框架之一，它提供了一套预设的CSS样式、JavaScript组件和字体图标，帮助开发者快速构建响应式和移动优先的网页。Bootstrap的核心特性包括栅格系统，用于创建灵活的响应式布局；丰富...
CSS简单练习案例
sokoooo的博客
02-17 4100
CSS简单练习案例 目录 CSS简单练习案例 1. 新闻 2. 小米侧边栏（简易） 3. 五彩导航栏 4. 产品模块 5. 新浪导航栏 6. 排行榜 7. 模块 #END（素材源于pink老师分享） 1. 新闻 1.1 css代码： body { font: 16px/28px 'Microsoft YaHei'; } h1 { font-weight: 400; ..
300道HTML、CSS习题及面试题（含答案）
01-14
该pdf适用于前端及javaEE页面设计方面的初学者，内容比较丰富，特此分享。
CSS+DIV练习题
05-07
这是我自己整理出来的CSS+DIV练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
html,css,javascript实现的选择题考试小程序
08-24
一个简单的程序，文件中含有css样式,javascript，类似于网上选择题考试的代码实现，可记录每一题的选择，上一题、下一题。最后统计分数。代码比较简单并且有注释。
CSS面试题：40道含答案和代码示例的练习题
三拾的博客
05-12 638
以下是40道CSS面试题，包含了答案和代码示例，帮助你更好地准备CSS面试。
CSS真题合集（二）
措手不及ya的博客
06-03 672
CSS3新增特性、css3动画、grid网格布局、fex弹性布局、em/px/rem/vh/vw区别、预处理器、CSS提高性能的方法
html-css练习题 (注册表单)
采菊东篱下，Python满乾坤！
09-02 2938
代码赏析：     lang="en">     charset="UTF-8">   name="viewport" content="width=device-width, initial-scale=1.0">   http-equiv="X-UA-Compatible" conten
css编程练习2
m0_74303175的博客
03-15 390
编写代码，实现如下效果图。代码中图片没有设置居中。
前端知识点面试题 - CSS基础篇（1）
艾瑞-Arin
03-04 405
说出标准的CSS的盒子模型是什么？与低版本IE的盒子模型有什么不同的？ 盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型 标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin 宽高指的是 content 的宽高 低版本IE盒子模型：内容（content+padding+border）+ 边界margin， 宽高指的是 content+padding+border 部分的宽高 CSS 如何设置这两种模型？ box-sizing :
运用各类传统计算机视觉算法探测不同种类乐高积木数量
最新发布
08-20
资源下载链接为： https://pan.quark.cn/s/5a876511eb16 运用各类传统计算机视觉算法探测不同种类乐高积木数量（最新、最全版本！打开链接下载即可用！）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值