继续天文大兄弟的CSS部分的学习安排!
css参考问题:
1. CSS是什么?是编程语言吗?
答:CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,实际上它是一组样式
CSS不能算是一种编程语言,而是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
2. CSS的作用是什么?
答:1.定义如何显示 HTML 元素
通过使用CSS样式设置页面的格式
2.可将页面的内容与表现形式分离
页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。
3.多个样式定义可层叠为一
4. 提高了工作效率
3. 如何使用CSS?
答:CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束,声明组以大括号({})括起来
4. 什么是多重样式?
答:某些属性在不同的样式表中被同样的选择器定义。
5. 多重样式的优先级是?
答:
(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
也可以这样理解,浏览器先加载优先级低的样式,优先级高的会覆盖低的样式;但是如果在css样式之后加 !important 属性,那么此属性优先执行。
6. CSS的选择器有哪些?
答:id 和 class 选择器。
7. CSS的常用属性有哪些?
答:color 设置text的颜色
text-align 设置text的对齐
line-height 设置行高
font-family 设置字体
font-size 设置字体的大小
background-color 设置背景的颜色
margin 设置盒子的外边距 外边距是透明的。
padding 设置盒子的内边距 内边距也是透明的。
border 设置盒子的边框,边框为不透明的。note:边框必须要设置类型,否则将无效。
float 设置盒子的浮动,浮动是绝对定位的一种,其占位空间将消失。
8. 什么是盒子模型?
答:所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
9. 媒体类型的作用是?
答:媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。
10. 定位的方式有哪几种?
答:1.static
2.relative
3. fixed
4. absolute
5. sticky
11. 伪类和伪元素的区别?
答:伪类表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。对元素的状态添加特殊效果。
伪元素,就是一个元素,类似p标签元素。对元素的内容添加特殊效果。
12. CSS3添加了哪些特性?
答:选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面
13. 谈谈弹性盒子模型和之前盒子模型的区别?
答:CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
而之前的盒子模型用的是较为绝对的像素大小。
14. 如何做多媒体查询?
答:使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。