---恢复内容开始---
Day1 css入门及提高
1.
CSS: (cascading style sheets) 层叠样式表
样式规则:
<style></style> 在<head></head>里面
2.CSS字体样式属性
font-size:字号大小
相对长度单位 | 说明 |
em | 相对于当前对象内文本的字体尺寸 |
px | 像素,最常用,推荐使用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
font-family:字体
CSS Unicode:字体
CSS注释: /* 需要注释的内容 */
font-weight:字体粗细
其可用属性值:normal:正常字体,相当于数字值400
bold:粗体,相当于数字值700
bolder:定义比继承值更重的值
lighter:定义比继承值更轻的值
100|200|300|400|…|900
font-style:字体风格
normal:指定文本字体样式为正常字体
italic:指定文本字体样式为斜体。
oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是选取字体中的斜体字。
font:综合设置字体样式(重点)
基本语法格式:
选择器 {font: font-style font-weight font-size/line-height font-family; }
注意:必须按照上面的顺序书写,各个属性以空格隔开,不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用。
3.开发者工具(chrome)
“按F12”或者“shift+ctrl+i” 打开开发者工具。
小技巧:
(1) ctrl+滚轮 可以放大开发者工具代码大小
(2) 左边是html元素结构,右边是CSS样式
(3) 右边CSS样式可以改动数值和颜色查看更改后效果。
4.选择器(重点)
(1)标签选择器(元素选择器)
标签选择器是用html标签名作为选择器,按标签名分类。基本语法格式如下:
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}或者
元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
(2)类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,基本语法格式如下:
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签调用时用class=”类名”即可。
Tips:
(1) 长名称或者词组可以使用中横线来为选择器命名。
(2) 不建议使用“_”下划线来命名css选择器。
(3) 不要纯数字、中文等命名,尽量使用英文字母来表示。
(3)多类名选择器
标签调用时用class=”类名1 类名2 类名3”即可。
注意:样式显示效果跟HTML元素中类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。
(4)id选择器
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
类选择器是可以重复使用的,好比人的名字。
id选择器好比人的身份证号码,是唯一的,只能使用一次。
(5)通配符选择器
用“*”号表示,范围广,能匹配页面中所有的元素。
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
(6)伪类选择器
a.链接伪类选择器
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
写的时候按照顺序,lvha, love hate
实际工作中,一般如下写:
b.结构(位置)伪类选择器(CSS3)
:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第N个子元素,不论元素的类型, even 偶数,odd 奇数 如果用公式,n从0开始
:nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素,不论元素类型,从最后一个子元素开始计数,n可以是数字、关键词或公式。
c.目标伪类选择器
:target 选择器可用于选取当前活动的目标元素。
5.CSS外观属性
color:文本颜色
取值方式如下:
a.预定义颜色值:red,green,pink等
b.十六进制:如#FF0000,#FF6600,#29D794等,十六进制是最常用的定义颜色的方式。
c.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
line-height:行间距
属性值单位有三种:像素px,相对值em和百分比%。实际工作中用最多的是像素,一般情况下,行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
left:左对齐
right:右对齐
center:居中对齐
text-indent:首行缩进 建议用em为单位。
letter-spacing:字间距
word-spacing:单词间距
word-spacing和letter-spacing均可对英文进行设置,不同的是letter-spacing定义的是字母之间的间距,而word-spacing定义的为英文单词之间的间距。
word-break:自动换行
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行。
颜色半透明(css3)
语法格式: color:rgba(r,g,b,a) a是透明的意思,取值范围是0-1之间。
文字阴影(CSS3)
text-shadow: 水平位置,垂直位置 模糊距离 阴影颜色;
值 | 描述 |
h-shadow | 必需。水平阴影的位置,允许负值。 |
v-shadow | 必需。垂直阴影的位置,允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影颜色。 |
6.sublime快捷方式
(1)生成标签 直接输入标签名 按tab键即可,比如div,然后tab,就可以生成<div></div>
(2)如果想要生成多个相同的标签,加上*就可以了,比如 div*3就可以快速生成3个div
(3)如果有父子级关系的标签,可以用> ,比如ul>li
(4)如果有兄弟级关系的标签,可以用+ ,比如div+p
(5)如果生成带有类名或者id名字的,直接写 .demo或者#two tab键就可以了。
DAY2
1.引入CSS样式表
(1)内部样式表
Type=”text/CSS”在html5中可以省略,可写可不写。
(2)行内式(内联样式)
<标签名 style=”属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</标签名>
(3)外部样式表(外链式)
Link是单标签,必须放在head头部标签中,并且必须指定link标签的三个属性。
(4)总结
2.标签显示模式(display)
(1)块级元素(block-level)
(2)行内元素(inline-level)
(3)行内块元素(inline-block)
(4)标签显示模式转换display
块转行内:display:inline;
行内转块:display:block;
块,行内元素转换为行内块: display:inline-block;
3.CSS复合选择器
(1)交集选择器
(2)并集选择器
中间用逗号隔开
(3)后代选择器
中间用空格隔开
(4)子元素选择器
中间用>连接
(5)属性选择器
属性选择器用[]表示。
(6)伪元素选择器(CSS3)
E::first-letter 文本的第一个单词或字
E::first-line 文本的第一行
E::selection 可改变选中文本的样式
E::before E::after 在E元素内部的开始位置和结束位创建一个元素,必须结合content属性使用。
div::before{
content:”开始”;
}
div::after{
content:”结束”;
}
4.CSS书写规范
(1)空格规范
选择器与{ 之间必须包含空格。
属性名 与之后的 :之间不允许有空格,:与属性值之间必须包含空格。
(2)选择器规范
当一个rule包含多个selector时,每个选择器声明必须独占一行。
选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确。
(3)属性规范
属性定义必须另起一行。
属性定义后必须以分号结尾。
5.CSS背景
(1)
background-image: url();
background-repeat: no-repeat(不平铺) repeat-x(水平平铺) repeat-y(垂直平铺);
background-position: left top(默认) [right top , right bottom等] ;
利用方位名字left,right,bottom,top等来更改背景图片位置,如果方位名字只写一个,另外一个默认为center。
利用精确单位,比如10px,30px,第一个值是x坐标,第二个值是y坐标。
方位名字与精确单位的混搭。
background-image: url();
(2)背景附着
scroll:背景图像是随着对象内容滚动。
fixed:背景图像固定。
(3)背景简写
(4)背景透明(CSS3)
(5)背景缩放(CSS3)
(6)多背景(CSS3)
(7)凹凸文字
(8)文本装饰
DAY3
1.CSS三大特性
CSS层叠性
样式冲突,遵循的原则是就近原则,样式不冲突,不会层叠。
CSS继承性
子承父业
CSS优先性
特殊性
权重是可以叠加的
div ul li -------> 0,0,0,3 .nav ul li -------> 0,0,1,2
a:hover -------> 0,0,1,1 .nav a -------> 0,0,1,1
注意:
1.数位之间没有进制 ,不能越级。
2.继承的权重是0.
2.盒子模型
(1)网页布局的本质:把网页元素比如图片文字等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。
(2)盒子模型
所有的文档元素(标签)都会生成一个矩形框,我们称为元素框(element box),它描述了一个文档元素在网页布局汇总所占的位置大小。
(3)盒子边框(border)
语法:
border-style
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最常用)
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线。
盒子边框写法总结
表格的细线边框
table {border-collapse:collapse;}
border-collapse:collapse; 表示边框合并在一起。
圆角边框
Border-radius:左上角 右上角 右下角 左下角;
内边距(padding)
padding-top(right,bottom,left):上(右,下,左)内边距.
注意:后面跟几个数值表示的意思是不一样的。
外边距(margin)
margin: 上外边距(top) 右外边距(right) 下外边距(bottom) 左外边距(left)
取值顺序与内边距相同。
外边距实现盒子居中
1.必须是块级元素
2.盒子必须指定了宽度(width)
给左右的外边距都设置为auto,可使块级元素水平居中。
清除元素的默认内外边距
*{
margin:0;
padding:0;
}
注意:行内元素是只有左右外边距,没有上下外边距的。尽量不给行内元素指定上下的内外边距就好了。
3.外边距合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下边距margin-bottom,下面的元素有上边距margin-top,则他们之间的垂直间距是两者中的较大者。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
解决方案:
1.可以为父元素定义1像素的上边框或上内边距。
2.可以为父元素添加overflow:hidden.
4.content宽度和高度
注意:
1.宽度属性width和高度属性height仅适用于块级元素,对行内元素无效(img标签和input标签除外)。
2.计算盒子模型的总高度时,还应考虑山下两个盒子垂直外边距合并的情况。
3.如果一个盒子没有给定的宽度/高度或者继承父亲的宽度/高度,则padding不会影响本盒子的大小。
Day4
1.盒子模型布局稳定性
优先使用 width > padding > margin
原因:margin会有外边距合并;padding 会影响盒子大小,需要进行加减计算(麻烦);width 没有问题,我们经常使用宽度剩余法,高度剩余法来做。
2.CSS盒模型
3.盒子阴影
4.浮动(float)
CSS的定位机制有3种,普通流,浮动,定位。
普通流(normal flow)
普通流激素一个网页内标签元素正常从上到下,从左到右排列顺序的意思。比如块级元素会独占一行,行内元素会按顺序依次前后排列。
浮动(float)
浮动最早是用来做文字环绕效果的。
什么是浮动?
元素的浮动是只设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
选择器 {float:属性值;}
left ----- 元素向左浮动 right ----- 元素向右浮动
none ----- 元素不浮动
浮动详细内幕特性
浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。
一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动,这样才能一行对齐显示。
元素添加浮动后,元素会具有行内块元素的特性,元素的大小取决于定义的大小或者默认的内容多少。
浮动根据元素书写的位置来显示相应的浮动。
5.版心和布局流程
布局流程
(1)确定页面的版心
(2)分析页面中的行模块。以及每个航模块中的列模块
(3)制作html结构。
(4)CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型
6.清除浮动
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。
清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口,不让他们出来影响其他元素。
选择器{clear:属性值;}
额外标签法
优点:通俗易懂,书写方便。 缺点:添加许多无意义的标签,结构化差。
父级添加overflow属性方法 (触发BFC的方式)
优点:代码简洁。缺点:内容增多时容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
使用after伪元素清除浮动
:after方式为空元素的升级版,好处是不用单独加标签了。
代表网站:百度,淘宝,网易等。
使用before和after双伪元素清除浮动
代表网站:小米,腾讯等
7.ps
文件格式:
.psd PS源文件格式,图层、文字、样式等,可再次编辑
.jpg 有损压缩格式,品质 最高12 不能编辑。
自由变形
Ctrl+T可以改变图像大小, 按住shift键,可以等比例缩放。
图层面板的快捷键 F7 其实图层就是一张张透明的纸,可实现叠加问题。
图层分组
选中目标图层,Ctrl+G
取消编组:Ctrl+shift+G
双击图层名称可重新命名
双击组名称,可命名组。
PS中的撤销操作
Ctrl+z 撤销一步
Ctrl+Alt+Z 撤销多步
Ctrl+E 可以合并图层 Ctrl+d 取消选区
Alt+del 填充前景色 Ctrl+del 填充背景色
魔棒工具 w
以单击位置为选择色,选择相似颜色生成选区。
容差:勾选连续时,相连颜色生成选区。
不勾选,画面中所有相似颜色被选中生成选区。
按住shift在未生成选区位置单击,可选区相加。
选区反选:Ctrl+shift+I
选区布尔运算
选区面积大小的变化
新选区:保持选中状态
添加到选区:相加运算(按住shift再绘制选区)
从选区减去:相减(按住Alt再绘制选区)
与选区交叉:重合部分保留 (按住Alt+shift再绘制选区)
钢笔工具 P
作用:绘制路径,生成选区,抠图。
组成:路径线和锚点
绘制路径后,Ctrl+回车,生成选区。
路径类型: 直线型路径:连续单击
曲线型路径:第一点单击,第二点拖动鼠标。
切片工具
1.利用切片工具,手动划出。
2.图层---新建基于图层的切片
3.利用标尺---基于参考线的切片
4.先选一整个的切片,切片选择工具里面—划分可以等分数平分切图。
导出切片: 文件----存储为web所用格式
辅助线和切片使用及清除
视图菜单---清除辅助线/清除切片
切图插件
Cutterman插件 官网下载
Ctrl+g 在编辑栏中,快速定位到某一行
Day6
1.定位(position)
元素的定位属性
主要包括定位模式和边偏移两部分。
边偏移
定位模式
选择器{position:属性值;}
静态定位(static)
一般是默认的定位,对于边偏移无效。一般用来清除定位。
相对定位(relative)
绝对定位(absolute)
绝对定位是完全脱标的,完全不占位置。
若所有父元素都没有定位,以浏览器为准对齐。
若父级有定位,绝对定位是将元素依据最近的已经定位(绝对,固定或者相对定位)的父元素进行定位。
子绝父相
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin改为auto就可,但是对于绝对定位就无效了。
定位的盒子居中办法:
1.首先left 50% 父盒子的一半
2. 然后走自己外边距负的一半值,margin-left.
固定定位(fixed)
1.固定定位的元素跟父亲没有任何关系,只认浏览器。
2.固定定位完全脱标,不占有位置,不随着滚条滚动。
固定定位的盒子一定要写宽和高,除非有内容撑开不用写。
叠加次序(z-index)
在CSS中,要调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数,负整数,0。
四种定位总结
元素添加了绝对定位,固定定位,浮动之后,元素模式也会发生转换,都转换为行内块模式。
2.元素的显示与隐藏
display显示
visibility可见性
overflow溢出
Day7
1.CSS高级技巧
(1)CSS用户界面样式
鼠标样式cursor
cursor: default 小白| pointer 小手 | move 移动 | text 文本
轮廓outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
平时都是去掉的,outline:0; 或 outline: none;
防止拖拽文本域resize
resize: none;
(2)vertical-align 垂直对齐
Vertical-align不影响块级元素中的内容对齐,它只针对行内元素或者行内块元素,通常用来控制图片和表单与文字的对齐,默认是基线对齐,一般用中线对齐,vertical-align: middle;。
去除图片底测空白缝隙
a.给img vertical-align: middle | top 等等,让图片不要和基线对齐。
b.给img添加display: block;转换为块级元素就不会存在问题了。
2.溢出的文字隐藏
(1)word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许单词内换行。
keep-all 只能在半角空格或连字符处换行。
主要处理英文单词
(2)white-space
(3)text-overflow 文字溢出
3.CSS精灵技术(sprite)
本质:CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务器发送一次请求,网页中的背景图像即可全部显示出来。
制作精灵图:
4.字体图标 ***
字体引入到html
第一步:在样式里面声明字体:告诉别人我们自己定义的字体。
第二步:给盒子使用字体
第三步:盒子里面添加结构
5.滑动门
核心技术:利用CSS精灵和盒子padding撑开宽度,以便能适应不同字数的导航栏。
总结:
6.before 和 after伪元素
.one 类选择器 :hover 伪类选择器 ::after 伪元素选择器
注意:
1.伪元素:before 和 :after 添加的内容默认是inline 元素,这两个伪元素的content 属性,表示伪元素的内容;设置:before和:after时必须设置其content属性,否则伪元素是不起作用的。
2.伪元素是不占位置的。
7.过渡(CSS)
在CSS3里面使用transition可以实现补间动画(过渡效果)
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化,还是要用逗号隔开。(时间单位为s)
这句话写在 div里面,而不是hover里面。
(1)2D变形 transform
a. transform: translate (x, y); x, y可为负值,单位一般为px。
让定位的盒子水平居中。
b.缩放 scale(x, y)
transform: scale(0.8 , 1);
使元素在水平方向上缩小了20%。垂直方向上不缩放。
Scale()的默认取值是1,当值设置为0.01-0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。
c.旋转 rotate(deg)
可对元素进行旋转,正值为顺时针,负值为逆时针;
transform: rotate(45deg); (单位是deg度数)
transform-origin 可以调整严肃转换变形的原点。
d.倾斜 skew(deg, deg)
transform: skew (30deg, 0deg);
该实例通过skew方法把元素水平方向上倾斜30度,垂直方向保持不变。可为负值,第二个参数不写默认为0。
(2)3D变形(transform)
rotateX () 沿着X立体旋转。
rotateY () 沿着Y立体旋转
rotateZ () 沿着Z立体旋转
(3) 透视(perspective)
perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素。
translateX( ) translateY( ) translateZ( )
translateZ( ) 越大,我们看到的物体越近,物体越大。
transform: translate3d(x, y, z) x 和 y 可以是px, 可以是%,但是z 只能是px.
Backface-visibility: hidden; 不是正面对象屏幕,就隐藏。
8. 动画 animation
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
9. 伸缩布局
display: flex
(1) flex子项目在主轴的缩放比例,不指定flex 属性,则不参与伸缩分配。
min-width 最小宽度 max-width 最大宽度
(2) flex-direction 调整主轴方向(默认为水平方向)
取值: row: 横向从左到右排列。
row -reverse: 对齐方式与row相反。
column: 纵向从上往下排列。
column-reverse: 对齐方式与column相反。
(3) justify-content 调整主轴对齐
(4) align-items调整侧轴对齐
(5) flex-warp 控制是否换行
当子盒子内容宽度多于父盒子的时候如何处理
(6) flex-flow 是flex-direction 、flex-warp的简写形式
flex-flow: 排列方向 换不换行;
两个中间用空格。
(7) align-content堆栈(由flex-warp产生的独立行)多行对齐
align-content 是针对flex容器里面多轴的情况,align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display: flex; ,并设置排列方式为横向排列,flex-direction:row; 并设置换行,flex-warp: warp;这样的属性设置才会起作用。
(8) order 控制子项目的排列顺序,正序方式排序,从小到大。
用整数值来定义排列顺序,数值小的排在前面,可以为负值,默认值为0。
order:1;
---恢复内容结束---