网页设计(HTML+CSS+Div)学习笔记

记录个人的学习内容,学习路线,有不对的地方希望得到指点。

因为是学习 记忆的内容,只是针对我个人使用,所以写的会潦草一些。需要补充或者写错的内容,一定要和我说!!!!有评论必回!!!!

目录

目录

第一章 HTML和css的网页概述

标题标签

段落标签

水平线标签

换行标签 (强制换行的作用)

 

第二章 从零开始构建HTML网页

页面表头部分内容的意思

文本样式标签

文本格式化标签

2.3图文混排

绝对路径和相对路径

特殊字符标签

第三章 使用CSS技术美化网页

CSS样式规则

引入CSS样式表的三个方法

CSS基础选择器

CSS字体样式属性

font-size

font-family

font-weight

font-style

font综合设置字体样式

@font-face规则

 

2.CSS文本外观属性

color:

letter-spacing

word-spacing:单词间距

line-height行间距

text-transform文本转换

text-decoration文本装饰

text-align水平对齐方式

text-indent首行缩进

white-space空白符处理

text-shadow阴影效果

text-overflow标示对象溢出文本

word-wrap用于实现长单词和URL地址内部进行换行

CSS复合选择器

CSS的层叠性和继承性

CSS的高级特性

CSS的优先级

第四章 CSS盒子模型

认识盒子模型

内边距

外边距

块级元素居中:

通常先清除元素的默认内外边距

背景 背景颜色 背景图像的控制:平铺固定等

background-color背景颜色属性

background-image背景图像属性

background-repeal图片平铺属性

background-position:图像位置属性                                                                             

background-attachment图像固定属性

背景属性的综合运用:

 

4.2盒子模型相关的属性

块级元素和行内元素

 

元素类型的转换

外边距合并

第五章 列表与超链接

无序列表

无序列表的type属性值

有序列表

无序列表的相关属性

定义列表

列表嵌套

列表样式

list-style-type控制无序列表和有序列表的项目符号

list-style-image 设置项目图像

list-style-position列表项目符号的位置

综合属性

5.3超链接标记

5.4链接伪类控制超链接

超链接标记的伪类

第六章 HTML表单

表格标记

table标记属性

标记属性

标记属性

为了更好的区分网页的头部,主体页脚

CSS控制表格样式

表单

表单控件

创建表单

表单控件

input控件

textarea控件

select控件

CSS控制表单样式

第七章 浮动与定位

元素的浮动

float属性值

overflow属性

元素的定位

定位模式

边偏移

第八章 布局与兼容

进阶拓展之CSS高级技巧

实战开发(上)

实战开发(下)




第一章 HTML和css的网页概述

标题标签

h1-h6

<hn align="对齐方式"> 标题文本</hn>

对齐方式有:

left

center

right

段落标签

<p align="">段落文本</p>

 

水平线标签

<hr 属性="属性值"></hr>

属性有:align:left right center

size水平线的粗细:npx

color:#RGB

width:可以是确定的像素值,也可以是浏览器窗口的百分比

 

换行标签 (强制换行的作用)

</br>

 

第二章 从零开始构建HTML网页

页面表头部分内容的意思

<title></title>意思是头部标签,就是网页的名字存放在这里

<meta/>用于定义页面的元信息,但元信息不会显示在页面中,本身不包含任何内容,仅仅表示网页的相关信息。

<meta name="名称" content="值"/>可为搜索引擎提供信息,name用于提供搜索内容的名称 content提供对应的搜索内容的值

<meta name="keywords" content="千图网,免费素材下载">

<meta name="description content=""_">

<meta name="author" content=" ">

@@@@不懂p29页

<meta hettp-equiv="名称" content="值">

文本样式标签

<font 属性="属性值">文本内容</font>

属性:

face字体:微软雅黑 宋体 黑体

size文字大小:1-7取整数值

color颜色

 

文本格式化标签

<b></b>和<strong></strong>粗体

<u></u>和<ins></ins>下划线

<i></i>和<em></em>斜体

<s></s>和<del></del>删除线

 

2.3图文混排

图像标签<img/>

属性:

src路径

alt 文本 图像不能显示时的替换文本

title 文本 鼠标指针悬停时显示的内容

