CSS
CSS学习笔记。
大桔骑士v
微软程序员,B站账号:大桔骑士v
展开
-
【CSS3学习笔记】22:传统布局 下
本节学习一下定位布局,以及在布局中出现的一些问题,以及用CSS提供的属性去解决问题。 [1]position定位属性 这个属性用于规定元素的定位类型。 *定位前<!DOCTYPE html><html lang="zh-cn"><head> <title>CSS传统布局->定位布局</title> <meta charset="utf-8"> <lin原创 2017-09-02 12:09:24 · 590 阅读 · 0 评论 -
【CSS3学习笔记】21:传统布局 上
本节学习早期使用的传统布局,它们在现在还是很有用的。 [1]布局模型 早期web页面的设置主要是面对PC端的,宽度总是大于高度。从最低的分辨率1024*768来设计往往就可以,为了不出现横向的滚动条,宽度往往要减去一些,如设置成996或者更小一些。当用一些分辨率更高的显示器时,我们这样设计的页面就会被固定在实际页面中间,两边出现白边或者我们设置的背景,不影响浏览性。 近几年因为那样低的分辨率的原创 2017-09-02 08:58:46 · 674 阅读 · 0 评论 -
【CSS3学习笔记】20:动画效果
通过CSS3动画效果可以像Flash关键帧那样控制动画,比上节学的过渡效果更灵活。 [1]总的animation属性 用于实现动画,流程:①先创建一个关键帧声明的动画 ②通过animation绑定声明的动画 即用@keyframes(关键帧属性)声明一个动画,然后再通过animation调用。@keyframes name{ /*...*/}[2]关键帧@keyframes@ke原创 2017-09-02 01:18:11 · 706 阅读 · 0 评论 -
【CSS3学习笔记】19:过渡效果
利用CSS3提供的过渡效果可以不借助JavaScript实现简单的用户交互功能。 [1]总的transition属性 利用这个属性,结合一些简单的CSS动作(如:hover)来触发平滑过渡功能,也就产生了过渡效果。 复习:前面说的:hover属于伪选择器中的伪类选择器中的动态伪类选择器,动态伪类选择器根据条件的改变选择元素,常用在鼠标点击、悬停等。:hover鼠标悬停,:active按住不原创 2017-09-01 23:28:26 · 907 阅读 · 0 评论 -
【CSS3学习笔记】18:变形效果 下
本节主要接着上节的2D平面变形学习怎么做3D立体变形。3D变形对浏览器版本的要求比2D要高一些,并且在x,y轴的基础上还会多出一个z轴。 [1]transform属性 还是用这个属性指定变形效果,2D或3D用的都是它。 其中translateZ(z)相当于translate3d(0px,0px,z);scaleZ(z)相当于scale3d(1,1,z);rotate3d(x,y,z,a)原创 2017-09-01 20:38:56 · 698 阅读 · 0 评论 -
【CSS3学习笔记】17:变形效果 上
本节学习通过CSS3中的变形效果,做到平移、缩放、旋转元素。 [1]transform属性 这个属性用于指定变形效果。 注:以下的参考点只是作为一个不动点来比对参考,并不是操作的基准点,基准点默认在盒子中心*移动前<!DOCTYPE html><html lang="zh-cn"><head> <title>CSS3变形效果[上]</title> <meta chars原创 2017-08-31 21:11:12 · 851 阅读 · 0 评论 -
【CSS3学习笔记】16:边框图片效果
通过边框背景这个新特性可以让我们的边框更加丰富。 相关属性 ①border-image-source 引入图片背景地址 ②border-image-slice 切割背景图片 (通过设置四个值来知道四个角要显示的尺寸,在这里加入fill可以将内部填充) ③border-image-width 边框图片的宽度 (通过设置四个值来知道边框四条边的宽度。) ④border-image-repe原创 2017-08-31 12:20:00 · 1757 阅读 · 0 评论 -
【CSS3学习笔记】15:CSS3渐变效果
本节学习CSS3中背景渐变功能,主要有线性渐变和径向(放射性)渐变。 [1]线性渐变background-image: linear-gradient(方位,起始色,末尾色);方位有:to top,to top right,to right,to bottom,to bottom left,to left,to top left等,可以省略。*测试代码<!DOCTYPE html><html l原创 2017-08-31 10:28:52 · 959 阅读 · 0 评论 -
【CSS3学习笔记】14:文本效果
本节学习CSS3中一些文本属性的设置。[1]文本阴影text-shadow: 横向 纵向 模糊度 颜色;可以作多重阴影叠加。[2]文本裁剪 把溢出的部分裁剪掉,然后判断是否加省略号。要配合其它属性一起用。 不能换行:white-space: nowrap;控制溢出:overflow: hidden;裁剪后不添加省略号:text-overflow: clip;裁剪后添加省略号:text-overf原创 2017-08-31 01:00:22 · 885 阅读 · 0 评论 -
【CSS3学习笔记】13:浏览器兼容性前缀,新单位rem
本节学习了CSS3中的新属性前缀和新的长度单位rem。前缀 CSS3中一些新属性推出时,还不太稳定,随时可能被修改或者删除,浏览器厂商为了使用它们就要采用自己的前缀。 Chrome前缀-webkit-(手机端的引擎也一般都是webkit,如要加前缀也是加-webkit-),Opera前缀-o-,Firefox前缀-moz-,IE前缀-ms-。当属性被提出,但未列入标准时,浏览器厂商通过私有的前缀原创 2017-08-21 19:30:49 · 732 阅读 · 0 评论 -
【CSS3学习笔记】12:颜色,透明度,阴影,轮廓,光标样式
本节主要学习一下颜色和透明度,还有阴影和轮廓等,以及鼠标的光标样式。[1]opacity为透明度,值在0~1之间,它对前景色和背景色都起作用。 [2]box-shadow为盒子的阴影和轮廓,hoffset水平偏移量,voffset垂直偏移量,blur模糊值,spread阴影延伸半径,color阴影颜色,inset外部阴影设置为内部阴影。其中水平和垂直偏移量是必须的。 [3]outline为轮廓样原创 2017-08-20 21:30:10 · 978 阅读 · 0 评论 -
【CSS3学习笔记】11:表格和列表的样式
本节学习表格与列表中独有的CSS样式。表格的独有样式 [1]border-collapse边框是否合并,separate为默认的独立,collapse为合并。 [2]border-spacing边框间距,只在上一个属性为独立时有效。 [3]caption-side设置表格标题(caption标签)所处的位置,默认在上方。 [4]empty-cells空单元格边框是否显示,hide为隐藏。原创 2017-08-20 20:59:51 · 1089 阅读 · 0 评论 -
【CSS3学习笔记】10:CSS设置背景
本节学习CSS中的背景,边框和背景都可以使盒模型可见化。 ①background-color设置背景颜色,使用transparent可以设置为透明色(默认)。 ②background-image设置背景图片,使用none可以取消背景图片的设置。 ③background-repeat设置背景平铺的方式,repeat-x水平平铺,repeat-y垂直平铺,repeat双向平铺(默认),no-r原创 2017-07-17 22:28:14 · 701 阅读 · 0 评论 -
【CSS3学习笔记】9:CSS中的边框
本节学习CSS中的边框。声明边框主要有三个属性: border-style:边框样式,border-width边框宽度,border-color边框颜色。其中border-style是必须写的。border-style的值: none去掉边框,dashed破折线,dotted圆点线,double双线,groove槽线,inset内嵌,outset外凸,ridge脊线,solid实线。border原创 2017-07-16 17:25:36 · 825 阅读 · 0 评论 -
【CSS3学习笔记】8:CSS盒模型 下
本节学习元素的可见性、盒子的各种类型、浮动问题。元素可见性 visibility的三种属性:①visible即默认可见。②hidden隐藏。③collapse隐藏表格的行与列(有的浏览器不支持)。*测试代码<!DOCTYPE html><html lang="zh-cn"><head> <title>CSS盒模型 下</title> <meta charset="utf-8">原创 2017-07-13 23:39:30 · 841 阅读 · 0 评论 -
【CSS3学习笔记】7:CSS盒模型 上
本节学习元素的尺寸、元素的边距以及内容溢出等问题。元素尺寸 ①weight宽度。②height高度。③min-width最小宽度。④min-height最小高度。⑤max-width最大宽度。⑥max-height最大高度。 最大最小主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它的最大和最小。元素内边距(会扩充总长度,而不是向内缩) ①padding-top向上。②padding-b原创 2017-07-13 20:19:32 · 516 阅读 · 0 评论 -
【CSS3学习笔记】6:CSS文本样式 下
本节学习CSS中通过文本样式的设置,来更改样式以及文本的方位等。 文本样式 主要分为三种:文本装饰、英文大小写装换、文本阴影。text-decoration用来给文本加线条。 ①underline下划线。②overline上划线。③line-through删除线。④none取消划线。text-transform用来设置英文大小写。 ①uppercase全大写。②lowercase全小写。③c原创 2017-07-13 13:13:52 · 750 阅读 · 0 评论 -
【CSS3学习笔记】5:CSS文本样式 上
本节学习CSS中通过文本样式的设置,来更改字体样式等。 font-size用来设置字体大小。 ①直接用数字+px表示多少像素。②用一个层级值xx-small,x-small,small,medium,large,x-large,xx-large从小到大。③使用smaller和larger表示相对于父元素字体的大小。④数字+%表示相对于父元素的字体的百分比大小。font-variant设置字体原创 2017-07-08 12:02:54 · 721 阅读 · 0 评论 -
【CSS3学习笔记】4:颜色和度量单位
本节学习CSS颜色和度量单位等问题,包括颜色选取方式,相对长度和绝对长度等。颜色的表示方式有三种:颜色名称/16进制代码/10进制代码。 ①颜色名称表示法,可以查询HTML颜色表。 ②16进制代码表示,即#后跟6位16进制数。 ③10进制代码表示常用有两种,即如rgb(0,128,128)和rgba(0,128,128,0.5),这里a表示透明度,在0~1之间。另外hsl(120,100%,3原创 2017-07-06 22:54:57 · 1204 阅读 · 0 评论 -
【CSS3学习笔记】3:CSS中的选择器 下
伪类选择器可以分为四种:结构性伪类、UI伪类、动态伪类、其它伪类。伪类都需要加上前置的选择器来限制范围。结构性伪类选择器根据元素在文档中的位置选择元素,这类元素都有一个前缀(:)。1.根元素选择器匹配文档中的根元素,很少使用,因为总是匹配元素。:root{}2.子元素选择器匹配第一个/最后一个子元素等,如匹配第一个子元素。ul>li:firs原创 2017-06-23 00:54:19 · 690 阅读 · 1 评论 -
【CSS3学习笔记】2:CSS中的选择器 上
CSS选择器即是定位到想要选择的元素,然后对其配置样式。目前已经有CSS3选择器了,不过使用较多的还是CSS1和CSS2,而CSS3用于扩展。选择器分类:基本选择器、复合选择器、伪选择器(还分为伪元素和伪类)。基本选择器即使用简单且频率高的一些选择器。1.通用选择器匹配所有HTML元素,包括和元素。*{}2.元素选择器只匹配某个元素标签。元素名{原创 2017-06-18 22:27:28 · 855 阅读 · 0 评论 -
【CSS3学习笔记】1:认识层叠样式表
CSS层叠样式表,用来对HTML文档外观的表现形式进行排版和格式化。几个名词①层叠:同一个元素通过不同方式的设置产生的样式叠加或冲突覆盖。优先级从低到高为浏览器样式②继承:一个被嵌套的元素得到它父元素的样式。样式继承只适用于元素的外观(文字、颜色、字体等),而元素页面上的布局样式不会被继承。如果要继承这种样式,就必须用强制继承inherit。③浏览器样式:元素本身就具有的样式。原创 2017-06-12 22:56:20 · 889 阅读 · 0 评论