常用的css属性设置

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即可

 

常用的css属性设置

上一篇:《.NET 5.0 背锅案》第5集-案情大转弯:都是我们的错,让 .NET 5.0 背锅


下一篇:css练习--模拟抽屉网