美文网首页
2019-04-17 css样式

2019-04-17 css样式

作者: 果冻_4c9b | 来源:发表于2019-04-19 08:36 被阅读0次

    css样式导入

    <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 链接式 先找css文件,在渲染html-->
    <head>....link导入css样式</head>
    <!-- <link rel="stylesheet" href="css/test.css"> -->
    <!-- 导入式 先渲染html在找css-->
    <style >
    @import url("css/test.css");
    </style>
    

    文字样式

    字体大小 最小不可以小于十二像素

     font-size:26px;
    

    字体类型

          font-family: arial;
    

    字体加粗 bold=700

           font-weight: bold;
    

    字体风格 italic斜体

       font-style: italic;
    

    文本样式

    标签宽度

       width: 300px;
    

    文本颜色

        color: #0000FF;
    

    文本对其方式 left right center

       text-align: right;
    

    首行缩进 1em=1个字符大小

        text-indent: 2em;
    

    文本修饰 underline下划线 none没有任何文本修饰

           text—decoration:none ;
    

    行高

         line-height:30px ;
    

    垂直居中涉及的不是内容,是当前元素
    默认向下对齐
    垂直居中middle上对齐top

           vertical-align:middle;
    

    伪类

    伪类----一些英文单词,代表种状态
    元素 伪类{ }
    没有下划线

     a{
      text-decoration:none;
      }
    

    hover 鼠标悬停

    a:hover{
    color: red;
    text-decoration: none;
      }
    

    边框

    边框的:颜色 粗细 样式solid实线 dashed虚线 
    border:red 1px dashed;
    

    圆角半径

       border-radius: 10px;
    

    阴影 x,y,z 发光度color

     box-shadow: 5px 7px 8px red; 
    

    重置列表样式

      ul,ol
      list-style:none;去掉列表样式
    

    去掉下滑线

          a{
    text-decoration: none;
      }
    

    边距

    内边距

        padding: 10px;
        padding 10px四周编剧
        padding: 5px 20px; 第一参数上下 ,第二参数左右
        padding: 5px 20px 30px 40px;上右下左
        padding-bottom: 20px; 下
    

    外边距

       margin:10px;
       margin-bottom:10px ;
    
    • margin的x轴方向不存在叠加问题
    • margin的Y轴方向存在叠加问题 取最大值

    样式重置

    div{
     padding: 0;
     margin: 0;
     } 
    

    使用外边距居中问题

     text-align: center;
      margin: 50px auto;
    

    backgroud使用

     background - color
     background-imge
    

    背景图片默认重复平铺
    位置可以写像素,也可以写固定的英文表示确切的位置

     left right center 
     top bottom center 
     background: url(img/a1.jpg) no-repeat 10px 50px red;
    

    是否重复平铺

       no-repeat不重复
       repeat-x x轴平铺
       repeat-y y轴平铺
       background: url(img/a1.jpg) repeat-x center center red; 
    

    display

        display :none :从文档流中消失
         块元素block
         内联元素 inline
         内联块元素inline-block
         文件流
    

    相关文章

      网友评论

          本文标题:2019-04-17 css样式

          本文链接:https://www.haomeiwen.com/subject/nwlowqtx.html