HTML - 超文本标记语言
由 标签 - 层叠样式表(css) - Javascript 组成
1.常用的标签
文本
h1 - h6 / p / hr / br / sup / sub / em / strong
列表
ul-li / ol-li / dl/ dt / dd table-th-tr-td-caption(rowspan/colspan)
图像
image(src='' alt='')
音频视屏
audio/source controls autoplay loop
vidieo / source <audio controls autoplay loop>
区域
p / span
表单
form 外框-fieldset 表单标题-lengenda 标签label 输入框 input
input 文本-text 密码-password 占位提示符-placeholder
单选框 type=radio 多选 checkbox
上传文件 type=file 指定名字name
提交 submit 重填 reset
下拉菜单 select>option*5 selected默认选中, value发送到服务器的值name是发送的名字
文本
textarea rows/cols 日历 type='data'
2.层叠样式表
优先级排序
id选择器(#) > 类选择器(.) > 标签选择器 (p)> 通配符选择器(*)
样式冲突
就近原则: 离得近的优先级高
具体性原则: 选择的器写的更加具体优先
重要性原则: !important在标签后加
关键词组命令
background: 背景色 背景图 平铺选择(repead) 偏移
字体
font-size font-family font-style font-weight
文本
color text-align letter-spacing text-decorator
盒子
padding margin border background display visibility
列表
list-style(列表前的小圆点的样式) list-style-position border-collapse
padding-top:50px; 块内上部间距 50px
text-align: center; 文本居中
text-decoration:underline; 文本装饰 加下划线 none
background-color:pink; 背景颜色
background: 背景色 背景图片 平铺选择 偏移选择
margin: 上 右 下 左; 块外所留的大小
border:none; 去边框
cursor:pointer: 鼠标指针变化
:havor 鼠标悬停变化
:active 激活 点击变色 也可display
# login input[type="text"], #login input[type="password"] {
border:none;
border-collapse:collapse; 表格合并边框
border-bottom:1px solid green;
outline: none; 输入框边线取消
}
font: font_style size font_family;
background:bk-color bk-image bk-repead/no-repead -position 10px;
display:none; 隐藏 所占的位置也消失
visibility:hiden; 隐藏 但占据的空间任然在
在css中使用自定义字体
/*传输别人没有的字体*/
css文件加载 乱码 加一行 @charset "utf-8"
引用css文件 link (不用style)
@font-face {
font-family: 命名字体的别名; /* 在引用字体格式时可以 引用别名 最好使用期自身的名字*/
src: url();/* ./ 表示当前路径 将字体文件放在指定的文件夹 添加字体路径*/
}
浮动和定位
float 浮动, 清除浮动, clear
浮动 folat:right/left
定位:不适合用margin padding
清除浮动 clear: 使后面的内容脱离文档流
/* right left both*/
#foo{
clear:right;
}
相对定位; poisition : relative
没有脱离文档流 对兄弟元素没有影响 相对于元素原来的位置进行定位
/*块级元素 (block) 行级元素(内联元素 inline)*/
/*static 正常文档流 (默认模式) folat */
/* relative 相对定位 相对原来的位置偏离位置 没有脱离文档流*/
abslout 绝对定位:相对于父元素来说设定位置 脱离的正常的文档流
对兄弟元素有影响(相当于其不存在的情况下其兄弟元素进行补位了)
fixed 固定定位:相对于浏览器窗口来设定元素原来的位置 脱离了文档流
Z-index: num; 数字越大 最后出现 数字小的会被大的覆盖
处理塌陷问题
<p style="clear: both;"></p> 空白 p 用于方便计算 p高度
ovreflow: auto; 设置自动溢出文档
#foo { /* 在设置最外层块时添加 overflow:auto; */
overflow: auto; /* css hack 使外框显示出来*/
}
