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  距离左边的距离

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

  • 相关阅读:
    redis配置文件参数说明及命令操作
    在Window 下安装Redis数据库
    eclipse怎样在线安装hibernate tools插件并使用
    eclipse如何优化构建的速度(Building)
    java实现敏感词过滤(DFA算法)
    eclipse编码格式设置
    Jquery Ajax简单封装(集中错误、请求loading处理)
    Vue简单封装axios—解决post请求后端接收不到参数问题
    vue项目实现记住密码功能
    vue路由的两种模式配置以及history模式下面后端如何配置
  • 原文地址:https://www.cnblogs.com/liuyubin0629/p/6832689.html
Copyright © 2011-2022 走看看