define和inline的区别约束和outline约束的区别

前端&&HTML相关笔记&适合零基础的学员
2种网页之间的区别在于是否与数据库有交互。
2、标记的划分&&
什么是标记?
使用特定的单词或字母串代表特定意思。
ALT="前端&&HTML相关笔记&适合零基础的学员"
TITLE="前端&&HTML相关笔记&适合零基础的学员" />
&&&/font&标记名称 &&/&
face="宋体"&标记名称&......&/&/font&标记名称&
3、网页的初始代码
&&{最简单最常用的一种方法}
文本标题/网页标题
body内部全部添加网页的身体
DOCTYPE:文档类型
PUBLIC:公共的
&可以看到web网页源代码
&&协会名称
&互联网代码全部要遵循
Transitional
网站的标题
&&&&主体部分,所有的网页内容
能看到的基本上都是在body内写的
4、标记的学习
&需要加粗的内容
&&强制换行
一段的内容
&&独自为一段,且会换行+空一行
&&需要倾斜的文本
&&&需要呈现删除状态的文本
&&&需要上标显示的文本
&&&需要下标显示的文本
下划线的标记
&需要添加下划线的文本
注意:*******
标记的嵌套一定是顺序嵌套,不可以打乱顺序。
对标记来做修饰说明的
属性的书写规范
face="宋体"&标记名称
&&属性名称=“属性值”
属性名称=“属性值”/&
face="宋体"&标记名称
&&属性名称=“属性值”
属性名称=“属性值”&.....&/&/font&标记名称&
ALT="前端&&HTML相关笔记&适合零基础的学员"
TITLE="前端&&HTML相关笔记&适合零基础的学员" />图片的地址"
alt="提示文本" title="提示文本"/&
src="图片的地址"
alt与title需要同时存在,为了解决浏览器的兼容性。
&D:\1602\day06\新建文件夹/people.jpg
&&src="图片名称"
&src="目录名称/图片名称"
&&&&上一级
&src="../图片名称"
&一个../代表跳出一级
标题字标记
&&&n的范围:1-6
字体越来越小
独自占一行,并且会起到换行隔一行的效果
文本标记(字体标记)
size="字体大小"
face="字体类型"&......
size=""1-7;字体越来越大
face=“字体类型”
链接的作用:点击文字或者图片就可以打开或者跳转到另外一个页面,
那么这个文字或者图片就是超链接。
超链接的标记
&href="需要链接的地址"
&&遵循图片的地址规则
target="_self/_blank/_parent/_top"
&&在自身页面打开(默认选择)
&在新的页面打开
&在父窗口打开(不了解)
&&&&在顶层打开(不了解)
图片也可以是超链接,并且图片成为超链接之后,
鼠标放上去显示为小手的形状。
```````````````锚点的使用`````````````````链接也可以应用在锚点上
锚点既可以是同页面的使用,也可以是不同页面
不同页面需要注意添加跳转页面的URL。
````````````````````````````````Noname3.html里面写
Noname4.html里面写
························返回顶部链接
````````````````````````````````空连接
````````````````````````````````
````````````````````````````````
&&Web前端方向群:
用字符串表示特殊符号,在页面上能够正常显示出特殊符号的
'' 单引号 &'
“” 双引号
&&版权标记
&&注册商标
如果在你的页面中出现大片的空白格,浏览器只会解析成1个空格,
如果想形成多个空格,需要使用实体
2.表格 &由行和列组成
&1个TR代表的是1行
&1个TD 代表的是1列
&·······················border=""
&·······················width=""
&&表格的宽度
&·······················height=""
&表格的高度
&cellpadding=""
&表格的内边距
&表格内文本域边框的距离
默认值一般是0;
bgcolor=""
表格的背景颜色
bordercolor=""
&表格边框的颜色
background="图片的地址"
&表格的背景图片
align="center(居中)/left(居左)/right(居右)"
表格在页面中的水平位置
tr行内的属性
height=""特别指定1行的高度,对其他行没有影响
align="center(居中)/left(居左)/right(居右)"
表格内文本的位置
vaglin="top(上)/middle(中间)/bottom(靠下)"
表格内文本垂直方向的位置
&&&&&&&第二行右下角
bgcolor=""
&1行内的颜色
td列内的属性
&1列的宽度都被定义
align="center(居中)/left(居左)/right(居右)"
表格内文本的位置
vaglin="top(上)/middle(中间)/bottom(靠下)"
表格内文本垂直方向的位置
html内的文档如何注释
1行内的合并 &
colspan="需要合并的列数"
colspan="需要合并单元格的个数
&&简称就是合并列
多行内的合并
rowspan="需要合并的行数"
rowspan="需要合并单元格的个数"
简称就是合并行
如果你的表格单元格合并即跨行也跨列,
我们需要遵循先行后列原则。
表单的作用:收集客户端的信息,与服务器端做交互。
表单的标记:
&input类型控件
&value="提示文本"/&
type="text" 文本控件类型
&值可以随意命名,作用是告诉后台此控件收集什么信息
value="提示文本"可以用placeholder来代替
密码框控件
请输入密码,密码包含大写字母,小写字母以及特殊符号"/&
type="password"
&密码框的类型
size="数值"
&控制框的宽度
复选框控件
type="checkbox"
&复选框控件的类型
checked="checked"默认被选择
作用是提交后台处理时可以
清晰知道所传递过去的值(暂未了解)
单选框控件
type="radio"
单选框的类型
checked="checked" 默认被选择
******注意:单选框的name值必须保持一致,才可以起到单选效果。
&非input类型的控件
单选下拉框
<option VALUE="
<option VALUE="
<option VALUE="
<option VALUE="
<option VALUE="
<option VALUE="
<option VALUE="
一组是一个选项卡,
如年-月-日格式的,
········································································多选下拉框
吃饭"&吃饭
睡觉"&睡觉
打豆豆"&打豆豆
学习"&学习
多选下拉框必须在select标记内加上属性:multiple="multiple"
文本域控件
readonly="readonly"
disabled="disabled"&
&文本域可以直接书写的行数
&如果你的文本
超出文本域所规定的行数,则会出现滚动条。
&控制文本域的文字输入列数,如果您的输入超过给定
&&&&&&&值,则会出现换行。但是一般情况下,不采用cols.
readonly="readonly"
&只读属性,不可修改
disabled="disabled"
&&说明此内容已经失效。
&提交控件&
&按钮上显示的文本"/&&
&图片提交按钮&
&图片的路径"/&&
在浏览器中看不到任何效果,需要结合后期脚本语言实现效果。(暂未了解)
&重置按钮&
按钮显示的文本"/&&
&普通按钮&
按钮显示的文本"/&&
没有任何实际意义,需要结合js、jquery实现特效
表单中的数据需要提交到的页面"
&method="提交方式"&中的属性&
&method="提交方式" &值有:get/post&
&get提交方式,所有提交的内容都直接附加在地址栏上
&&&很不安全。
&post提交方式,所有提交的内容都可以再浏览器的响应头部上
看到,但是相对安全。
html快速入门
1,HTML:概述:Hyper Text Markup
&&&&&&&&&超级
文本 标记 语言
&&(超文本标记语言)
html文件 以 &.html或
2, 基本语法:
标记语法:在HTML中描述功能的符号,不同标记具有不同的功能。
3, 标记的组成:
face="宋体"&标记名称&:
4,标记的类型:
封闭类型的标记:又开始也有结束的标记,“双标记”、、
face="宋体"&标记的名称&
&&/&/font&结束标记&:
注意内容是受标记样式控制的
非封闭类型的标记
有开始,可以没有结束:自己既可以表示开始也可以表示结束。
face="宋体"&标记名称&或&&/font&标记名称/&
单标记,本身就是一段独立的功能
ALT="前端&&HTML相关笔记&适合零基础的学员"
TITLE="前端&&HTML相关笔记&适合零基础的学员" />:图片
三,元素:就是标记。
从开始标记,开始
&到结束标记之间的所有的内容,都统称为元素。
&&&&&元素:标记,属性,内容
元素嵌套:在一个元素内部又增加了另一个元素。
一个html 界面就是各种各样的元素嵌套所组成的。
face="宋体"&标记1&
face="宋体"&标记2&&/&/font&标记2&
face="宋体"&标记1&
嵌套顺序:
四,代码缩进:
嵌套代码中,子集元素前,要通过几个空格来表示层级关系。
嵌套标记写法:
1,开始结束一起写:
五,属性和值:
属性:修饰元素不同显示效果的内容,必须,只能声明在开始标记中,并且
&属性 &与 &标记名称
&中间用 空格分开
语法:&&/font&标记 属性&
&&&&&/font&标记&
在一个元素中,属性可以有多个,多个属性之间用空格分开,排名不分先后。
语法:&&/font&标记 属性1="值" 属性2="值"
&&。。。。。。&&/&/font&标记&
标准属性:
id:表示元素在页面的唯一名称
title:鼠标移入到元素上时,所提示的文本内容
class:定义元素的
&类样式(与CSS相关)
style:定义元素的内联样式(与CSS相关)
html注释:通常会将 对代码的解释说明 放在注释中
注意,1,注释不能嵌套
&&&&&&2,注释不能写在标签内
值:最终,确定显示效果的内容
HTML 文档结构:
strict=“严格的”
1,文档类型声明,用于指定html的文档的
2,出现在html文档最顶层
3,html页面:位置
&&数量有且只有一个 标签 &
a,网页头部负责定义网页的全局信息
&定义页面元数据
引入javascript
&&定义内部式样
网页主题:
2016年0308
图像和链接:
&&&url"地址"
&&目录(WEB站点中存储文件的文件夹)
什么是URL:Uniform Resource Locator
统一资源定位器:所称--路径 地址
从一个位置到目标位置所经过的路线描述
url的表现形式:
1.绝对路径--所谓的绝对路径是指从资源文件目录及的最高级目录开始查 找,获取网络资源A.协议-主机名称(域名或者ip地址)各级目录名称-文
件名称、、、或者获取本机资源---最高及目录就是文件所在的盘符
弊端:不能更换计算机,不适合程序的移植。
2.相对路径--是通过当前文件与资源文件之间的位置关系来进行查找
从当前位置出发找到资源文件所在位置所经过就是相对路径
位置关系:相对路径/(平级)/.jpg
子集关系:先进入文件夹/找到文件
先返回"../向上返回一级目录“url:"../pic.jpg"”上一级目录 ,再查找
&&&&&../../images/admin/login.jpg
同级别直接找,子目录先进入,父目录先返回
3.根相对路径--永远都是从WEB站点的根目录开始查找
语法:/images/login.jpg
注意:路径要严格遵循大小写
根相对目录只有将WEB项目部署到服务器时才可用
以上三种形式的本质区别是查找资源文件的起始位置不同
2.图像:图像格式--GPEG采用有损压缩算法,压缩比较大,但文件小
jif:支持动画和透明图像
PNG:支持透明色,但不支持动画,采用无损压缩。
图像元素:标签<img
ALT="前端&&HTML相关笔记&适合零基础的学员"
TITLE="前端&&HTML相关笔记&适合零基础的学员" />或<img
ALT="前端&&HTML相关笔记&适合零基础的学员"
TITLE="前端&&HTML相关笔记&适合零基础的学员" />
属性:src要显示图像的URL(绝对,相对,根相对)
width:"宽度"
height:"高度"
数字作为值,像素(px)作为单位
注意:width或height &如果只给定一个属性的话
那么图片会按照给定的值进行等比缩放。
&&&&&alt:作用于
老版本浏览器支持,现在主流浏览器支持较差
注意问题:1.align 尽量加在块级元素中,在行内元素没有作用
2.有关标签嵌套问题:只能嵌套文本,图像,行内元素,绝对不能嵌套块级元素,否
则的话块级元素会被P元素拆开
3.Hn标题,一般只能嵌套文本或者行内元素
4.div允许嵌套任何元素,(除了html ,body ,
head之外)
5.行内元素不允许嵌套块级元素
链接:允许用户进行点击操作,可以通过连接来表示典型表,用户点击文字
标签:内容属性:链接URL添加了href属性之后就可以击,否则没有效果
返回页面顶部
可以连接到javascript功能
锚点:在文档的任意一个位置做一个记号随时随地可以跳转到该标记的位置处
使用方式:定义锚点--a,
b,任何一个ID属性--&&/font&标签 id="ID值"&&/&/font&标签&
连接到锚点:--跳转到本页面的锚点处
---跳转到其他页面指定锚点
什么是表格:--组织结构化信息的容器,表格式有一系列的“单元格”
按照从左到右,从上到下的顺序排列起来的,
&&&定义为行
列--数据只能放在TD当中
注意,默认情况下,所有行的列数都是统一化的,即:每行的列数都一样
表格标题:出现的位置在表格之上,水平居中。
注意:1.caption的位置位于所有TR之上,
table的属性:width:宽度 &height:高度
align:表格的水平对齐方式
(表格在其容器内的水平对齐方式--取值:left &&center
border:边框--边框的宽度--以px为单位数值
bgcolor:表格背景颜色
cellpadding:内边距
&&&&&&&&&&cellspacing:单元格与单元格之间的距离
align:当前行数据的水平对齐方式
valign:当前行数据的垂直对齐方式(top上
&&middle中
&&bottom下)
td的相关属性:
colspan:设置单元格的跨列
th:标记与td同级别---th:标题,当前列的内容,以标题的样式呈现出来
(加粗显示,水平居中)
表格的复杂应用:
1,行分组的概念:table--可以将数据划分为三大部分:表头(
2,不规则的表格的实现:改变传统表格的显示模式,每行的列数可以不同
实现方式:通过设置
&跨行(rowspan) &和
&跨列(colspan)合并几个单元格
被合并掉的单元格最终一定要从代码中删除出去,否则会多出几个单元格
跨行:从某个单元格开始包括自己,向下合并几个单元格
3,表格的嵌套问题:在单元格中,允许放置另一个表格:
基本上什么都可以嵌套--但是不能放tr
里面包含一个
4,列表:也是按照一定的格式来显示数据的。
5,格式:默认情况,从上到下的显示数据。
什么样的数据适合放在列表中:会将
&&具有相似特征 &或
&明显具备先后顺序内容放在 列表中
6,列表组成:
列表类型:有序列表,无序列表
列表项:列表中所显示的
&内容 &叫列表项。
使用列表:a,有序列表--可以将列表项的顺序罗列出来的列表叫有序列表
----order list &列表项:
有序列表:
属性:type--列表项前面的标示类型
取值:1数字
&a小写字母 &A大写字母
&i小写罗马数字 &I大写罗马数字
start:规定在
&值中的第几个位置处开始
无序列表:
----list Item
disc:实心圆 &&circol:空心圆
&square:方块
适用场合:数据按照
从上到下的顺序来排列的时候
数据按照从左到右的顺序来排列的时候,网页导航
定义列表:给出一类事物定义的情形时使用,
描述的属于或名词
描述性的词语
使用场合:图文混排
三月九日笔记:
结构标记作用“为了提高标记的语义性
ALT="前端&&HTML相关笔记&适合零基础的学员"
TITLE="前端&&HTML相关笔记&适合零基础的学员" />
就是文档中最上面的内容,效果等同于
导航部分:
:作用==文档内容主题内容中的某一个小节
可以表示整体页面中的主体内容
作用于:与文章相关联的描述性的问题,文本性较强,艺术气息较强
一般情况下,论坛里的帖子信息,微博或者博客中的条目信息,用户
回复信息优先考虑放在artical中
定义页面中或者某个区域中的脚注信息
靠下面的信息
多数情况下用于定义页面中的侧边栏信息
1,作用,用于显示 收集信息
&将信息提交给服务器
主要包含--
表单元素:
&将信息提交给服务器
注意:---使用表单控件提交数据时表单不能省略
&&&&&&&&&&&&&&&&属性:
1,action:动作
&后台处理程序的地址
(服务器端工程师提供)
&默认:提交给本页。
2,method:方法
&&表单的提交方式
不同的提交方式约束的内容不一样
&两个:---
get(得到 &获取):
显示提交数据会将提交信息显示到地址栏上
安全心不够高
&大小受限制最大提交2KB的提交
如果不设置method的属性的话,默认就会按照get的方式进行提交
适用场合:向服务器索取信息的时候优先用
1,隐式提交数据,不会将提交的信息显示在地址栏上,安全性较高
所有关于密码信息的提交,必须用post,
2,post:没有大小限制(大量数据提交时)
3,适用场合,
安全性要求较高的场所--页面(如,包含敏感信息)
要求服务器去处理数据时
&&要求用:post
传递数据量较大时使用
三,enctype(了解):对表单中提交的数据的编码方式
1,applicatioin/x-www-form-url-urlencoded
可以将普通文本,特殊字符,一起提交给服务器
2,multipart/form-data:
允许将表单中的文件,传递给服务器,普通文本不能直接传递
3,text/plain
只能将普通文本(英文,数字)传递给服务器,特殊符号(-%&)
表单控件:
1.什么是表单控件,包含在
&表单元素中,具备可视化外观,可以接受用户输入的数据
input:元素
textarea:文本域
selet和option选项框
a,input元素:
作用:收集用户信息
属性:type--根据不同的类型,可以创建不同的输入框键
&&&&&&&&&value--控件的值,提交给服务器的数据
&&&&&&&&&name--控件的名称,必须设置,否则无法提交,服务器上根据name的值来获取value
&&&&&&&&&disabled--禁用控件,该属性可以没有值
1,文本框:允许用户输入任意字符的数据,明文显示
2,密码框:type="password"
属性:1,maxlength:限制输入字数
&&&&&&&&&&2,readonly:只读,只要又该属性即可,不需给值
&&&&&&&&&&3,value:控件值,
注意:input元素下,如果不写type值,或者type值写错时,都默认文文本框
单选框:type="radio"
&&&&&&&&&&&&&&&&
属性:1,name:定义名称
并且实现控件分组
2,value:
3,checked:该设置默认被选中,该属性不需要值
#rrggbb六位十六进制数#ff0000
&简写的十六位进制数#f00
尺寸与边框
单位:%或者px
宽度----width="宽度"
&&&&&&&&&&&&min-width="最小的"
&&&&&&&&&&&&max-width="最大的"
高度----height="高度"
&&&&&&&&&&&&min-height="最小值"&&&&&&max-height="最大的"
溢出:设置了元素的尺寸时
&元素的内容所占空间超出了元素本身的话, 会导致内容溢出----
属性【overflow:hidden】
1,visible默认值,溢出可见
2,hidden隐藏
3,scroll滚动条,在元素中增加滚动条,溢出时可用,不溢出,不用
&自动,溢出时显示滚动条,不溢出不滚动,溢出时滚动
5,overflow-x:单向溢出处理,
6,overflow-y:项溢出
1,块级元素
&允许设置 尺寸属性
&height &属性的html元素
3,行内元素不允许设置
1---元素外围的线叫边框
简写方式:
border:width:边框线条的尺寸单位--px
&&&&&&&&&&&&:style:边框线条样式
&取值:solid实线
dotted(虚线
dashed(虚线
color:颜色(该属性是设置四个边框的宽度,样式,颜色)
&&&&&&&&&&&&
2---单边定义:
border-(方向取值)left/right/top/bottpm:width
3---单属性的定义:
border-width:四条边宽度
border-style:四条边样式
border-color:四条边颜色
4---单边,单属性
border-方向-属性:
方向:top/bottom/left/right
属性:width/style/color
注意:边框颜色
&&可取值为transparent
5---边框倒角
圆角矩形border-radius:取值为px为单位的数字或者 &%
border-top-lift
border-top-right
border-bottom-lift
border-bottom-right
6---边框阴影
在边框上增加阴影的效果
取值:由多个值组成的值列表
box-shadow:h-shadow:水平阴影+向右偏—向左偏
:v-shadow阴影垂直投射距离,值为正向下偏,值为负向上偏
:blur可选,模糊距离
:spread &可选,阴影尺寸
:color &可选
:inset &可选
&将默认的外部阴影改为内部阴影
常用场合:box-shadow:0px 0px 0px color
&&&绘制于边框外面的一条线
属性:outline:width style color
&&&&&&&&&&&:0取消轮廓
&&1,框模型
框就是一个容器
,为了承装其它的东西
html 中所有的元素都可以称之为框
&&2,框模型
Model:也称为盒子模型
定义了元素框
处理元素内容尺寸,内边距,边框
和外边距的方式
元素内容尺寸:width &&height
border:1px solid
注意:当框模型(内边距 外边距
边框)介入到元素后,元素的内容区域 尺寸是不变的,但是会加上边框的元素尺寸
尺寸:元素总宽度=左右外边距+左右边距+左右内边距+
:元素总高度:上下外边距+上下边距+上下内边距+
border:2px solid
左右外边距:15
左内边距:8
右内边距:4
总宽度:200+2*2+15*2+8+4=
总高度:200+4+30+12=246px
元素外面的周围的一些空白区域,这些区域是透明的,但是,不允许其他元素所占据。
语法:margin:value
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
auto:自动 &只对左右边距有效,设置水平居中
负值:目的就是为了移动元素
margin-left:取负值,为了向左移动元素
margin-top:取负值,为了向上移动元素
取值:auto:有浏览器自己计算外边距,左右方向取值为auto时,会呈现出元素水平居中对齐显示方式
取值数量:margin:四个方向外边距
margin: v1 v2
margin: v1 v2 v3
; &上 &左右
margin: v1 v2 v3
v4; &上 &右
3,默认 外边距
HTML元素里
&&有哪些元素具备默认有外边距
&&body &dl
如果程序中不想使用默认的外边距,可以设置为“0”
4,外边距问题:
1,(垂直外边距合并)
当两个垂直外边距相遇时,他们将形成一个外边距,称为外边距合并
合并后的外边距,谁大取谁的值
2,外边距溢出
父子元素中,如果设置了子元素的上下外边距时,默认情况会被作用于父元素的外边框上
解决方案:
1,可以为 &父元素 &增加
&边框 &来解决
2,增加父元素的 padding-top
&&&最好将父元素的
&高度 &相应减少一部分数值
5,内边距:
1,内容区域 &&与边框
区域之间的距离控件
注意:内边距
&会将元素边框 撑大
padding:value
padding-top:
padding-bottom:
padding-right:
padding-left:
取值单位:
数量:padding:value上下左右
&&padding:v1
v2;上下 &左右
&&padding:v1
1,背景颜色 &background-color
取值:可设置为合法的值,或者是
&transparent
默认情况下:背景(颜色
图像)从边框处就开始填充
2,背景图片:background-image:url("xxxx/xxx.jpg")
&(xxx/xxx.jpg)
&('xxx/xx.jpg')
取值:对位置进行引用
&&url("图像url")
3,背景平铺:
属性:background-repeat
取值:默认暨水平又垂直
no-repeat:没有平铺
repeat-x:水平方向
repeat-y:垂直方向
4,背景图片的尺寸:
属性:background-size:
取值:value1 value2:宽度
高度&&&&&&&&&&value1%
cover:覆盖,将背景图像扩展至足够大,直到已经覆盖了元素的所有区域,会导致背景图不能完全显示出来
contain:包含,将背景图扩大,直到背景图已经碰到边缘为止(右或者下),背景图能够完完整整的显示到元素中
5,背景图片的固定
属性:background-attachment
取值:scroll;背景会随文档发生滚动
fixed:固定背景背景不会随内容而发生滚动【body】
6,背景定位
改变背景图片在元素中的位置,
属性:background-position
取值:x &&y
&&x:水平偏移位置,值为正向右移动,值为负向左移动
y,垂直移动:值为正向下移动,值为负向上移动
y%:左上角 &0% 0%
右下角100% 100%
居中显示 50% 50%
关键字:x:left center right
y:top center
Sprite:将多个背景图片合并到一张里面去,根据需求情况
7,背景属性:
background
&attachment
常用值:background:url()
&&position
background-image:url(Imgers)
语法规范:background-image
&&取值:linear-gradient()---线性渐变
radial-gradient()---径向渐变
background-imager:url()
background-imager:linear-gradient()
9,线性渐变
属性:background-image
取值:linear-gradient(angle,color-point1,color-point2,......值至少两个)
angel:方向,角度
由下向上-----0deg
right:从左到右---90deg
tobottom:向下---180deg
left:向左---270deg
color-point:表示颜色的数值和位置
10px或者 &red 0%
background-image:linear-gradient(to top red 0%
green 50% blue 100%)
10,径向渐变
background-image
取值:radial-gradient( );
radial-gradient(【size at
position】,color-point1 color-point2,。。。)
position可以省略不计
文本格式化
1,字体属性
指定文本的字体:
font-family:电脑中含有的字体 &value1,value2,。。。。。。
:"微软雅黑"
&"宋体" &"Arial" 所有字体都不存在的情况下就用电脑自己的默认字体
字体大小:font-size:"xx &px" &"xx
&pt" &作为单位的值
字体加粗:font-weight:normal/bold/无单位数字(整百的数字);
无单位数字:400=normal
字体的样式:相当于
&&功能:斜体显示文字
font-style:normal/italic
小型大写字母:font-variant: &&normal
字体属性:font:font-style / font-variant &/
&font-weight/
常用设置方式:font:12px "微软雅黑"
font:12px(字体大小)/24px(行高) &"microsoft
font:font-size/line-height
&"微软雅黑"
2,文本属性
1.文本颜色:(重要)color:
2.文本水平排列方式:相当于 HTML中的align属性
CSS属性:text-align:left/right/center
能控制当前元素内所有文本,行内元素,行内块,水平对齐方式
3,文字修饰:(文字线条修饰)
属性:text-decoration:none(处理A标记的时候);
:underline(下划线
:overline(上话划线)
:line-through(删除线)--&
4,行高:一行文本所占据的高度
&如果行高大于文本大小的话,这行文字将出现垂
直居中的显示方式
属性:line-height:xx
5,首行文本缩进:
属性:text-indent
取值:以px为单位的值
6,文本阴影:text-shadow:
h-shadow水平距离
&&v-shadow垂直投射距离 blue:模糊距离
******************************************************************************************************************************************************
1,表格 &属性
1,表格常用属性(重点)
&&&&&&1,内边距:padding
&框与内容之间的距离
&&&&&&2,尺寸属性:width
&&&&&&3,文本属性:font-
&&&&&&4,背景属性:background-
&&&&&&5,边框属性:border-
&&&&&&6,vertical-align
功能:控制单元格内容的垂直对齐方式
取值:top &middle
2,表格所特有的属性:
注意:只能在table中使用
&&&&&1,边框合并
两个相邻的边框
border-collapse:collapse
属性:separate:默认值
3,边框边距:
两个边框之间的上下
&和左右的距离
注意:只有在border-collapse:
属性:border-spacing
取一个值:每两个单元格之间的垂直和水平间距是一致的
取两个值:第一个值,指定的是水平间距,,第二个是垂
直距离,两个值用
&空格 &隔开。
4,显示规则:
属性:table-layout
取值:auto:列宽度由内容来决定,默认值,自动表格布 局
&&&&&&&&&&&&&&&&fixed:列宽度
&由设置的值来决定,固定表格布局。
****自动表格的布局单元格的大小会适应内容的大小,导致每一次加载
&&&&&&&&&&&&&&&&数据的时候都是在计算,加载时较慢
&&适用于不确定每列大小时使用
5,固定表格布局,列宽度取决于设定好的相关属性值,与内容无关。
会加速显示表格,每次加载表格时都不用计算。
固定表格布局虽然速度快,但是不够灵活,不能体现出表格的特点,自动表格布局虽然算法慢,但是保持了表格的特性。
&&&&&&&&&&&&&&&&&&显示方式:可以通过属性
修改元素框的显示方式,
&&&&&&&&&&&&&&&&&&属性:display
&&&&&&&&&&&&&&&&&&取值:none:
&让生成元素没有框
让元素脱离文档流
不显示元素(隐藏)
不占据页面空间
block:让元素 &像块级一样显示
&适用场合:将行内元素改变成块级元素
inline:让元素
&像行内元素一样去显示
&&&不要将块级元素
&改成行内元素
inline-block:让元素显示向行内块一样,本身是行内元素,一行内能够显示多
个块级元素的特点,允许改宽和高。
display常用方式:
1,隐藏元素和显示元素
可以通过display:的方式隐藏
如果需要显示的话,按照自己的默认方式显示出来即可
比如:div:display: &span:display:
2,如果程序中,想修改 行内元素,尺寸时使用
float:left/
display:block/
3,显示效果
可见性:特点
&&元素可以隐藏,但是空间会保留,不允许被其他元素所占据,
属性:visibility
取值:visible:默认值
hidden:元素不可见,但保留空间
collapse:用在表格元素上,删除一行或者一列时,不影响表格的整 体布局
2,透明度:
属性:opacity:所有元素,包括边框和文本
取值:0-1之间的小数(能取0 &也可以取1)值越小透明度越低
3,垂直对齐方式:适用场合: &
在td中使用
在img中使用:控制图像两端的文本,相对于图像的垂直对齐方式
属性:vertical-align
取值:top:
baseline:默认值
&基线对齐默认将文本放在元素的基线上
··注意:可以修改图像的
&vertical-align为非baseline的值,取消
默认底部的3px空白距离
光标:属性:
取值:default:默认值
pointer:小手(重点)
crosshair:+
wait:等待
help:帮助
·····列表相关属性
功能:灵活控制或者修改列表项的显示表示
1,list-style-type
&&修改列表项前边的标示
取值:none &无标记
disc:实心圆 &&circle:空心圆
&&square:实心方块
2,列表项图像(非重点):使用自定义的图像来作为列表项的显示标示
属性:list-style-imsges:url(图像路径)
3,列表项的位置(非重点)
属性:list-style-position
取值:outside:列表项标示位于文本之外(默认)
inside:列表项标示在列表项内部
4,列表属性:将以上三个属性综合到一起去
属性:list-style
取值:type &url()
常用:list-style:(重点)
·····定位属性(重点)
1,相对于其本身位置,应该出现的位置在哪
2,定位的分类“
1,普通流定位/文档流定位
2,浮动定位
3,相对对位
4,绝对定位
5,固定定位
3,定位属性:
1,定位属性 &属性:position
取值:static &relative
2,偏移属性 &top
&bottom &left
该组属性能够帮助我们完成元素的位置移动
3,堆叠顺序:
属性:z-index
取值:无单位的数字
··········4,定位方式:
1,·························相对定位:
&元素框会相对于它原来的位置偏移某个距离
&元素本身的位置,然后去实现新的位置移动
2,属性和值
左右同时出现的话以左为准,上下以上为准
3,相对定位不会改变元素的形状,元素所占的控件任然会保留
4,适用场合:1元素本身要进行微调的时候要优先选择先对定位
&&&&&2·················
5,·············绝对定位:
1什么是绝对定位:会将元素从文档流中脱离出来,不占据页面空间
2相对于最近的 &一定为的 祖先元素
&来实现位置的初始化,如果元素没有已定位的祖先元素,就相对于最初的包含框,body
&实现位置的初始化
使用场合:想实现元素堆叠的效果时使用,(一个元素压住另一个元素)
3,弹出菜单(配合相对定位使用):
4,实现堆叠顺序的调整:
3,堆叠顺序
已经定位的元素,尤其是绝对定位,是允许出现堆叠效果的,默认的堆叠顺序,按照元素出现的顺序,后来者居上,子元素永远会压在父元素上面来(父子集不可变)
修改堆叠顺序,
属性:z-index
取值:是一个没有单位的数字,数字打着靠上,注意:无法修改父子集的堆叠顺序,页面中那些元素能够使用堆叠顺序:1,已定位的元素(relative
4,固定定位:将元素固定在页面的某个位置不动
会将元素脱离文档流,不占据页面空间
属性和值:
通过left &bottom &right
&top &实现位置的调整
5,静态定位:
&&默认定位方式
/////////////////////**********************
已投稿到:
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。}

我要回帖

更多关于 outline inline 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信