css是层叠样式表( Cascading Style Sheets )的缩写,是一种样式表语言,用于描述以 html 之类的标记语言编写的文档的布局。 它是用于设计Web页面的三剑客之一,另外两位浩客是HTML和Javascript。
CSS 的设计目的是使样式和内容分离,包括布局、颜色和字体。这种分离可以提高内容的可访问性,在样式特征的规范中提供更多的灵活性和控制,通过在一个单独的. .css 文件中指定相关的 CSS,使多个 web 页面能够共享格式,并减少结构内容中的复杂性和重复。
它具有简单的语法,并使用大量的英文关键字来指定各种样式属性的名称。
既然我们已经讨论了CSS的基础知识,让我们来观察一下基于CSS的重要面试问题。
CSS(层叠样式表)是一种样式语言,对于 HTML 元素来说足够简单。 它在网页设计中非常流行,其应用在XHTML中也很常见。
CSS是在1997年开发的,作为一种web开发人员设计他们正在创建的web页面布局的方法。它的目的是让开发者将网站代码的内容和结构从视觉设计中分离出来。
这种结构和设计的分离允许HTML执行比原来更多的功能。
CSS的不同版本:
一个样式规则由三部分组成:
CSS 可以集成为三种方式
<p style=”colour:skyblue;”>hello world</p>
<head>
<link rel=”text/css”href=”your_CSS_file_location”/>
</head>
head>
<style>
P{
color : lime;
background-color:black;
}
</style>
</head>
万维网协会维护 CSS规范。
伪元素是添加到选择器的关键字,它允许一种样式,即所选元素的特定部分。CSS用于在HTML标记中应用样式,它允许在不影响实际文档的情况下对文档进行额外标记。它可以用来:
语法:
Selector: :pseudo-element
{Property1 :value;
Property2 :value;}
CSS的优点是:
渐变是指我们在两幅图像之间创建中间帧,以获得第一幅图像的外观,然后发展成第二幅图像的过程,它主要用于创建动画。
CSS 特定性是一个分数或等级,它决定了元素必须使用哪种样式声明。 CSS 中有四类可以授权选择器的特异性级别:
CSS的缺点有:
RWD(响应式Web设计)技术用于在每种屏幕尺寸以及移动,平板电脑,台式机和笔记本电脑等设备上完美显示设计页面,让我们无需为每个设备创建不同的页面。
CSS精灵的好处有:
上下文选择器,严格来讲,叫后代组合式选择器,就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。只要有标签在它的层次结构“上游”存在这么一个祖先,那么就会选中该标签。无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。
渐进增强的概念是指从最基本的可用性出发,在保证站点页面在低级浏览器中 的可用性和可访问性的基础上,逐步增加功能及提高用户体验。本质上讲,我们日常的一些开发习惯,例如首先使用标记语言编写页面,然后通过样式表来控制页面 样式等,都属于渐进增强的概念;其他更为明显的行为包括使用HTML5、CSS3等新技术,针对高级浏览器为页面提高用户体验的丰富程度。
平稳退化的概念是指首先使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级浏览器的限制,逐步衰减那些无法被支持的功能及体验;在我们日常的开 发中,一个典型的平稳退化的例子就是首先针对Chrome编写页面代码,然后修复IE中的异常或针对IE去除那些无法被实现的功能特色.
所以, 这两个概念方法其实早已并存在我们的日常开发工作中了,只是“渐进增强”与“平稳退化”这样的措辞是近些年才开始被普及。在我们眼下的HTML5与 CSS3实战用,这两个概念就尤其重要了,怎样保证使用不断变化的新技术来构建在主流浏览器下都具有基本可用性的站点,并针对高级浏览器进行体验提升,这 些是我们在开发过程中需要明确的思路。
我们可以使用诸如font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。 我们必须将给定图标类的名称添加到任何内联HTML元素中。 (<i>或<span>)。 图标库中的图标是可缩放的矢量,可以使用CSS进行自定义。
border-width指定边框的宽度。
物理标签被称为表示标记,而逻辑标签对于外观是无用的。物理标签是较新的版本,而逻辑标签是旧的并且专注于内容。
如题,我们的标签元素写上后,浏览器就会渲染出结果,但不仅仅是这么简单
//物理元素
<b>我想用b标签加粗</b>
//逻辑元素
<strong>我想用strong标签加粗</strong>
//两段文字都加粗了,而且视觉效果完全一样
确实,文字加粗了,两者都达到了我们想要的目的,但是我们忽略了一个问题,既然b标签可以加粗,那么strong这个标签同样是加粗,存在的 意义又是什么呢?既然W3C定义了两个,它们之间的不同点是什么呢?它们之间的相同点又是什么呢?
物理元素
物理元素,又叫实体标签,它所做的是一种物理行为,比如上面我把一段文字用b标签加粗了,它所传达的给浏览器,告诉浏览器 我要加粗这段文字,从单词Bold中也可以看出来,英文中仅仅是加粗的意思,并没有其他作用。总结来说就是一句话: 物理元素就是告诉浏览器该怎么显示出来。
逻辑元素
逻辑元素,从英文字面上Strong就可以看出它是强调的意思,所以我们用这个逻辑元素(如上strong)来向浏览器传达 一个强调某段文字重要性的消息,说明此文字较为重要,也有利于搜索引擎收录。
Web标准主张XHTML不涉及具体的表现形式,“强调”可以用加粗来强调,也可以用别的方式强调,也可以通过css来改变strong的具体表现 ,还有就是并不是有了strong逻辑标签,就不用b标签来表示字体加粗了,b标签和strong标签默认情况下强调的效果一致,strong完全可以定义成别的样式,用来强调 效果,但是最好符合W3C标准,它更提倡内容与样式分离,所以单纯为了达到加粗而使用b标签不建议这样做, 从XHTML文档有意义性及用户体验角度来说,strong逻辑标签更加合适,而seo方面,则针对优化情况而定。
CSS伪类是用来添加一些选择器的特殊效果。伪类的语法
selector:pseudo-class{property:value;}
CSS 和 SCSS 之间的区别如下:
嵌入式样式表的优点:
嵌入式样式表的缺点:
无法控制多个文档。
不同的介质不区分大小写,因此它们具有不同的属性。 他们是:
该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器,以通过规则集进行标识。
CSS 框架是一个库,它允许使用CSS语言进行更轻松,更符合标准的Web设计。 这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有:ACSS,Bulma,YAML,Foundation等。
原文:https://codersera.com/blog/
很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,
什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?
多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。
面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!
React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?
题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。
10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性
面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。
把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习
vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!