Heim > Web-Frontend > HTML-Tutorial > CSS网页编程_html/css_WEB-ITnose

CSS网页编程_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:17:05
Original
1320 Leute haben es durchsucht

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>
Nach dem Login kopieren
☆ 2、style标签方式

<style type="”text/css”">    p { color:#FF0000;}</style>
Nach dem Login kopieren
☆ 3、导入方式 

<style type="text/css">     @import url(myDiv.css)</style>
Nach dem Login kopieren
☆ 4、链接方式

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

示例:

<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>	
Nach dem Login kopieren
姓名 年龄
张三 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>	
Nach dem Login kopieren
姓名 年龄
张三 23
李四 23
Jack 22


扩展选择器
☆关联选择器

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

p { color:#00FF00;}p b { color:#FF000;}<p>P标签<b>XXXX学院</b>段落样式</p><p>P标签段落</p> 
Nach dem Login kopieren
☆组合选择器

对多个选择器进行相同样式的定义。例如,我们想对“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">
Nach dem Login kopieren


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>
Nach dem Login kopieren

示例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>
Nach dem Login kopieren


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>
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage