web前端技能方法总结(css、js、jquery、html)(17)

简介: web前端技能方法总结(css、js、jquery、html)

1、可以用background-image属性给任何元素添加背景图像。如果同时设的也有背景颜色,那么它是置于背景颜色之上的。背景图像跟背景颜色一样,只出现在内容区和补白之下,没有延伸到边框之外的边界。

background-image:url(images/background.gif); background-image属性被设置成URL,可以是相对路径或完整的URL(http://...).注意URL没有加引号

还有两个属性也能影响背景图像:background-position和background-repeat.

默认的背景图像是重复的。还好background-repeat属性有no -repeat值。浏览器默认的背景图像的位置是元素的左上方(和属性值设为top left效果一样)。

background-position属性用来设置图像的位置,可以用像素、百分数或top,left,right,bottom,center这些关键字定义。

background-repeat属性用来控制这种平铺效果,默认的格式是repeat,意为把图像设置为在水平和垂直方向上都重复。属性值no-repeat表示图像只显示一次,不重复;repeat-x表示图像只在水平方向上重复;

repeat-y表示图像只在垂直方向上重复;inherit表示继承父元素的值。

2、边框样式(border-style)一共有8种,有实线、虚线、凸出线、凹进线等;边框宽度(border-width)属性用来控制边框宽度。可以用关键词(thin、medium、thick,但是浏览器对它们的默认大小不一定总是相同)或像素来定义宽度;边框颜色;也可只定义边框的一侧,如上边框:border-top-color/border-top-style/border-top-width。

怎么让边框看起来像锯齿呢?其实有个小窍门:用虚线边框(dashed),把它设置为白色(跟页面的背景颜色匹配,假设页面背景是白色)。

3、class和id

一般当你想应用一种样式到多个元素的时候就用类。相反,如果你需要应用样式的只是一个元素并且页面上只有一个,就用id。严格来说,id属性是命名唯一的元素的。

(1)p.specials{ color:red; } 这条规则只选择specials类中的段落。 .specials{ color:red; } 这条规则选择specials类中的所有元素。

(2)#footer{ color:red; } 这条规则选择id为“footer”的任意元素。 p#footer{ color:red; } 这条规则选择一个id为“footer”的

元素。

类和id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配。

4、使用多样式表

在XHTML中你可以定义多个样式表(用多个link标签)。样式表链接文件的顺序很重要!一个样式表会覆盖在它之前链接的样式表中的样式。这些样式表从上到下排列,最下面的样式表优先权最高。

元素有一个叫做media的属性,可以用来定义你的样式文件所需要的设备类型。例如属性值为screen适用于电脑屏幕,print适用于打印机类的媒体,handled适用于移动设备和移动电话等。如果没有提供媒体种类,样式文件就应该适用于所有设备。并不是所有的浏览器都支持media属性。

相关文章
|
2月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
101 33
|
3月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
123 24
|
2月前
|
JavaScript
jQuery实现的卡片式翻转时钟HTML源码
jQuery实现的卡片式翻转时钟HTML源码
24 0
jQuery实现的卡片式翻转时钟HTML源码
|
2月前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
54 11
|
2月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
77 1
|
3月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
62 13
|
3月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
63 3
|
9月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
48 0

热门文章

最新文章