《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;

淘宝案例:

taobao.html

当整体布局样式一样时,可选择共性选择器:

taobao.css

实现效果:

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页