样式

  • 行内

  • 嵌入式

  • 外部样式表

<style type="text/css">
    @import url(site.css);
    @import url(navbar.css);
    @import url(footer.css) screen and (min-width: 960px);
    body {
        background: yellow;
    }
</style>
<link rel="stylesheet" type="text/css" href="basic.css"  media="all">
<link rel="stylesheet" type="text/css" href="web.css" media="screen and (max-width: 960px)">
<link rel="stylesheet" type="text/css" href="paper.css" media="print and (color-depth: 2)">

at-rules

@charset
@charset "utf-8";

@import
@namespace
@counter-style
@font-face
@keyframes
@media
@supports

Position

[
[ left | center | right | top | bottom | <percentage> | <length> ] |
[ left | center | right | <percentage> | <length> ]
[ top | center | bottom | <percentage> | <length> ] |
[ center | [ left | right ] [ <percentage> | <length> ]? ] &&
[ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]

响应式设计

媒体查询

  • screen: 用于电脑屏幕、平板电脑、智能手机、电视监视器等

  • print: 打印机

  • speech: 阅读设备

  • all(default): screen, print, and speech.

min-width
max-width

语法

  • 基本语法

https://drafts.csswg.org/mediaqueries-4/#media-query

@media media-type and (media-feature) {
    CSS-style rules …
}
body {
    @media screen and (max-width: 480px){
        background-color:white;
    }


    @media screen and (min-width: 480px){
        background-color:black;
    }

}
  • 逻辑 and
.midsize{
    @media (min-witdh:501px) and (max-width:800px){
           css style rules.... 
    }
}

<!--  -->
@media not (width <= -100px) {
  body { background: green; }
}

小栗子

body {
@media screen and (max-width: 480px) {
    background-color: white; } /* phone background */
@media screen and (min-width: 481px) and (max-width: 780px) {
    background-color: yellow; } /* tablet background */}
@media screen and (min-width: 781px) {
    background-color: red; } /* computer background */
}

Text 响应式文本

div {
    font-size: 16px; /* 1em = 16 px */
    width: 2.5em; ; /* width = 40 px */
}
html { font-size: 20px; }
div { font-size: 16px;}
p { font-size: 0.5rem;} /* font size is 10px */

内容垂直居中

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/


<section>
 <style type="text/css">
 .single_line{line-height:30px; border:1px dashed #cccccc; padding-left:5px;}
 .mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px; font-size:0;}
 .mulit_line span{display:inline-block; line-height:1.4em; vertical-align:middle;}
</style>

        <div class="zxx_main_con">
            <strong class="f11">单行文字</strong>
            <p class="single_line mt10 mb20">
                这是高度为30像素的单行文字
            </p>
            <strong class="f11">多行文字</strong>
            <p class="mulit_line mt10">
                <span style="font-size:12px;">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span><i class="vm dib">&nbsp;</i>
            </p>
            <p class="mulit_line mt10">
                <span style="font-size:20px;">这里是高度为150像素的标签内的多行文字，文字大小为20像素。<br />这里是第二行，用来测试多行的显示效果。</span><i class="vm dib">&nbsp;</i>
            </p>
        </div>


</section>