css1.1
css字体属性
font-family 设置字体
font-size 字体大小
font-weight 字体粗细
font-style字体样式
font 复合属性写法
css emment 语法生成
css 元素显示模式
元素显示模式分为两大类 块元素 和行内元素
块元素常见有: h1~h6、p、div、ul、ol、li等其中div时最典型的块元素。独占一行
行内元素有a、strong、b、em、i、del、s、ins、u、span等其中span是最典型的行内元素 一行显示多个
行内块元素有img、input、td
行内元素转换
display:block;行内元素转换为块级元素
display:inline;块级元素转换为行内元素
display:inline-block;将元素转换为行内块元素
css文本属性
color 文本颜色 十六进制 、RGB代码 、预定义颜色
text-align 对齐文本 只能设置水平对齐方式
text-decoration 文本装饰:overline上划线 ,line-through删除线,underline下划线;
text-indent文本缩进 em相对单位当前元素
line-height行间距
text-shadow:文字阴影
css背景
background-color背景颜色
background-image背景图片
background-repeat背景平铺 :repeat | no-repeat| repeat-x |repeat-y
background-position 背景图片位置 background-position:x,y;使用精灵图用到例如:background-position:left top ;
background-attachment背景固定:fixed 固定 scroll 背景图像随内容滚动
背景复合写法background:背景颜色,背景图片地址,背景平铺,背景图像滚动,背景图片位置;
背景颜色半透明 background:rgba;
background:rgba(0,0,0,(0~1透明))
背景颜色渐变
线性渐变
background:-webkit-linear-gradient(起始反向,颜色1,颜色2,···);
css三大特性 层叠性、继承性、优先级
层叠性:就近原则
继承性: 子元素继承父元素属性 Inherited from
优先级 :
行高继承
body {
font:12px/1.5
}
当前文字的1.5倍行高
优先级
p {
color:red !important;
}
继承权重是0 使用复合选择器时权重时叠加的
网页布局中三大核心
盒子模型,浮动和定位
css盒子模型
border 边框
border-width:边框宽度
border-style:
border-color:边框颜色
边框复合写法border:1px、solid red;没有顺序。
transparent透明
控制表格边框border-collapse:collapse表示相邻变宽合并在一起。
边框会影响盒子实际大小使盒子变大
padding 内边距
**padding用于设置内容(content)与边框(border)之间的距离
padding会影响盒子实际大小会撑大盒子 解决方案盒子大小-内边距、如果盒子不指定宽高是不会影响盒子的
margin 外边距
margin:0 auto;盒子水平居中
使用margin定义块元素的垂直外边距,可能会出现外边距合并嵌套块元素垂直外边距的塌陷
1.可以为父元素定义上边框
border:1px solid tran
2.可以为父元素定义上内边框
3.可以为父元素添加 overflow:hidden;
清除外边距 margin:0;padding:0;
圆角边框
border-radius:length;
盒子阴影
box-shadow
默认outset 不可以写 盒子阴影不占用盒子空间。
浮动(float)
网页布局第一准则:多个块级元素总想拍了标准流,多个块级元素横向排列找浮动。
float
浮动元素的重要元素1.浮动元素会脱标
2.浮动的盒子不再 保留原先位置。
浮动元素不会压住下面标准流的文字,文字会围绕浮动。
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。(浮动的元素互相贴靠在一起(不会有间隙),如果父级盒子装不下这些浮动的盒子,多出的盒子会另起一行对齐)。
浮动特性 3.浮动元素具有行内块元素特性。任何元素都可以浮动。
浮动元素经常和标准流父级搭配使用。
一个元素浮动了理论上的兄弟元素也浮动。
清除浮动
清除浮动的本质是清除浮动的影响;
如果父盒子本身有高度,则不需要清除浮动。
1.额外标签法 在最后一个盒子后面添加一个新盒子clear:both;清除浮动 这个新盒子不能是行内元素。 2.父级添加 overflow属性 overflow:hidden;
3.父级添加after属性
4…父级添加双伪元素
定位
定位=定位模式+边偏移
相对定位(relative)
position:relative;
它是相对于自己原来的位置来移动 原来标准流的位置继续占有 不脱标
绝对定位(absolute)
position:absolute;
如果没有祖元素或祖元素没有定位,则以浏览器为准定位。
子绝父相
绝对定位 脱标
固定定位(fixed)
position:fixed
固定定位用于固定浏览器可视区域的位置
以可视窗口为参照点 不随滚动条滚动
粘性定位(sticky)
定位叠放次序z-index
z-index:z;数值越大,盒子越靠上 不能家单位。
只有定位盒子才行。
定位小结
绝对定位和固定定位会压住标准流。
css显示元素与隐藏
1.隐藏
display:none
display:block 不保留原来位置
2.隐藏
visibility:visible元素可视
visibility:hidden元素隐藏 继续保留原来位置。
3.overflow溢出
css精灵图(sprites)
background-position
css字体图标(iconfont)
本质属于字体
1.字体图标下载
icomoon 字库
阿里 iconfont字库
css三角
css用户界面样式
鼠标样式 cursor
轮廓线outline
outline:none;给表单去掉蓝色边框
input {
outline:none;
}
防止拖拽文本域 resize
textarea {
resize:none;
}
vertical-align 属性应用
经常用于设置图片或表单(行内块元素)和文字垂直对齐
vertical-align:middle、top、bottom解决图片底部默认空白缝隙问题(也可以用display:block转换为行内块元素解决)。
css溢出文省略号显示
单行溢出
white-space:normal;文字显示不开自动换行
white-space:nowrap;文字显示不开也必须强制一行显示。
overflow:hidden;溢出隐藏
text-overflow:ellipsis;溢出省略号代替
多行溢出
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
css 布局技巧
1.margin负值的运用;
当两个盒子边框相邻时使用margin负值使边框重合。
2.文字围绕浮动元素
3.行内块元素运用
4.css三角强化
ps
ctrl+r 标尺
ps 切图工具
切图插件 Cutteman
css 书写顺序
css初始化
打开网页 查看网页源代码找到css文件
ctrl+f 搜索body
以上都是学习黑马pink老师课程的笔记