下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、昨日回顾表单:表单是为数据而存在的!value=”1” checked=”checked” /input type=” checkbox”文字 1.框架:框架是用于将“当前窗口”进行成更小窗口的一种技术。framseset 代替 body,并要使用框架文档类型。 css 基本概念:css 是用于这样一个目的: 将网页中的某个(些)css 的语法基本模式为:(元素)的某(些)方面特性设置为某(些)个值。选择器 css 属性 1:值 1;css 属性 2:值 2;所谓选择器,其实就是某种可以对应到网页中的某个(些)css 选择器分类:选择器:一个英文单词.的语法形式。所谓一个英文单词,其实也就是一
2、个应该存在的类选择器(class 选择器)名.类名 啊啊啊啊啊 id 选择器:#id 名.。通用选择器:*.伪类选择器:a:link a:visited a:hover。 a:active.注意:上述个伪类用于通常就必须按上述顺序写。另外,实际应用中,常常简化为这样:a a:hover.含义是:a 连接层级选择器:只分“鼠标放上去状态”和“其他状态”选择器 1选择器。分组选择器:选择器 1, 选择器。文字段落的样式属性color:设定一个中的文字的颜色,颜色值可以使用英文单词,16 进制语法和 rgb 语法:color: red;color: #f0fcf8;color:rgb(123, 88
3、, 205);font-size: 设定文字大小,通常为像素(px) 一般的商业的文字大小通常都是 12px。font-weight: 设置文字粗体(bold)或非粗体(normal)。font-style: 设置文字斜体(italic) 或非斜体(normal)font-family:设置文字的字体名字,可以使用多个字体名,中间用逗号分开,表示的含义是:首先使用第一个字体,如果用户电脑中没有第一个,则是用第二个,以此类推。举例:font-family: 宋体,仿宋,微软雅黑,arial, “Times New roman”;line-height:设置文字的行高,通常也是 px,即一行文字所
4、占据的空间高度行高不是文字的高度。letter-spacing:设置字符(或字母)之间的间隔距离,中文其实就是“字”的间隔。word-spacing:设置单词之间的间隔距离通常只对西方拉丁语系的字符有效。text-align:设定文字的水平对齐方式。其功能是相当于属性中的 align 属性。但要注意:align 作为 html属性,其实只在其中的某几个中使用,但text-align 是几乎所有都可以用的。特别注释:title,class,id 就是所谓的“通用属性”即谁都可以用text-indent: 设定一个段落中的首行缩进距离,通常也是 px。text-decoration:设置文字的“修
5、饰线”:下划线(underline),中划线(line-through),上划线(overline),none(无) vertical-align: 设定文字在一个表格盒子(单元格)的垂直对齐方式:top(顶对齐),middle(中对齐),bottom(底对齐)盒子模型初步盒子是 css 中最重要的概念。盒子首先先建立一个观念: 几乎所有其实都是一个盒子而所谓盒子,无非就是一个“矩形的区域范围而已”。其实所谓网页,无非是一个盒子套一个盒子。一个盒子有如下一些区域(结构):边框(border):一个线型的区域,可以是实线或虚线或其他形状。外边距(margin):也叫“边界”,边框线之外的一块空白
6、区域,其含义是“不能放置物体” 内边距(padding):也叫“补白”,边框线之内的一块空白区域,其含义也是“不能放置物体”内容区(没有对应的 css 属性名):指一个盒子中可以放置“物体”的区域也就是盒子的主要区域。其中放置的物体可以是普通的文字或其他对应之前学的 html 中的“内容部分”。内容区通常只能设置其宽高属性(,)。一个盒子的各个组成部分由下图所示:网页设计中的“内容与表现分离”以前学习,说,现在:具有“表形表意”之作用。其实也可以说,内容和其表现混在一起。技术其实可以将一个网页中的各个的表现都“提出来”放到一个专门的地方(比如 style中),剩余的部分(和文字内容等)被整体上
7、称为“结构/内容”。这种做法就被称为“内容与表现分离”盒子的两种初始状态(基本表现):类似的盒子:一个盒子自动“占据一行”(不管其用块盒子:内容多少):这就是“块盒子”(块元素)。常p, hr,h1h6, table,form,ul, li, ol,dl,dt, dd,blockquote, pre,特点:可以设置固定的宽高,margin,padding,类似盒子:一个盒子中的内容会跟同类的盒子并排在一行出现,除非该行已满,则会自然到下一行类似文字的表现特性。:这就是行内盒子(行内元素)。行内盒子通常放“最终的数据内容”,比如文本,。其他行内盒子:b, strong, font,i,u,a,i
8、mg,input,textarea,select,特点:宽高不能设定,而是由其内容“撑出”,margin 和 padding 没有上下方面的表现。通常,行内盒子是“小盒子”,块盒子是“大盒子”,布局初步(原理)所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去。布局的基本步骤:1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式:上下结构:此时,只要使用若干个盒子,自然就是上下结构,无需其他设置。左右结构:此时使用若干个盒子,并进行相应的浮动,通常的模式:2 个盒子:一左一右3 个盒子:两左一右或两右一左,或一边倒。盒子:通常一边倒。iii.浮动解释:浮动就像水中的气泡,会“网上浮”更形象的比喻:大家(所有)都在“地面上平铺着”,各自占据着一定的面积,浮动元素却“浮”到天花板上去了,其并占据大家通常的“地面面积”。浮动除了表现上不跟别的元素抢占地盘之外,其最主要的特性(也就是破坏效果)其实是:使其父盒子失去合理高度父盒子已经包不住其这些浮动的盒子了!这在布局中基本上是不允许的!那么就必须使用补充的做法来实现合理包含父盒子包住子盒子。让父盒子获得正确有效高度的方法有个
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 运输服务合同(2篇)
- 少先队课件模板
- 推敲课件苏教版
- 古诗词诵读《燕歌行并序》-高二语文大单元教学同步备课(统编版选择性必修中册)
- 第14课 《背影》-八年级语文上册同步备课精讲(统编版)
- 蚂蚁 故事 课件
- 西南林业大学《比较文学概论》2023-2024学年第一学期期末试卷
- 西京学院《建筑信息模型》2022-2023学年第一学期期末试卷
- 西京学院《机械原理》2022-2023学年第一学期期末试卷
- 温度变化对化学平衡的移动影响
- 六年级上册数学课件-6. 百分数(一)1-人教版(共11张PPT)
- HSK5级100题看图写作练习
- GB∕T 2518-2019 连续热镀锌和锌合金镀层钢板及钢带
- 地下建筑结构:第3章 地下建筑结构及设计1
- 公司售后维修记录表
- 四年级数学上册苏教版《认识射线、直线和角》教案(公开课)
- 微软Azure 与阿里云的对比分析
- 承台施工工艺标准
- 《分物游戏》说课
- 多媒体信息编码及处理课件
- (完整版)虬髯客传课件
评论
0/150
提交评论