Maison > interface Web > tutoriel HTML > CSS网页编程_html/css_WEB-ITnose

CSS网页编程_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:17:05
original
1317 Les gens l'ont consulté

CSS网页编程


CSS概述

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

CSS与HTML相结合的四种方式

☆ 1、style属性方式

<p style="background-color:#FF0000; color:#FFFFFF">    p标签段落内容。 </p>
Copier après la connexion
☆ 2、style标签方式

<style type="”text/css”">    p { color:#FF0000;}</style>
Copier après la connexion
☆ 3、导入方式 

<style type="text/css">     @import url(myDiv.css)</style>
Copier après la connexion
☆ 4、链接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen">
Copier après la connexion

示例:

<title>MyCssDemo1</title><style type="text/css">/*3、导入方式  导入语句必须写在前面*/@IMPORT url("css/a.css");/*2、用style标签方法*/span {	background-color: yellow;	color: black;}</style><!-- 4、用link标签的方式加载 --><link rel="stylesheet" type="text/css" href="css/b.css" media="screen,print">	湖南城市学院	<!-- 1、用style属性方法 -->	<div style="background-color: red;color: black">这是第一个div区域中的文字</div>	<span>这是第一个span区域中的文字</span>	<hr>	
Copier après la connexion
姓名 年龄
张三 23
李四 23
Jack 22


相关语法

☆样式优先级

由上到下,由外到内。优先级由低到高。——总之,一般情况是以后加载为主,但还有细节优先级问题(后面会讲到)。

☆CSS代码格式 

选择器名称 { 属性名:属性值;属性名:属性值;…….}

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


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

☆选择器共有三种:

1) html标签名选择器。使用的就是html的标签名。
2) class选择器。其实使用的是标签中的class属性。
3) id选择器。其实使用的是标签的中的id属性。

每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。

 ☆选择器的优先级

标签名选择器  

示例:

