css教程

css是一种用来表现HTML或XML等文件样式的计算机语言。css教程包括:1.CSS的规则组成;2.书写格式和注释写法;3.长度单位;4.HTML文档中放置CSS的几种方式。

CSS的规则组成:

CSS和HTML一样都是由W3C制定的标准。

CSS书写格式和注释写法:

p{

font-size:30px;

/* color:yellow; */

border:1px solid blue;

}

注:p 是选择器  {}的包含的内容是声明  font-size: 30px; 属性:属性值;属性和属性值之间用英文冒号,属性值结尾用英文分号。/*  */  为注释靠近大括号的最后一个属性值,英文分号可以省略。

CSS长度单位:

em (如:font-size:2em;)1em是默认浏览器文字大小 ,em的数值是默认文字大小倍数。

px (如:font-size:14px;) 是一个像素的单位

pt(如:font-size:12pt;) 是一个磅的单位

%(font-size:80%)是一个百分比。

注:pc(活字)cm(厘米) mm(毫米) in(英寸)。有的属性也可以使用一个百分比,可以由可选的正号或负号、接着一个数字,在一个长度单位或者百分单位中没有空格,百分比是相对于其他的数值的,颜色单位和URL值颜色单位:

1.使用英文单词:red yellow blue green lime navy white等16个。

2.RGB颜色:#rrggbb(如#ff00ff)。rgb(x,x,x),x是0-255的整数(如rgb(255,255,0).rgba(x,x,x,y)x是0-255的整数,y是0-1整数或小数,表示透明度。html 5新特性。

hsl(x,y,y) x是0-360的整数,y是0-100%。(如hsl(90,40%,48%)   HSL(色相、饱和度、亮度)hsla(x,y,y,z)x是0-360的整数,y是0-100%, z是0-1的整数和小数。(如:hsl(90,69%,78%,0.5)

兼容性:IE8及更早浏览器不支持color的RGBA, HSL, HSLA及transparent值。

URL值:URL的格式:url(addr),addr是一个url.url可以用单引号或者双引号,也可以不加引号。

HTML文档中放置CSS的几种方式:

内联样式表:<p style="color:red;font-family:serif">内联样式表修饰P标签</p>

注:使用style内联,放置在任意body元素(包括body本身)优先级最高。

嵌入一个样式表:<style type="text/css">

@import url("first.css");        使用import 导入外部css文件

body{background:url(foo.gif); color:black}

p em{background:yellow; color:black}

.note{margin:6px;}

</style>

注:嵌入样式表只能放在<head></head>标签中,不同于<script></script>可以在放在<body></body>内。

连接到一个外部样式表: <link rel="stylesheet" type="text/css" href="style.css">

注:只能放在<head></head>标签内

优先级:内联高于其它三种,其

它三种按照出现的先后顺序来决定。

(内联样式表:<p style="color:red;font-family:serif">内联样式表修饰P标签</p>

注:使用style内联,放置在任意body元素(包括body本身)优先级最高。, 嵌入一个样式表:<style type="text/css">

@import url("first.css");        使用import 导入外部css文件

body{background:url(foo.gif); color:black}

p em{background:yellow; color:black}

.note{margin:6px;}

</style>

注:嵌入样式表只能放在<head></head>标签中,不同于<script></script>可以在放在<body></body>内。, 连接到一个外部样式表: <link rel="stylesheet" type="text/css" href="style.css">

注:只能放在<head></head>标签内


最后,推荐我们的管理工具给大家。