三个层次
HTML 超文本标记语言——结构
CSS 层叠样式表——表现
javaScript 脚本语言——行为
单标签 <标签名/> 引入一个**直接用
双标签 <标签名></标签名> 当做一个有意义的容器用
标题标签 h1 - h6 如<h1>标题</h1>
段落文字标签 <p>段落</p>
格式标签 <br/><hr/>
预格式标签 <pre></pre>、<xmp></xmp>
两者区别：
<xmp>
<h1></h1>
454534 sfds fdsf
</xmp>
<pre>
<h1></h1>
</pre>
实体符号：
< < 或 <
> > 或 >
空格 或  
HTML注释：
<!-- -->
作用：
1、隐藏代码
2、提示作用
3、划分区域
元素的分类
块级元素：自占一行 从上往下排列 如：<p></p>
行内元素：不自占一行 从左往右排列
行元素转换成块元素用 display：block
块元素并列同一行加 float：left
可变元素
99999999999999
语意化 分区域 画色块
分区类标签————块级
<div></div> 块级容器
分区类标签————行级
<span></span> 行级容器
功能类标签
图片 <img src="" />
超链接 <a href=""></a>
元素的属性和属性值
1、特有的属性和属性值
<a href=""></a>
href 引用
<img src="" />
img 引入
2、通用的
style <div style="样式名：样式值；样式名：样式值；"></div>
id <p id="id名">本段指定了id的属性</p>
class <h1 class="类名">Header 1</h1>
内联样式插入
颜色（字体、背景、边框）
框高（宽度、高度）
style="font-size: 22px;" 设置字体大小
style="color: red;" 设置字体颜色
style="text-indent: 2em;" 设置首行缩进
style="line-height:2;" 设置行距
style="text-align: center;" 水平居中
--------------------------------------------------------------------------------
选择器：遥控器
内嵌式：写在head里面
标签选择器：
<style>
p{
color:red;
font-size:30px;
}
</style>
<body>
<p>变成30像素红色文字</p>
</body>
--------------------------------------------------------------------------------
id选择器：
当有多个p标签就使用id，只能出现一次
#para1
{
text-align:center;
color:red;
}
<body>
<p id="para1">Hello World!</p>
</body>
--------------------------------------------------------------------------------
类选择器：
class选择器，可以在多个元素中使用
.color red{
color:red;
}
.font-size-50px{
font-size: 50px;
}
<body>
<div class="color-red font-size-50px">我们都要变颜色</div>
<p class="color-red">我们都要变颜色</p>
<span class="color-red">我们都要变颜色</span>
</body>
--------------------------------------------------------------------------------
加载顺序
以最后一个为准
选择器的权重
内联样式style="" 1000(最大）
id选择器 100
类选择器 10
元素选择器 1
优先法则（相同选择器）
1、权重大的优先
2、后来者居上
3、指定大于继承
4、!important最大(大于内联样式)
p{
color: blue!important;
}
世界五大主流浏览器
谷歌、IE、FF浏览器（firefox浏览器）、Safari浏览器（苹果浏览器）、opera浏览器（欧朋浏览器）
浏览器内核
渲染引擎 解析、排版、渲染
CSS Reset
* 通配符（所有的元素）
*{
margin: 0;
padding: 0;
}
--------------------------------------------------------------------------------
CSS Backgrounds背景(简写属性，顺序为background:#ffffff url('img_tree.png') no-repeat right top;)
background-color:red; 设置元素的背景颜色。
background-image:url('图片地址'); 把图像设置为背景。
background-repeat:no-repeat;(不平铺) 设置背景图像是否及如何重复。
background-attachment:fixed; 背景图像是否固定或者随着页面的其余部分滚动。
background-position:right top; 设置背景图像的起始位置。
-------------------------------------------------------------------------------
CSS 文本格式
文本的对齐方式
text-align:center; 居中对齐
text-align:right; 居右对齐
text-align:left; 居左对齐
text-align:justify; 每一行被展开为宽度相等，左，右外边距是对齐
文本修饰
text-decoration:none;去除下划线
文本转换
text-transform:uppercase; 全为大写字母
text-transform:lowercase; 全为小写字母
text-transform:capitalize; 单词首字母大写
文本缩进
text-indent:50px; 首行缩进50个像素
文本间隔
letter-spacing:10px; 字符与字符之间的间隔
line-height:200%; 行与行之间的间隔
word-spacing:30px; 单词之间的空白间隔
文本阴影
text-shadow: x轴 y轴 羽化程度 颜色;
text-shadow: 0px 5px 5px red;
--------------------------------------------------------------------------------
CSS 链接样式
a超链接的详细介绍
<a href="网址、链接地址"target="目标" title="说明">被链接内容</a>
a超链接的特有样式
a{
text-decoration：none； 去掉下划线
}
a超链接的四种状态
未访问 a:link{}
已访问 a:visited{}
鼠标悬停 a:hover{}
正被点击 a:active{}
顺序规则
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
--------------------------------------------------------------------------------
CSS 列表样式
列表的语法
有序列表 无序标签 列表项
1.第一项 ·第一项 <ul>
2.第二项 ·第二项 <li>列表项内容</li>
3.第三项 ·第三项 <li>列表项内容</li>
4.第四项 ·第四项 <li>列表项内容</li>
5.第五项 ·第五项 <ul>
<ol></ol> <ul></ul>
设置列表项标志的类型
list-style-type:none 去除列表前的小圆点
list-style-type:circle; 小圆点显示
list-style-type:square; 方框显示
list-style-type:upper-roman; 罗马数字显示
list-style-type:lower-alpha; 英文字母显示
--------------------------------------------------------------------------------
CSS 表格标签
<table></table>
行<tr></tr>
列<td></td>
合并行：<td rowspan="2"></td>
合并列：<td colspan="5"></td>
对齐方式
<table>
<tr>
<td>姓名</td>
<td>张三</td>
</tr>
</table>
表格边框
border：像素（1px） 样式（solid） 颜色（black）
合并缝隙：border-collapse: collapse
--------------------------------------------------------------------------------
CSS 盒子模型
margin外边距（border边框（ padding内边距（ 内容content 宽width、高height）））
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
--------------------------------------------------------------------------------
CSS 边框
border：像素（1px） 样式（solid） 颜色（black）
top 方向 solid 实线 dotted点状 dashed虚线 double双线
合并缝隙：border-collapse: collapse
boder-style属性用来定义边框的样式
border-width 属性为边框指定宽度
-------------------------------------------------------------------------------
css注释 /* */
块元素左右居中用
margin: 0 auto;
margin: 0px 0px 0px 0px ;(上右下左)
图片的排序
行元素（inline）转换为块元素（block）
display：block；
高级属性--inline-block
上下居中
line-height: 200px;利用行距
盒子怪异模式
box-sizing: border-box;
浮动float
.day{
float:left;
}
overflow: hidden;
1、将外边距合并
2、溢出隐藏
--------------------------------------------------------------------------------
关系选择器（后面所有标签）
找兄弟： 用~（波浪线）链接 如：div~p{color:red;}
找相邻兄弟： 用+（加号）链接 如：div+p{color:red;}
找后代： 用 （空格）链接 如：div空格p{color:red;}
找儿子： 用>（>）链接 如：div>p{color:red;}
消失的CSS属性
1、完全隐藏 display: none; display: block;
2、占位隐藏 visibility:hidden; visibility: visible;
3、完全透明 opacity: 0; opacity: 1;
--------------------------------------------------------------------------------
表单标签
<form action="要提交的地址" method="get"></form>
action="" 提交到哪去？要提交的地址
method="get" 提交方式："post/get"
form之input控件
input表单标签元素
<input name="" type="text" placeholder="密码" value=""/>
name="" 元素的名称=“如用户名” 必写字段 在单选和复选
type="text" 类型=“text”
text：文本框 password：密码 radio：单选框(checked="checked"默认被选中) checkbox：复选框 submit：提交按钮 reset：重置
带边框表单
<form action="">
<fieldset>
<legend>Personal information:</legend> //边框上面加字 <fieldset>元素的标题
Name: <input type="text" size="30" ><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
下拉菜单（直接选中222）
<select>
<optgroup label="Swedish Cars"> // 定义选项组
<option>111</option>
<option selected>222</option>
<option>333</option>
</select>
格子布局
div布局代替table布局
行居中方法
text-align:center;
line-height: 100px;
块居中方法
.box{
width: 400px;
height: 500px;
background-color: blue;
position: relative;
}
.erzi{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
<div class="box">
<div class="erzi"></div>
</div>
清除浮动方法
.baba{
/*1、给父元素固定高度*/
height: 102px;
/*2、overflow: hidden;*/
overflow: hidden;
}
/*3兼顾兼容的清除浮动方法*/
.clearFloat:after{
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearFloat{
zoom: 1;
}
定位
相对定位（相对自己以前的位置） position: relative;
绝对定位（相对父集(0,0)点） position: absolute;
固定定位 position: fixed;
层重叠顺序（y越大越在上） z-index: y;
wrap
part head
part main
center
广告区域
banner
banner-1
banner-2
banner-2-item i1
banner-2-item i2
banner-2-item i3
banner-1
学习用品
study-title
h3、p
study-table
left
right
r1
r2
part service
part foot
--------------------------------------------------------------------------------
圆角
border-radius: 20%;
border-radius：20px左上 40px右上 60px右下 80px左下;
渐变
线性渐变
上下渐变
background: linear-gradient(red,yellow);
左右渐变
background: linear-gradient(to left,red,yellow);
--------------------------------------------------------------------------------
transform-style: preserve-3d;
三维
-------------------------------------------------------------------------------
字体样式
字体大小 font-size: 15px;
字体样式 font-family:"黑体" 字体加引号如宋体
加粗 font-weight:bold;
去掉加粗 font-weight:normal;
斜体 font-style:italic;
字体对齐： text-align:left 左对齐 right右对齐 center居中
文本颜色 color: #FFFFFF;
下划线 text-decoration:underline
文字间距 text-indent:20px 首行缩进
letter-spacing:8px; 两字间距
line-height:20px; 两行间距
-------------------------------------------------------------------------------
06-09
64
64
09-10
623
623
01-19
05-01
05-01
05-01
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