width 像素值 图像的宽度 如果width和height同时设置,则会扭曲原图的大小;如果只设置一个值,则另一个属性会依据前一个设置的属性自动调整

height 像素值 图像的高度

border 数字 图像边框的宽度  通常情况下是没有边框的,通过border可以设置边框的宽度

vspace 像素值 图像顶部和底部的留白

hspace 像素值 设置图像左侧和右侧的留白

aligh:"对齐方式"

left

right

top图像的顶部和文本第一行对齐

middle图像的中间和文本第一行对齐

bottom图像的底部和文本第一行对齐

绝对路径和相对路径

绝对路径一般是指带有盘符的路径或者有完整的网络地址

相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。

相对路径举例:

1.图像文件和html文件位于同一文件夹:<img src="logo.gif"/>

2.图像文件位于html文件的下一文件夹:<img scr="img/img01/logo.gif"/>

3.图像文件位于html文件的上一级文件夹,在文件名之前加../:<img scr="../logo.gif"/>,如果是上两级,则加../../

 

特殊字符标签

常用的: 空格符  

其他的看课本p37

 

第三章 使用CSS技术美化网页

CSS样式规则

h1{color:green; font-size:14px;}

1.属性和属性值之间用冒号链接

2.键值对之间用分号间隔

3.属性的属性值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号

如:p{font-family:"Time New Roman"}

4.注释的格式:/*...*/

5.空格在CSS中是不被解析的,因此可以利用空格进行排版

 

引入CSS样式表的三个方法

行内式

通常CSS是写在<head>头部标签中下,行内式却是写在<html>根标签中

<h1 style="font-size:20px; color:blue;">

内嵌式

就是将CSS代码集中写在html文档的<html>头部标签中,并用style标签定义类型

<head>

<style type:"text/css">

<h1 style="font-size:20px; color:blue;">

</style>

</head>

外链式

是将所有的样式放在一个或多个以".css"为扩展名的外部样式表文件中,通过<link/>标签将外部样式表文件链接到html文档中

<head>

<link href="CSS文件路径" type="text/css" rel="stylesheet">

</head>

href:URL可以是绝对路径,可以是相对路径

type:文档类型

rel:定义当前文档和被链接文档之间的关系,这里需要指定为"stylesheet"表示被链接的文档是一个样式表文件

外链式成功后,在DW的标签栏会自动出现 style.css 表示被成功链入

 

CSS基础选择器

1.标签选择器

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2.类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器最大的优势是可以为元素对象定义单独的样式。

3.id选择器

id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

元素id名是唯一的,只能对应于文档中某一个具体的元素

4.通配符选择器

通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

在实际的网页开发中不建议使用通配符选择器,因为会对所有的html标签都生效

 

 

CSS字体样式属性

font-size

字号大小 最常用单位px像素 其他可用单位P51

font-family

字体

 

font-weight

字体粗细

属性:normal默认值

bold粗体

bolder更粗

lighter更细

100~900定义由细到粗字符,其中400等于normal

 

font-style

字体风格

属性:normal标准

italic斜体

oblique倾斜

日常使用italic

 

font综合设置字体样式

选择器{font:font-familt font-size font-style font-weight font-size/line-height(行高) font-family}

 

@font-face规则

用于定义除服务器以外喜欢的字体

用法

@font-face{

font-family:字体名称;

src:字体路径

}

 

2.CSS文本外观属性

color:

文本颜色

取值方式:

1.red green blue

2.十六进制,如:#FF0000

3.RGB代码 rgb(255,0,0)

p{color:red}

 

letter-spacing

:字间距

允许使用负值,默认是normal

使用单位是像素

h2{letter-spacing:-0.5px}

 

word-spacing:单词间距

允许使用负值,默认值是normal

 

line-height行间距

使用单位有 px像素 em相对值 %百分比

 

text-transform文本转换

属性:

none不转换

capitalize 首字母大写

uppercase全部字符转化为大写

lowercase全部字符转化为小写

 

text-decoration文本装饰

none

underline下划线

overline上划线

line-through删除线

并可以同时设置多个值

 

text-align水平对齐方式

left左对齐

right右对齐

center居中对齐

h2{text-align:center;

}

 

