样式表

  今天学习了样式表,学习了很多内容,很多的小的内容,需要大量的记忆,对今天的学习,我做了以下的总结:

  一:首先是“内敛”是写在标签里面的,style="样式” 劣势:控制准确,代码重用性。

    “内嵌”是嵌在页面head里面,<style type=“text/css”></style>优点:控制虽然没有内联的精确,但是代码重用性好。

    “外部”单独的样式文件,引入:右键-css样式表-附加样式表。引入:<link href="text.css" rel="stylesheet" type="text/css">控制没有内联的精确,但是重用性好。

    选择器

    样式表用来选取元素的
    标签
    根据标签名选中元素
    class
    . (点)
    根据class名来筛选元素
    id:
    # (井号)
    根据id名来筛选出唯一元素
    复合
    并列div,span
    div,span
    class="第一种 第二种"
            后代  #list li
            #list li
          点筛选:div.s

    大小:width 宽度 height 高度

    背景:

              background-color:背景色

              background

     rgb(x,x,x)

     rgba(x,x,x,x)最后一个是透明度 1为不透明 0为全透明

     url(图片的相对路径)

     不平铺:no-repea

     background-image:背景图片

     background-repeat:背景图的平铺方式 no-repeat,不平铺,repeat平铺,repeat-x横向平铺,repeat-y纵向平铺。

     background-position:center;背景图片位置,设置背景图片时,repeat必须为no-repeat.

     background-attachment:设置背景图片是否滚动,fixed背景是固定的,不随字体滚动。scroll背景随字体滚动。

     background-size:200px 200px;背景图片的大小。

      字体:

     font-family:字体样式。

     font-size:14px 15px;字体大小

     font-style:italic倾斜

     font-weight:bold加粗

     text-decoration:underline下划线 overline上划线 overline上划线 line-through删除线 none没有,用来去掉超链接的下划线。

     color。字体颜色

    对齐方式:

      text-align:水平对齐方式

      vertical-align 垂直对齐方式,配合行高使用

      line-height  行高

      text-indent  缩进 单位像素

   边界边框:

      margin:
                 外边距 上右下左
                 padding:
                 内边距 上右下左 ,如果加了内边距,该元素会相应的变大
               border:
                 1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
    列表方块

                 list-style

                 none将列表前面的序号去掉

                 list-style-image

                 可以将前面的序号变为图片

                 格式与布局
        位置
                 position

                 fixed固定 相对于浏览器边框位置固定

                 absolute绝对位置

                 相对于父级元素(浏览器,绝对定位的上级)

                 relative相对位置

                 相对于自身应该出现的位置

                 top 距离上边的距离

      right 距离右边的距离

      bottom 距离下边的距离

      left  距离左边的距离

   今天学习的内容很多,需要加强记忆的东西。课下多努力,多背,多记。加油吧!

posted @ 2017-05-09 21:08  小程序员//  阅读(136)  评论(0编辑  收藏  举报