CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
基础
基础语法
<head>
<style type="text/css">
选择器(即修饰对象){
对象的属性1: 属性值1;
对象的属性2: 属性值2;
}
</style>
</head>
选择器
元素选择器
<style>
/*
CSS的注释:
直接写元素名{
样式名:样式值;
样式名:样式值;
}
*/
div{
font-size:50px;
color:#660000;
}
</style>
id选择器
<style>
/*
#id值{
样式名:样式值;
样式名: 样式值;
}
*/
#div2{
font-size:50px;
color:#330066;
}
</style>
类选择器
<style>
/*
类选择器
.类名{
样式名:样式值;
样式名:样式值;
}
*/
.one{
font-size:50px;
color:#FF0000;
}
</style>
css控制字体
div{
font-size:50px;
font-family:隶书;
font-style:italic;
font-weight:bold;
color:red;
text-decoration:line-through;
}
css控制背景
div{
width:500px;
height:300px;
border:1px solid blue;
/*设置div背景*/
/*background:#FFFF00;*/
background:url(../images/7e971270.gif) no-repeat center top;
}
css控制列表
li{
list-style-type:none;
list-style-image:url("../images/7e971270.gif");
}
边框,外边距,内边距
body{
margin:0px;//外边距
}
#div1{
border:5px solid #FF0000;
width:300px;
height:80px;
}
#div2{
border:5px solid #FF0000;
border-bottom:3px dashed #0033CC;
border-top:3px dashed #0033CC;
width:300px;
height:100px;
margin:100px 200px 200px 50px;//外边距
padding-left:50px;//内边距
padding-top:80px;//内边距
}
css控制悬浮
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
例:float:left;
clear区隔属性
例:
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
clear作用
如果前一个元素存在左浮动或右浮动,则换行以区隔
只对块级元素有效
clear属性的取值
right
left
both
none
css控制伪类
CSS 伪类用于向某些选择器添加特殊的效果。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
/*超链接未点击*/
a:link{
color:#000000;
}
/*已经点击完成了*/
a:visited{
color:#FF0000;
}
/*鼠标放在上面 但是还没点击*/
a:hover{
color:#00FF00;
font:28px;
}
/*鼠标点击的时候,但是还没松开.*/
a:active{
color:#0000FF;
}
</style>
</HEAD>
<BODY>
<a href="#">超链接</a>
</BODY>
</HTML>
三类应用样式的方式
内部样式表 :定义在本文件的style中
外部样式表 :
<link rel="stylesheet" href=CSS外部文件名 type="text/css" />
行内样式:定义在标签内
特殊用途
css参考手册中css定位属性display
常用的值:
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
例:display:none;该元素隐藏
CSS3 filter(滤镜) 属性:
CSS3 filter(滤镜) 属性