码迷,mamicode.com
首页 > Web开发 > 详细

css第二天

时间:2019-04-15 23:05:59      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:闪烁   相同   repeat-x   外边距   生效   浏览器   c中   height   尺寸   

二丶

1.字体属性font:

字体名称(font-family)
字体大小(font-size):pc中通常,字体大小表示为12px,14px。移动设备中通常表示为0.57rem。
字体粗细(font-weight):设置或检索文本字体的粗细
字体样式(font-style)
行高(line-height)
字体颜色(color)
英文大小写(text-transform)
文本修饰线(text-decoration):none无修饰。underline下划线。overline上划线。line-through贯穿线。blink闪烁。

font字体复合属性:
写法:
font:
font-style
font-weight
font-size/line-height
font-family
注意:书写时要注意顺序,否则不会生效。font的最精简形式也必须是(font:12px/24px 字体),否则不会生效。


2.文本属性Text:

字母间距(letter-spacing):
单词间距(word-spacing):
文本水平对齐(text-align):默认左对齐,left左对齐,right右对齐, center居中。
垂直对齐(vertical-align):垂直对齐方式只对表格单元格有效,对盒子模型无效。注:盒子模型的垂直居中,可以通过行高或者内边距解决。
文本缩进(text-indent):p{text-indent:2em},一个em就是一个汉字。
是否自动换行(white-space):normal默认处理,pre预格式显示文本,nowrap强制在同一行显示所有文本,直到遇到<br>或文本结束。
文本溢出标识(text-overflow):clip直接裁切,ellipsis文本溢出时显示省略标记。注:通常与white-space:nowrap;overflow:hidden;配合使用。
b

3.背景属性background:

背景颜色(background-color):
背景图片(background-image):
背景平铺(background-repeat):repeat横纵都平铺,no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺。
背景图尺寸(background-size):cover:将背景图等比缩放完全覆盖容器,背景图可能超出容器。contain:背景图像等比缩放与容器相同,背景图片始终在容器内。

背景图像定位(backgronud-position):垂直(top顶部,center中间, bottom底部),水平(left,right,center),默认左上。
用法:backgronud-position:水平位置 空格 垂直位置。

(背景图固定)background-attchment:默认scroll,图像可以滚动,fixed固定图像

背景复合(简写)属性:
简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position
属性无需全部使用,按照页面的实际需要使用.


4.盒子模型:
内容(content), 填充(padding),边框(border),边界(margin),都是盒子模型具备的属性。

内容:文字图片,还可以是其他盒子。
填充:内容距离边框的间距。
边框:就是盒子的边线。
边界:盒子与盒子间的距离。
注:边界,边框,填充,都有上top,下bottom,左left,右right四个方向可以设置。

宽度:width;
高度:height;注意:只有块元素可以设置高度,行内元素无法设置高度。
最大高度:max-height,当内容小于预设高度时,高度自适应,超出时任然会溢出。
最小高度:min-height,当内容超出预设内容时,盒子高度会自动延伸。

内边距:
四边相同时:padding:50px;
四边不同时:
(1)方法一
padding-top:50px;
padding-left:30px;
padding-bottom:60px;
padding-right:70px;
(2)方法二(复合属性,顺序固定上右下左)
padding:50px,10px,40px,80px;
(3)方法三(若上下相同,左右相同时)
padding:上下边距 空格 左右边距;

外边距(margin):
用法与内边距大致相同。
注意:外边距的效果在不同浏览器的效果不同建议尽量少用。

边框(border):

第一种(四边都有边框)
边框样式种类:无边框none,点线dotted,虚线dashed,实线solid,双线double,凹槽groove,凸槽ridge,凹边inset,凸边outset。
简写:
border:样式 空格 宽度 空格 颜色;
完整写法:
border-style:样式;
border-width:宽度;
border-color:颜色;

第二种(边框数少于四边)
border-top,border-bottom,border-left,border-right。


表格边框合并table
属性:border-collapse,设置表格的边框是否为单一边框,默认分开(separate),合并(collapse)。
步骤:
(1)制作单元格的边线框。
(2)把中间的双线合并成单线。


5.鼠标的形状:cursor
pointer:手型;

css第二天

标签:闪烁   相同   repeat-x   外边距   生效   浏览器   c中   height   尺寸   

原文地址:https://www.cnblogs.com/1932178071-lyy/p/10713850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!