标题图CSS介绍学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢?style属性方式利用标签中的style属性来改变显示样式p标签作者:在head中加入style标签作者:p{color:#FFF000;}链接方式总结CSS选择器名称{属性名:属性值;…….}属性与属性之间用分号隔开属性与属性值用冒号连接选择器1.class选
分类:
编程语言 时间:
2019-11-10 09:57:30
阅读次数:
98
学习Web前端开发基础技术需要掌握:HTML、CSS、JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧!一、HTML是网页内容的载体内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。二、CSS样式是表现就像网页的外衣,比如:标题字体、颜色变化、为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。三、JavaScript是
分类:
编程语言 时间:
2019-11-10 09:55:08
阅读次数:
95
为什么要用转义字符串?HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用。这些符号是不显示在我们最终看到的网页里的,那如果我们希望在网页中显示这些符号,该怎么办呢?这就要说到HTML转义字符串(EscapeSequence)了。转义字符串(EscapeSequence)也称字符实体(CharacterEntity)。在HTML中
分类:
Web程序 时间:
2019-11-10 09:41:29
阅读次数:
94
display属性display属性用来控制一个元素及其子元素的格式化上下文,你应该在刚刚学习CSS的时候就知道,有些元素是块级元素,有些则是行内元素。有了display属性,你就可以切换元素不同的状态。比如说,通常一个h1元素是一个块级元素,但是通过切换,它就能以内联元素展现。这几年,我们也知道了Grid布局和弹性盒布局。我们只需要将display属性的值设置为display:grid或disp
分类:
Web程序 时间:
2019-11-08 09:30:23
阅读次数:
112
为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决。1.最耗资源的,最简单的*{padding:0;margin:0;border:0;}2.选择性初始化举例(综合)body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend
分类:
Web程序 时间:
2019-11-08 09:19:58
阅读次数:
128
box-shaodw在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这样一个盒子:div{width:100px;height:100px;box-shadow:02px4pxrgba(0,0,0,0.3);}希望hover的时候,盒阴影从box-shadow:02px4pxrgba(0,0,0,0.3)过渡到box-shadow:05px15pxrgba(0,0,
分类:
Web程序 时间:
2019-11-08 09:16:51
阅读次数:
116
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器(+)相邻兄弟选择器可选择紧接在另一个元素
分类:
Web程序 时间:
2019-11-08 09:15:21
阅读次数:
117
方法一、在结尾处添加空div标签clear:both在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.<divclass="box"><divclass="red">1</div><divclass="sienna
分类:
Web程序 时间:
2019-11-06 18:35:11
阅读次数:
94
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。一、blur(px)高斯模糊二、brightness(%)亮度三、contrast(%)对比度四、drop-shadow()阴影注意:这个drop-shadow与box-shadow都是在说阴影,但还是有区别的,看下图图中火焰的图片,是一张png图片,除
分类:
Web程序 时间:
2019-11-06 10:35:48
阅读次数:
123
html中文字的默认排列是横向排列的,但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列.onecn{width:20px;margin:0auto;line-height:24px;}.oneen{width:15px;margin:0auto;line-height:24px;font-size:20px;word-wrap:break-word;/*英文的时候需要加上这句,自动换行*/w
分类:
Web程序 时间:
2019-11-05 09:39:21
阅读次数:
136