CSS(1)

原创 2016年08月28日 22:45:17
CSS概述

CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
那么CSS和HTML是如何在网页代码中相结合的呢?通过四种方式:style属性 、style标签、导入和链接。

CSS与HTML相结合的四种方式
☆ 1、style属性方式

<p style="background-color:#FF0000; color:#FFFFFF">
    p标签段落内容。
</p>


☆ 2、style标签方式

<style type=”text/css”>
    p { color:#FF0000;}
</style>


☆ 3、导入方式

<style type="text/css">
     @import url(myDiv.css)
</style>


☆ 4、链接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CSS技术演示</title>
		<style type="text/css">
		   @IMPORT url("suit.css");
		   div{
		      font-size:20pt;
		      background-color:#ff0;
		   }
		</style>
		<link rel="stylesheet" href="">
	</head>
	
	<body >
	  <div style="color:#ff0000;background-color:#0ff;">  湖南城市学院 </div>
	  <div>信息科学与工程学院</div>
	  
	  <table >
			<caption>这是<span>我的第二个</span>表格</caption>
			<tr>
			   <th>第1列</th>  <th colspan="2">第2-3列</th>
			</tr>       
			<tr>
			   <td rowspan="2">单元格1-1</td>  <td>单元格1-2</td>  <td>单元格1-3</td>
			</tr>       
			<tr>
			   <td>单元格2-2</td>  <td>单元格2-3</td>
			</tr>       
	    </table>
	<p>
	8月16日至17日,国内城市规划建设领域最具影响力的高峰论坛——2016第十一届城市发展与规划大会在湘江新区召开。作为大会19个分论坛之一,由湖南省两型社会与城市科学研究会主办,我校规划建筑设计研究院承办的“湖南绿色人文城市建设实践”论坛于16日下午隆重举行。来自国内两型研究和新型城镇化建设领域的100余名专家学者集聚一堂,共同探讨城市发展前沿问题。
	</p>
	
	
	</body>
</html></span>
suit.css
<span style="font-family:Times New Roman;font-size:14px;">@CHARSET "UTF-8";
@IMPORT url("suit1.css");
</span>
suit1.css

<span style="font-size:14px;">@CHARSET "UTF-8";
@IMPORT url("css/table1.css");
@IMPORT url("css/p1.css");</span>
suit2.css

<span style="font-size:14px;">@CHARSET "UTF-8";
@IMPORT url("css/table2.css");
@IMPORT url("css/p2.css");</span>
suit3.css

<span style="font-size:14px;">@CHARSET "UTF-8";
@IMPORT url("css/table1.css");
@IMPORT url("css/p2.css");</span>

p1.css

<span style="font-size:14px;">@CHARSET "UTF-8";
p{
	color:#0000ff;
	font: bold 20pt;
}
span{
	background-color: #ffff00;
}</span>

p2.css

<span style="font-size:14px;">@CHARSET "UTF-8";
p{
	color:#ff0000;
	font: bold 15pt;
	font-family: 黑体;
}
span{
	background-color: #ff00ff;
}</span>

table1.css

<span style="font-size:14px;">@CHARSET "UTF-8";
table{
	border-color: #0000ff;
	background-color: #ffff00;
	border: 1px solid red;
	border-collapse:collapse;
}

td{
	border: 1px solid red;
}</span>

table2.css

<span style="font-family:Times New Roman;font-size:14px;">@CHARSET "UTF-8";
table{
	border-color: #000000;
	background-color: #00ffff;
}</span>


相关语法
☆样式优先级

由上到下,由外到内。优先级由低到高。——总之,一般情况是以后加载为主,但还有细节优先级问题(后面会讲到)。
☆CSS代码格式
选择器名称 { 属性名:属性值;属性名:属性值;…….}

属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。

                                                        选择器
         就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器(标签本身就是封装数据的容器)。

☆选择器共有三种:
1) html标签名选择器。使用的就是html的标签名。
2) class选择器。其实使用的是标签中的class属性。
3) id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。

 ☆选择器的优先级

