CSS初步认识 2019-01-22

- CSS是什么?是编程语言吗?

“CSS是层叠样式表;不是编程语言。”


- CSS的作用是什么?

“CSS的作用是为HTML标记语言提供一种样式描述,定义了其中元素的显示方式。”


- 如何使用CSS?

“CSS有三种使用方式:内联样式、内部样式表、外部引用。其中最佳的方式为外部引用。”


- 什么是多重样式?

“每条css为两部分组成:1.选择器 2.样式。”


- 多重样式的优先级是?

“当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。

不同级别:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别:后写的会覆盖先写的样式

important的优先级是最高的,但出现冲突时则需比较”四位数“;

优先级相同时,则采用就近原则,选择最后出现的样式;

继承得来的属性,其优先级最低;

强烈建议:css选择器采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。”


- CSS的选择器有哪些?

“标签选择器(如:body, div, p, ul, li)

类选择器(如:class="head",class="head_logo")

ID选择器(如:id="name",id="name_txt")

全局选择器(如:*号)

组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

继承选择器(如:div p,注意两选择器用空格键分开)

伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover)

字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

子选择器 (如:div>p ,带大于号>)

CSS 相邻兄弟选择器器 (如:h1+p,带加号+)”


- CSS的常用属性有哪些?

“背景样式:background,background-image等;

位置尺寸:position定位方式,overflow内容溢出,width宽度,height高度,margin外边距,padding内边距,border边框;

文字属性:color 文字颜色,font-size 文字大小,line-height 设置行高,text-align居中方式,font-weight粗体,text-decoration文字特效;

连接属性:a:link 超链接文字格式,a:visited 浏览过的链接文字格式 ,a:active 按下链接的格式,a:hover 鼠标在链接上”


- 什么是盒子模型?

“所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。”


- 媒体类型的作用是?

“对不同指定特定样式。”


- 定位的方式有哪几种?

“两类,六种。”


- 伪类和伪元素的区别

“本质区别是,是否创造了新元素。”


- CSS3添加了哪些特性?

“https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/css3-news.html”


- 谈谈弹性盒子模型和之前盒子模型的区别?

“区别在于特殊页面布局上弹性盒子更方便。”


- 如何做多媒体查询?

“多媒体查询语法

多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。

@medianot|only mediatypeand(expressions) {  CSS 代码...;}

如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。

not:not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

all:所有设备,这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件:

CSS3 多媒体类型

值描述

all用于所有多媒体类型设备

print用于打印机

screen用于电脑屏幕,平板,智能手机等。

speech用于屏幕阅读器。”

你可能感兴趣的:(CSS初步认识 2019-01-22)