<title>MyCssDemo3</title><style type="text/css">table {	border: solid 1px;	width: 300px;	text-align: center;}/*div中的a类,且这里写了的话下面的.a再设的话无法覆盖此处设置的div.a {background: #66B3FF;}*/.a{/*class选择器*/background: #FF0000;width: 209px;}#age {/*id选择器*//*下文设置的id只能有一个,其实像class那样设置多个也是可以达到一样的效果的,但是id在java编程中应该要是唯一的,在JavaScript中经常用,若不唯一就很同意挂掉*/background: #66B3FF;}tr {	background-color: #DFFFDF;}</style>	湖南城市学院	<div>这是第一个div区域中的文字</div>	<div class="a">这是第二个div区域中的文字</div>	<span>这是第一个span区域中的文字</span><br>	<span class="a">这是第二个span区域中的文字</span>	<p>这是一个p区域中的文字</p>	<hr>	
Copier après la connexion
姓名 年龄
张三 23
李四 23
Jack 22


扩展选择器
☆关联选择器

标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。例如: 

p { color:#00FF00;}p b { color:#FF000;}<p>P标签<b>XXXX学院</b>段落样式</p><p>P标签段落</p> 
Copier après la connexion
☆组合选择器

对多个选择器进行相同样式的定义。例如,我们想对“div中的标签”和“类名为cc”的区域设置相同的样式,则可以定义如下的组合选择器:

.cc, div b{/*不同选择器之间用逗号分开*/
  background-color:#0000ff;
  color:#fff;

☆伪元素选择器

      其实就在html中预先定义好的一些选择器,称为伪元素。

格式:标签名:伪元素。类名 标签名。类名:伪元素。

1、超链接a标签中的伪元素

a:link  超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。

2、段落p标签中的伪元素
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。

3、自定义伪元素

:focus 具有焦点的元素

div:hover{
    background-color:#f00;
    color:#fff;
}

扩展选择器综合练习:

<style type="text/css">span b{/*关联选择器*/	background-color: #ff0000;	color: #ff0;}.c,div b{	text-decoration: line-through;}span:HOVER {	color:#0000ff;}a:LINK {	background-color:#06f;	color:#f00;	text-decoration: none;}a:VISITED {	background-color: #f00;	color:#000;	text-decoration: line-through;/*无效*/}a:HOVER {	background-color: #ff0;	color:#f00;	font-size: 24px;	text-decoration: underline;/*有效*/}a:ACTIVE {	background-color: #000;	color:#fff;	font-size: 32px;	text-decoration: line-through;/*有效*/}p:FIRST-LINE {	font-size:24px;    color:#f00;    background-color: #ff0;}p:FIRST-LETTER {	font-size:32px;}input:FOCUS{	background-color: #9f0;}</style>	<div>这是一个<b>div区域</b>
</div>	<span>这是一个<b>span区域</b></span>	<p>		新华网北京5月24日电 五月的龙江大地,林茂风清,沃野茵茵。5月23日,<span class="c">习近平总书记</span>到黑龙江省考察调研,		从北京直飞素有“祖国林都”“红松故乡”之称的伊春市。	</p>		伊春位于黑龙江东北部,<a href="http://www.sina.com" target="_blank">是全国重点国有林区</a>,林业施业面积400万公顷。2013年,在全国率先全面停止天然林商业性采伐。	<br>	<input type="text"><br>	<input type="text">
Copier après la connexion


CSS的盒子模型1
◇边框(border)

上 border-top
下 border-bottom
左 border-left
右 border-right

◇内补丁(Paddings):内边距

上  padding-top
下  padding-bottom
左  padding-left
右  padding-right

◇外补丁(Margins):外边距

上  margin-top
下  margin-bottom
左  margin-left
右  margin-right



CSS的盒子模型2
☆CSS布局——漂浮

◇ float : none | left | right

none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边

◇ clear : none | left | right | both

none :  默认值。允许两边都可以有浮动对象 
left :  不允许左边有浮动对象 
right :  不允许右边有浮动对象 
both :  不允许有浮动对象

示例1:

<style type="text/css">#imgText {	border: #f00 solid 1px;	width: 400px;	position: relative;	top: 50px;	left: 100px;}#img {	float: left;}#text {	color: #f00;	font-size: 20;	font-family: "隶书";}#signText {	font-size: 24px;	color: #00f;	position: absolute;	top: 10px;	left: 70px;}</style>	<div id="imgText">		<div id="img"><img  src="example.jpg"    style="max-width:90%" height="200px" alt="CSS网页编程_html/css_WEB-ITnose" ></div>		<div id="text">			习近平来到上甘岭林业局溪水国家森林公园,实地察看天然林保护情况。			他走进红松林深处,同正在巡山的护林员进行交流,了解他们的工作生活情况。		</div>		<div id="signText">新浪网</div>	</div>
Copier après la connexion

示例2:

<style type="text/css">div {	border: #f00 solid 1px;	width: 200px;	height: 100px;}#div1 {	background-color: #f00;	padding: 20px;   /* 4个边距都是20px*/    /* padding: 20px 100px;  上下边距是20px,左右是100px*/    /* padding: 20px 100px 200px ;上,左右,下*/    /* padding: 20px 100px 200px 300px ; 顺时针:上,右,下,左*/	margin: 0px;	float: left;}#div2 {	background-color: #0f0;	margin-left: 100px;	padding: 20px;	float: left;}#div3 {	background-color: #00f;	padding: 20px;	margin-left: 100px;	float: left;	/*这里设置成漂浮则会和前面设置了漂浮的成员一起靠右侧排队,若这里不设置漂浮,则div框图会无视前面设置了漂浮的成员的存在直接排到最前面,	会出现看上去与设置了漂浮的div重叠的现象,但是文字会留在下一行而不随div一起,但是文字所在的纵坐标与div保持一致并且紧挨着div框图,只是横坐标不同而已*/	/*clear: left;*/	/*设置clear: left;的话如果前者有设置了漂浮的,该成员不会排到前者右侧而是在下面,即clear属性设置成了left,right等时,相应一侧不允许出现有设置了漂浮的*/}body {	margin: 0px;	/*body标签也有margin,因此在head里的style里设最外的margin为0的话,仍然有空隙,需要为body设css属性将margin设为0才可以达到想要的效果*/}</style>	<div id="div1">信息科学与工程学院</div>	<div id="div2">土木工程学院</div>	<div id="div3">数学与计算科学学院</div>
Copier après la connexion


CSS的盒子模型3

☆CSS布局——定位

◇ position : static | absolute | fixed | relative

static :  默认值。无特殊定位,对象遵循HTML定位规则。 
absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义。
fixed :  未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。 
relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置。

☆CSS布局——图文混排

☆CSS布局——图像签名

示例:

<style type="text/css">div {	border: #f00 1px solid;	width: 200px;	height: 100px;}#div1 {	background-color: #f00;	/*position: absolute;	top: 50px;	left: 80px;*/	/*设置成绝对定位时,可以看成该对象与其他的不位于同一个平面,因此,其他的可以直接置顶排列。	并且,当绝对定位的对象与其他对象(相对定位和不设置定位)出现重叠的时候,设置了绝对定位的对象将位于其他的对象的下方*/}#div2 {	background-color: #0f0;	width: 300px;	position: relative;	top: 20px;	left: 20px;}#div3 {	background-color: #00f;	/*position: relative;	top: 10px;*/	/*相对定位只能根据前者不设置相对定位时应该处的位置来相对的,若前者设置了相对定位,此处会将其置之不理,任然认为前者处于原处。	并且,当相对定位的对象与其他对象(绝对定位和不设置定位以及出现的比其早的相对定位的对象)出现重叠的时候,设置了相对定位的对象将位于其他对象的上方*/}#div0 {	position: absolute;	top: 400px;	left: 150px;}#div4 {	position: relative;	background-color: #f00;}#div5 {	position: relative;	background-color: #0f0;}#div6 {	position: relative;	background-color: #00f;}</style>	<div id="div1">信息科学与工程学院1</div>	<div id="div2">土木工程学院1</div>	<div id="div3">数学与计算科学学院1</div>	<hr>	<div id="div0">		<div id="div4">信息科学与工程学院2</div>		<div id="div5">土木工程学院2</div>		<div id="div6">数学与计算科学学院2</div>	</div>
Copier après la connexion


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal