css常用样式及使用

---

前言

CSS（ Cascading Style Sheet）也叫叠层样式表,不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单地说，就是让网页更好看、更直观的把数据展现给用户。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS常用样式

文字颜色（color）
用文字单词 color:red
rgb调色 color:rgb(0 ~ 255 , 0 ~ 255 , 0 ~ 255)
十六进制对应的rgb调色 color:#FFFFFF

背景颜色background-color 选择颜色和选择文字的一样

文字字体大小 font-size	font-size: __ px
文字粗细	font-weight
高度和宽度	height :" " width :" "

border（边框）

边框：border 边框样式包括三个
1.边框的宽度 size
2.边框的样式 solid直线、dashed虚线、dotted点线、double双实线、none无
3.边框的颜色 color
通常写border，将三个属性放在一起写
border：20px solid red

也可以单方面设置border一条边的边框

 				border-top：上边框
                border-right：右边框
                border-bottom：下边框
                border-left：左边框

也可以设置多方面的同一属性
顺序是 上 右 下 左

<style>
			
  			/* 边框宽度 */
            border-width: 10px 20px 30px 40px;
            /* 边框样式 */
            border-style: solid dashed double dotted;
            /* 边框颜色 */
           border-color: red blue green yellow;
</style>

---

margin （外边距）

也就是与相邻元素或边框之间的间距，不会影响标签内部的状态。
在布局中使用非常多
margin: “上边距 右边距 下边距 左边距”;

<style>
			/* ② 外边距 */
            /* ②-1 水平位置 */
            margin-left: 200px; 
            margin-right: 100px;
            /* ②-2 垂直位置 */
            margin-top: 100px; 
            margin-bottom: 100px;
            
            /*水平居中，往下挤了100px*/
            margin: 100px auto;
            /*也可以写成
				margin: 100px 50% 100px 50%;
			*/
			margin: 100px auto 50px;
			 /*也可以写成
				margin: 100px 50% 50px 50%;
			*/
</style>

---

padding（内边距）

和margin的一样分4个方向

padding-top
padding-right
padding-bottom
padding-left

div布局时，padding属性影响内部布局以及整体的美观，对内部所有的标签都生效。
当padding-left等越大，超过div本身的宽度时，divl里面就会像下面这样：

div{
background-color: blue;
width: 400px;
height: 400px;
padding-left: 40px;
}

< div >
< h1>hello world< /h1>
< /div>

开始状态：

当padding-left越大时，div里面的标签就会向右挤，并且div的蓝色区域也越来越大

因为h1为块级标签 width：400px,占了div全部的宽度，pdding-left增大时，h1的width不变继续向右挤

并且会覆盖到旁边的元素，影响相邻元素显示

---

总结

css基本样式大概就这些，所说的不全面有些专用标签的属性就没有列举出来，学习还有一些没写的下次再写