@@[注意text-align只适用于块级元素,对行内元素无效,如果需要对图像设置对齐,则可以添加一个父biaoqian<p></p>]

 

text-indent首行缩进

可以设置不同的单位 px em %

 

white-space空白符处理

normal空格空行无效,满行后自动换行

pre空格空行原样展示

nowrap空格空行无效,强制文本不能换行,除非遇到<br/>内容超出边界则会自动增加滚动条

 

text-shadow阴影效果

选择器{text-shadow:h-shadow v-shadow blur color;}

水平偏移距离 垂直偏移距离 模糊半径 阴影颜色

p{text-shadow:10px 10px 10px red}

也可以给文字增加多个阴影效果

p{text-shadow:10px 10px 10px red,20px 20px 20px green}红色绿色阴影效果叠加

 

text-overflow标示对象溢出文本

属性:

clip修剪溢出文本,不显示省略标签"..."

ellipsis用...标签替代文本

【需要注意的是:white-space:nowrap 样式不能换行; overflow:hidden隐藏溢出文本 text-overflow:ellipsis样式显示隐藏标签】

 

word-wrap用于实现长单词和URL地址内部进行换行

属性

normal 浏览器默认处理

break-word在“文本框”内部进行换行

 

 

CSS复合选择器

1.标签指定式选择器

主要由两个选择器组成 一是标签选择器 二是class选择器或id选择器,中间不能有空格

例如"h3.special","p#one"

2.后代选择器

后代选择器是指按照就近原则,且后代选择器不限于使用两个元素,如果需要加入更过的元素,只需在元素之间加上空格即可。

3.并集选择器

只不同的段 类型 id之间同时选择,只需要用英文逗号间隔开就行了

例如:h3,.special,#one{color:red;}

 

CSS的层叠性和继承性

所谓层叠性是指多种CSS样式的叠加

继承性是指子标记会继承父标记的某些样式,并不是所有的CSS属性都可以继承

CSS的高级特性

CSS的优先级

两个或更多规则应用在同一元素上,就会出现优先级的问题

1.继承样式的权重为0

2.行内样式优先

3.权重相同时,CSS遵循就近原则

4.CSS定义了一个!important命令,该命令被赋予最大的优先级

注意:复合选择器的权重为组成它的基础选择器权重的叠加,但是这种叠加并不是简单的数字之和。

第四章 CSS盒子模型

认识盒子模型

边框 边框样式 边框宽度 边框颜色单侧边框 边框的综合属性

border-top

border-right

border-bottom

border-left

 

border-top-style 样式

border-top-width 宽度

border-top-color 颜色

 

border-style 上 左右 下

none

solid

dashed虚线

dotted点线

double 双实线

 

border-color颜色

#ccc

rgb(r,g,b)

 

border-width 宽度 px为单位

 

内边距

padding-top

padding-right

padding-bottom

padding-left

padding

 

auto自动 默认值

px 百分比%

 

外边距

margin-top

margin-right

margin-bottom

margin-left

margin

 

块级元素居中:

当块级元素应用宽度属性width

并将左右的外边距都设置为auto,

可使块级元素水平居中

margin:0 auto 利用margin实现块元素水平居中

margin:5px auto 利用margin实现块元素水平居中

且上下拉开5像素边距

 

为了更方便的控制网页中的元素,在制作网页时

通常先清除元素的默认内外边距

*{padding:0;margin:0}

 

背景 背景颜色 背景图像的控制:平铺固定等

background-color背景颜色属性

 

background-image背景图像属性

background-image:url(图片路径)

 

background-repeal图片平铺属性

repeat沿水平垂直两个方向平铺

no-repeat不平铺,图像只位于左上角

repeat-x只沿水平方向平铺

repeat-y只沿竖直方向平铺

 

background-position:图像位置属性                                                                             

单位数值:设置图像左上角为元素中的坐标

background-position:20px 20px

预定义关键字:

水平方向 left center right

垂直方向 top center bottom

百分比

图像50% 50%

中心点与元素50% 50%的中心点对齐

0% 0%

图像左上角与元素的左上角对齐

 

background-attachment图像固定属性

scroll:图像随着页面一起滚动(默认)

图像固定在屏幕上,不随页面元素滚动

 

背景属性的综合运用:

