发表于: 2019-03-09 20:55:39
1 678
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
css常用属性
(1) block(区块)
行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换行) | normal;
(2) *box(盒子)
宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;
裁切 clip: rect(12px,auto,12px,auto)
(3) float(漂浮)
漂浮 float: left | right | none; 在页面布局的时候用的最多
(4) position(定位)
fixed
一般用来写网页顶端的固定导航条,或者两侧的菜单。
absolute与relative
这两者一般配合使用,用于调整div之间的相对位置
(5) 透明度
.image{ opacity: 0.5}
(6) font(字体)
颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)
(4) background(背景)
背景 background: transparent; /透视背景*/
颜色 background-color: 数值;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
滚动 background-attachment: fixed | scroll;
位置 background-position:数值 | top | bottom | left | right | center;
(7) text(文本)
大小写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow:数值;
(8) border(边框)
边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜色 border-color: top值 right值 bottom值 left值;
简写 border: width style color;
(9) list-style(列表样式)
类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;
位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url
(10) margin(边界)
margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;
(11) padding(填充)
padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白
(12) vertical(垂直)
vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/vertical-align:text-bottom; /*文字垂直向下对齐*/
(13) a(链接)
a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/
(14) cursor(光标)
光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;
/*也可以自定义*/cursor: hand; /*链接手指*/cursor: crosshair /*十字体 */cursor: s-resize /*箭头朝下 */cursor: move /*十字箭头, 朝右*/cursor: help /*加一问号 */cursor: w-resize /*箭头朝左 */cursor: n-resize /*箭头朝上 */cursor: ne-resize /*箭头朝右上 */cursor: nw-resize /*箭头朝左上 */cursor: text /*文字型*/cursor: se-resize /*箭头斜右下 */cursor: sw-resize /*箭头斜左下*/cursor: wait /*漏斗*/
明天计划的事情:(一定要写非常细致的内容)
继续完成任务
遇到的问题:(遇到什么困难,怎么解决的)
暂无
收获:(通过今天的学习,学到了什么知识)
同今天完成的事情
评论