《css层叠样式表基础知识》2020-09-20

css 层叠样式表

styleName:styleValue;

选择器：

  1、ID选择器
   2、类选择器
       1、无须唯一
       2、选择性使用
       3、组合使用
   3、标签选择器
   4、*{}

#name{...} <div id="name"></div>
.name{...} <div class="name"></div>
li{...} <li>...</li>

html页面中引入CSS的三种方式

1、行内样式
2、内部样式
3、外部独立样式表文件（内容和表现分离）

/文字样式：font/

font-style:normal/italic（斜体）;
font-weight:normal/bold;
font-size:Npx; 正文12~14px
font-family:arial,"楷体";
font:style weight size family

/文本样式/

color:word/#6位16进制/rgb(0~255,0~255,0~255)/rgba(0~255,0~255,0~255,0~1);
text-align(对齐方式):left/center/justify;
line-height(行高):Npx;
text-indent(缩进):Npx/em;

/列表样式/

list-style-type:none;
list-style-position:outside/inside;
list-style-image:url(path); path相对路径：例如(../resource/imgs/child.jpg)

/盒子模型/

box-sizing:content-box/border-box;
   /*宽高*/
   width
   height

   /*外边距兄弟关系盒子相对于父盒子水平居中：margin:Npx auto Npx;*/
   margin:topPx rightPx bottomPx leftPx;
   marign:topPx lrPx bottomPx;
   marign:tbPx lrPx;
   marign:Npx;
   margin-top:Npx;
   margin-right:Npx;
   margin-bottom:Npx;
   margin-left:Npx;

   /*内边距父子关系*/
   padding:topPx rightPx bottomPx leftPx;
   padding:topPx lrPx bottomPx;
   padding:tbPx lrPx;
   padding:Npx;
   padding-top:Npx;
   padding-right:Npx;
   padding-bottom:Npx;
   padding-left:Npx;

   /*边框*/
   border:color width style; style(solid dotted dashed groove)
   border-top:color width style;*4
   border-color:topColor rightColor bottomColor leftColor;*3
   border-top-color:color;*12

   #圆角
   border-radius:左上角右上角右下角左上角半径;
   border-radius:Npx;

   /*背景样式*/
   background-color;
   background-image:url(path);
   background-position:相对位置center/绝对位置；
       相对位置：
           横向:left center right;
           垂直:top center bottom;
       绝对位置:Xpx Ypx;
   background-repeat(平铺):no-repeat;
   background:color image position repeat;
   background-size:cover;

/*弹性盒子*/inline=>inline-block=>block
/*父盒子样式*/
display:inline/inline-block/block/flex/none(隐藏);
flex-direction:row/column;
flex-wrap（换行）:no-wrap;
justify-content:space-between/space-around;水平对齐
align-content:space-between/space-around;垂直对齐（多行）
align-items:space-between/space-around;垂直对齐（单行）
/子盒子样式*/
flew-grow:1;