css常用属性
一、背景
1.background-color
设置元素的背景颜色
2.background-image
设置元素的背景图像,默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体
3.background-repeat
设置如何重复背景图像
二、文本
1.color
字体颜色
2.text-align
对齐方式
3.text-decoration
文本修饰
(/去除文本效果(去除超链接下划线)/
text-decoration: none;)
4.text-indent
首行缩进
三、对齐方式
left、 center、 right、 justify两端对齐
四、display属性
五、 浮动
例子:
#div1{
width: 800px;
height: 600px;
background-color: #808080;
background-image: url(img/logo.png);
background-repeat: no-repeat;
}
#div2{
/*字体颜色*/
color: #0000FF;
/*对整方式*/
text-align: left;
/*文本修饰*/
text-decoration: line-through overline underline;
/*首行缩进*/
text-indent: 2em;
}
a{
/*去除文本效果(去除超链接下划线)*/
text-decoration: none;
}
#p1{
/* 对齐方式 left center right justify两端对齐 */
text-align: justify;
}
h2{
/* display属性 none隐藏元素 block显示元素*/
display: none;
}
/* 浮动 */
#d1{
width: 6.25rem;
height: 6.25rem;
background-color: #7FFF00;
float: left;
}
#d2{
width: 6.25rem;
height: 6.25rem;
background-color: #A52A2A;
float: left;
}
================================================================
<div id="div1">
hello
</div>
<div id="div2">
hello world
</div>
<a href="https://www.baidu.com/">百度</a>
<hr />
<p id="p1"> 1、踏破二十载风雨路,学院星空一年期,错一步,一生苦,空余笑靥如初。2、御剑江湖天涯路,前世梦今生误。晚舟唱,情相忘,泪痕浅瀛目。一世情缘未书,半生离愁难诉,不记春秋几回,只叹花落几度。3、岁月的长河静静流淌着,云淡风轻。假如生活欺骗了你,爱情的果实遭遇了害虫,你又执意不肯回头,就让我用三生烟火,换你一世迷离吧,等你终于清醒,我依旧在你身旁,从不曾离去。4、我自是年少,终是不懂,不懂什么官场人情,不懂什么人心险恶、世态炎凉,不懂得何谓早恋,何谓幼稚的爱。我只知道手心里的那只手,将一辈子陪我一起走。
5、漫步在青石小路上,已至八月,天热的和蒸笼似的,就连吹过来的风都是热热的,所幸是将至傍晚,倒也是清凉了不少,颇有几分微醺之意。
6、一株野草心的,没有温度,但有梦的憧憬,梦不是用心囤积的,她的梦是飘散的,风来的时候,或许会藏着一点。野草的心,不会有温度,每当靠近时,都会划伤你们的手。
7、我是长在南国的一根野草,只想去看沙漠中的漠漠沙粒,和那些冷漠的骆驼刺。我想去看一望无尽的大海,坐在沙滩上,为自己种一朵花,静听海水的浪潮,等待夕阳把我缩影,直到六点半的世界。</p>
<hr />
<h2>hello</h2>
<hr />
<div id="d1"></div>
<div id="d2"></div>
结果:
盒子模型(padding 内边距 border 边框 margin 外边框)
1.border
border 边框
设置边框的颜色、样式、宽度
border:颜色 样式 宽度
例:border:red soild 1px
<1>.border-wide
<2>.border-color
<3>.border-style
(border的基本属性)
<4>.border-collapse
设置是否将表格边框折叠为单一边框
属性值:separate(默认、单元格边框独立)、collapse(单元格边框合并)
2.padding 内边距
设置元素所有内边距的宽度,或者设置各边上内编剧的宽度
单独设置各边的内边距:padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定
3.margin 外边距
设置一个元素所偶有外边距的宽度,或者设置各边上外边距的宽度
单独设置各边的外边距:margin-top、margin-left、margin-right
注:
当使用时
设置1个值:上右下左都一致
设置2个值:上下一致,左右一致
设置3个值:上右下,左和右一致
#d1{
width: 100px;
height: 100px;
background-color: #7FFF00;
/* 边框 */
border: chocolate 5px outset;
/* 内边距 */
padding: 10px 20px;
/* 外边距 */
margin-top: 100px;
=======================================
<div id="d1"></div>
结果: