CSS基础

CSS样式表

<h1 style=”color:blue; background-color:yellow”>标题一</h1>
<!--内联样式表-->

<!--内部样式表-->
<style>
    选择器{
       属性名称1:属性值1; 
       属性名称2:属性值2;
        ... 
       属性名称N:属性值N
    }
</style>

<!--外部样式表-->
<link rel="stylesheet" href="样式文件URL">

CSS选择器

p{background:gray}
/*标签选择器*/

<p id="test">这是一个段落</p>
#test{color:red}
/*ID选择器*/

<h1 class="red">这是标题，字体颜色是红色</h1>
<p class="red">这是段落，字体颜色也是红色</p>
.red{color:red}
/*类选择器*/

/*属性选择器*/

a[href]{
color: red;
}
/*只对带有href属性的超链接元素<a>设置CSS样式*/

img[alt|="flower"]{
    border:1px solid red;
}
/*所有alt属性值以flower字样开头的图像元素设置1像素宽的红色实线边框效果。*/

a[href~="baidu"]{
    color: red;
}
/*所有href属性值中包含baidu字样的超链接设置为红色字体样式。*/

CSS语法规则

@charset "utf-8";
/*该语句表示外部样式表文件使用了utf-8的编码格式，一般写在外部样式表文件的第一行*/

p{
background-color: red !important;
background-color: blue;
}
/*优先使用background-color: red语句*/
/*如果需要IE6.0及以下浏览器兼容，需要将这两句样式代码分开写。*/

CSS取值与单位

CSS常用样式

CSS背景

body{background-color:cyan} /*将整个网页的背景颜色设置为青色*/
body{ background-image:url(image/flower.jpg)}
body {
   background-image: url(image/sky.jpg);
   background-repeat: no-repeat; /* 背景图像不平铺 */
}

background-position: 水平方向值  垂直方向值
/*可使用关键词、长度值或者百分比的形式表示。*/

/*关键词定位*/
background-position:left top
/*左上角的位置 不分先后顺序*/
/*可以简写为单个关键词的形式，这种情况会默认另一个省略的关键词为center*/

/*长度值定位*/
background-position: 100px 50px
/*以元素内边距区域左上角的点作为原点 向右100像素同时向下50像素*/

/*百分比定位*/
background-position: 0% 0%
/*背景图像左上角的点放置在HTML元素左上角原点上*/
background-position:66% 33%
/*背景图像水平方向2/3的位置和垂直方向1/3的位置上的点对齐*/
/*第一个参数值表示水平方向的位置
*第二个参数值表示垂直方向的位置
*如果简写为一个参数值则只表示水平方向的位置
*省略的垂直方向位置默认为50%
*/

简写
background [background-color] [background-image] [background-repeat] [background-attachment] [background-position]

p{
    background-color:silver;
	background-image:url(image/football.png);
	background-repeat:no-repeat;
}
p{ background: silver url(image/football.png) no-repeat }

CSS框模型

p{padding:20px}
/*内边距 可以理解为给内容外面加了一个框*/
p{padding: 10px 20px 0 20%} /*上右下左*/

p {
	border-width: 1px;
	border-style: solid;
	border-color: red
}
/*简写*/
p {
	border: 1px solid red
}

margin:10px /*上右下左 各边均为10像素的外边距*/
margin:10% /*当前元素上级父元素的宽度百分比*/
margin: 10px 0 30px /*简写左右通用*/
margin: 20px 30px /*简写上下通用*/

变距合并

CSS文本

p{text-indent: 20px} /*20px的首行缩进*/
h1{letter-spacing:10px} /*10px的字符间距*/

CSS字体

p{font-size:30px}
h1{font-size: 2em}
h2{font-size:120%}

简写
font [font-style] [font-variant] [font-weight] [ font-size] [font-family]

p{
  font-style:italic;
  font-weight:bold;
  font-size:20px;
}
p{font: italic bold 20px}

CSS超链接

一是a:hover的声明必须在a:link和a:visited之后
二是a:active的声明必须在a:hover之后

display的属性值，inline ， block， inline-block
inline（行内元素）:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block（融合行内于块级）:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。

CSS列表

list-style-image: url(image/icon01.png)

ul{
   list-style-type: circle;
   list-style-position: outside
}
ul{ list-style: circle outside}

CSS表格

CSS定位

绝对定位

参照点是左上角的原点
绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素
如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。

p{
	position: absolute;
	top:150px;
	left:100px;
	right:50px;
	bottom:100px;
}

相对定位

参照点不是左上角的原点，而是该元素本身原先的起点位置

p{
position: relative;
top:150px;
left:100px
}

层叠效果

使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。

#ten {
        background: url(image/ten.jpg) no-repeat;
        z-index: 1; left: 20px; top: 100px;
    }
    #jack {
        background: url(image/jack.jpg) no-repeat;
        z-index: 2; left: 100px; top: 100px;
    }
    #queen {
        background: url(image/queen.jpg) no-repeat;
        z-index: 3; left: 180px; top: 100px;
    }
    #king {
        background: url(image/king.jpg) no-repeat;
        z-index: 4; left: 260px; top: 100px;
    }
    #ace {
        background: url(image/ace.jpg) no-repeat;
        z-index: 5; left: 340px; top: 100px;
}

浮动