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  块元素转行内元素

div+css基础的更多相关文章

  1. div+css基础教程

    本文存下来作为备忘. 第一节  了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...

  2. DIV+CSS 基础

    盒子模型:margin(边界),可被占位:border(边框):padding(填充):content(内容) 块元素: 默认占据一行,前后换行. 作为容器,装载块元素和行内元素,被装载元素的位置,会 ...

  3. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  4. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  5. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  6. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  7. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  8. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  9. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

随机推荐

  1. [原创]java WEB学习笔记54：Struts2学习之路--- 编写Struts2 的第一个程序，HelloWord，简述 package ，action，result

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  2. [分享]关于windows下的小技巧

    ----1．首先,决定您要增加到菜单中的文件类型,以及启动这类文件的应用程序.如果是某些在启动时会自动打开的新文件或让您可以立即使用的应用程序,如记事本.写字板或画图等,就不需要特别的准备工作.但如果 ...

  3. POJ 2947 Widget Factory（高斯消元）

    Description The widget factory produces several different kinds of widgets. Each widget is carefully ...

  4. 解决Android抽屉被击穿问题

    1,创建一个抽屉DrawerLayout,在V4包下android.support.v4.widget.DrawerLayout,在要设置抽屉的布局中设置android:layout_gravity= ...

  5. eclipse的自动提示功能

    一般情况下按ALT+/即可提示,若想按任意字母都有提示,则可以打开eclipse的自动提示功能,打开或关闭该提示功能的步骤如下: 打开eclipse后一次点Window->Perferences ...

  6. c++ 容器（list学习总结）

    list是一个线性双向链表结构,它的数据由若干个节点构成,每一个节点都包括一个信息块(即实际存储的数据).一个前驱指针和一个后驱指针.它无需分配指定的内存大小且可以任意伸缩,这是因为它存储在非连续的内 ...

  7. 《zw版·Halcon-delphi系列原创教程》 2d照片-3d逆向建模脚本

    <zw版·Halcon-delphi系列原创教程> 2d照片-3d逆向建模脚本 3D逆向建模,是逆向工程的核心要素.       3D逆向建模,除了目前通用的3D点云模式,通过2D图像实现 ...

  8. 锋利的JQuery（六）

    $.ajax():可以设定beforeSend.error.success.complete等 $.getScript():加载JS文件 $.getJSON():加载JSON文件 $.each():通 ...

  9. SQL的主键和外键约束(转)

    SQL的主键和外键的作用: 外键取值规则:空值或参照的主键值. (1)插入非空值时,如果主键表中没有这个值,则不能插入. (2)更新时,不能改为主键表中没有的值. (3)删除主键表记录时,你可以在建外 ...

  10. OpenStack 新加计算节点后修改

    Contents [hide] 1 前提 2 iptables禁止snat= 3 vlan支持 4 Quota支持 5 修改物理资源设置. 6 添加collectd 7 重启服务 前提 我们使用fue ...