css学习笔记-2

背景

背景色

background-color: transparent;
/*transparent(默认透明)*/

背景图片

background-image: url(图片路径);
/*默认平铺*/

/*背景平铺*/
background-repeat: repeat;
/*repeat(平铺),no-repeat(不平铺),repeat-x(沿x轴平铺),repeat-y(沿y轴平铺)*/

/*背景图片位置*/
background-position: center center;
/*属性值可为：方位名词(top、center、bottom、left、right)或者精确数值*/
/*方位顺序无关，只指定一个方位，另一方位默认居中*/

背景固定（附着）

background-attachment: scroll;
/*scroll(随对象内容滚动),fixed(背景图像固定)*/
/*可制作视差滚动效果*/

背景色半透明

background: rgba(0,0,0,0.3);
/*最后一个参数为alpha透明度，取值范围在0~1之间*/

css三大特性

层叠性

div{
    color: red;
    font-size: 12px;
}

div{
    color: pink;
}
/*就近原则，显示红色,字体大小12px*/

继承性

<!--子标签继承父标签某些样式，主要是与文字相关元素-->
<style>
    div{
    color: red;
    font-size: 14px;
}
</style>

<body>
    <div>
    <p>12345</p>
    </div>
</body>
<!--12345显示红色，字体大小14px-->

优先级

<!--由低到高-->
继承或*(通配符选择器)
元素选择器
类选择器、伪类选择器
id选择器
行内样式style=""
!important(优先级无穷大)

盒子模型

边框

div{
    /*border边框,border-width粗细，border-style样式，border-color颜色*/
    border-width: 1px;
    border-color: red;
    border-style: none;
    /*none(无边框)|hidden(隐藏)|dotted(点线)|dashed(虚线)|solid(实线)|
    double(双线)|groove(3D凹槽)|ridge(菱形)|inset(3D凹边)|outset(3D凸边)*/

    /*边框复合写法,无顺序*/
    border: 1px solid red;

    /*边框分开写法,其他类比*/
    border-top:1px solid red；
    border-bottom: 1px solid red;
    border-left: 1px solid red;
    border-right: 1px solid red;

    /*表格边框*/
    border-collapse: collapse;
    /*控制相邻单元格边框,collapse合并相邻边框
/*边框会增大盒子实际大小(盒子大小+边框宽度)    
    }

内边距

    /*padding内边距，内容与盒子距离*/
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;

    padding: 5px;
    /*上下左右都为5px*/

    padding: 5px 10px;
    /*上下5px,左右10px*/

    padding: 5px 10px 15px;
    /*上5px，左右10px，下15px*/

    padding: 5px 10px 15px 20px;
    /*上5px，右10px，下15px，左20px（顺时针）*/
/*内边距会撑大盒子，盒子大小设置应减去相应内边距大小，可动态影响盒子宽度*/

外边距

    /*margin外边距，盒子间距离*/
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;
/*margin简写参考padding*/

    /*盒子水平居中需在设置宽度的条件下*/
    margin: 0 auto;

    /*行内元素水平居中，给父元素添加*/
    text-align: center;

/*外边距的合并*/
/*有嵌套关系的块元素，父元素与子元素同时有外边距时，父元素塌陷较大外边距值*/
    /*解决方法一：为父元素定义上边框*/
    border-top: 1px solid transparent;
    /*解决方法二：为父元素定义上内边距*/
    padding: 1px;
    /*解决方法二：为父元素添加overflow:hidden*/
    overflow: hidden;

清楚内外边距

    /*标签自身默认内外边距，统一消除(视情况确定)*/
    *{
        padding: 0px;
        margin: 0px;
    }

圆角边框

/*border-radius: 数值|百分比;圆为50%*/
border-radius: 10px;

/*单角设置，顺时针*/
border-radius: 10px 5px 15px 20px;

border-top-left-radius: 10px;
/*其他类似*/

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
/*必须(允许负值)：h-shadow(水平阴影位置),v-shadow(垂直阴影位置)
  可选：blur(模糊距离),spread(阴影尺寸),color(阴影颜色),inset(外部阴影(outset)改为内部)*/

文字阴影

text-shadow:h-shadow v-shadow blur color;
/*必须(允许负值)：h-shadow(水平阴影位置),v-shadow(垂直阴影位置)
  可选：blur(模糊距离),spread(阴影尺寸),color(阴影颜色))*/
posted @ 2022-03-21 16:15  YL_Hello  阅读(26)  评论(0)    收藏  举报