老雷php全栈开发课程之认识css
查看视频教程或者获取有关《老雷php全栈开发课程》更多信息

如何学习css?

    多看 多写  多模仿

css是美化html用的,css包含很多内容,我只能把常用的一些css样式给你们列出来讲讲。

具体的大家可以看看css手册。


css选择器 

.a{}

.a .b{}

.a-b{}

.a .b .c{}

.a-b-c{}

常用css属性


1.常用布局定位css

display:none | block | inline-block flex inline-flex

visibility:visible | hidden

overflow:hidden  | auto

position: relative | absolute | fixed 

2.尺寸

width min-width max-width

height min-height max-height

尺寸单位 固定单位 10px 比例单位 100%。

如:.a{width:100px; height:100px;}

3.外补白 Margin 这是盒子外的

.margin{margin:10px 20px;}

css的方向css遵循上右下左

top right bottom left ;

如:{margin:50px 40px 30px 20px;}

相关属性:[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]

4.内补白 Padding 这是盒子内部的事

.padding{padding:10px;}

相关属性:[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

5.边框 Border 

.border{

border: 5px solid #000;

}

border:<line-width> || <line-style> || <color>

<line-width> = <length> | thin | medium | thick

<line-style> = none  dotted  solid 

相关属性:[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]

6.背景 Background

.background{background:url(1.jpg) no-repeat 100%;}

.background-color{background-color:#ddd;}

7.颜色

color{color:#f60;background-color:#f80;}

可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent来指定color。 

.colorname p{color:green;}

.hex p{color:#ff0000;}

.rgb p{color:rgb(0,0,0);}

.rgba p{color:rgba(0,0,0,.5);}

.hsl p{color:hsl(240,50%,50%);}

.hsla p{color:hsla(240,50%,50%,.5);}

.transparent p{color:transparent;}

8.字体 Font

font-size

font-family

font-weight

font-style:normal | italic | oblique

9.文本 Text

word-break:normal | keep-all | break-all 字内换行

text-align:left | right | center 水平对齐

vertical-align: top | middle | bottom 垂直对齐

line-height 行高

text-decoration none | underline | overline | line-through | blink 


10.flex布局

.flex{

display:flex;

flex-direction:row;

}

.flex-width-50{

width:50;

}

.flex-1{

flex:1;

}