zoukankan      html  css  js  c++  java
  • 样式表

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

      一:首先是“内敛”是写在标签里面的,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  距离左边的距离

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

  • 相关阅读:
    背水一战 Windows 10 (26)
    背水一战 Windows 10 (25)
    背水一战 Windows 10 (24)
    背水一战 Windows 10 (23)
    背水一战 Windows 10 (22)
    背水一战 Windows 10 (21)
    背水一战 Windows 10 (20)
    背水一战 Windows 10 (19)
    背水一战 Windows 10 (18)
    背水一战 Windows 10 (17)
  • 原文地址:https://www.cnblogs.com/liuyubin0629/p/6832689.html
Copyright © 2011-2022 走看看