CSS
文章平均质量分 65
让你五行代码
芸芸代码写浮生,侃侃字句话编程。
展开
-
怎样通过font属性控制CSS字体样式?
使用font-family属性设置字体时,需要注意以下几点。使用fomt属性综合设置字体样式时,必须按上述语法格式中的顺序书写,各个属性以空格隔开(line-height用于设置行间距,属于文本外观属性,在后面将具体介绍)。其中,不需要设置的属性可以省略(省略的属性将取默认值),但必须保留fomt-size和 font-family属性,否则font 属性将不起作用。从图中可以看出,font属性设置的样式并没有对第二个段落文本生效,这是因为对第二个段落文本的设置中省略了字体属性“font-family”。转载 2023-03-08 15:53:37 · 1214 阅读 · 0 评论 -
巧用JavaScript定时器3秒自动关闭广告
在实际开发中,考虑到一个网页中可能会有很多个定时器,所以建议用一个变量保存定时器的id(唯一标识),若想要在定时器启动后,取消该定时器操作,可以将setTimeost()的返回值(定时器id)传递给clearTimeout)方法。在上述代码中,当参数为一个函数名时,这个函数名不需要加()小括号,否则就变成了立即执行这个函数,将函数执行后的返回值传入。在上述语法中,第1个参数表示到达第2个参数设置的等待时间后要执行的代码,也可以传入一个函数,或者函数名,第2个参数的时间单位以毫秒(ms)计。转载 2023-03-01 15:19:56 · 1291 阅读 · 0 评论 -
常用CSS样式大全(超全面)
14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}转载 2023-02-28 14:59:14 · 11332 阅读 · 1 评论 -
CSS 具有哪3大特性?
important 无穷大.相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。4. 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。转载 2023-02-13 17:10:46 · 213 阅读 · 0 评论 -
css3结构伪类选择器有哪些?
结构化伪类选择器是CSS3中新增加的选择器。常用的结构化伪类选择器有:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n)选择器、:empty选择器、:target选择器,下面我们一一讲解。转载 2023-02-13 16:52:01 · 1621 阅读 · 0 评论 -
一文弄懂盒子模型的边框样式属性和应用技巧
当省略某个属性值时,边框样式会采用值复制的原则,将省略的属性值默认为某一边的样式。在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性(border-width)、边框颜色属性(border-color)、单侧边框的属性、边框的综合属性,如表1所示。边框的默认颜色为元素本身的文本颜色,对于没有文本的元素,例如只包含图像的表格,其默认边框颜色为父元素的文本颜色。上面的设置方式中,边框的宽度、样式、颜色顺序任意,不分先后,可以只指定需要设置的属性,省略的部分将取默认值(样式不能省略)。转载 2023-02-07 18:11:03 · 1186 阅读 · 0 评论 -
物理像素和物理像素比的区别是什么?
物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。我们开发时候的1px,PC端页面是1个px 等于1个物理像素,但是移动端就不尽相同,一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比。Retina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊。单位: 长度|百分比|cover|contain;转载 2023-01-13 18:08:10 · 149 阅读 · 0 评论 -
2D变形效果有几种?变形效果讲解
在上述语法中,参数x-value和y-value分别用于定义水平(X轴)和垂直(Y轴)的缩放倍数。其中,实线表示放大前的元素,虚线表示放大后的元素。在上述语法中,参数x-value和y-value分别用于定义水平(X轴)和垂直(Y轴)的倾斜角度。在上述语法中,参数x-value和y-value分别用于定义水平(X轴)和垂直(Y轴)坐标。在使用translate()方法移动元素时,坐标点默认为元素中心点,然后根据指定的X坐标和Y坐标进行移动,效果如图1所示。在该图中,1表示平移前的元素,2表示平移后的元素。转载 2023-01-13 17:52:09 · 343 阅读 · 0 评论 -
box-sizing的属性及作用详细介绍【CSS3】
应用“box-sizing: border-box;当一个盒子的总宽度确定之后,要想给盒子添加边框或内边距,往往需要更改 width属性值,才能保证盒子总宽度不变,操作起来烦琐且容易出错,运用CSS3的box-sizing属性可以轻松解决这个问题。●content-box:浏览器对盒模型的解释遵从W3C标准,当定义width和height时,它的参数值不包括border和padding。在上面的语法格式中,box-sizing属性的取值可以为content-box或border-box,对它们的解释如下。转载 2023-01-12 17:36:53 · 3547 阅读 · 1 评论 -
css3渐变属性有哪些?css3渐变属性用法详解
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果。CSS3的渐变属性主要包括线性渐变和径向渐变,下面我们详细介绍。在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image: linear-gradient(参数值);”样式可以实现线性渐变效果,其基本语法格式如下。转载 2023-01-12 17:25:57 · 1420 阅读 · 0 评论 -
transition-property属性的属性值有几个?
在上面案例中,通过transition-property属性指定产生过渡效果的CSS属性为background-color,并设置了鼠标移上时背景颜色变为蓝色,如第14~15行代码所示。transition-property属性用于指定应用过渡效果的CSS属性的名称,其过渡效果通常在用户将指针移动到元素上时发生。当指定的CSS属性改变时,过渡效果才开始。ransition-duration属性用于定义过渡效果花费的时间,默认值为0,常用单位是秒(s)或者毫秒(ms),其基本语法格式如下。转载 2023-01-09 18:16:16 · 4015 阅读 · 0 评论 -
块级元素、行内元素和行内块元素各自特点和区别
常见的行内元素有、、、、、、、、、等,其中标签最典型的“行内元素”,也称“内联元素”。在行内元素中有几个特殊的标签——、、,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。常见的块元素有~、、、、、等,其中标签是最典型的块元素。4. 块级元素、行内元素和行内块元素的区别。转载 2023-01-04 16:10:19 · 519 阅读 · 0 评论 -
Web前端培训:Sass嵌套的使用方式
尽管Sass可以把反复使用的CSS属性值定义成变量,但是为了完善Sass的功能,Sass基于变量提供了更为强大的工具,即规则嵌套。在使用CSS编写代码的时候,众所周知,重复写选择器是非常烦琐的。例如,要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个ID来实现,如下所示。在上述代码中,Sass在编译输出CSS时会自动把这些嵌套规则处理好,避免代码的重复书写,且使样式的可读性更高。为了解决重复书写ID选择器的问题,Sass提供了嵌套规则,只写一遍即可实现,具体代码如下。转载 2022-12-19 15:45:37 · 76 阅读 · 0 评论 -
移动端页面布局:Less语法的格式
CSS需要编写大量重复的样式属性值来实现页面的样式,如CSS中的一些颜色和数值等经常被使用。下面讲解如何定义less变量,以及less变量的命名规范。需要注意的是,Less的代码应该书写到*.less文件中,而不是.css文件中。在开发过程中,当同时修改body和a标签的样式时,只需要修改 color变量的值即可。例如,color是合法的变量名,而lcolor、color~#则是错误的变量名。由于变量名区分大小写,故color和Color是两个不同的变量。(1)定义color变量,示例代码如下。转载 2022-12-19 15:43:27 · 618 阅读 · 0 评论 -
依赖注入是什么意思?获取依赖的方式是什么?
依赖注人对编程带来的最大改变不是从代码上(而是从思想上发生了“主从换位”的变化,把应用程序向依赖对象主动出击变为应用程序被动的等待,由IoC容器来创建并注入它所需要的资源。例如将IoC容器看作一个“保姆”,“我”看作用户对象,“蛋糕”看作依赖对象:当“我”想吃“蛋糕”时不是自己来做,而是告诉“保姆”,“保姆”做好之后交给“我”,整个过程如图4-9所示。该方式便是依赖注入,它的重要特点是在系统运行中可以把创建依赖对象的控制权交给IoC容器,由IoC容器动态地通过注入的方式,向某个对象提供它所需要的其他对象。转载 2022-12-12 17:28:43 · 264 阅读 · 0 评论 -
jQuery如何修改CSS样式?
jQuery提供了用于样式操作的两种方式,分别是css()方法和设置类样式的方法,前者通过css()方法直接操作元素的样式,如width、height等,后者通过给元素添加或删除类名来操作元素的样式。下面我们分别进行详细讲解。修改样式jQuery可以使用css()方法来修改简单元素样式;也可以操作类,修改多个样式。下面我们首先对css()方法进行详细讲解。1. 获取样式css()方法接收参数时只写样式名,则返回样式值。下面我们通过代码演示。上述代码中,第2行代码设置div元素样式宽度为200px,高度转载 2022-12-07 14:43:53 · 7043 阅读 · 0 评论 -
Web前端培训:flex布局中父元素常用属性总结
flex 弹性布局操作方便、布局极为简单,所以在适合移动端WEB应用。flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。flex布局父项常见属性有以下七种,掌握它们可以使你在后续的学习和开发中十分必要。以下由6个属性是对父元素设置的flex-direction:设置主轴的方向justify-content:设置主轴上的子元素排列方式flex-wrap:设置子元素是否换行 ? align-content:设置侧轴上的子元转载 2022-12-06 17:31:00 · 464 阅读 · 0 评论 -
浮动布局的特点是什么?【前端技术】
网页布局的本质——用 CSS 来摆放盒子。普通流(标准流)、浮动、定位是三种传统的布局方式。有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式,让多个块级元素一行内排列显示,控制多个盒子之间的间隙。网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。利用float 属性可以创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法:加了浮动之后的元素,会具有很多特性,需要我们掌握的: 1. 浮转载 2022-12-06 17:27:18 · 529 阅读 · 0 评论 -
为什么需要定位?前端定位有哪几部分组成?
想要实现盒子是固定屏幕某个位置,滚动屏幕该盒子位置依然保持不变。浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。都无法快速实现,此时就需要定位来实现。转载 2022-11-15 17:03:47 · 210 阅读 · 0 评论 -
CSS控制列表样式有几种属性?
设置列表项目符号时,有时需要控制列表项目符号的位置,即列表项目符号相对于列表项内容的位置。在CSS中,list-style-position属性用于控制列表项目符号的位置,其取值有inside和outside两种,对它们的解释如下。一些常规的列表项显示符号并不能满足网页制作的需求,为此CSS提供了list-style-image属性,其取值为图像的url(地址)。在CSS中,list-style-type属性用于控制列表项显示符号的类型,其取值有多种,它们的显示效果不同,具体如表所示。转载 2022-11-04 15:36:51 · 2324 阅读 · 0 评论 -
CSS选择器都有哪些用法?
上述代码中,第19~22行代码使用伪类选择器设置偶数行背景颜色透明度为0.9;在CSS中,要想将CSS样式应用于特定的HTML标签上,首先需要找到该目标标签。选择器的作用就是从HTML页面中找出特定的某类元素。CSS中选择器的种类非常多,并且在CSS3中也新增了一些选择器,使选择器的功能更强大。在表1中,分别列出了不同选择器示例代码及说明,可以根据需要选择使用,在CSS中还有两种特殊的选择器:伪元素选择器和伪类选择器。列举了这么多选择器,下面为大家演示选择器的基本用法,如例1-1所示。转载 2022-10-13 18:31:58 · 128 阅读 · 0 评论 -
复合选择器是什么意思?CSS复合选择器介绍
https。转载 2022-07-27 17:45:53 · 226 阅读 · 0 评论