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

端午小长假--前端基础学起来03CSS为网页添加样式

时间:2016-06-09 17:23:39      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

定义:用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体

  •  设置样式:将要设置样式的内容用<span></span>样式括起来,然后再head中设置span

<head>
<style type="text/css">
span{
  color:red;
}
</style>
</head>


<body>
<p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>

语法:由选择符和声明组成,声明又由属性和值组成。p是选择器,将这个选择器中的内容设置样式,不影响其他选择器中的内容样式。{}是声明,

p:{

color:blue;

font-size:12px;

}

 注释代码:用/*注释语句*/(html中使用<!--注释语句-->)

 样式插入形式:优先级:内联式>嵌入式>外部式

  •  内联式:一两句话的样式修改

语法:将样式直接写在HTML的标签中,并且是在style=“”双引号中,如果有多条css样式,写在一起用分号隔开

<p style="color:"blue";font-size:12px">颜色蓝色,字号12</p>

  • 嵌入式:好几句话的样式修改

语法:将样式写在<style></style>标签之间,放在<head></head>

<style type="text/css">

span{

color:red;

}

<body>
<p>慕课网,<span>超酷的互联网</span>IT技术免费学习平台<span>服务及时贴心</span>内容专业<span>有趣易学</span>。
</body>

  • 外部式

语法:把css代码写一个单独的外部文件,以“.css”为扩展名,在<head>内(不是在<style>标签内),使用<link>标签将css样式文件链接到HTML文件中

   <link href="bass.css" rel="stylesheet" type="text/css"/>

注:(1)css样式文件名称要以有意义的英文字母命名,如 main.css

  (2)rel=“stylesheet” type=“text/css” 是固定写法不可修改

  (3)<link>标签位置一般写在<head>标签之内

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>

style.css文件:

span{
color:red;
font-size:50px;
}

优先级:内联式>嵌入式>外部式

前提:三样式在css样式是在相同权值的情况下,待补充

嵌入式>外部式 的前提:嵌入式css的样式位置在外部式的后面,如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:red;
}
</style>
</head>

总之:就近原则(离被设置元素越近优先级越高)

 

端午小长假--前端基础学起来03CSS为网页添加样式

标签:

原文地址:http://www.cnblogs.com/huiziz/p/5572426.html

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