美文网首页
6-css样式

6-css样式

作者: 魔王哪吒 | 来源:发表于2020-05-13 07:58 被阅读0次

    背景颜色background-color

    背景颜色的值可以是英文,可以是十六进制颜色值,可以是rgb

    背景图片background-image

    背景图片的大小可以和容器大小不一样

    背景图片不会占位

    如果容器大,背景图片小,背景图片会平铺 铺满整个容器

    背景图片位置background-position

    背景图片定位的值是两个单位,分别代表坐标x,y轴

    背景图片定位的值可以是应为left,right,top,bottom,center

    背景图片重复background-repeat

    no-repeat数组图像不重复,常用

    round自动缩放直到适应并填充整个容器

    space以相同的间距平铺且填充整个容器

    背景图片定位background-attachment

    background-attachment:fixed

    背景图像是否固定或者随着页面的其余部分滚动

    background-attachment的值可以是scrollfixed

    background缩写

    background: #ff0000 url(bg01.jpg) no-repeat fixed center

    字体样式

    字体族:font-family

    字体大小:font-size

    字体粗细:font-weight

    font-weight:400

    normal默认

    bold加粗

    bolder

    lighter

    字体颜色color

    字体斜体:font-style

    • font-style:italic
    • normal文本正常显示
    • italic文本斜体显示
    • oblique文本倾斜显示

    文本属性

    行高line-height

    line-height:50px

    可以将父元素的高度撑起来

    文本水平对齐方式:text-align

    leftcenterright

    文本所在行高的垂直对齐方式:vertical-align

    baseline默认

    sub垂直对齐文本的下标,和sub标签一样的效果

    super垂直对齐文本的上标,和sup标签一样的效果

    top对象的顶端与所在容器的顶端对齐

    text-top对象的顶端与所在行文字顶端对齐

    middle元素对象基于基线垂直对齐

    bottom对象的底端与所在行的文字底部对齐

    text-bottom对象的底端与所在行文字的底端对齐

    文本缩进text-indent

    text-indent:2em

    通常用在段落开始位置的首行缩进

    字母之间的间距letter-spacing

    单词之间间距:word-spacing

    文本的大小写text-transform

    capitalize文本中的每个单词以大写字母开头。

    uppercase定义仅有大写字母

    lowercase定义仅有小写字母

    文本的装饰text-decoration

    none默认

    underline下划线

    overline上化线

    line-through中线

    自动换行word-wrap

    word-wrap: break-word

    基本样式

    width,height

    元素默认没有高度,需要设置高度,让元素的内容将元素撑高

    鼠标样式cursor

    定义鼠标的样式cursor:pointer

    default默认,pointer小手形状,move移动形状

    透明度opacity

    opacity:0.3

    透明度的值可以使0到1之间的数字,0代表透明,1代表完全不透明

    透明的元素只是看不见,但是还占据文档流。

    可见性visibility

    visibility:hidden

    visible元素可见

    hidden元素不可见

    collapse当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局

    溢出隐藏overflow

    设置当对象的内容超过其指定高度及宽度时如何显示内容

    visible默认值,内容不会被修剪,会呈现在元素框之外

    hidden内容会被修剪,并且其余内容是不可见的

    scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

    auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    边框颜色outline

    input文本框自带边框,且样式丑陋

    outline:none清除边框

    样式重置

    清除元素的margin和padding

    去掉自带的列表符

    去掉自带的下划线

    盒模型样式

    块状元素,内联元素,内联壮元素

    元素分类转换display

    block,将元素转换为块级元素

    inline,将元素转换为行级元素

    inline-block,将元素转换为内联块元素

    none将元素隐藏

    描边border

    线条的样式:

    dashed虚线,dotted点线,solid实线

    css样式中允许只为一个方向的边框设置样式

    下描边border-bottom

    上描边border-top

    右描边border-right

    左描边border-left

    间距margin

    内填充padding

    浮动float

    浮动原理:浮动使元素脱离文档普通流,漂浮在普通流之上的

    浮动元素依然按照其在普通流的位置上出现,然后尽可能的根据设置的浮动方向向左或向右浮动,
    知道浮动元素的外边缘遇到包含框或者另一个浮动元素为止,且允许文本和内联元素环绕它

    浮动会产生块级框,而不管该元素本身是什么

    清除浮动带来的影响

    clear清除浮动

    none不清除,left不允许左边有浮动对象,right,both

    利用伪类实现清除浮动

    .clearFix{
        content="";
        display: block;
        width: 0;
        height: 0;
        clear: both;
    }
    

    定位position

    层模型,绝对定位(相对于父类)

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute绝对定位,这条语句的作用加你个元素
    从文档流中拖出来,然后使用left,right,top,bottom属性相对于其最接近的一个
    具有定位属性的父包含块进行绝对定位。

    如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

    position:absolute

    div{
        width: 200px;
        height: 200px;
        border: 2px red solid;
        position: absolute;
        left: 100px;
        top: 20px;
    }
    

    层模型-相对定位(相对于原位置)

    position: relative

    #div{
        width: 200px;
        height: 200px;
        border: 2px red solid;
        position: relative;
        left: 100px;
        top: 20px;
    }
    

    层模型-固定定位(相对于网页窗口)

    position: fixed

    相关文章

      网友评论

          本文标题:6-css样式

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