11.30——12.4学习总结

weixin_30401605

于 2015-12-06 19:59:00 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/Betty123/p/5024235.html

版权

css 样式
背景颜色
p {background-color: gray;}
背景图像
body {background-image: url(/i/eg_bg_04.gif);}
背景重复
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景定位
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
背景关联
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
文本
文本阴影，text-shadow
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
缩进文本
p {text-indent: 5em;}
水平对齐
p{text-align:center}
字间距(单词)
word-spacing 属性
字间距(字母、文字)
letter-spacing
行间距
{
  line-height: 10px
  }
规定段落中的文本不进行换行：
p
  {
  white-space: nowrap
  }
大小写转换
text-transform 属性
h1 {text-transform: uppercase}
文本装饰
text-decoration 属性
a {text-decoration:line-throuth;}
处理空白符
white-space 属性
p {white-space: normal;}
css字体
font-family 属性
body {font-family: sans-serif;}
字体风格
font-style 属性
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size 属性设置文本的大小
h1 {font-size:60px;}
h2 {font-size:40px;}
CSS 列表
要修改用于列表项的标志类型
list-style-type
ul {list-style-type : square}
列表项图像
list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。
列表标志位置
list-style-position
list-style-type 设置列表项标志的类型。
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性
table, th, td
{
border: 1px solid blue;
}
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格文本对齐
text-align
td
{
text-align:right;
}
轮廓（Outline）
轮廓（Outline）
在元素周围画线
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
设置轮廓的颜色
p
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}
设置轮廓的样式
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
设置轮廓的宽度
p
{
border:red solid thin;
outline-style:solid;
outline-width:thin;
}
css3边框
border-radius 属性用于创建圆角：
这个矩形有圆角！
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
box-shadow 用于向方框添加阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
css3文本效果
在 CSS3 中，text-shadow 可向文本应用阴影。
CSS3 自动换行
word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分，允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}
CSS3 @font-face 规则
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

雪碧图
    <style type="text/css">
        div{
            width: 150px;
            height: 120px;
            background: url("");
            background-position: 0 -240px;
        }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    将其宽高设定为图片的宽高
图片遮盖技术
    h1{
            background: url("京东LOGO.png") no-repeat;
            width: 168px;
            height: 81px;
            border: 1px solid #ff0000;
        }
        a{
            border: 1px solid #000000;
            display: block;
            /*width: 168px;*/与line-height只需要设置一个即可
            /*height: 81px;*/
            line-height: 81px;
            text-indent: -1000px;
        }
    <body>
    <h1>
        <a href="动画.html">京东</a>
    </h1>
    </body>
图片透明度
    div.background{
            width: 300px;
            height: 200px;
            border: 1px solid black;
            background: url("ba5.jpg") repeat;

        }
        div.box{
            width: 200px;
            height: 130px;
            border: 1px solid red;
            opacity: 0.2;
            margin: 30px 40px;
            padding:6px 20px;
        }
        .box:hover{
            opacity: 1;
        }
        p{
            color: green;
         font-weight: bold;
        }

    </style>
    </head>
    <body>
    <div class="background">
    <div class="box">
        <p>
            我是段落我是段落我是段落我是段落
            我是段落我是段落我是段落我是段落我是段落
            我是段落我是段落
        </p>
    </div>
    </div>
    </body>
下拉列表
    dd{
    display: none;
    }
    li:hover dd{
    display: block;
    }
    </style>
    </head>
    <body>
    <div>
    <ul>
        <li>
            母婴
            <dl>
                <dd>衣服</dd>
                <dd>奶粉</dd>
            </dl>
        </li>
    </ul>
    </div>
    </body>
如何写导航栏:
    导航栏 = 链接列表,导航栏基本上是一个链接列表，因此需使用 <ul> 和 <li> 元素,让我们从列表中去掉外边距：
    div{
    height: 44px;
    background: red;
    }

    ul
    {
    margin:0;
    padding:0;
    }

    li
    {
    list-style:none;
    float:left;
    padding:0 20px;
    line-height:44px;
    }

    a{
    text-decoration: none;
    font-weight: bold;
    color: white;
    }

    li:hover{
    blackground:green;
    }

    <nav>
       <div>
           <ul>
               <li><a href="">首页</a></li>
               <li><a href="">新闻</a></li>
               <li><a href="">会议</a></li>
               <li><a href="">图片</a></li>
           </ul>
       </div>
    </nav>
float浮动:
    float:right/left/
    清除浮动:clear:both
z-index可被用于将在一个元素放置于另一元素之后
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1
    }

    BFC块级格式化上下文，垂直紧挨排列，生成BFC的元素有：
    根元素;
        1.float元素不为none;
        2.position为absolute或fixed；
         3.display为 inline-block； table-cell； table-caption；
        4.flex； inline-flex；
        5.overflow不为 visible；
    IFC行内格式化上下文，行内元素的大小决定父级元素的高宽，是指定区域内内容自适应垂直居中。
    line-height
    vertical-align:middle

转载于:https://www.cnblogs.com/Betty123/p/5024235.html