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>标签内
最后,推荐我们的管理工具给大家。