标签名选择器  <  class选择器  <  id选择器  < style属性

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CSS技术演示</title>
		<style type="text/css">
	       
	       /* 标签选择器 */
		   div{
		      color: #ff0000;
		   }
	       
	       /*  类选择器  */
		   .a{
		      background-color:#00ff00;
		   }
		   
		   span{
		     background-color: #00ffff;
		   }
		   
		   /*  id选择器  */
		   #abc{
		      background-color: #ffff00;
		   }
		   
		   /* 优先级: style属性 > id选择器 > 类选择器 > 标签选择器  */
		</style>
		
		
	</head>
	
	<body >
	
	  <div>这是div1中的文本</div>	
	  <div class="a">这是div2中的文本</div>	
	  <div>这是div3中的文本</div>	
	  <div class="a">这是div4中的文本</div>	
	  <span class="a" >这是span1中的文字</span>
	  <span>这是span2中的文字</span>
	  <span class="a" id="abc">这是span3中的文字</span>
	  <span id="abc" style="background-color:blue">这是span4中的文字</span>
	  
	</body>
</html></span>












版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS基础之1:CSS概念,书写位置,语法,CSS各种选择器

CSS基本概念,各种选择器
  • sujinchang939024
  • sujinchang939024
  • 2016年11月01日 11:32
  • 140

CSS 动画的 steps()

本文转自:http://web.jobbole.com/83657/ animation默认以ease方式过渡,会以在每个关键帧之间插入补间动画,所以动画效果是连贯性的。ea...
  • ssisse
  • ssisse
  • 2016年05月10日 10:25
  • 288

CSS 1.0~3.0选择器(中)

HTML5学堂:上一篇讲到CSS1.0~CSS3.0选择器的兼容问题等,CSS选择器的使用是特别广泛的,大家也会经常用到,而用到的选择器有哪些?接下来本文会介绍CSS1~CSS3的选择器,而本章针对c...
  • maodoudou1217
  • maodoudou1217
  • 2015年12月04日 15:34
  • 185

【CSS基础 】动画animation

作为博主简单记录: 深入学习请查看文末参考资料前面有提到过过渡效果css transition,实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的,而且过渡中我们可能需要其他精细操作办不到...
  • a5534789
  • a5534789
  • 2017年01月01日 17:25
  • 288

reset.css在进行页面开发的时候,我们会对css进行一些初始化的设置与重设

转载出自:http://meyerweb.com/eric/tools/css/reset/ html, body, div, span, applet, object, iframe, h1, ...
  • s8460049
  • s8460049
  • 2017年01月23日 13:56
  • 540

CSS之页面布局之一(浮动布局)

浮动布局是非常经典常见的页面布局方式。 实现方式很简单,第一步先
  • hongse_zxl
  • hongse_zxl
  • 2014年11月10日 16:13
  • 1342

浅撸 css3 flex 布局

css3 flex box css 前端
  • ling369523246
  • ling369523246
  • 2016年02月06日 19:22
  • 3360

CSS3中Opacity透明度等一些特效

Opacity 透明度 透明度属性是 CSS 中非常常用和流行的一个属性,目前已经广泛被主要浏览器支持,可惜的是 IE6/7/8 均不支持该属性。虽然 IE 没有支持这个 CSS 属性,但是我们可以...
  • 99guo
  • 99guo
  • 2014年12月29日 08:54
  • 10006

web端兼容性问题汇总(css篇)

浏览器的差异(css兼容问题集锦) 1.对于ul、ol列表缩进问题,css样式应写成ul,ol{list-style:none;margin:0;padding:0;}    其中margin对IE有...
  • u012123393
  • u012123393
  • 2015年03月06日 09:41
  • 1651

深入了解css的行高Line Height属性(图文并茂)

行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距离。 不过,行间距与半行间距,还是取决于CSS中的line-height。那么,如何来使用li...
  • wangji5850
  • wangji5850
  • 2016年05月17日 16:28
  • 633
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS(1)
举报原因:
原因补充:

(最多只允许输入30个字)