zoukankan      html  css  js  c++  java

  • CSS 样式、布局、盒子模型

    Css内容：

                 常用样式： 字体    颜色   背景

                布局： 浮动   定位   标签特性

            　标签盒子模型：  边距   边框

                动画： 旋转 渐变

    注意：Css引路径从css文件里找

    　　   Html和js引路径从html文件里找

    样式：

      　　字体：

      　　 Font-size    字体大小

    　　　　实例：

    p {
    font-size:14px;
}

    　用em来设置字体大小

    　　浏览器默认文字大小为16px

    　  1em=16px

    　　

       　　Font-family   字体系列

    实例：

    p{
  font-family:"Times New Roman",Georgia,Serif;
}

    　　

               Font-style  字体样式

    实例：

    p.normal {
    　　　　　　font-style:normal
    }
p.italic {
    　　　　　　font-style:italic
    }
p.oblique {
    　　　　　　font-style:oblique
    }

    　　属性值：

    　　

               Font-weight  字体粗细

    实例：

    p.normal {
    　　　　　　font-weight:normal;
    }
p.thick {
    　　　　　　font-weight:bold;
    }
p.thicker {
    　　　　　　font-weight:900;
    }

    　属性值：

    　文本：

    文本颜色：color

    • 十六进制值 - 如: ＃FF0000
    • 一个RGB值 - 如: RGB(255,0,0)
    • 颜色的名称 - 如: red

    实例：　　

    body {
    　　color:red;
    }
h1 {
    　　color:#00ff00;
    }
h2 {
    　　color:rgb(255,0,0);
    }

    　文本对齐方式：text-align

    　　文本排列属性是用来设置文本的水平对齐方式。

    　　文本可居中或对齐到左或右,两端对齐.

    　　当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）

    实例：

    h1 {
    　　text-align:center;
    }
p.date {
    　　text-align:right;
    }
p.main {
    　　text-align:justify;
    }

    　　文本修饰：text-decoration 属性用来设置或删除文本的装饰。

    　　从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

    实例：

    a {
    　　text-decoration:none;
    }

    　　none为删除下划线　

    h1 {
    text-decoration:overline;
}
h2 {
    text-decoration:line-through;
}
h3 {
    text-decoration:underline;
}

    　　overline为上划线；

    　　line-through为删除线；

    　　underline为下划线　

    　文本转换：

    text-transform

    　　文本转换属性是用来指定在一个文本中的大写和小写字母。

    　　可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

    实例：

    p.uppercase {
    text-transform:uppercase;
}
p.lowercase {
    text-transform:lowercase;
}
p.capitalize {
    text-transform:capitalize;
}

    　文本缩进：

    text-index

    文本缩进属性是用来指定文本的第一行的缩进。

    实例：

    p {
    　　text-indent:50px;
    }

    　line-height　行高

    实例：

    p.small
{
	line-height: 10px
}
p.big
{
	line-height: 30px
}

    vertical-align   设置元素的垂直对齐

    实例：

    img{
　　vertical-align:text-top;
}

    背景：background

        背景颜色：background-color

    实例：

    body {
    background-color:#b0c4de;
}

    　背景图像：background-image　

    实例：

    body {
    background-image:url('paper.gif');
}

    　　背景图像水平或垂直平铺：background-image-repeat-x/y

    实例:    水平方向平铺

    body{
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
}

    　背景图像设置定位与不平铺

    实例：

    body{
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
}

    　可以利用 background-position 属性改变图像在背景中的位置:　

    实例：

    body{
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
}

    　　背景简写属性：

    　实例：

    body {
    background:#ffffff url('img_tree.png') no-repeat right top;
}

    　

    当使用简写属性时，属性值的顺序为：:

    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

    列表　：

    　　

    CSS列表属性作用如下：

    • 设置不同的列表项标记为有序列表
    • 设置不同的列表项标记为无序列表
    • 设置列表项标记为图像

    不同的列表项标记：

    　　list-style-type：

    例子：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
             ul.a {list-style-type:circle;}
            ul.b {list-style-type:square;}
            ol.c {list-style-type:upper-roman;}
            ol.d {list-style-type:lower-alpha;}
        </style>
    </head>

    <body>
        <p>无序列表实例:</p>

        <ul class="a">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
        </ul>

        <ul class="b">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
       </ul>

        <p>有序列表实例:</p>
    
        <ol class="c">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
        </ol>

        <ol class="d">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
        </ol>

    </body>
