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

  • 2014-09-14 22:36
  • 321B
  • 下载

CSS——(1)基础

CSS(Cascading Style Sheets)层叠样式表 含义 一种计算机语言; 可以实现网页与内容分离; 用来表现文件样式,如HTML或XML;

CSS1的简单说明.txt

  • 2014-04-24 19:48
  • 523B
  • 下载

css笔记1如何定义样式

纯CSS手里剑绘制优化1

之前做的--纯CSS3手里剑模型动画绘制--太差劲了,重新学习了下各种几何图形的基础后优化了一下。 截图: 代码: 纯CSS手里剑绘制优化1 .bo...

漂亮css按钮1

11种CSS选项卡菜单(1)

  • 2012-01-04 13:54
  • 88KB
  • 下载

CSS系列1-块级元素VS行内元素

快级元素VS行内元素
  • a_302
  • a_302
  • 2015-01-24 21:06
  • 341
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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