CSS——⼋⼤属性⼀、颜⾊有三种表⽰颜⾊的⽅法：英⽂单词、⼆进制颜⾊代表码、rgb，⼆、字体font-size：15px；设置字体⼤⼩，常⽤像素指定字体⼤⼩，指定长度的字号，不会随着浏览器的变化⽽变化font-family：宋体；设置字体类型font-weight：lighter、bold、bolder，设置字体粗细，常⽤的三种效果选择font-style：oblique；设置字体倾斜font-variant:small-caps；将⼩写字母转成⼤写字母；color：设置字体颜⾊<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>exercise4</title><style>#color_en{color:blue}#color_bin{color:#F0F;}#color_rgb{color:rgb(255,0,255)}#color_pellucidity{color:rgba(255,0,255,0.2)}#ablout_font{background-color:rgba(0,255,255,0.2);}#font_size{background-color:rgba(0,255,255,0.2);font-size:15px;}#font_family{background-color:rgba(0,255,255,0.2);font-family:YouYuan;}#font_lighter{background-color:rgba(0,255,255,0.2);font-weight:lighter;}#font_bold{background-color:rgba(0,255,255,0.2);font-weight:bold;}#font_bolder{background-color:rgba(0,255,255,0.2);font-weight:bolder;}#font_style{background-color:rgba(0,255,255,0.2);font-style:oblique;}</style></head><body><p>练习属性property</p><p id="ablout_font">⼆、关于字体</p><p id="font_size">font-size设置字体⼤⼩，如：15px</p><p id="font_family">font-family设置字体类型如：YouYuan</p><p id="font_weight"><a id="font_bolder">bolder</a></p><p id="font_style">font-style设置字体倾斜</p><p id="color_en">⼀、关于颜⾊</p><p id="color_bin">除了使⽤英⽂单词，还可以使⽤⼗六进制颜⾊对应表(如下图，#FFFF00表⽰黄⾊，还可简写成#FF0）<table border="0"><tbody><tr><td height="30" width="95" bgcolor="#ffffff">#FFFFFF</td><td height="30" width="95" bgcolor="#dddddd">#DDDDDD</td><td height="30" width="95" bgcolor="#aaaaaa">#AAAAAA</td><td height="30" width="95" bgcolor="#888888">#888888</td><td height="30" width="95" bgcolor="#666666">#666666</td><td height="30" width="95" bgcolor="#444444">#444444</td><td height="30" width="95" bgcolor="#000000">#000000</td></tr><tr><td height="30" width="95" bgcolor="#ffb7dd">#FFB7DD</td><td height="30" width="95" bgcolor="#ff88c2">#FF88C2</td><td height="30" width="95" bgcolor="#ff44aa">#FF44AA </td><td height="30" width="95" bgcolor="#ff0088">#FF0088 </td><td height="30" width="95" bgcolor="#c10066">#C10066 </td><td height="30" width="95" bgcolor="#a20055">#A20055 </td><td height="30" width="95" bgcolor="#8c0044">#8C0044 </td></tr><tr><td height="30" width="95" bgcolor="#ffcccc">#FFCCCC</td><td height="30" width="95" bgcolor="#ff8888">#FF8888</td><td height="30" width="95" bgcolor="#ff3333">#FF3333 </td><td height="30" width="95" bgcolor="#ff0000">#FF0000 </td><td height="30" width="95" bgcolor="#cc0000">#CC0000 </td><td height="30" width="95" bgcolor="#aa0000">#AA0000 </td><td height="30" width="95" bgcolor="#880000">#880000 </td></tr><tr><td height="30" width="95" bgcolor="#ffc8b4">#FFC8B4</td><td height="30" width="95" bgcolor="#ffa488">#FFA488</td><td height="30" width="95" bgcolor="#ff7744">#FF7744 </td><td height="30" width="95" bgcolor="#ff5511">#FF5511 </td><td height="30" width="95" bgcolor="#e63f00">#E63F00 </td><td height="30" width="95" bgcolor="#c63300">#C63300 </td><td height="30" width="95" bgcolor="#a42d00">#A42D00 </td></tr><tr><td height="30" width="95" bgcolor="#ffddaa">#FFDDAA</td><td height="30" width="95" bgcolor="#ffbb66">#FFBB66</td><td height="30" width="95" bgcolor="#ffaa33">#FFAA33</td><td height="30" width="95" bgcolor="#ff8800">#FF8800 </td><td height="30" width="95" bgcolor="#ee7700">#EE7700 </td><td height="30" width="95" bgcolor="#cc6600">#CC6600 </td><td height="30" width="95" bgcolor="#bb5500">#BB5500 </td></tr><tr><td height="30" width="95" bgcolor="#ffee99">#FFEE99</td><td height="30" width="95" bgcolor="#ffdd55">#FFDD55</td><td height="30" width="95" bgcolor="#ffcc22">#FFCC22</td><td height="30" width="95" bgcolor="#ffbb00">#FFBB00 </td><td height="30" width="95" bgcolor="#ddaa00">#DDAA00 </td><td height="30" width="95" bgcolor="#aa7700">#AA7700 </td><td height="30" width="95" bgcolor="#886600">#886600 </td></tr><tr><td height="30" width="95" bgcolor="#ffffbb">#FFFFBB</td><td height="30" width="95" bgcolor="#ffff77">#FFFF77</td><td height="30" width="95" bgcolor="#ffff33">#FFFF33</td><td height="30" width="95" bgcolor="#ffff00">#FFFF00</td><td height="30" width="95" bgcolor="#eeee00">#EEEE00</td><td height="30" width="95" bgcolor="#bbbb00">#BBBB00</td><td height="30" width="95" bgcolor="#888800">#888800</td></tr><tr><td height="30" width="95" bgcolor="#eeffbb">#EEFFBB</td><td height="30" width="95" bgcolor="#ddff77">#DDFF77</td><td height="30" width="95" bgcolor="#ccff33">#CCFF33</td><td height="30" width="95" bgcolor="#bbff00">#BBFF00</td><td height="30" width="95" bgcolor="#99dd00">#99DD00</td><td height="30" width="95" bgcolor="#88aa00">#88AA00</td><td height="30" width="95" bgcolor="#ccff99">#CCFF99</td><td height="30" width="95" bgcolor="#bbff66">#BBFF66</td><td height="30" width="95" bgcolor="#99ff33">#99FF33</td><td height="30" width="95" bgcolor="#77ff00">#77FF00</td><td height="30" width="95" bgcolor="#66dd00">#66DD00</td><td height="30" width="95" bgcolor="#55aa00">#55AA00</td><td height="30" width="95" bgcolor="#227700">#227700</td></tr><tr><td height="30" width="95" bgcolor="#99ff99">#99FF99</td><td height="30" width="95" bgcolor="#66ff66">#66FF66</td><td height="30" width="95" bgcolor="#33ff33">#33FF33</td><td height="30" width="95" bgcolor="#00ff00">#00FF00</td><td height="30" width="95" bgcolor="#00dd00">#00DD00</td><td height="30" width="95" bgcolor="#00aa00">#00AA00</td><td height="30" width="95" bgcolor="#008800">#008800</td></tr><tr><td height="30" width="95" bgcolor="#bbffee">#BBFFEE</td><td height="30" width="95" bgcolor="#77ffcc">#77FFCC</td><td height="30" width="95" bgcolor="#33ffaa">#33FFAA</td><td height="30" width="95" bgcolor="#00ff99">#00FF99</td><td height="30" width="95" bgcolor="#00dd77">#00DD77</td><td height="30" width="95" bgcolor="#00aa55">#00AA55</td><td height="30" width="95" bgcolor="#008844">#008844</td></tr><tr><td height="30" width="95" bgcolor="#aaffee">#AAFFEE</td><td height="30" width="95" bgcolor="#77ffee">#77FFEE</td><td height="30" width="95" bgcolor="#33ffdd">#33FFDD</td><td height="30" width="95" bgcolor="#00ffcc">#00FFCC</td><td height="30" width="95" bgcolor="#00ddaa">#00DDAA</td><td height="30" width="95" bgcolor="#00aa88">#00AA88</td><td height="30" width="95" bgcolor="#008866">#008866</td></tr><tr><td height="30" width="95" bgcolor="#99ffff">#99FFFF</td><td height="30" width="95" bgcolor="#66ffff">#66FFFF</td><td height="30" width="95" bgcolor="#33ffff">#33FFFF</td><td height="30" width="95" bgcolor="#00ffff">#00FFFF</td><td height="30" width="95" bgcolor="#00dddd">#00DDDD</td><td height="30" width="95" bgcolor="#00aaaa">#00AAAA</td><td height="30" width="95" bgcolor="#008888">#008888</td></tr><tr><td height="30" width="95" bgcolor="#cceeff">#CCEEFF</td><td height="30" width="95" bgcolor="#77ddff">#77DDFF</td><td height="30" width="95" bgcolor="#33ccff">#33CCFF</td><td height="30" width="95" bgcolor="#00bbff">#00BBFF</td><td height="30" width="95" bgcolor="#009fcc">#009FCC</td><td height="30" width="95" bgcolor="#0088a8">#0088A8</td><td height="30" width="95" bgcolor="#007799">#007799</td></tr><tr><td height="30" width="95" bgcolor="#ccddff">#CCDDFF</td><td height="30" width="95" bgcolor="#99bbff">#99BBFF</td><td height="30" width="95" bgcolor="#5599ff">#5599FF</td><td height="30" width="95" bgcolor="#0066ff">#0066FF </td> <td height="30" width="95" bgcolor="#0044bb">#0044BB </td> <td height="30" width="95" bgcolor="#003c9d">#003C9D </td> <td height="30" width="95" bgcolor="#003377">#003377 </td> </tr><tr><td height="30" width="95" bgcolor="#ccccff">#CCCCFF</td><td height="30" width="95" bgcolor="#9999ff">#9999FF</td><td height="30" width="95" bgcolor="#5555ff">#5555FF </td> <td height="30" width="95" bgcolor="#0000ff">#0000FF </td> <td height="30" width="95" bgcolor="#0000cc">#0000CC </td> <td height="30" width="95" bgcolor="#0000aa">#0000AA </td> <td height="30" width="95" bgcolor="#000088">#000088 </td> </tr><tr><td height="30" width="95" bgcolor="#ccbbff">#CCBBFF</td><td height="30" width="95" bgcolor="#9f88ff">#9F88FF</td><td height="30" width="95" bgcolor="#7744ff">#7744FF </td> <td height="30" width="95" bgcolor="#5500ff">#5500FF </td> <td height="30" width="95" bgcolor="#4400cc">#4400CC </td> <td height="30" width="95" bgcolor="#2200aa">#2200AA </td> <td height="30" width="95" bgcolor="#220088">#220088 </td> </tr><tr><td height="30" width="95" bgcolor="#7700ff">#7700FF </td><td height="30" width="95" bgcolor="#5500dd">#5500DD </td><td height="30" width="95" bgcolor="#4400b3">#4400B3 </td><td height="30" width="95" bgcolor="#3a0088">#3A0088 </td></tr><tr><td height="30" width="95" bgcolor="#e8ccff">#E8CCFF</td><td height="30" width="95" bgcolor="#d28eff">#D28EFF</td><td height="30" width="95" bgcolor="#b94fff">#B94FFF </td><td height="30" width="95" bgcolor="#9900ff">#9900FF </td><td height="30" width="95" bgcolor="#7700bb">#7700BB </td><td height="30" width="95" bgcolor="#66009d">#66009D </td><td height="30" width="95" bgcolor="#550088">#550088 </td></tr><tr><td height="30" width="95" bgcolor="#f0bbff">#F0BBFF</td><td height="30" width="95" bgcolor="#e377ff">#E38EFF</td><td height="30" width="95" bgcolor="#d93eff">#E93EFF </td><td height="30" width="95" bgcolor="#cc00ff">#CC00FF </td><td height="30" width="95" bgcolor="#a500cc">#A500CC </td><td height="30" width="95" bgcolor="#7a0099">#7A0099 </td><td height="30" width="95" bgcolor="#660077">#660077 </td></tr><tr><td height="30" width="95" bgcolor="#ffb3ff">#FFB3FF</td><td height="30" width="95" bgcolor="#ff77ff">#FF77FF</td><td height="30" width="95" bgcolor="#ff3eff">#FF3EFF </td><td height="30" width="95" bgcolor="#ff00ff">#FF0 0FF </td><td height="30" width="95" bgcolor="#cc00cc">#CC00CC </td><td height="30" width="95" bgcolor="#990099">#990099 </td><td height="30" width="95" bgcolor="#770077">#770077 </td></tr></tbody></table></p><p id="color_rgb">颜⾊还可以使⽤rgb（255,0,255）的⽅式</p><p id="color_pellucidity">使⽤rgba(255,0,255,0.6)最后⼀位设置透明度,取值0-1，</p></body></html>View Code注意：可使⽤复合属性font，设置字体相关属性值，不同属性值之间使⽤空格隔开。
css 练习题CSS练习题CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。
通过CSS，我们可以实现对网页中各个元素的展示样式进行控制，包括字体、颜色、大小、背景等等。
为了帮助大家更好地掌握CSS技能，以下是一些CSS练习题，希望能帮助你进一步熟悉CSS的应用。
题目一：创建一个简单的居中对齐的盒子要求：创建一个宽度为300px，高度为200px的盒子，并水平垂直居中对齐在页面上。
提示：利用`margin`属性和`text-align`属性可以实现盒子的居中对齐。
题目二：添加鼠标悬浮效果要求：当鼠标悬浮在盒子上时，盒子的背景颜色变为橙色，文字颜色变为白色。
提示：可以使用`:hover`伪类选择器为盒子设置悬浮效果，并利用`background-color`和`color`属性来改变背景颜色和文字颜色。
题目三：创建一个三栏布局要求：创建一个三栏布局，左右两栏宽度为200px，中间栏自适应剩余宽度。
左右两栏的背景颜色为灰色，中间栏的背景颜色为白色。
提示：可以使用`float`属性将左右两栏浮动到左右两侧，设置宽度和背景颜色。
对于中间栏，可以利用`margin`属性设置其左右两侧的外边距。
题目四：实现响应式布局要求：创建一个响应式网页布局，当屏幕宽度小于600px时，三栏布局变为垂直排列。
提示：可以使用媒体查询（`@media`）来设置不同屏幕宽度下的样式。
题目五：改变链接样式要求：将网页中所有的链接的文字颜色改为蓝色，并去除链接的默认下划线。
提示：可以使用`color`属性来改变链接文字的颜色，使用`text-decoration`属性来去除下划线。
题目六：实现动画效果要求：为页面中的某个元素添加一个旋转动画效果。
提示：可以使用`@keyframes`和`animation`属性来定义和应用动画效果。
以上是一些CSS练习题，通过这些练习可以帮助你更好地掌握CSS 的应用。
希望你能够积极尝试并不断提升自己的CSS技能，为构建更美观的网页界面打下坚实的基础。
css测试题一. 判断题您的姓名： [填空题] *_________________________________所有的主流浏览器均不支持层叠样式表。
（） [单选题] *A. 对B. 错(正确答案)CSS（Cascading style sheets）层叠样式表技术是扩展标签属性的机制。
(A)[单选题] *A. 对(正确答案)B. 错样式规则中的每条声明由冒号分隔的属性值对组成，声明之间用分号分隔，最后的“;”可以省略。
（） [单选题] *A. 对B. 错(正确答案)CSS样式只要书写正确就能应用到HTML元素上产生效果。
（） [单选题] *A. 对B. 错(正确答案)设置16进制值颜色值需要在6位16进制数前加一“#”。
（） [单选题] *A. 对(正确答案)B. 错父元素的所有CSS属性都会被子元素继承。
（） [单选题] *A. 对B. 错(正确答案)产生样式层叠时，处于最前面的CSS样式会被最终应用。
（） [单选题] *A. 对B. 错(正确答案)样式声明中添加“!important”，代表该样式具有最高权值。
（） [单选题] *A. 对(正确答案)B. 错块元素是一个标准的盒子，默认情况下独占一行。
（） [单选题] *A. 对(正确答案)B. 错行内元素是一个标准的盒子，与相邻元素共享一行。
（） [单选题] *A. 对B. 错(正确答案)元素类型是不能相互转换的。
（） [单选题] *A. 对B. 错(正确答案)文档流指文档里各元素的默认排列方式。
（） [单选题] *A. 对(正确答案)B. 错元素选择器，通常就是HTML的元素名称，又称为类型选择器。
（） [单选题] *A. 对(正确答案)B. 错一种元素选择器可以对网页中的各种元素生效。
（） [单选题] *A. 对B. 错(正确答案)后代选择器，又称包含选择器，其祖先元素和后代元素之间用逗号分隔。
（） [单选题] *A. 对B. 错(正确答案)子选择器中的样式只对子元素有效，对孙子以下的后代元素无效。
css 填空题当然可以，以下是几个关于CSS的填空题：1. CSS中，设置元素颜色通常使用____属性，它可以有三种值：____、____和____。
2. 要将一个元素向右移动10px，可以使用CSS的____属性，并设置其值为____。
3. 在CSS中，____属性用于设置元素的字体大小。
4. 假设一个元素具有固定的宽度和高度，要使其居中显示，可以使用CSS 的____属性。
5. CSS中的____属性用于设置元素的外边距。
6. 假设要设置一个元素的背景色为红色，背景图像为，可以这样写：____。
7. 在CSS中，设置文本的行高通常使用____属性。
8. 假设要使一个元素的边框宽度为2px，颜色为蓝色，可以这样写：____。
9. CSS中的____属性用于设置元素的文字样式，例如斜体或粗体。
10. CSS中的____属性用于设置元素的边框样式，例如实线或虚线。
这些填空题的答案如下：1. CSS中，设置元素颜色通常使用color属性，它可以有三种值：关键字、十六进制和RGB。
2. 要将一个元素向右移动10px，可以使用CSS的margin-left属性，并设置其值为-10px（注意是负值）。
3. 在CSS中，font-size属性用于设置元素的字体大小。
4. 假设一个元素具有固定的宽度和高度，要使其居中显示，可以使用CSS的margin属性。
5. CSS中的margin属性用于设置元素的外边距。
6. 假设要设置一个元素的背景色为红色，背景图像为，可以这样写：background: red url();。
7. 在CSS中，设置文本的行高通常使用line-height属性。
8. 假设要使一个元素的边框宽度为2px，颜色为蓝色，可以这样写：border: 2px solid blue;。
9. CSS中的font-style属性用于设置元素的文字样式，例如斜体或粗体。
10. CSS中的border-style属性用于设置元素的边框样式，例如实线或虚线。