</html>

    　结果为：

    　列表项标记的图像：

    list-style-image

    实例：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            ul 
        {
	    list-style-image:url('sqpurple.gif');
        }
        </style>
    </head>

    <body>
        <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Coca Cola</li>
        </ul>
    </body>
</html>

    　　结果为：

    列表项标记位置：

    　　list-style-position

    实例：

    ul {
    list-style-position: inside;
}

    　　列表简写属性：

    ul{
    list-style: square url("sqpurple.gif");
}

    　　

            浮动 

    　　　　float:   给要浮动的元素加父标签   设定标签的宽高

    实例：

    img{
    float:right;
}

    　属性值：

    　清除浮动:  clear

    实例：

    .text_line{
    clear:both;
}

    　　

    　　定位：

                      Postion

    属性： fixed relative absolute
    　　   top bottom left right : 100px
    　　fixed:相对于窗口定位 不在乎是否嵌套

    实例：

    <!DOCTYPE html>
　<html>
　　<head>
　　　　<meta charset="utf-8"> 
　　　　<title>菜鸟教程(runoob.com)</title> 
　　　　<style>
　　　　　　p.pos_fixed
　　　　　　{
	　　　　position:fixed;
	　　　　top:30px;
	　　　　right:5px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>

　　　　<p class="pos_fixed">Some more text</p>
　　　　<p>
    　　　　　　<b>注意:</b>
    　　　　　　 IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.
    　　　　</p>
　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p>
    　　　　<p>Some text</p><p>Some text</p>
　　　</body>
 </html>

    　结果为;　　不会随页面浮动

    　


    　　absolute：绝对定位     

    　　相对于标签定位 body
    　　相对于最近的有poistion属性的父标签定位 最终标签是body

    实例：

    <!DOCTYPE html>
    <html>
    　　<head>
    　　　　<meta charset="utf-8">
    　　　　<title>菜鸟教程(runoob.com)</title>
    　　　　<style>
    　　　　　　h2
    　　　　{
    　　　　　　position:absolute;
    　　　　　　left:100px;
    　　　　　　top:150px;
    　　　　}
    　　　　</style>
    　　</head>

    　　<body>
    　　　　<h2>这是一个绝对定位了的标题</h2>
    　　　　<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
    　　　　</body>

    </html>

    　结果为：　不会随窗口大小改变距离


    　　relative:相对自身定位 位置还有 常用在微调上和父标签

    实例：

    h2.pos_left{
    position:relative;
    left:-20px;
}

    　bottom　

    实例：设置图像的底部边缘，在元素的底边上面5px：

    img{
    position:absolute;
    bottom:5px;
}

    　cursor光标属性：

    anchor伪类：

    实例：在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

    a:link {
        color:#FF0000;
} /* 未访问的链接 */
a:visited {
        color:#00FF00;
} /* 已访问的链接 */
a:hover {
        color:#FF00FF;
} /* 鼠标划过链接 */
a:active {
        color:#0000FF;
} /* 已选中的链接 */

    注意：　　

    　　1.在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

           2.在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

    　　3.伪类的名称不区分大小写。

    top：

    实例：把图像的上边缘设置在其包含元素上边缘之下5像素高的位置

    img{
    position:absolute;
    top:5px;
}

    left:  属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

    right: 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。　　


    标签特性 display: block inline-block inline

     display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

    实例：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <style>
            h1.hidden {display:none;}
        </style>
    </head>
    <body>
	
        <h1>这是一个可见标题</h1>
        <h1 class="hidden">这是一个隐藏标题</h1>
        <p>注意, 实例中的隐藏标题不占用空间。</p>
	
    </body>
</html>

    　结果为：

    　

          

      visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

    实例：

    <!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        h1.hidden {visibility:hidden;}
    </style>
  </head>

    <body>
        <h1>这是一个可见标题</h1>
        <h1 class="hidden">这是一个隐藏标题</h1>
        <p>注意, 实例中的隐藏标题仍然占用空间。</p>
    </body>
</html>

    　结果为：

    　

    块元素是一个元素，占用了全部宽度，在前后都是换行符。

    块元素的例子：

    • <h1>
    • <p>
    • <div>

    内联元素只需要必要的宽度，不强制换行。

    内联元素的例子：

    • <span>
    • <a>

     display:

     实例：1. 把列表项显示为内联元素     

       

    li {
    display:inline;
}

    　　2.下面的示例把span元素作为块元素：

    span {
    display:block;
}

    盒子模型：　　

      

    不同部分的说明：

    • Margin(外边距) - 清除边框外的区域，外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    • Content(内容) - 盒子的内容，显示文本和图像。

    边框：border

    border-style样式

    实例：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
            <style>
   　　　　　　 p.none {border-style:none;}
   　　　　　　 p.dotted {border-style:dotted;}
    　　　　　　p.dashed {border-style:dashed;}
　　　　　　　　p.solid {border-style:solid;}
　　　　　　　　p.double {border-style:double;}
　　　　　　　　p.groove {border-style:groove;}
　　　　　　　　p.　ridge {border-style:ridge;}
　　　　　　　　p.inset {border-style:inset;}
　　　　　　　　p.outset {border-style:outset;}
　　　　　　　　p.hidden {border-style:hidden;}
　　　　　　　</style>
　　</head>

　　<body>
　　　　　　<p class="none">无边框。</p>
　　　　　　<p class="dotted">虚线边框。</p>
　　　　　　<p class="dashed">虚线边框。</p>
　　　　　　<p class="solid">实线边框。</p>
　　　　　　<p class="double">双边框。</p>
　　　　　　<p class="groove"> 凹槽边框。</p>
　　　　　　<p class="ridge">垄状边框。</p>
　　　　　　<p class="inset">嵌入边框。</p>
　　　　　　<p class="outset">外凸边框。</p>
　　　　　　<p class="hidden">隐藏边框。</p>
　　</body>

</html>

    　　结果为：

    边框宽度：border-width

    边框颜色：border-color

    边框单独设置各边：

    实例：

    p{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

    　结果为：

    　

    border-style属性可以有1-4个值：

    • border-style:dotted solid double dashed;
      • 上边框是 dotted
      • 右边框是 solid
      • 底边框是 double
      • 左边框是 dashed
    • border-style:dotted solid double;
      • 上边框是 dotted
      • 左、右边框是 solid
      • 底边框是 double
    • border-style:dotted solid;
      • 上、底边框是 dotted
      • 右、左边框是 solid
    • border-style:dotted;
      • 四面边框是 dotted

    边框简写属性：

    实例：

    <!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8"> 
　　　　<title>菜鸟教程(runoob.com)</title>
　　　　<style>
　　　　　　p
　　　　　　{
　　　　　　border:5px solid red;
　　　　　　}
　　　　</style>
　　</head>

　　<body>
　　　　<p>段落中的一些文本。</p>
　　</body>
</html>

    　　结果为：

    margin

    margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

    margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

    单边外边距属性：

    实例：

    margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

    　

    padding（填充）

    当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

    单独使用 padding 属性可以改变上下左右的填充。

    单边内边距属性值：

    实例：

    padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

    　　上内边距是 25px

    　　右内边距是 50px

    　　下内边距是 25px

    　　左内边距是 50px

    　
  • 相关阅读:
    C# 中的EventHandler
    Leetcode:Combinations 组合
    Leetcode:Minimum Path Sum
    [LeetCode] Container With Most Water
    一个数n的最少可以由多少个数的平方和组成
    单链表的归并排序
    几个常用的操作系统进程调度算法(转)
    字符串的最长重复子串(转)
    linux静态链接库与动态链接库详解
    简易的hashtable实现
  • 原文地址：https://www.cnblogs.com/lzw123-/p/9157190.html
Copyright © 2011-2022 走看看