background:背景色 url("图像") 平铺 定位 固定

 

4.2盒子模型相关的属性

网页是由多个盒子排列而成

宽度和高度决定了盒子的大小

 

块级元素和行内元素

块元素

块级元素比较霸道,是自己独占一行的

它是有高度和宽度的

例如:div p li ul ol dl table

行内元素

行内元素一行可以显示放置多个元素

行内元素是没有高度和宽度的

例如:strong em i b span font

 

 

元素类型的转换

display:[显示]

inline此元素将显示为行内元素

block块级元素

inline-block行内块元素

意思是在同一行内显示多个,有宽高度

比如input img

none该元素将被隐藏,不显示,也不占用页面

空间

 

 

外边距合并

外边距合并只出现在垂直外边距

出现情况:

1.两个并列关系的上下盒子

合并后这两个盒子会以外边距最大的为准

2.父子级盒子外边距合并

合并后这两个盒子会以外边距最大的为准

若需要小盒子距离大盒子有个上外边距

解决办法:给大盒子来个上外边框就可以

@@@【无法理解】

 

第五章 列表与超链接

列表分为 无序列表,有序列表,定义列表

无序列表

顺序不分前后,

<ul>

<li></li>【用于描述具体的列表项】

<li></li>

</ul>

用于定义无序列表。

无序列表的type属性值

disc(默认值)黑圈

circle白圈

square黑方块

 

有序列表

即为有排列顺序的列表

<ol>

<li></li>

<li></li>

</ol>

无序列表的相关属性

type属性值:1 a i/I

stare:数字

value:数字

 

定义列表

以百度百科为例,定义列表通常是图文混排

<dt></dt>标记中插入图片

<dd></dd>标记中放入对图片解释说明的文字

<dl>

<dt>名词1</dt>

<dd></dd>

<dd></dd>

</dl>

列表嵌套

在列表项中可能包含若干子列表项

列表样式

list-style-type控制无序列表和有序列表的项目符号

list-style-image 设置项目图像

基本格式ul{list-style-image:url(图片路径);}

list-style-position列表项目符号的位置

综合属性

5.3超链接标记

<a href="跳转目标" target=“目标窗口的弹出方式”>文本或图像</a>

锚点连接

<a href="#id名">连接文本</a>

‘’‘

<h3 id="one">连接文本</h3>

5.4链接伪类控制超链接

伪类不是真正意义上的类,它的名称是由系统定义的,通常由标记名,类名或id名加“:”构成

超链接标记的<a>伪类

第六章 HTML表单

表格标记

创建table表格,离不开

<table></table>定义一个表格

<tr></tr>定义表格中的一行

<td></td>定义表格中的单元格

table标记属性

在表格中创建一个table,相当于

<tr>标记属性

table标签只能控制行的高度,不能控制表格的宽度

<td>标记属性

注意:

当对某一个<td>标记应用width属性设置宽度时,该列中所有的单元格均会以设置的宽度显示

当对某一个<td>标记应用height属性设置宽度时,该列中所有的单元格均会以设置的高度显示

<th>标记

<th></th>标记用来设置表头,其文本默认加粗居中显示

 

为了更好的区分网页的头部,主体页脚

通常会设置<thead></thead><tfoot></tfoot><tbody></tbody>

这个只是为了给网页的结构标记,方便更好理解网页内容

但表格的实际效果并不会改变

 

CSS控制表格样式

表单

类似注册页面,就是表单

表单控件

表单控件是表单的核心

创建表单

用<from></from>标记来创建表单

method一般使用post,

表单控件

input控件

textarea控件

可以创建多行文本输入框

select控件

使用select控件定义下拉菜单

CSS控制表单样式

使用CSS可以轻松控制表单控件的样式,主要体现在控制表单控件的 字体,边框,背景 和 内边距 等。

第七章 浮动与定位

元素的浮动

所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素指定的位置的过程。

选择器{float:属性值;}

float属性值

注意!为了避免浮动对其他元素影响,需要清除浮动

 

overflow属性

元素的定位

元素的定位包括定位模式和边偏移两部分。

定位模式

边偏移

第八章 布局与兼容

进阶拓展之CSS高级技巧

实战开发(上)

实战开发(下)

  • 9
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值