Css
一.零碎知识点
text-indent缩进 letter-spacing文字间距
背景色 background: #ff0000 url(image/manor-4.jpg) 10px 10px repeat;
渐变色 background: linear-gradient(to top,white,blue);
id选择器>类选择器>标签选择器 优先级
行内样式> 内部式>外部链接式(就近原则)优先级 外部链接式最好写到最上面
文本 cursor:pointer 鼠标手型
color:rgb(,,)
设置透明度最后一位0-1之间小数不要点0 color:rgba(255,0,255,0)
行高实现垂直居中 line-height 等于 父容器一样大 只适合一行
vertical-align垂直居中 只对表格有用 图片也可以
Cascading Styel Sheet 级联样式表
作用：用来对页面样式设置，文本 字体 颜色 背景 …..
CSS 优势：实现结构和样式的分离，更加灵活的控制页面
Css 版本1.0 2.0 2.1 3.0
CSS 语法：
选择器{
属性:值;
属性:值;
}
两种书写格式:
1 所有的声明都写在一行。优势节省空间
2 每一条声明都独立占一行 。便于修改和维护
注意:style标签 一定要写在head标签中
type：内容类型 text ：文本 css 样式表
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型
text/html
text/javascript
image/jpep
image/bmp
text image 大类别
css html bmp 小类别
CSS使用方式：
1 行内样式表 style属性
2 内部样式表 head标签中
3 外部样式表 单独放在.css文件中
链接式 html语法
导入式 css语法
三种方式的优先级: 行内>内部>外部
CSS基本选择器 ：
标签选择器 p p h1 ul header
类选择器 class .class1
ID选择器 单独设置一个标签 #id
基本选择器优先级 id选择器>类选择器>标签
同类选择器 遵循就近原则
CSS高级选择器
层级选择器 ：
E F 后代选择器
E > F 子代选择器
E + F 相邻兄弟元素 E后面
E ~ F 通用兄弟元素 E后面
结构伪类选择器
F:first-child F是第一个孩子
F:last-child F是最后一个孩子
E F:nth-child(n) E中第n个F 不管元素类型 p p:nth-child(2)
E F:nth-of-type(n) E中第n个F 同类类型元素 p p:nth-of-type(2);
E F:first-of-type 第一个
E F:last-of-type 最后一个
属性选择器
F[id] 带有id属性的F元素 p[id]
F[id=id1] 带有id属性,属性值id1 的F元素 p[id]
F[id^=id1] 属性id的值 以id1开始
F[id*=id1] 属性id的值中包含 id1
F[id$=id1] 属性id以id1结束
字体
/字体类型/
/font-family: “arial”,”华文彩云”,”隶书”,”楷体”;/
/字体大小/
/font-size: 30px;/
/*字体风格
italic：字体斜体
oblique：变形斜体
* */
/font-style:italic ;/
/字体粗细/
/font-weight:bold;/
font: italic bold 18px "隶书";
风格 粗细 大小 类型
s w s f
字体大小单位
px 像素
em 相对单位，相对于当前元素的字体大小 1em表示和当前字体大小一致，2em表示当前字体大小的2倍
rem 相对单位， 相对于根元素 html 的字体大小，1em 根元素 html 的字体一样
文本
color : 颜色
red green blue
R G B
黑色 000000
白色 f f f f f f
/* color:#ff00ff;*/
/rgb(十进制)/
/color: rgb(255,0,255);/
/rgba(十进制 支持透明度 0-1 0透明 1不透明 .5半透明) /
text-align :水平对齐
text-indent: 首行缩进
line-height: 行高 可以让一行文字居中显示
text-decoration: 文本装饰 如下划线
/*垂直居中 ---只对table有用*/
vertical-align: middle;
把line-height的行高设置和父容器高度一样，只适合一行内容
文本阴影
text-shadow
超链接伪类
a{
是对四种状态统一样式
}
/1设置未访问状态/
a:link{
color: green;
}
/2访问过状态/
a:visited{
color: #999;
}
/3鼠标悬停在超链接/
a:hover{
font-size: 30px;
color: red;
}
/4点击超链接状态/
a:active{
color: black;
}
开发时 只写 a{} a:hover{}
列表样式
list-style-type: disc circle square decima lower-alpha upper-alpha lower-roman upper-roman
/列表图片/
list-style-image: url(img/loginIcon.gif);
/列表符号位置/
list-style-position: inside;
背景
背景颜色 background-color: #999;
渐变色
background: linear-gradient(to top,white,blue);
/背景图片/
background-image: url(image/manor-2.jpg);
/背景平铺方式/
background-repeat: no-repeat;
/背景图片位置/
background-position:center; top right 右上角 右下角 bottom right 左下角 bottom left
背景色 background: #ff0000 url(image/manor-4.jpg) 10px 10px repeat;
CSS
1.内容补充:标准文档流:指元素根据块元素或行元素的特性 按照 从上到下,从左到右的自然排列,这也是元素默认的排列方式
2.display属性
block 元素会被显示为块级元素,该元素前后会带有换行符
inline 元素会被显示为内联元素,该元素的前后没有换行符
inline-block既有内联元素的特性,也有块级元素的特性
none 设置元素不会被显示 且内存空间也会被清除
3,让块元素排在一行的方法
display:inline-block
float属性
清除浮动: clear
4.inline-block和float区别
inline-block 可以让块元素排在一行,并且支持宽度和高度,代码实现起来方便
位置方向不可控制,会解析空格,要设置垂直对齐 ie67 不支持
float
可以让块元素排在一行且支持宽度和高度,可以决定排列方向
float浮动后以后元素会脱离文档流,会对周围元素产生影响,必须在他相邻元素添加清除浮动的样式
需要解决父元素塌陷
JS 为什么学习js
a表单验证可以减轻服务器端的压力
b让页面产生动态效果
1.js是一种基于对象和事件驱动的,并具有安全性能的脚本语言
2.js特点 a向页面添加交互语言b脚本语言,语法和java类似
c解释性语言,边解释边执行
3.js组成 ECMAScript DOM BOM
Css (盒子模型,display float )JavaScript
一.琐碎的知识内容
1.弹性盒子模型
border-radius 可以获取到圆滑的矩形 圆形 扇形
border-top-width
盒子模型
文本阴影text-shadow
盒子阴影 box-shadow()
body有默认的外边距margin
*{
margin:0px; 意思为所有的标签(通用选择器)外边距为0
}
margin-left
margin-right 盒子居中
组合选择器
给对个标签设置属性 #one,#two{}
注意上下两个盒子 之间的外边距以最大的为准
display:inline-block 在同一行
左右盒子之间的外边距不会合并
盒子嵌套
内盒子 margin-top 无法移动
1.第一种overflow:hidden溢出 父容器
这样里面的盒子 margin-top才能移动 否则外面盒子移动
2.第二种解决方法 给外面的盒子加边框
扩展:弹性盒子 2009 w3c对盒子优化(场景:盒子嵌套 内盒子要在外盒子的正中间)
1.修改外面盒子为弹性盒子
display:flex;
2.设置水平对齐居中
justify-content:center
3.设置垂直居中
align-items:center
文本居中条件: 块元素 有固定距离
box-sizing设置解析方式盒子的
border-box边框盒子 width height 边框+内容+内边距
content-box width height 就是内容
display
block 行
inline 块
inline-block 行级块
none 不显示 不占空间
visibility:hidden 不显示 占空间
float块浮动
clear 清除浮动对元素的影响
overflow当内容超出容器如何处理
visible 可见默认hidden 隐藏 scroll显示滚动条 auto自动
javascript
javascript之父 布兰登 艾奇
嵌套在网页中的一门脚本语言
LiveScript—>javascript
JavaScirpt 三部分组成
1 ECMAScript语法规范
2 DOM Document Object Model 文档对象模型
3 BOM Browser Object Model 浏览器对象模型
alert(“hello world”);弹出窗口
document.write(); 作用往网页种写入内容
var variable 变量
int num; //声明
num=10;
数据类型 ：
原始类型 :undefined null number boolean string 存储在栈 中
引用类型: Number Boolean String Date Object Array ….. 存储堆中
变量声明 var 弱类型语言
1 先声明 再赋值
2.声明同时赋值
3.直接使用 不推荐使用
typeof可以获取到变量的类型
