CSS(CSS3)笔记
1.CSS规则
由两个主要部分构成:选择器以及一条或多条声明。
2.选择器
1)分类:
基础选择器、复合选择器。
2)基础选择器:标签选择器、类选择器、id选择器、通配选择器。
3)复合选择器
1 后代选择器:父 子(包含在父里面所有符合的子元素)
2 子代选择器:父>子(最近一级元素亲儿子,不包含孙元素以下的)
3 并集选择器:逗号分隔,任何形式选择器都可以
4 伪类选择器:前面有个冒号
4.1 链接伪类选择器
a:link --未被访问的链接
a:visited --已访问的链接
*a:hover --鼠标指针位于其上的链接
a:active --活动链接(鼠标按下未弹起)
*在样式表中,这几个选择器顺序不应该颠倒
4.2 :focus伪类选择器
获取焦点的表单元素。
3.字体属性
font-family:字体(微软雅黑/Microsoft Yahei、Arial、Helvetica、sans-serif)
font-size:大小
font-weight:粗细(100-900,bold=700,无单位,normal=400)
font-style:文本风格(normal倾斜/粗体标签改不倾斜/粗体等、italic倾斜)
复合属性,简写方式:
font:[font-style font-weight ]font-size/line-height font-family;--顺序不能变,/不是或的意思
4.文本属性
color:颜色(预定义颜色值、十六进制、RGB代码)
text-align:center/left/right文本水平对齐
text-decoration:none/underline/overline/line-through
text-indent:缩进距离
em:一个文字大小,如文字16px,则1em=16px。
line-height:文字行与行的距离。(上间距+下间距+文本高度)
5.样式表
分类:行内样式表(行内式)内部样式表(嵌入式)、外部样式表
<link rel="stylesheet" href="" />
6.Emmet语法
1)快速生成html结构语法
1 输入标签名按tab键
2 *生成多个标签
3 >用来生成带子元素标签,如ul>li
4 $为自增符号,如div.demo$*5
5 标签内部写内容用{},如div{$}*5
6 +是并排
2)快速生成CSS样式语法
1 w100 --> width: 100px;
2 tdn --> text-decoration: none;
3)格式化文档:shift+alt+F
4)保存页面自动格式化代码
1 文件-->【首选项】-->【设置】
2 搜索emmet.include
3 在settings.json下的【用户】中添加以下语句:
"editor.formatOnType":true,
"editor.formatOnSave":true
*现在的版本可直接在正在格式化中勾选
7.元素显示模式
分类:块元素、行内元素
1)块元素:h、p、div、ul、ol、li等
特点:
1 独占一行。
2 高、宽、外边距、内边距都可控。
3 宽度默认是父级容器的100%。
4 是一个容器或盒子,里面可以放行内或者块级元素。
5 文字类标签不能再放块元素,如h、p。
2)行内(内联)元素:a、strong、b、em、i、del、s、ins、u、span等
特点:
1 相邻行内元素在一行上,一行可以显示多个。
2 高、宽直接设置无效。
3 默认宽度是本身内容的宽度。
4 行内元素只能容纳文本或其他行内元素。
5 链接里不能再放链接。
6 a里面可以放块级元素,最好是转换成块级元素。
3)行内块元素:img、input、td。
特点:
1 和相邻元素之间由空白间隙,一行可以显示多个。
2 默认宽度为本身内容宽度。
3 高度、行高、外边距以及内边距都可以控制。
4)转换:display:block/inline/inline-block;
8.截图小工具snipaste
1)F1截图
2)F3在桌面置顶显示
3)点击图片,alt取色,按下shift可以切换取色模式
4)按下esc取消图片显示
9.背景
1)背景颜色| color;
2)背景图片background-image:none | url(url);
3)背景平铺background-repeat:repeat(默认) | no-repeat | repeat-x | repeat-y;
4)背景图片位置:background-position:x y;
x,y可以是数值(px),可以是top/center/bottom/left/right的组合,可以是数值跟方位名词的组合,也可以只写一个。
5)背景图片固定:background-attachment:scroll(默认) | fixed
6)复合写法:background:颜色 图片地址 平铺 滚动 位置;(位置不固定,但一般这么写)
7)背景色半透明:background:rgba(0,0,0,0.3);
*最后一个参数是alpha透明度,0-1,0.3可写为.3。
10.CSS的三大特性
1)层叠性原则:遵循就近原则,哪个样式离结构近执行哪个。
2)继承性:子标签会继承父标签的某些样式(与文字有关的,包括text-,font-,line-,color等),如文本颜色和字号。
*恰当使用可降低CSS样式复杂性。
*行高的继承:
1 父:font:12px/24px '字体'; 子的行高是24px。
2 父:font:12px/1.5 '字体'; 子的行高是自身字体大小的1.5倍。
3)优先级:
优先级权重如下
继承或* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器,属性选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important 无穷大
1 权重叠加:复合选择器会有权重叠加的问题。
如ul li复合选择器:0,0,0,1+0,0,0,1 = 0,0,0,2 > 0,0,0,1
*权重虽然会叠加,但不会有进位的问题。
11.盒子模型
1)组成:border+content+padding+margin
2)边框:border-width/style/color
1 复合写法:border:width style color;
2 只一边有边框:border-top/bottom/left/right
3 表格的细线边框:border-collapse属性控制浏览器绘制表格边框的方式,控制相邻单元格的边框。
border-collapse:colapse;表示相邻边框合并在一起。
4 边框会影响盒子实际大小,盒子大小不包括边框。
3)内边距:padding/padding-left/right/top/bottom
1 padding两个值为上下和左右,三个值是上和左右和下,四个值是上右下左。
2 padding影响盒子大小,撑大盒子大小。
3 盒子不指定宽高,padding就不会撑大盒子。
4)外边距:margin/margin-left/right/top/bottom
1 应用:盒子水平居中:指定盒子宽度,左右外边距为auto。
2 行内元素或行内块元素水平居中:text-align:center;
3 相邻块元素垂直外边距合并:下面盒子的margin-top和上面盒子的margin-bottom会合并。
4 嵌套块元素垂直外边距的塌陷:对于两个嵌套关系的块元素,父元素有上边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
*解决方案:
为父元素定义上边框,或为父元素定义上内边距,或为父元素添加overflow:hidden;
12.圆角边框
border-radius:length;
原理:圆和边框交集形成圆角效果。
某个角圆角:border-top-right...
13.盒子阴影
box-shadow:h-shadow v-shadow[ blur spread color inset];
h-shadow:水平阴影位置,允许负值。
v-shadow:垂直阴影位置,允许负值。
blur:模糊距离。
spread:阴影的尺寸。
color:阴影颜色。
inset:将外部阴影改为内部阴影。(默认为outset,不允许写)
*盒子阴影不占空间,不影响其他的元素。
14.文字阴影
text-shadow:h-shadow v-shadow blur color;
15.传统网页布局的三种方式
标准流、浮动、定位。
*标准流:标签按照规定好默认方式排列。
16.浮动
float:none/left/right;
1)特性:
1 浮动元素会脱离标准流,不再保留原先位置。
2 浮动元素会一行内显示并且元素顶部对齐。
3 浮动元素会具有行内块元素的特征(如span有了浮动可以设置宽高等)。
2)浮动元素经常搭配标准流父元素。
1 网页布局第一准则:先用标准流的父元素排列上下位置,之后内部元素采取浮动排列左右位置。
2 网页布局第二准则:先设置盒子大小,之后设置盒子的位置。
*浮动元素只会影响它后面的标准流,不影响它前面的标准流。
3)清除浮动
clear:left/right/both;
1 原因:子盒子浮动,脱标,父盒子没有高度就为0,不会被撑开盒子。
2 本质:清除浮动元素脱离标准流造成的影响。
3 方法:
额外标签法/隔离法(块元素,结构化较差)、父级添加overflow:hidden/auto/scroll属性、父级添加after伪元素、父级添加双伪元素。
*伪元素:
父元素:after{ --添加一个类
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
父元素{--IE6、7实现兼容
*zoom:1;
}
*双伪元素:
父元素:bofore,父元素:after{
content:"";
display:table;
}
父元素:after{clear:both;}
父元素{--IE6、7实现兼容
*zoom:1;
}
17.PS切图
1)常见的图片格式
1 jpg:JPEG对色彩的信息保留较好,高清,颜色较多,产品类图片经常用。
2 gif:最多只能存储256色,通常用来显示简单图形及字体,可以保存透明背景和动画效果,实际经常用于一些图片小动画效果。
3 pbg:新兴的网络图形格式,结合了gif和jpg优点,具有存储形式丰富的特点,能够保持透明背景,可以做到切成背景透明的图片。
4 PSD图像格式是PS的专用格式,可存放图层、通道、遮罩等多种设计稿,可直接从上面复制文字,还可以测量大小和距离。
2)切图
方式:图层切图、切片切图、PS插件切图等。
1 图层切图:
最简单:右击图层->快速导出为PNG。
或先合并图层再导出。
2 切片切图:
使用PS内切片工具手动划出。
*隐藏背景可以切出透明背景的PNG图片。
导出选中图片:文件菜单->导出->存储为web设备所用格式->选择要的图片格式->存储。
3 PS插件切图:Cutterman插件,完整版PS才能安装。
18.CSS属性书写顺序
布局定位属性:display/position/float/clear/visibility/overflow
->
自身属性:w/h/margin/padding/border/background
->
文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
->
其他属性:content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...
19.定位
定位=定位模式+边模式
1)定位模式:
position:static(默认)/relative/absolute/fixed;
2)边偏移:
top/bottom/left/right
3)相对定位relative
相对定位是元素在移动位置时,是相对于它原来位置来说的,类似于小学题目位移。
注意:
1 移动位置的时候参照点是自己原来的位置。
2 不脱标,继续保留原来位置。
3 一般给绝对定位做父亲。
4)绝对定位absolute
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。
注意:
1 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)。
2 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3 脱标,不保留原来位置。
5)子绝父相
1 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他兄弟盒子。
2 父盒子需要加定位限制盒子在父盒子内显示。
3 父盒子布局时,需要占有位置,因此父亲只能时相对定位。
4 父级需要占有位置,相对定位,子盒子不需要占有位置,据对定位。
6)固定定位fixed
固定定位是元素固定于浏览器可视区位置,主要使用场景,可以在浏览器页面滚动时元素位置不会改变。
特点:
1 以浏览器的可视窗口为参照点移动元素。
2 跟父元素没有关系。
3 不随滚动条滚动。
4 固定定位脱标,不占有原先位置。
*固定版心右侧位置
1 让固定定位的盒子left:50%;。
2 让固定定位的盒子margin-left:版心宽度一般距离。
7)粘性定位
可以被认为是相对定位和固定定位的混合。
语法:position:sticky;top:10px;
特点:
1 以浏览器的可视窗口为参照点移动元素。
2 粘性定位占有原先的位置。
3 必须添加top/bottom/left/right其一才行。
*兼容性差,IE不支持。
8)定位叠放次序z-index
*带定位的盒子才有效。
值可以是正负或auto,值越大,盒子越靠上,值相同则按照书写顺序,后来居上。
9)定位小总结
1 行内元素添加绝对/固定定位,可直接设置宽高。
2 块级元素添加绝对/固定定位,不给宽高,默认大小是内容大小。
3 浮动/绝对/固定元素都不会触发外边距合并问题。
4 绝对/固定定位会完全压住盒子,而浮动元素只会压住下面标准流盒子,不会压住下面标准盒子里面的文字/图片。
*原因:浮动元素一开始只是为了做文字环绕效果,文字会围绕浮动元素。
*绝对定位的盒子不能通过margin:0 auto;水平居中。利用固定版心右侧位置类似的方法实现水平/垂直居中。
*或:left:calc(50%-自身宽度px/2);--calc为CSS计算属性
20.元素的显示和隐藏
1)display显示隐藏
值:block|none
不常用的值:
inline|compact|market|inline-table|list-item|run-in|table|table-caption/cell|table-column|table-column/footer/header-ground|table-row|table-row-group
*隐藏不占原有位置。
2)visibility显示隐藏
值:visible|hidden|collapse|inherit
*隐藏继续占有原有位置。
3)overflow溢出显示隐藏
值:visible|auto|hidden|scroll
*scroll不管需不需要(溢出)都有滚动条,但auto只在有需要才有滚动条。
21.精灵图
1)目的:为了有效减少服务器接收和发送请求次数,提高页面的加载速度。
2)核心:
1 主要针对背景图片,把多个小背景图片整合到一张大图片中。
2 大图片称为sprites精灵图或雪碧图。
3 利用background-position移动背景图片的位置。
4 移动距离为目标图片的x,y坐标,一般都移动负值。
5 使用精灵图需精确测量,每个小背景图片的大小和位置。
3)缺点
1 图片文件还是比较大的。
2 图片本身放大缩小会失真。
3 一旦图片制作完毕想要更换非常复杂。
22.字体图标
展示图标,本质是字体。
优点:轻量级、灵活性、兼容性。
*字体图标不能代替精灵技术。
字体图标网站:IcoMoon(http://icomoon.io)
23.三角形
div {
width:0;
height:0;
line-height:0;
font-size:0;--这两行为了解决兼容。
border:50px solid transparent;
border-left-color:pink;
}
*长的三角形
div {
width:0;
height:0;
border-top:100px solid transparent;
border-right:50px solid pink;
border-bottom:0 solid blue;
border-left:0 solid red;
}
24.用户界面样式
1)鼠标样式cursor
属性:
default:小白,默认
pointer:小手
move:移动
text:文本
not-allowed:禁止
2)轮廓线outline
值:0或none,如表单获得焦点得到的轮廓线
3)防止拖拽文本域resize
值:none
4)vertical-align
1 概念:用于设置一个元素的垂直对齐方式,只针对行内元素/行内块元素。
2 语法:vertical-align:baseline|top|middle|bottom;
3 描述
baseline:默认,元素放在父元素的基线上。
top:把元素顶端与行中最高元素的顶端对齐。
middle:把此元素放置在父元素的中部。
bottom:把元素的顶端与行中最低的元素的顶端对齐。
*图片底侧空白缝隙解决方案
1 vertical-align:middle/top/bottom;--更推荐
2 display:block;
5)溢出文字省略号显示
1 单行文本
强制一行内显示文本:white-space:nowrap;--默认normal
超出部分隐藏:overflow:hidden;
超出部分用省略号显示:text-overflow:ellipsis;
2 多行文本--存在兼容性问题,最好让后台来做更合适
overflow:hidden;
text-overflow:ellipsis;
弹性伸缩盒子模型显示:display:-webkit-box;
限制在一个块元素显示的文本行数:-webkit-line-clamp:2;
设置或检索伸缩盒对象的子元素的排列方式:-webkit-box-orient:vertical;
25.CSS初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容。
以下为部分京东CSS初始化
* {
margin:0;
padding:0;
}
em,i {
font-style:normal;
}
li {
list-style:none;
}
img {
border:0;
vertical-align:middle;
}
button {
cursor:pointer;
}
a {
color:#666;
text-decoration:none;
}
a:hover {
color:#c81623;
}
......
26.CSS3新特性--兼容问题
1)属性选择器
1 标签[属性]
如input[value] {}
2 标签[属性=值]--不用引号
3 标签[属性^=值]--以‘值’开头
4 标签[属性$=值]--以‘值’结尾
5 标签[属性*=值]--含有‘值’的元素
2)结构伪类选择器
1 XX:first-child --第一个孩子
2 XX:last-child
3 XX:nth-child(n) --第n个孩子
*n可以是数字、关键字(even偶/odd奇)和公式,直接写n选择所有孩子。
4 XX:first-of-type
5 XX:last-of-type
6 XX:nth-of-type
*两者区别:
1 nth-child对父元素里面所有孩子排序选择(序号固定),先找到第n个孩子,然后看看是否和XX匹配。
2 nth-of-type对父元素里面指定子元素进行排序选择,先去匹配XX,再根据XX找到第n个孩子。
3)伪元素选择器
1 ::before 元素前插入内容
2 ::after 元素后插入内容
*content必需的
3 伪元素清除浮动
额外标签法(不推荐)
额外标签法的升级优化
第一.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
第二.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
4)盒子模型
box-sizing:content-box|border-box;
1 box-sizing:content-box盒子大小:width+padding+border(向来默认的)
2 box-sizing:border-box盒子大小为:width --padding、border不会撑大盒子
5)滤镜filter
将模糊或颜色偏移等图形效果应用于元素。
filter:函数();
如filter:blur(5px); blur模糊处理,数值越大越模糊。
6)计算盒子宽度函数
calc();
如width:calc(100px+100%);
7)过渡
transition:要过度的属性 花费时间[ 运动曲线 何时开始];
属性:宽高、背景颜色、内外边距等,所有属性写all。
花费时间:单位为秒。
运动曲线:linear|ease|ease-in|ease-out|ease-in-out,默认ease。
何时开始,单位为秒,延迟触发时间默认是0s。
多个属性变化需利用,分开,或直接写all。
27.申请免费远程服务器(免费空间)
网址:http://free.3v.do/
1 注册账号
2 记录主机名、用户名、密码、域名
3 利用cutftp软件上传网站到远程服务器
4 在浏览器中输入域名,即可访问
————学习笔记