CSS
ClementQL
没有努力,天赋一无是处!
展开
-
CSS 背景样式写法
<title>背景</title><!--背景:背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性。 background-color:背景颜色。 background-image:用于设置背景图片。注意:如果同时设置背景颜色(background-color) 和背景图片(background-image),背景颜色会被背...原创 2019-02-10 22:31:19 · 398 阅读 · 0 评论 -
CSS3 变形--缩放 scale()
scale()缩放:scale()函数让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况:1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。2、scaleX(x)元素仅水平方向缩放(X轴缩放)3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)...原创 2019-02-24 19:08:19 · 3300 阅读 · 0 评论 -
CSS3 变形--位移 translate()
变形--位移 translate()translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。translate我们分为三种情况:1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)2、tran...原创 2019-02-24 19:09:25 · 785 阅读 · 0 评论 -
CSS3 变形--矩阵 matrix()
matrix(): 是一个含六个值的(m11,m12,m21,m22,dx,dy)变换矩阵,用来指定一个2D变换,相当于直接应用一个[m11 m12 m21 m22 dx dy]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果需要深入了解,需要对数学矩阵有一定的知识...原创 2019-02-24 19:10:38 · 500 阅读 · 0 评论 -
CSS3 变形--原点 transform-origin
变形--原点 transform-origin:任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要...原创 2019-02-24 19:11:41 · 489 阅读 · 0 评论 -
CSS3 动画--过渡属性 transition-property
动画--过渡属性 transition-property早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。 在CSS中创建简...原创 2019-02-24 19:12:49 · 555 阅读 · 0 评论 -
CSS3 动画--过渡函数 transition-timing-function
动画--过渡函数 transition-timing-functiontransition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:ease:默认值,动画开始时比较慢,然后加快速度,达到最大速度后再减慢速度。linear:线性速度。动画开始时的速度和结束时的速度一样(匀速)。e...原创 2019-02-24 19:14:08 · 1153 阅读 · 0 评论 -
CSS3 动画--过渡延迟时间 transition-delay
动画--过渡延迟时间 transition-delaytransition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。有时我们想改变两个或者多个css属性的transition...原创 2019-02-24 19:15:03 · 8825 阅读 · 1 评论 -
CSS UI伪类
<!doctype html><html><head><meta charset="utf-8"><title>伪类 UI伪类</title><link href="css/style.css" rel="stylesheet" type="t原创 2019-02-25 15:01:25 · 306 阅读 · 0 评论 -
CSS3 变形--扭曲 skew ()
skew()扭曲:扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。skew()具有三种情况:1、skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)...原创 2019-02-24 19:06:00 · 867 阅读 · 0 评论 -
CSS3 变形--旋转 rotate()
rotate()旋转:旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。用法:transform:rotate(-30deg);效果:关于加上浏览器的前缀:transform:rotate...原创 2019-02-24 19:04:54 · 1521 阅读 · 0 评论 -
CSS3动画 transform变形
CSS3动画CSS3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件呈现出丰富的外观。借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。transition动画比较简单,只要指定HTML组件的...原创 2019-02-24 19:03:31 · 359 阅读 · 0 评论 -
CSS 元素的边框border属性
<title>边框相关属性</title><!--边框的3个相关属性:宽度(border-width):可以使用thin,medium,thick等文本值,也可以使用除百分比和负数之外 的任何绝对值。 样式(border-style):有none(无边框),hidden(...原创 2019-02-10 22:34:33 · 1407 阅读 · 0 评论 -
CSS 常用的几种定位方式
定位(position): CSS布局的核心是position属性,对元素应用这个属性,可以相对它在常规文档流中的位置重新定位。 position属性有4个值:static(默认),relative,absolute,fixed. static:静态定位的情况下,每个元素都处在常规文档流中,它们都是块级元素,所以就会在页面上自上而下的堆叠...原创 2019-02-10 22:36:04 · 408 阅读 · 0 评论 -
CSS学习之盒模型
盒模型:所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要 由三个属性控制:position属性、display属性和float属性。 position属性控制页面上元素间的位置关系。 disp...原创 2019-02-10 22:45:11 · 112 阅读 · 0 评论 -
CSS 继承与层叠
<!--继承:这里的继承和对我们Csharp的继承是一样的。我们的CSS中很多的属性也是可以继承的, 其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。当然还有一部分是不能继承的。 例如边框、内外边距。--><!--层叠:层叠是CSS的核心机制。层叠的工作机制:当元素的同一个样式属性有多种样式值的时...原创 2019-02-10 22:52:10 · 213 阅读 · 0 评论 -
CSS 常用的几种选择器
CSS选择器1、CSS样式的语法格式: p {color:red;} 元素选择器(元素选择器是最简单的选择器) 选择器 属性 值 根据这个结构我们可以扩展: 例如:p{color:red;font-size:14pt;font-weight:bold;} h1,p,a{c...原创 2019-02-10 22:58:19 · 327 阅读 · 0 评论 -
CSS笔记 文本相关属性
text-decortion:该属性用于控制文字是否有修饰线。属性值:none,underline(下划线), line-through(中划线),overline(上划线...原创 2019-02-10 23:00:58 · 168 阅读 · 0 评论 -
CSS 常用伪类和伪元素讲解
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。伪类分为两种(以及新增的伪类选择 器):UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。结构化伪类:会在标记中存在某种结构上的关系时(例如:某元素是一组元素中的第一个或最后一个),为该元素应用CSS样 ...原创 2019-02-10 23:07:05 · 388 阅读 · 0 评论 -
CSS 样式表的基本使用
为文档添加样式的4种方式:1、使用内联样式:直接将样式定义到HTML元素中(写在标签里)。这种作用范围有限,只影响它所在的标签,而且总是覆盖嵌入样 式和链接样式。 <div style="width:200px;height:200px;">...原创 2019-02-10 23:09:46 · 264 阅读 · 0 评论 -
CSS 结构化伪类
<!doctype html><html><head><meta charset="utf-8"><title>伪类--结构化伪类</title><link href="css/style.css" rel="stylesheet" type="t原创 2019-02-25 15:05:11 · 383 阅读 · 1 评论