CSS总结3

字体样式

 p {
        /* 字体大小
        浏览器默认文字大小是16px
        单位一点要设置，否则无效 */
        font-size: 24px;
        /* 字体粗细
        bold  加粗
        font-weight: lighter;
         纯数字：100-900的整百数
        */
        font-weight: lighter;
        /* 字体样式 
        normal （默认值） 正常
        italic  倾斜
        */
        font-style: italic;
        /* 字体
        "Microsoft YaHei" 微软雅黑  黑体 宋体 楷体....
        网页开发时，尽量使用系统常见自带的字体，保证不同用户浏览器都能正常显示
        */
        font-family: '楷体', '黑体';
      }  

复合写法 /连写

.one {
        /* 复合写法  连写
        font:style weight size family;
​
        只能省略前两个，省略了相当于设置了默认值
        同时设置单写和连写形式：
        要把单写的样式写在连写的下面
        要么把单写的样式写在连写里面
        */
​
        /* font: italic bold 20px '楷体'; */
​
        font: italic 20px '楷体';
        /* font-style: italic; */
      }

 

文本样式

缩进

<style>
      p {
        font-size: 24px;
        /* 文本缩进
        数字+px
        数字+em  (推荐  1em=当前标签的font-size的大小)
        */
        /* text-indent: 32px; */
        text-indent: 2em;
      }
    </style>

 

水平对齐方式

<style>
      p {
        /* 
        如果需要让文本水平居中，text-align给文本所在的标签设置(文本父元素)
        文本水平对齐方式 
        left  居左
        center  居中
        right  居右
        */
        text-align: right;
      }
      .one {
        /* text-align 可以让 a img input span 这些元素水平居中  ，
        给这些元素的父元素加text-align属性 */
        text-align: center;
      }
    </style>

文本修饰

 <style>
      p {
        /* 文本修饰
        underline 下划线 (常用)
        line-through 删除线(不常用)
        overline  上划线 (几乎不用)
        none 无装饰线  (最常用)
​
        开发中使用text-decoration: none; 清除a标签默认的下划线
        */
        text-decoration: overline;
      }
      a {
        /* 无装饰线  */
        text-decoration: none;
      }
    </style>

行高

控制一行的上下间距

<style>
      * {
        margin: 0;
      }
      /* 控制一行的上下间距 
      行高
      取值:  数字+px   倍数(当前标签font-size的倍数)
      应用:
      让单行文本垂直居中  line-height:文本父元素的高度
      网页精准布局，设置line-height:1取消上下间距
      */
      p {
        /* line-height: 30px; */
        /* line-height: 2; */
​
        /* 
         font:style weight size/line-height family;
        */
​
        font: italic bold 30px/40px '楷体';
      }
      .main {
        
        height: 40px;
        line-height: 40px;
      }
    </style>

文字阴影

 <style>
      p {
        font-size: 60px;
        font-weight: bold;
        /* 文字阴影 
        text-shadow：h-shadow  v-shasow blur color；
        h-shadow：必需  水平阴影的位置  可以是负值（阴影在左边）  为正值（阴影在右边）
        v-shasow  必需  垂直阴影的位置  可以是负值（阴影在顶边）  为正值（阴影在底边）
​
        blur 可选 模糊的距离 只能是正值
        color  可选  颜色
        */
        text-shadow: 5px 5px 5px #f00;
      }
    </style>

盒子阴影

    <style>
      .box {
        width: 300px;
        height: 300px;
        
        /* box-shadow: length length length length color inset;
           阴影离开盒子的横向距离
           阴影离开盒子的纵向距离
           阴影的模糊半径
           阴影的延伸半径(可省略)
           颜色
           是否使用内阴影(可省略 默认是外阴影)
         注意：顺序不可以改变
        */
        box-shadow: 1px 1px 1px 1px #f00 inset;
      }
    </style>

 

背景属性

<style>
      /* 背景图片 和img的区别
      背景图片 墙纸
      img  墙上挂的钟表
      */
      .main {
        width: 800px;
        height: 800px;
        /* 背景颜色   transparent透明
        颜色的表示方式：
          第一种： red  yellow blue  green...
          第二种:十六进制  前2位代表红色，中间两位代表绿色，后两位蓝色 ;  取值范围 0-9，a-f
                #111223   #00ff00  简写 #0f0  
                #f3f3f3，#ff33f3不能简写 
          第三种：rgb(200,212,0)   每一个的取值是0~255
               rgba(200,234,0,0.5)   a透明  0-1

        */
        background-color: rgba(10, 212, 200, 1);
        /* 背景图片 */
        background-image: url(./img/logo.png);
        /* 背景平铺
        repeat  水平和垂直方向都平铺
        repeat-x  水平方向都平铺
        repeat-y 垂直方向都平铺
        no-repeat  水平和垂直方向都不平铺
        */
        background-repeat: no-repeat;

        /* 背景位置
        方位名词：最多表示9个位置  水平方向 left center right  垂直方向 top center bottom
        数字+px  ： 0 0 左上角  x y
        注意：方位名词可以和坐标轴混用，第一个表示水平  第二个表示垂直
        */
        background-position: 10px center;
      }
    </style>

复合写法

 .main {
        width: 800px;
        height: 800px;
​
        /* 复合写法
        background：color image repeat position
         */
​
        /* background: red url(./img/logo.png) no-repeat left center; */
​
        background: yellow url(./img/logo.png) no-repeat;
        background-position: left center;
      }

背景显示范围

<style>
      .box {
        width: 300px;
        height: 300px;
        border: 40px solid;
        padding: 60px;
        background: url(./img/bd2.png) no-repeat;
        /* 
        border-box 背景被裁剪到边框盒  *
        padding-box背景被裁剪到内边距框
        content-box背景被裁剪到 内容框
        */
        background-clip: padding-box;
      }
    </style>

绘制背景图像的起点

<style>
      .box {
        width: 300px;
        height: 300px;
        border: 40px solid yellow;
        padding: 60px;
        background: url(./img/bd2.png) no-repeat 0px 0px;
        /* 
        border-box 背景图片相对于边框盒来定位
        padding-box背景图片相对于内边距框定位
        content-box背景图片相对于内容框定位
        */
        background-origin: content-box;
​
        /* 区别
        background-origin 控制元素背景图片的定位点 background-position的起始位置
        background-clip控制元素背景图片的(background-image)展示区域 
        */
      }
    </style>

背景图片的尺寸

<style>
      .box {
        width: 600px;
        height: 600px;
        border: 40px solid yellow;
        padding: 60px;
        background: url(./img/dw1.png) no-repeat;
        /* background-size:宽度  高度 
        只设置一个值，第二个值会被设置为auto
        */
        /* background-size: 100px; */
​
        /* 百分比 
        以父元素的百分比来设置背景图的宽度和高度
        只设置一个值，第二个值会被设置为auto
        */
        /* background-size: 50%; */
        /* cover   背景图完全覆盖背景区域  会导致图片失真*/
​
        /* contain  保持背景图像本身的宽高比例 */
        background-size: contain;
      }
    </style>