今日内容
1. frameset
框架集标签frameset 框架集标签不能放在body中 rows --划分页面为上下部分 cols --划分页面为左右部分 框架标签frame 框架的名称name属性 <frame src="#" name="#" /> src后代表这个框架中打开的页面链接 name后代表这个被打开页面的name属性,用来方便操作 a标签target指定打开链接地址的方式 需要结合框架标签中使用,必须指定frame打开 target="frame框架标签的名称"
2. CSS使用
层叠样式表 书写的内容样式都是系统样式库里有的内容 1)行内样式 在单行语句中书写,控制某一个标签,不好 2)内部方式 在head标签中书写样式 3)外部样式 在项目文件下创建专门存放CSS文件的地方,导入页面中使用 导入固定格式 link标签 href属性="css文件地址" rel="stylesheet"
2.1 CSS选择器
常用的CSS选择器 标签选择器 --通过标签的名字控制 标签名{ 样式操作 } 类选择器 --通过给标签定义class属性来控制,可以定义多个相同的类名--通过.调用 .类名{ 样式操作 } id选择器 --通过在标签中指定id值来控制,id值必须唯一! #id值{ 样式操作 } 选择器优先级 id选择器 > 类选择器 > 标签选择器 并集选择器 --多个选择器,可以一起使用 选择器1,选择器2,选择器3{ 样式操作 } 伪类选择器--锚伪类 --描述元素(标签)的状态的 link -鼠标没有经过时的状态 hover -鼠标经过时的状态 active -鼠标点击但没有松开时的状态 visited -鼠标点击过的状态 选择器名称:状态名称{ 样式操作 }
2.2 CSS文本样式
文本颜色 color color: #FF8C00; text-align:对齐方式 text-align: center; text-decoration 属性用于设置或删除文本装饰 text-decoration: underline; letter-spacing 属性用于指定文本中字符之间的间距 letter-spacing: 5px; font-family:字体类型:系统字体库中的字体 font-family: "楷体"; font-size:字体大小 指定像素 font-size: 50px; font-style 属性主要用于指定斜体文本 font-style: italic ; font-weight:字体粗细程度 bold:适当加粗(700) font-weight: bold;
2.3 CSS边框样式
border 边框颜色 border-color: red ; 边框的宽度 border-width: 3px; 边框样式 border-style: solid; border简写属性:将上面三个声明到一个中书写 border:border-width border-style border-color 边框圆角 像素弧度大小 border-radius: 5px;
2.4 CSS浮动属性
浮动 浮动属性float:控制元素向左或者向右浮动,当前这个元素 表现的就想块框不存在一样,碰到外边框(浏览器)或者其他的块框就停止!
2.5 CSS列表样式属性
列表样式属性 list-style-type 属性指定列表项标记的类型 circle 空心圆 squqre 空心正方形 disc 实心圆 none 去掉前面的标记 list-style-image 属性指定图片类型作为列表项标记 border-collapse 属性设置是否将表格边框折叠为单一边框 属性值:collapse 折叠为单一边框
2.6 CSS背景属性
背景属性 background-color:背景颜色 background-image:url(图片地址) 如果图片本身尺寸和系统分辨率尺寸不同,图片会重复 background-repeat:设置背景图像是否重复以及如何重复 repeat-x:x轴重复 repeat-y:y轴重复 no-repeat:设置图像不重复 repeat:(默认值)x/y轴都重复(图片本身尺寸和系统分辨率尺寸不同,) background-positon:设置图像的起始位置 top left (默认值) center center bottom right 背景的简写属性--一步走 background: background-color background-image background-repeatbackground-position;
3.盒子模型
主要是实践--布局 margin 外边框设置--设置外边框到浏览器边缘的位置 border 设置边框属性 -颜色 -粗细 padding 内边框设置--设置内边框到外边框的位置 内容