学习目标：
掌握html css基础知识学习内容：
1、 学习html基础知识
2、 学习CSS基础知识
HTML基础知识
-
<!DOCTYPE html>注记 翻译html 兼容低版本会造成页面串行 -
<html lang="en">主标记 -
<head></head>定义窗体信息 外部引入文件 -
<body></body>放置页面显示信息 -
<meta charset="UTF-8">修改字符集
ios8859-1 欧美字符集
gbk 中文简体
big5 繁体字
utf-8 本地字符集 -
<title>Document</title>窗体名称 -
<h1>-<h6>标题标记 -
<p>段落标签 -
<span>布局标签 行级元素 同行显示 -
<div>布局标签 块级元素 换行显示 -
CSS 层叠样式表
美化页面 提高浏览器加载速度 减少代码 -
语法
1 行内样式<h1 style="color:red">优先级高
2 内嵌样式 -
选择器
1 *{}通配符选择器
2h1{}标签选择器
3#font{}id选择器 唯一
4.font{}类选择器 可以重复 -
clolor
1 单词
2 十六进制值#eee=#eeeeee
3 色阶值rgb(r,g,b) -
font-size字体大小 默认12-16px -
font-weight字体加粗 默认400 -
font-style设置斜体
normal默认
itatic倾斜 -
font-family字体样式 默认宋体 -
word-spacing单词间距 -
letter-spacing字体间距 -
line-height行高 -
text-algin水平对齐 : center right left -
vertical-algin垂直对齐：top bottom middle -
<a>超链接 href 定义路径 -
绝对路径 http file
-
相对路径
相同文件夹 aa.html
子文件夹 ww/aa.html
…/ 返回上一级文件夹
CSS基础知识
-
text-decoration文本修饰 -
line-througth删除线 -
border-width-color -style
none无边框
solid实线
double双边线
dotted点线
dashed虚线 -
margin外边距padding内边距
顺序：margin: 上下 左右/ 上 左右 下/上 右 下 左 -
盒模型：填空宽高+内边距+外边距+边框
box-sizing盒模型组成模式 `content-box填空+边框+边距 标准模式
border-box填充+边框 怪异模式 -
有序列表 ol 无序列表 ul
-
list-style-type列表图形
disc实心圆
circle空心圆
decimal数字 -
list-style-position列表对齐方式
outside inside 内外对齐 -
list-style-image：url()列表图片 -
float浮动 left right -
clear清除浮动 -
overflow超出内容的显示方式
visible不添加滚动条
hidden 隐藏
auto 添加滚动条
scroll 总添加滚动条 -
关系选择器
ul li{}后代选择器
h1,a{}并集选择器
div>p{}子选择器
h1+p下一个兄弟元素
h1~p 下面所有兄弟元素 -
伪类选择器
a:link{}未访问状态
visited被访问状态
hover鼠标悬停
active被选中 -
伪对象选择器
before在元素前添加内容 after后 -
background-repeat 背景平铺方式
-x水平-y垂直no-repeat无 -
background-position背景图片位置 -
background-attachment背景固定方式
scroll滚动
fixed固定 -
visibility是否隐藏元素
visible
hidden隐藏 保留面积 -
display属性显示方式
none隐藏 不保留面积
inline行级
block块级
inline-block行级 -
-index元素层叠关系 -
<table>表格<tr>行<td>单元格<th>单元格（标题 加粗居中） -
rows/colspan合并行列 单位数字 -
cellpadding/spacing内外间距 -
border-spacing外间距值 -
border-collapse合并边框
separtate独立
collapse合并 -
empty-cells隐藏无内容单元格
hide隐藏
show显示 -
<form>表单
action定义路径
method传值方式get/post（post传值隐藏）
checked="checked"默认选中
maxlength文本最大输入长度
readonly只读 可传值
disabled禁用 不可传值
value文本值
<input type="text">基本
<input type="password">密码框
<input type="radio" name="Y" value=传值>X单选框
<input type="checkbox" name="Y">X多选框
<input type="file">上传文件
<select>下拉框<option>选择项
<textarea>文本域
<input type="submit" value="名称">提交
<input type="reset" value="名称">重置
<input type="button" value="名称">校验 -
属性选择器
input[type='text']{}属性值选择器
div[class~="a"]{}空格前后找匹配值
div[class^="a"]{}选择以a开头
div[class$="a"]{}选择以a结尾
div[class*="a"]{}选择包含a的所有值
div[class|="a"]{}选择以a开头并且带‘-’符号的值 -
css精灵/雪碧 css sprites
css图片拼合技术 拼接后利用背景定位寻找某个图片
减少网页对服务器的请求次数
提高浏览器的加载速度 -
>代表><代表< 代表空格 <回车> -
<iframe>内联框架
src定义路径
frameborder显示边框 0不显示
scrolling显示滚动条 yes/no
noresize是否可调整大小 yes/no
marginheight上下间距
marginwidth左右间距outline-color轮廓颜色outline-width轮廓粗细outline-sytle轮廓样式
outline在border外面
outline不兼容IE7以下版本
outline不占元素面积 -
语法与规则
@import导入CSS
<link href=“”rel=“stylesheet”>
@charset修改字符集
@font-face导入字体
link属于html标签 import属于css 标签先加载
import不兼容IE8以下
link优先级比import高 -
页面布局
固定宽度布局
设置一个外包 外包设置margin居中 兼容低版本设置宽度1000 否则1100-1200 浮动法 设置孩子左右浮动 父类overflow:hidden 定位法 设置父类相对定位 孩子为绝对定位 高度最高的孩子设置相对定位 转化表格法 设置父类display：table 孩子display:table-cell变宽布局
设置一个外包 宽度百分百 设置最小限定宽度min-width等比变宽 父类百分百 孩子按百分比 浮动或定位单例固定 设置宽度最小的元素固定像素 设置面积大的元素百分比 利用外边距让出固定宽度位置实现同行显示
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
