div+css基础

Div+css技术

Div是用于存放文字,图片,元素的容器

Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表)

 技术分享

Html 文件

<!--必须引入的文件-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<!--引入my.css文件-->

<link href=‘my.css‘ type =‘text/css‘ rel=‘stylesheet‘/>

</head>

<body>

<!--指向style1-->

<div  class=‘style1‘>

<table>

<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>

<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>

</table>

</div>

</body>

</html>

 

Css文件

/*选择器*/

/*margin:上右下左*/

.style1{

         width:100px;

         height:200px;

         border:1px solid red ;

         color:blue;

         margin:100px 200px 300px 400px;

}

/* 父子选择器table*/

.style1 table{

         width:99px;

         height:180px;

         border:1px solid black;

}

/*父子选择器td*/

.style1 table td{

         border:1px solid black;

         text-align:center;

}

 

CSS的必要性

使用<span>以及强大的工具

使用IDE(集成开发环境)myeclicpse

因为myeclipse 带有提示功能

 

一般的网站头部文件解释

Eclipse的快捷键设置(content Assitant),把它配置成~

在windows –prefrecnse-输入key-输入content-content Assitant –快捷键改成·

对于新建的html文件的解释

 技术分享

 技术分享

使用span 格式 ,看到使用Css的一般格式

<元素名  style =”属性名:属性值;属性名:属性值;”>

元素可以是html之中的任意一种

属性名和属性值要参考W3CSCHOOL的文档

运行:

 技术分享

 

然后使用CSS来统一风格

CSS 分类:内部CSS,外部CSS

使用内部CSS

 技术分享

 

 

汶川大地震时使所有的图片和文字全都变黑白-----------------滤镜技术

 技术分享

 技术分享技术分享

CSS选择器 

id>类选择器>html选择器

1 类选择器

 

编写一个css文件,在HTML中引入CSS,使用CSS定义的类控制器

 技术分享

 技术分享

 

可以直接拖入CSS

 

2      id选择器

 技术分享

 技术分享

注意:是#

3 html选择器

 技术分享

 技术分享

这个是控制全局样式的选择器,优先比较低,优先级是:id>类选择器>html选择器

 

练习:

对于超链接的处理:

 技术分享

 技术分享

通配符选择器

作用:用来解决不同浏览器之间的左边距和上边距不统一的问题,有时候特别有用

/*使用通配符选择器,对外边距和内边距进行清零*/

*{

    /*margin: 0px;*/   

/*  margin:10px 0px 0px 10px; */ /*代表着上  右   下  左  逆时针方向旋转*/

    margin:10px 0px 0px ;  /*代表着上  左右   下  */

    padding: 0px;  

}

CSS 综合使用

一行字内的格式风格有所不同   利用id选择器

#style2{

    font-size: 50px;

    color: green;

    font-style: italic;

}

 

/*父子选择器*/

#style2 span

    color: red;

    font-size: 60px;

}

 技术分享

 

2  父子选择器在id 选择器和 class 选择器都可以

但是id 选择器要大于 class 选择器

 

3 父子选择器还可以多层出现  style2—span-span

#style2 span span {

    color: red;

    font-size: 60px;

}

4 一个元素只可以有一个id选择器,但是可以有多个class选择器

 技术分享

有两个class 选择器的时候,看谁写在css文件的后面以谁为主

 技术分享

 

四类选择器的优先权:id  class  html  通配符

 

然后,优化代码部分,提取共性的css

例如

 技术分享

 

练习题

 技术分享

 技术分享

 

 

 

Css文件代码

 技术分享

 技术分享

 

块元素和行内元素

行内元素:Span 元素:里面的东西有多大就多大,只占内容的宽度,默认不会换行,一般放文本或者其他的行内元素

块元素:Div,p 元素:不管内容多少,要换行,同时占满整个一行(太霸道),可以放文本,行业元素,块元素

 技术分享

 技术分享

 技术分享

 

块元素和行内元素互换

Display:block  行内元素转块元素

Display:inline  块元素转行内元素

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。