三分钟叫你看懂css

颜色设置

color: #3800ff;   设置颜色

background-color: #34fefe; 设置背景色

字体设置

font-size: 128px;     /*字题大小*/

text-align: center;   /*对齐方式*/

font-weight: bold;   /*加粗*/

font-family: 微软雅黑;/*字体设置*/

line-height: 1.8em;  /*行间距*/

text-indent: 2em  ;/* 首行缩进*/

text-decoration: none; /*下划线设置*/

line-height: 60px;  /*用来设每行之间的距离*/

text-decoration: none;   /*去除a标签下划线*/

内间距外间距设置

margin: 0;

padding: 0;

选择器

div a/*后代选则器*/

body > a/*子类选择器*/

p.red/*交际选择器*/

p,div/*多个选择器*/

伪类选择器

a:link 定义 a 元素未访问时的样式

a:visited 定义 a 元素访问后的样式

a:hover 定义鼠标经过 a 元素时的样式

a:active 定义鼠标点击激活时的样式

定义4个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变。

内联元素

display: inline-block;简单来说就是在同一行显示。

背景设置

background-image: url("./img/1.jpg");背景图片

/*图片位置设置*/

background-position: top right;

background-attachment: scroll;

background-repeat: no-repeat;

属性选择器请查看官网

边框设置

/*边框大小 边框样式 边框颜色*/

border: 10px solid red;

/*border-width: 5px; !*边框的宽度*!*/

/*border-color: red; !*边框的颜色*!*/

/*border-style: solid; !*边框的样式*!*/

/*上边距5px横线红色*/

border-top: 5px solid red;

/*右边距5px虚线蓝色*/

border-right: 5px dashed blue;

/*下边距5px虚线黄色*/

border-bottom: 5px dotted yellow;

/*左边距5px实线蓝色*/

border-left:yellow 10px solid;

盒子居中

margin: 0 auto; /*居中*/

/*margin-top: 100px ; 向下*/

 /*margin: 0 0 0 100px; !*右对齐*!*/

浮动

    float: left; /*浮动之后就会把之前的位置空出来*/

     float: right; /*相当于特权阶级*/

     clear: both; /*清除浮动*/

定位

累了不想写了 请查看官网