注册 登录
> CSS

css基础知识

系统 1559 0

开始

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。

通过使用 CSS样式设置页面的格式，可将页面的内容与表现形式分离。

页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或 HTML文档的某一部分，通常为文件头部分。

将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

语法

CSS 语法由三部分构成：选择器、属性和值： 

       selector {property: value}

选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式

body {color: blue}

多重声明：

如果要定义不止一个声明，则需要用分号将每个声明分开。

p {text-align:center; color:red;}

注释 

    /* p{ color: red} */

CSS引用

  • 内联样式(在HTML元素内部) 
        <p style="color: red">text</p>
  • 内部样式表（位于<head>标签内部） 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
	p {
		color: red;
	}
	a {
		color: blue;
	}
</style>
...
  • 外部样式表（独立的.css文件） 
    <head>
	<title>My first web page</title>
	<link rel="stylesheet" type="text/css" href="web.css" />
</head>

单位

  • px 象素 
       font-size:12px
  • %百分比 
       width:50%

选择器

  • 标签选择器 
        <p>this is picture!</p>    
    p{ color:#555}
  • id选择器 
        <p id="desc">this is picture!</p>    
    <style>
    #desc{ color:#555}
    </style>
  • class选择器 
        <p class="desc">this is picture!</p>    
    <style>
    .desc{font-weight:#555}
    </style>
  • 群组选择器 
       <span class="first">first</span>
   <p>two</p>
   <div id="second">second</div>
   <style>
      .one,p,#second{color:#f60}
   </style>
  • 后代选择器 
        <div id="firstcard">
       <div class="avatar">
          <img src="abc/a.jpg" width="48" height="48" alt="a的头像" />
       </div>
    </div>

    <div id="secondcard">
       <div class="avatar">
          <img src="abc/a.jpg" width="48" height="48" alt="a的头像" />
       </div>
    </div>

    <style>
        .avatar{ padding:3px; border:1px solid #dcdcdc}
        #firstcard .avatar{border:1px solid #f60;}
        #secondcard .avatar{border:1px solid #06f;}
    </style>

文本

  • font-family
  • font-size
  • font-weight
  • text-decoration
  • text spacing

box 模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

  • margin
Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性， 分别表示BOX里内容离边框的距离，它的属性值是数值单位， 可以是长度、百分比或auto，margin可以设为 负值 ，造成BOX与BOX之间的重叠显示
  • padding
Padding属性用来描述BOX的边框和内容之间插入多少空间，和margin属性类似， 它也分为上右下左和一个快捷方式padding
  • border

border属性就是用来描述BOX边框的。

border属性分为border-width、border-color和border-style

border-width属性

border-width属性又分为：border-top-width、border-right-width、border-bottom-width、border-left-width和border-width属性，border-width用长度表示为"thin/medium/thick"或长度单位表示

border-color属性

border-color属性用来显示BOX边框颜色，分为border-top-color、border-right-color、border-bottom-color、border-right-color和border-color属性，属性值为颜色，可以用十六进制表示

border-style属性

border-style属性用来设置BOX对象边框的样式，它的属性值为CSS规定的关键字，平常看不到border是因为，初始值是none
  • 属性值的名称和代表意义如下：
    1. none：无边框。
    2. dotted：边框为点线。
    3. dashed：边框为长短线。
    4. solid：边框为实线。
    5. double：边框为双线。
    6. groove、ridge、inset和outset：显示不同效果的3D边框（根据color属性）。

border属性为Border的快捷方式，属性值间用空格隔开，顺序是"边框宽度 边框样式 边框颜色"，例如： 

        <h1 style="border:.5em outset red">hello!</h1>

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。

如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

  • 上, 右, 下, 左的顺时针规则,简写为 
       margin:10px 20px 30px 40px;
   padding:10px 20px 30px 40px;

布局属性

  • position属性

position属性有五个取值，分别为：static, relative, absolute, fixed, inherit, 其中“static”为默认值。

static

该值为position的默认值，可以省略不写，当position取值为static或者没有设置position属性的时候，div的显示方式为按文本流的顺序从上至下，或者从左到右顺序显示。 

    <div class="style">层一</div>
<div class="style">层二</div>
.style {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    margin-bottom:5px;
}

relative

相对定位，相对于什么位置呢? 偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，也就是说这里的相对定位是相对于它在正常情况下的默认位置的。

下图列出了偏移产生前后的位置关系：

偏移前： 

    <style type="text/css">
.style1 {
    position:relative;
    height:80px;
    width:80px;
    margin-bottom:10px;
    border:1px solid #000;
    background-color:#acd373;
}
.style2 {
    position:relative;
    height:80px;
    width:80px;
    border:1px solid #000;
    background-color:#f26c4f;
}
</style>
<div class="style1">层一</div>
<div class="style2">层二</div>

偏移后： 

    <style type="text/css">
.style1 {
    position:relative;
    left:30px;
    top:30px;
    height:80px;
    width:80px;
    margin-bottom:10px;
    border:1px solid #000;
    background-color:#acd373;
}
.style2 {
    position:relative;
    height:80px;
    width:80px;
    border:1px solid #000;
    background-color:#f26c4f;
}
</style>
<div class="style1">层一</div>
<div class="style2">层二</div>

设置了position:relative而不设置left,top等属性的时候，层显示的位置和不设置position属性或者position值取static时一样。

当一个层设置了position:relative，而且使得层位置产生相对偏移时，并不影响文本流中接下来的其他层的位置。

absolute

绝对定位，回忆一下，当我们设置position的值为static或者relative时，层依然存在于文本流中，也就是不管位置是否偏移，文本流中依然为它保留了该有的位置。但当层设置了position:absolute并产生偏移（设置了top,left等值）时，该层将完全从文本流中脱离，进而以该层所在的父容器的坐标原点为参考点进行偏移，可以这理解，该层已经和同级容器中的其它元素脱离了关系，也不会对其它元素产生任何影响（当它不存在！）。

注意：如果父容器没有设置position属性或position值为static时，将以body的坐标原点为参考。

下面我们以三个图示来分别说明。

页面一： 

    <style type="text/css">
.style1 {
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>

页面二： 

    <style type="text/css">
.style1 {
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    position:absolute;
    top:0;
    left:0;
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>

页面三： 

    <style type="text/css">
.style1 {
    position:relative;
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    position:absolute;
    top:10px;
    left:10px;
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>

fixed

固定定位，它的效果类似常见的浮动广告，无论如何拖动浏览器的滚动条，层始终悬浮在浏览器的某个位置。只能被Firefox好的支持，IE下需要用JS模拟。

inherit

继承，和其它属性的继承一样。在这里为继承父元素中的position值。

  • z-index属性

该属性在设置了position并取值为“absolute”或“relative”时有效，用于控制层在Z- 轴上的排列顺序，值为整数（由于不同浏览器的兼容性的区别，最好是正整数），取值越大层越在最上面。

  • float属性

取值包括inherit，left，right以及默认值none，该属性用于控制文本流的显示方向。需要注意的是如果设置了该属性并取值为left或right后，会影响到该流后面的其它盒子模型。可以通过设置“clear:both;”清除该属性设置。 例如： 

    <div class="style1">层一</div>
<div class="style1">层二</div>
<div class="style2">层三</div>
.style1 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    float:left;
    margin-bottom:5px;
}
.style2 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    clear:both;
    margin-bottom:5px;
}

css基础知识


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论