码迷,mamicode.com
首页 > Web开发 > 详细

html进阶css(1)

时间:2015-10-22 21:14:56      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:


<!
doctype html> <html> <head> <meta http-equiv="content-type" content="text/html"; charset="utf-8"> <title>html和css的关系</title> <style type="text/css"> h1{ font-size:12px; color:#930; text-align:center; }
span{
color:yellow;
} </style> </head> <body> <h1><span>Hello</span> World</h1>
</body> </html>

css的组成:选择器,声明=属性与属性值

css的语法:选择器{属性:属性值;}

说明:1)属性和属性值之间用:连接,声明必须要在花括号内

        2)一个选择器可以有多个属性,属性和属性之间用;分号隔开。

        3)一个属性可以用多个属性值,属性值与属性值之间用空格隔开

meta标签支持html中的全局属性。

http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先要传送给浏览器的mime文档头部包含名称/值对。

当服务器向浏览器发送文档时,会先发送很多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一格:content-type:text/html。这将告诉浏览器准备一个接受的html文档。(当然现在大多数浏览器都能自动识别HTML文档)

style type="text/css"  这段代表中间内容的风格是css格式。

例如:font-size:12px  是控制字体的大小

        color:#930       是控制字体的颜色

       text-align:center 是控制文字居中

       span标签没有语义的它的作用就是为了设置单独的样式。在两种颜色或更多种颜色中它会选择最下面那种颜色。


<!doctype html>
<html>
<head>
           <meta charset="utf-8">
           <title>css之中的三种语法</title>
           <link href="css的文件地址.css" rel="stylesheet" type="text/css" />
           <style type="text/css">
               span{
                   color:blue;
                   font-size:20px;
                     }
           </style>
</head>
<body>
           <p style="color:red;font-size:12px">这里的颜色是红色</p>
           <p>这是另外的<span>一个段落</span></p>
</body>
</html>
 以上是3种css的格式: 1)内联样式表就是<p style="color:red;font-size:12px"></p>
css内联样式表就是把css代码直接写在现有的html标签中。
2)嵌入式样式表
<style type="text/css"></style>
嵌入式css样式就是可以把css样式代码写在style标签之中。一般情况下嵌入式css样式写在<head></head>之间。
3)外联样式表
 <link href="css的文件地址.css" rel="stylesheet" type="text/css" />
外联css样式就是把css代码写在一个单独的外部文件中,这个css样式文件以".css"为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到html文件内。
注意:rel="stylesheet"type="text/css"是固定写法不可修改,使用外联样式的好处可以让用户打开网页的速度有所提升。
三种样式表如果在同一个标签内,它们的优先级:内联>嵌入>外联。
 

html进阶css(1)

标签:

原文地址:http://www.cnblogs.com/liang1/p/4901653.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!