CSS简单备忘

2016-06-04 本文已影响90人 hutou

结构、样式、行为分离

CSS的三种类型

内联样式表（inline style sheets）

<!--内联样式表，用于设置文本框的背景颜色-->
<input type="text" readonly="readonly" style="background-color: #FF00FF" />

内部样式表/内嵌样式表（embedded style sheets）

<!--内部样式表-->
<style type="text/css">
  input{
    border-color:Yellow;
    color:Red;
  }
 </style>

外部样式表（linked style sheets）

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

样式表的优先级

级别从高到低：

内联样式表

内部样式表
外部样式表
浏览器默认

语法

CSS 规则由两个主要的部分构成：选择器（selector），以及一条或多条声明（declaration）。

选择器

元素选择器

/*元素选择器*/
html {color:black;}
h {color:blue;}
h2 {color:silver;}

选择器分组
被分组的选择器就可以分享相同的声明，用逗号将需要分组的选择器分开

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

后代选择器

li strong {
    font-style: italic;
    font-weight: normal;
  }

id选择器

#red {color:red;}
#green {color:green;}

id 选择器和派生选择器

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

类选择器

.center {text-align: center}

class 也可被用作派生选择器

.fancy td {
    color: #f60;
    background: #666;
    }

属性选择器

/*带有 title 属性的所有元素设置样式*/
[title]
{
  color:red;
}
/*title="W3School" 的所有元素设置样式*/
[title=W3School]
{
  border:5px solid blue;
}

设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

子元素选择器

h1 > strong {color:red;}

他与后代选择器的区别是只选择子元素

相邻元素选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

h1 + p {margin-top:50px;}

CSS盒模型

CSS盒模型示意图

标准盒子模型

盒子3D模型

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

值设置的方法

.test1 {
  /*四个方位设置相同的值*/
  padding: 1.5cm
  /*上下为0.5；左右为2.5*/
  padding: 0.5cm 2.5cm
  /*上=0.5 左右=1.0 下1.5*/
  padding: 0.5cm 1.0cm 1.5cm
  /*上，右，下，左*/
  padding: 0.5cm 1.0cm 1.5cm 2.0cm
}

内边距

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

内边距可以设置百分比

p {padding: 10%;}

边框

元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面：宽度、样式，颜色。

样式

a:link img {border-style: outset;}
/*定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框*/
p.aside {border-style: solid dotted dashed double;}

宽度
可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

p {border-style: solid; border-width: 5px;}
p {border-style: solid; border-width: 15px 5px 15px 5px;}

颜色

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

外边距

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并规则

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

外边距合并规则2

CSS定位

标准文档流(Normal flow)
浮动(Floats)
绝对定位(Absolute positioning)

1. 标准文档流

特点：
从上到下，从左到右，输出文档内容
由块级元素和行级元素组成
块级元素：从左到右撑满页面，独占一行；触碰到页面边缘，会自动换行
行级元素：能在同一行内显示，不会改变HTML文档结构

2. 浮动

这种布局的方法，所有的块级元素是顺序从上到下排列的，那么如何将块级元素从左到右排列那，使用的就是浮动。可以实现横向多列布局
特点：
使用float属性，共有三个属性值：left、right、none
元素会左移，或者右移，直到触碰到浏览器的边缘为止

设置了浮动的元素，依然处于标准文档里中，占用其中的空间
如果浮动不设置宽度，则宽度依赖于内容的宽度
浮动会影响紧跟着的元素

关于清除浮动的影响问题：

clear属性，对受到影响的元素设置清除浮动影响 clear:both;clear:left;clear:right;
设置{width:100%; overflow:hidden;}
注意清除浮动

3. 绝对定位

通过设置position属性来实现。共有四个属性值可以设置：
static ：静态定位，依然处于标准文档流中
relative：相对定位，相对于自身原有位置进行偏移，仍处于标准文档流，随即拥有偏移属性和z-index属性
absolute : 绝对定位，建立了以包含快为基准的定位，完全脱离了标准文档流，随即拥有偏移属性和z-index属性。定位的基准取决于最近的祖先已经定位的祖先元素，如果都没有定位，则相对于html进行偏移。
fixed : 固定定位

关于布局的三种最常见的方法

居中布局

wrap{ margin:0 auto;width:960px;}

左右布局
.left{width:800px; float:left;}
.right{widht:140px; float:right;}

CSS定位

CSS的定位属性允许对元素进行定位。

CSS 定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
元素有块元素、行内元素之分。可以使用display属性修改框的类型
CSS定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位

普通框都是在普通流中定位

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来

行内框在一行中水平布置

CSS的定位属性
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
可以通过z-index属性设置显示顺序
相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

相对定位示意图
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

关于定位的方式说明

一列布局

典型案例就是百度首页，一列居中对齐

<style>
    #main{
        width: 800px;
        height: 300px;
        margin: 0 auto;
        background: #123456;
    }
</style>

两列布局

<style>
    .left{
        width: 20%;
        height: 500px;
        float: left;
        background: #ccc;
    }
    .right{
        width: 80%;
        height: 500px;
        float: right;
        background: #ddd;
    }
    #wrap{
        width: 800px;
        margin: 0 auto;
    }
</style> 
<body>
    <div id="wrap">
        <div class="left"></div>
        <div class="right"></div>       
    </div>
</body>

三列布局

<style>
    .left{
        width: 20%;
        height: 500px;
        float: left;
        background: #ccc;
    }
    .mid{
        width: 30%;
        height: 500px;
        float: left;
        background: #eee;
    }
    .right{
        width: 50%;
        height: 500px;
        float: right;
        background: #ddd;
    }
    #wrap{
        width: 800px;
        margin: 0 auto;
    }
</style>
    
</head>
<body>
    <div id="wrap">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>       
    </div>
</body>

<style type="text/css">
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; background:#9CF;margin-left:210px;margin-right:210px;}
.right{ height:600px; width:200px; position:absolute;right:0; top:0; background:#FCC;}
</style>
</head>

<body>
    
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</body>

混合布局

<style>
    #head{
        margin: 0 auto;
        width: 800px;
        height: 100px;
        background: #888;
    }
    #foot{
        margin: 0 auto;
        width: 800px;
        height: 50px;
        background: #777;
    }
    #main{
        width: 800px;
        height: 300px;
        margin: 0 auto;
        background: #123456;
        overflow:hidden;
    }

    .left{
        width: 20%;
        height: 500px;
        float: left;
        background: #ccc;
    }
    .mid{
        width: 30%;
        height: 500px;
        float: left;
        background: #eee;
    }
    .right{
        width: 50%;
        height: 500px;
        float: right;
        background: #ddd;
    }
    #wrap{
        width: 800px;
        margin: 0 auto;
    }
</style>
    
</head>
<body>
    <div id="wrap">
        <div id="head"></div>
        <div id="main">
            <div class="left"></div>
            <div class="mid"></div>
            <div class="right"></div>       
        </div>
        <div id="foot"></div>
    </div>
</body>

CSS简单备忘

CSS的三种类型

样式表的优先级

语法

选择器

CSS盒模型

内边距

边框

外边距

外边距合并

CSS定位

1. 标准文档流

2. 浮动

3. 绝对定位

wrap{ margin:0 auto;width:960px;}

CSS定位

关于定位的方式说明

一列布局

两列布局

三列布局

混合布局

猜你喜欢

热点阅读