css基础

作者: zhenghongmo | 来源:发表于2020-03-12 14:28 被阅读0次

引入css

  • 内联样式,style属性,在HTML标签中写入style=“属性:属性值”

  • 内嵌样式,style标签,将style标签写到head标签中:

<style>
选择器{
    属性:属性值;
}
</style>
  • 外联式,link标签

    <link rel="stylesheet" herf="./a.css">
    
  • 在 a.css 中写:

    @import url(./b.css)
    

横向布局 ==>浮动

  • 子元素:float:left;

  • 父元素:class=“clearfix”

  • 清除浮动:

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

去除默认样式

  • <ul>、<ol>一般要加list-style:none;

  • <a>一般加text-decoration:none;

  • 一般在css中加*{margin:0;padding:0;}

  • font-weight:bold; 加粗

    font-weight:normal;不加粗

下划线

  • 要做到鼠标悬浮在上面时有下划线,并且不会出现别的格式变动:
a{border-bottom:2px solid transparent;}
a:hover{border-bottom:2px solid red;}

用css画三角形

利用border画三角形:

div{
    border:10px solid transparent;
    width:0px;
    border-left-color:red;
    border-top-width:0px;
}

伪元素

  • 不是真元素,但相当于一个隐藏的内联元素,可用伪元素代替div。
div::before{
    content:"";
    dispaly:block;
    ......
}
div::after{
    content:"";
    display:block;
    ......
}

generator

  1. 线性渐变生成器:搜索css3 linear gradient generator

  2. 阴影生成器:搜索css shadow generator

帧动画

  1. 关键帧
@keyframes name{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
  1. 属性
  • animation-name:定义动画名称。
  • animation-duration:定义动画播放时间。
  • animation-timing-function:linear 定义动画类型。
  • animation-iteration-count:infinite/number定义动画播放次数。
  • animation-direction:alternate 定义动画来回播放。

进度条

  1. <progress max=" " value=" ">
  2. 两个div嵌套,加不同的background,父元素height确定,子元素height:100%

盒模型

定义显示方式:

1.box-sizing:content-box;

width/height=content;

2.box-sizing:border-box;

width/height=border+padding+content

伪类

:link ==>:visited ==>:hover ==>active

:focus

:first-child 选择第一个元素

:last-child

;nth-child()

相关文章

网友评论

      本文标题:css基础

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