下载文档原格式
《HTML5+CSS3从入门到精通》自测练习（修正版）一、单选题(共44题，每题1分，共44分)1.支持input类型的输入框的消息提示的属性是[1.0]A.detailB.placeholderC.patternD.required标准答案：B试题分析：P1012.context.arc（）方法用于绘制圆形，一般其中的第几个参数决定圆形的半径[1.0]A. 1B. 2C. 3D. 4标准答案：C试题分析：P1143.下列哪项不是HTML5的新特性[1.0]A.兼容性B.合理性C.安全性D.有插件标准答案：D试题分析：p1-24.下列不是html5主要功能的是[1.0]A.Cross-documentB.Vector Scalable GraphicsC.MathMLD.Web Origin Concept标准答案：B试题分析：p45.在HTML5中可以省略全部标记的元素是________[1.0]A.optionB.bodyC.hrD.img标准答案：B试题分析：P396.不支持Web Storage的浏览器的是[1.0]A.IE7以上版本B.Firefox3.0以上版本C.Safari 4.0以上版本D.Opera 10.5以上版本标准答案：A试题分析：P1787.audio元素中src属性的作用是________。
[1.0]A.提供播放、暂停和音量控件B.循环播放C.制定要播放音频的URLD.插入一段替换内容标准答案：C试题分析：P1608.以下哪项不属于Html5中input标签新增的输入类型________。
[1.0]A.emailB.urlC.numberD.radio标准答案：D试题分析：P80-839.outline属性可以定义块元素的外轮廓线，以下错误的是———[1.0]A.outline-color定义轮廓边框颜色B.outline-style定义轮廓边框轮廓C.outline-width定义轮廓边框宽度D.outline-offset定义轮廓边框位置标准答案：D试题分析：50910.基本CSS代码书写规范不正确的是————[1.0]A.尽量不缩写B.全部小写，且每一项CSS定义写成一行C.ID必须是唯一的，且用在结构的定义中D.CSS可以尽量使用expression标准答案：D试题分析：28811.1982年，（）创造了HTML语言。
css知识全面总结嘿，朋友！今天咱们来聊聊 CSS 这玩意儿。
CSS 就像是给网页化妆的魔法颜料，能让网页变得美美的。
你想想，要是一个网页没有 CSS，那得多单调、多无聊呀！就好像一个人素颜出门，虽说也能看，但总觉得缺了点啥。
先来说说 CSS 的选择器。
这选择器啊，就像是你手里的魔法棒，指哪儿打哪儿。
比如说，“类选择器”，你给某个元素加上一个独特的类名，然后通过这个类名来控制它的样式，是不是很神奇？这就好比你在一群人中，喊出一个特定的名字，就能找到那个人，然后给他打扮打扮。
还有“ID 选择器”，这可厉害了，每个页面里 ID 得是唯一的。
它就像给网页元素颁发的独一无二的身份证，通过这个身份证，你能精准地给它设定样式。
比如说一个网页里的导航栏，你给它一个特定的ID，然后让它的颜色、字体、大小都变得与众不同。
再说说 CSS 的属性。
字体属性那可是基础中的基础，什么字体大小、字体样式、字重等等。
这就像是给文字穿上不同的衣服，有时候是休闲装（正常字体），有时候是正装（加粗字体），是不是很有趣？还有背景属性，能给网页元素换上各种背景颜色或者图片。
这就像给房间换壁纸，今天喜欢蓝色，明天喜欢粉色，随你心情！再瞧瞧边框属性，能给元素加上边框，粗细、样式、颜色随你定。
这是不是有点像给一个物品加上漂亮的框框，瞬间就高大上起来了？至于定位属性，那可真是个神奇的存在。
绝对定位、相对定位，让元素想在哪就在哪。
这就好比你在摆积木，想把哪块积木放哪儿就放哪儿，多自由！还有浮动属性，能让元素飘起来，并排排列。
这感觉就像一群小伙伴手拉手并排走，多整齐！CSS 还有盒模型呢，这可是个重要的概念。
内容、内边距、边框、外边距，就像一个盒子的里里外外，每个部分都能影响元素的最终大小和显示效果。
另外，CSS 中的媒体查询也不能忽略。
它能让网页根据不同的设备和屏幕尺寸呈现出不同的样式。
这就好比你有一件衣服，能根据不同的场合自动变换款式，是不是超厉害？总之，CSS 就像是网页的化妆师，能让网页变得丰富多彩、独具魅力。
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。
本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。
首先，让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。
下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。
接下来，我们将介绍一些常用的CSS属性。
1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。
例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。
2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。
例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。
3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。
例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。
4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。
例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
css的入门教程css的入门教程CSS是CascadingStyleSheets(层叠样式表)的缩写。
是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范分析一个典型CSS的语句：p{COLOR:#FF0000;BACKGROUND:#FFFFFF}其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；样式声明写在一对大括号"{}"中；COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值颜色值可以用RGB值写，例如：color:rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。
如果十六进制值是成对重复的.可以简写，效果一样。
例如:#FF0000可以写成#F00。
但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
3.定义字体body{font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}字体按照所列出的顺序选用。
如果用户的计算机含有LucidaGrande字体，文档将被指定为LucidaGrande。
没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；LucidaGrande字体适合MacOSX；Verdana字体适合所有的Windows系统；Lucida适合UNIX用户"宋体"适合中文简体用户;如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;4.群选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：p,td,li{font-size:12px;}5.派生选择器可以使用派生选择器给一个元素里的子元素定义样式，例如这样：listrong{font-style:italic;font-weight:normal；}就是给li下面的子元素strong定义一个斜体不加粗的样式。
CSS基础语法1 CSS概述1.1 CSS的定义 全名：Cascading Style Sheets -> 层叠样式表 定义：CSS成为层叠样式表，它主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能（如字体、颜⾊、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
(1) 层叠的概念 CSS—层叠样式表，层叠就是浏览器对多个样式来源进⾏叠加，最终确定结果的过程。
上图中有两个样式来源，第⼀个是引⽤的css1.css，第⼆个是⾃⼰在style中编写的样式。
“层叠”是个叠加的过程，可通过下图表⽰：层叠是CSS的核⼼机制，理解了它才能以最经济的⽅式写出最容易改动的CSS，让⽂档外观在达到设计要求的同时，也给⽤户留下⼀些空间，让他们根据需要更改⽂档的显⽰效果，例如调整字号。
(2) 层叠的规则 由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显⽰出正确的界⾯效果——浏览器会通过叠加和覆盖这两种⽅式来⽣成最终的样式值。
如上图，不同来源的两个样式，第⼀个样式设置了font-weight，第⼆个没有，浏览器会把它叠加在⼀起，即浏览器会把各个零散的整合成⼀个整体。
第⼀个样式color:red，第⼆个样式color:blue，浏览器会让后者覆盖前者，最终结果还是color:blue。
覆盖的默认规则是后者覆盖前者，但是⼜⼀个特殊情况——!important。
如上图。
虽然color:blue是后来者，但是它没有居上，因为前者color:red跟着!important。
这就像得到⼀个尚⽅宝剑，有最⾼执⾏权，其他⼈统统让路，否则佛挡杀佛。
1.2 HTML、CSS与JS三者的关系 HTML：页⾯结构，负责从语义的⾓度搭建页⾯结构。
CSS：页⾯样式表现，负责从审美的⾓度美化页⾯。
CSS基础知识从入门到精通CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页展示样式和格式的标记语言。
在网页开发中，CSS被广泛应用于控制页面的布局、字体、颜色、背景等方面。
本文将从CSS的基本概念、语法结构、选择器和常用属性等方面介绍CSS的基础知识，帮助读者掌握从入门到精通的技能。
一、基本概念
CSS主要用于网页样式的控制，与HTML相辅相成，为页面增加丰富的样式特效。
使用CSS可以有效地对页面中的元素进行样式定义，使页面更加美观、易读。
二、语法结构
1. 选择器：CSS通过选择器选取页面中的元素，并对其应用相应的样式。
常见的选择器类型有标签选择器、类选择器、ID选择器、后代选择器、群组选择器等。
2. 声明块：由大括号{}包围，用于定义元素的样式。
每个声明由属性和属性值组成，中间用冒号:连接。
3. 示例：
```CSS
h1 {
color: red;
font-size: 24px;
}
```
以上代码通过标签选择器h1，定义了h1元素的颜色为红色，字体
大小为24像素。
三、选择器
选择器用于选取页面中需要应用样式的元素。
掌握不同类型的选择器，可以更精准地定位和控制元素。
1. 标签选择器：通过HTML标签名选取元素。
如：p、div、h1等。
2. 类选择器：通过指定class属性值选取元素。
以英文句点.开头，
后面紧跟类名。
如：.red、.highlight等。
3. ID选择器：通过指定id属性值选取元素。
以井号#开头，后面紧
跟ID名。
如：#header、#nav等。
4. 后代选择器：通过指定元素的层级关系选取元素。
以空格分隔各
层级元素。
如：header h1、.menu li等。
5. 群组选择器：通过逗号分隔多个选择器，同时选取多个元素。
如：h1, h2, h3。
四、常用属性
CSS提供了丰富的属性来控制元素的样式，下面介绍几个常用的属性。
1. color：用于设置文字颜色。
可以使用颜色名、RGB值、十六进制值等表示颜色。
2. font-size：用于设置文字大小。
可以使用像素、百分比等单位。
3. background：用于设置元素的背景样式。
可以设置背景颜色、背
景图片等。
4. margin：用于设置元素的外边距。
可以设置上、右、下、左四个
方向的边距。
5. padding：用于设置元素的内边距。
可以设置上、右、下、左四个方向的边距。
6. border：用于设置元素的边框样式。
可以设置边框的宽度、颜色、样式等。
五、实例演示
下面通过一个简单的实例演示如何使用CSS控制页面的样式。
```HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS基础知识从入门到精通</title>
<style>
body {
font-family: Arial, sans-serif; background-color: #f5f5f5; }
#header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
font-size: 32px;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<div id="header">
<h1>CSS基础知识从入门到精通</h1>
<p>本文介绍了CSS的基本概念、语法结构、选择器和常用属性，帮助读者掌握从入门到精通的技能。
</p>
</div>
</body>
</html>
```
六、总结
本文从CSS的基本概念、语法结构、选择器和常用属性等方面介绍了CSS的基础知识。
了解并掌握这些知识，可以有效地控制网页的样式和格式，使页面更加美观、易读。
希望读者通过本文的学习，能够从CSS的入门走向精通，为网页开发带来更加出色的成果。
