书签 分享 收藏 举报 版权申诉 / 27

类型html+css学习笔记.docx

  • 文档编号:17079375
  • 上传时间:2023-07-21
  • 格式:DOCX
  • 页数:27
  • 大小:1.10MB

四,表格

五,表格的色彩

六,多窗口页面

七,会移动的文字(marquee)

基本语法:

..

文字移动属性的设置

方向#=left,right

向左移

向右移

方式:

#=scroll,一圈一圈绕着走;slide,只走一次;alternate,来回走;

循环#=次数;若未指定则循环不止

速度

延时

八,多媒体页面

九,

(完结)

一,div+css

Div+css开山篇。

Div+css基本思想:

数据和样式分离。

Div+css是一种目前比较流行的网页布局技术,div来容纳需要显示的数据,需要显示的数据可能是数据、图表。

Css用来指定怎样显示,从而做到数据与显示相分离的效果。

原理图如下:

Div元素是用来为html文档内大块的内容提供结构和背景。

Css是cascadingstylesheets(层叠样式表)的缩写,用来表现html或xml等文件式样的计算机语言。

可以这样理解div+css:

Div是用于存放内容的容器

Css适用于指定放在div中的内容如何显示,包括这些内容的位置和外观。

Css使用的基本语法

选择器{

属性1:

属性值

属性2:

属性值

}

案例1:

Css滤镜技术:

所有的图片变成黑白色。

案例:

所有图片变成黑白色,当鼠标放上时变正常;

Demo3.html代码

页面效果:

选择器:

(核心内容)

常用的四种选择器:

1.类选择器(class选择器)

2.Id选择器

3.Html元素选择器

4.通配符选择器

选择器就是在css中创建,而在网页页面(html,jsp,php,)中使用。

Css文件可以使用在各种文件,

一,类选择器

如案例一;

.类选择器{

属性名:

属性值;

……}

二,#id选择器

基本使用:

#id选择器{

属性名:

属性值;

}

案例3:

三,html元素选择器

某个html元素{

属性名:

属性值;

}

案例4:

四,通配符选择器

案例5:

我们希望所有的超链接

(1)默认样式是蓝色,24px没有下划线;

(2)当鼠标移动到超链接时,自动出现下划线;

(3)点击后,超链接变成红色;

代码:

当对两段文本的其中一个进行不同于另一个的操作时,需要这么做:

(也是个知识点)

五,通配符选择器

*{margin:

0;padding:

0}

可以让所有html元素的外边距和内边距都默认为0,有时特别有用。

该选择器可以应用到所有html中;但是其优先级最低。

六,父子选择器

对前面四个选择器的组合使用,特别强调某个字;

选择器的细节问题:

1,父子选择器的使用

2,父子选择器可可以有多级,但是在实际开发中不要过三层;父子选择器有严格的层次关系;父子选择器不局限于什么类型的选择器,比如前面可以是id,类等。

七,选择器的深入探讨

1.一个元素可以同时有id和类选择器;

新闻一

2.一个元素最多有一个id选择器,但是可以有多个类选择器;使用方法如下:

<元素class=“类选择器1,类选择器2”>

当两个类选择器发生冲突时,则显示顺序按css文件中1和2为前的为准;

3.把各个类选择器的公共部分提取出来,可以减少css的冗余.

4.Css文件本身也会被浏览器从服务器下载到本地才能显示效果;

八,行内元素和块元素

从实例我们可以看出,行内元素它只占能显示自己内容的宽度,而且他不会占据整行;块元素他不管自己的内容有多少,会占据整行,而且会换行显示。

常见的行内元素有

常见的块内元素有

有一些css属性对行内元素不生效,比如margin,left,right,height建议尽可能使用块元素则用div,对浏览器有关系。

行内元素和块元素是可以互换的,使用display:

inline表示使用行内元素显示;

Display:

block表示使用块元素显示;

(重点)盒子模型

∙element:

元素。

∙padding:

内边距,也有资料将其翻译为填充。

∙border:

边框。

∙margin:

外边距,也有资料将其翻译为空白或空白边。

盒子模型的经典案例:

代码:

效果:

边框四周的框有无是可以自定义的;

综合案例2:

分析思路:

用ul;

 

PHP核心课程:

Web开发介绍

1.静态web开发

2.动态web开发

我们希望莫个页面显示当前时间

php的基本概念

快速入门案例

Test.php

php

Echo‘hello’;

?

>

Apache中文手册

配套讲稿:

如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制:

部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词:
html css 学习 笔记
提示  冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:html+css学习笔记.docx
链接地址:https://www.bingdoc.com/p-17079375.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2


收起
展开