关闭

CSS(1)

标签: css网页编程
110人阅读 评论(0) 收藏 举报
分类:
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>












0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:45742次
    • 积分:1550
    • 等级:
    • 排名:千里之外
    • 原创:113篇
    • 转载:4篇
    • 译文:0篇
    • 评论:18条
    博客专栏
    最新评论