css基础学习--尺寸与框模型、背景色、文本
2017-01-02 23:51
316 查看
尺寸与框模型
尺寸:
width
height
overflow:visible|hidden|scroll|auto当内容溢出元素框时如何处理
边框:
border:widthstyle color 当然也可以通过border-left|right|top|bottom进行单边定义,通过border-width,border-style,border-color进行单属性定义。
框模型:
框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边框的方式。
内边距padding: 内容与框线之间的距离
外边距margin: 与下一个元素之间的空间量,这里margin可以取值为auto,由浏览器计算外边框。例如,div{margin:0 auto;}可以设置div的居中。
背景色
background-color 为元素设置背景色
background-image:url(…) 背景图片
background-repeat:repeat|repeat-x|repeat-y|no-repeat 默认情况下,背景图像在水平和垂直方向上重复出现,可以设置其重复方向
background-position 改变图像在背景中的位置(center设置居中)
background-attachment:scroll|fixed 背景图片的固定。默认情况下,背景图片会随着页面的滚动而滚动,fixed可以设置背景图片固定,常用于实现称为水印的图像。
文本格式化
font-family:value1, value2
font-size:value
font-weight
color:value 文本颜色
text-align:left|right|center 文本排列
text-decoration:none/underline
line-height:value 行高
text-indent 首行文本缩进
尺寸:
width
height
overflow:visible|hidden|scroll|auto当内容溢出元素框时如何处理
边框:
border:widthstyle color 当然也可以通过border-left|right|top|bottom进行单边定义,通过border-width,border-style,border-color进行单属性定义。
框模型:
框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边框的方式。
内边距padding: 内容与框线之间的距离
外边距margin: 与下一个元素之间的空间量,这里margin可以取值为auto,由浏览器计算外边框。例如,div{margin:0 auto;}可以设置div的居中。
背景色
background-color 为元素设置背景色
background-image:url(…) 背景图片
background-repeat:repeat|repeat-x|repeat-y|no-repeat 默认情况下,背景图像在水平和垂直方向上重复出现,可以设置其重复方向
background-position 改变图像在背景中的位置(center设置居中)
background-attachment:scroll|fixed 背景图片的固定。默认情况下,背景图片会随着页面的滚动而滚动,fixed可以设置背景图片固定,常用于实现称为水印的图像。
文本格式化
font-family:value1, value2
font-size:value
font-weight
color:value 文本颜色
text-align:left|right|center 文本排列
text-decoration:none/underline
line-height:value 行高
text-indent 首行文本缩进
相关文章推荐
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- HTML&CSS基础学习笔记6-文本操作标签
- CSS基础学习十三:盒子模型
- CSS基础学习十五:盒子模型补充之外边距合并
- HTML&CSS基础学习笔记8-预格式文本
- CSS学习笔记(1)CSS基础语法/字体/文本
- css基础学习(3)(盒子模型,动画)
- css基础学习----常用文本属性
- css基础学习之文本和颜色属性
- Css基础学习(四)—文本
- CSS基础学习4-CSS设置文本
- HTML&CSS基础学习笔记7-高亮文本及组合使用
- CSS基础学习十四:盒子模型补充之display属性设置
- [网页基础]DIV+CSS学习笔记(二)深入理解盒子模型
- Css基础学习一:字体,文本,颜色,背景,边框,边距
- CSS基础学习:不同色链接和其下划线
- CSS学习笔记:可视化格式模型
- 网页设计之CSS基础语法学习
- Css基础学习(一)—如何使用CSS?
- CSS学习记录(基础)