1.颜色属性
颜色的选择形式有3种。1:拼写单词 2:#+色值代码 3 rbg(1,2,3) 三原色搭配 4.rbga() 也是三原色,a代表透明度。取值范围0~1
2.字体属性
font-size 字体大小
font-style 设置字体斜体
font-family 设置字体格式
font-weight 设置字体粗细
3.背景属性
background-color 设置背景颜色
background-color:url 设置背景图片 (不改变图片大小,直接多个图片重复拼凑在背景上)
background-repeat 设置背景图片的平铺方式
background-size 设置背景图片的大小
background-position 左右 上下 设置背景图片的位置
4.文本属性
text-align 设置文本是居中,靠左还是靠右
line-height 设置文本的在标签中的高度
letter-spacing 设置字符之间的间距
word-spacing 设置单词之间的间距
text-transfrom 设置单词首字母大写
5.边框属性
border-style: 设置边框的类型
border-color 设hi边框的颜色
border-width 设置边框的宽度
border: 1px #e3e4e5 ridge;
border-top: none; 设置上边框为空
可以简写为 border 参数1 参数2 参数3
border-radius 设置边框圆角化
6.display属性
display 属性设置或返回元素的显示类型。
none 元素不会被显示。
block 元素呈现为块级元素。
inline 默认。元素呈现为内联元素。
inline-block 行内块级元素
7.内边距和外边距(盒子模型,框)
padding 内边距 文本与框之间的距离
margin 外边距 两个元素之间的距离最基本的用途就是控制元素周围空间的间隔,从视觉上达到相互隔开的目的
border 框上的线
body标签就是一个大框,所有的元素都在body框里显示。
在浏览器显示时,会将body框的外边距默认不为0,就导致,body的border不在浏览器页面的最边缘。
想要body的border在浏览器最边缘,就将Body的margin设为0.
注意:一个元素的长度指 content+2*padding+2*border
题目:
一个大框300*300,一个小框100*100,将小框移动到大框的中间
#div1{ width: 300px; height: 300px; background-color: yellow; border: 1px solid black; } #div2{ width: 100px; height:100px; background-color: brown; margin: 100px; } 注意:在给小框设置margin时,如果大框中没有参照,就上下不会发生移动,给大框添加border即可