css

Cascading Style Sheets 层叠样式表.

CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.

语法：选择器{属性1:属性值;属性2:属性值;..}

CSS的引入方式（3种）

行内样式：直接在html的元素上使用style的属性编写CSS

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

内部样式：在html的<head>标签中使用<style>标签来定义CSS

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

外部样式：将CSS定义成一个.css的文件，在html中将该文件引入到html中

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

CSS的基本选择器

id选择器： #d1

<html>
<head>
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
</head>

<body>
 <p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
</html>

元素选择器：

<html>
<head>
<style type="text/css">
div{
        color: green;
    }
</style>
</head>

<body>
    <div class="d1"> 杜小胖</div>
    <div>杜小</div>
    <div class="d1">杜小胖</div>
</body>
</html>

//全变绿了

类选择器： .d1

<html>
<head>
<style type="text/css">
.d1{
        color: green;
    }
</style>
</head>

<body>
    <div class="d1">王小胖</div>
    <div>王胖</div>
    <div class="d1">王小胖</div>
</body>
</html>

CSS的其他选择器

属性选择器

<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h2 title="Hello world">Hello world</h2>
</body>
</body>
</html>

css样式

背景色

h1 {background-color: #00ff00}

缩进文本

p {text-indent: 5em;}

css文字

body {font-family: sans-serif;}

连接样式

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}    /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}    /* 正在被点击的链接 */

列表

ul {list-style-type : square}

表格

table, th, td
  {
  border: 1px solid blue;
  }

CSS的盒子模型

设置盒子的外边距：margin

Margin-top  Margin-right  Margin-bottom  Margin-left

设置盒子的内边距：padding

Padding-top  Padding-right  Padding-bottom  Padding-left

css定位

相对定位

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

绝对定位

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

浮动

img
  {
  float:right;
  }