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

    css美化html网页

    1内联样式表

      控制精确,可用性比较差。比如<p style="font-size:14px">内联样式表</p>

    2内嵌式

      一个独立区域嵌在网页里,但是要写在head标签里。

    3外部样式表

    新建一个css样式表,用<link type="text/css" rel="stylesheet" href="css样式表"/>

    注意不用style标签

    4选择器(选择器用在head里面或者外联css样式表里面)

       1标签选择器

         div{样式}

        2class选择器

        用   .加class名开头

         

       3id选择器

          用   #加id名开头 

          

         4属性选择器

           命名一个属性           。            然后,                

       5复合选择器

         表示并列  空格表示后代

         

     6 样式表属性

    6.1

        background-color: 背景色

        background-img:url(路径)  背景图片

       background-attachment:fixed;背景是固定的,不随字体滚动

        background-attachment:scroll; 背景不是固定的,随着字体移动

        background-repeat:no repeat;不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺。

        background-position:right top;背景图放在右上

        background-position:left 100px top 100px  ;背景图离左边和上边100px

     6.2字体

        font-family: 字体

        font-size:字体大小,可用像素,百分比等

        font-weight:bold,加粗  

        font-style:italic  倾斜     normal正常

       text-decoration:underline;下划线 。overline 上划线; line-through,删除线 none,去掉下划线。

       text-align:center 居中对齐   left是左 right是右  水平对齐

        vertical-align:middle 居中对齐 top是上 botton是下    垂直对齐

        text-indet:   首行缩进,后面跟像素

        line-height:24px  行高,

        display:none none为不显示,inline-block,显示为块,不自动换行;block显示为块,但是自动换行。inline的宽高不能设置

        visibility:hidden 可视性 hidden为隐藏 visible为显示。

    6.3边界和边框

        border(表格边框)

        border:1px solid blue   1像素蓝色实线边框,也可写为 border-width:1px;border-style:solid;border-color:blue。(四边框,可设置单独某一边的border-top:)

        margin(外边框边距)

        margn:1px  四边的边框是1像素,auto是居中  可在margin后面添加四个像素(margin:1px 1px 1px1px),表示四边框顺序为 上-右-下-左

        padding (内容与边框的间距)用法和margin相似

       

  • 相关阅读:
    vs.net 2005, 没有找到MSVCR80D.dll的完美解决方案
    C++内存布局从一个修改私有变量的问题想到的
    堆栈详解
    加载.x文件
    深入分析规则引擎
    高级着色语言HLSL入门(5)
    字符数组,字符指针,Sizeof总结
    C++ 隐式和显式 初始化,类型转换
    fread()和fwrite()函数分析
    结构体 对齐的问题
  • 原文地址:https://www.cnblogs.com/cyd123/p/6538241.html
Copyright © 2011-2022 走看看