HTML
超文本标记语言 是一种创建网页的标准标记语言。
HTML不是编程语言,而是一种标记语言。
HTML使用标记标签来描述页面。
划分:
单标记标签:
双标记标签:
注意事项:
1.命名规则:
数字,字母,下划线 数字不能开头
如:d01 d_1 banner
2.改title
3.符号要在英文状态下书写
charset 字符集
UTF-8 国际通用字符集
gb2312
gbk 宽字符集
css
层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
选择器:
1.标签选择器 p{ }
2.id选择器
步骤:
<h1 id="add">我是h1</h1> 先起id名
#add{
color: chartreuse; 通过#获取id,加样式
}
3.class选择器
步骤:
<b class="acc">我是加粗</b> 先起class名
.add{
color: chartreuse; 通过"."获取class,加样式
}
id和class区别:
id名不允许重复,而class名允许重复
文本:
color 字体颜色
text-align 文本对齐方式 center 居中
background-color 背景颜色
width 宽度
height 高度 单位:px/像素
text-decoration 文本修饰
none 默认 取消
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 穿过文本的一条线
dotted 点虚线
wavy 波浪线
简写:text-decoration: underline overline wavy blue;
文本转换:
text-transform:uppercase/lowercase/capitalize 大写/小写/首字母大写
文本缩进:
text-indent 单位:px
字体大小:
font-size 单位:px
文字字体:
font-family
字体样式:
font-style
normal 正常
italic 倾斜
oblique 倾斜
字体粗细:
font-weight
值:
normal 默认值 正常大小
bold 定义粗体
bolder 更粗
lighter 定义更细字符
inherit 从父元素继承
100-900 400默认
css背景
background-color 背景颜色
颜色值:
1.英文 red blue
2.十六进制 #fff #1057bf
3.rgb() rgb(17,90,195)
背景图片
background-image
url() 路径
background-size:50px 100%; 背景图片大小
background-repeat 背景重复
no-repeat 不重复
repeat-x 沿着X轴重复
repeat-y 沿着Y轴重复
background-position:right bottom; 背景图片位置:左下
值:right bottom
100% 100%
50px 50px
简写: background: url(img/shop_bottom_05.jpg) no-repeat right top;
边框:
border
边框线:
border-style:
solid 实线
dashed 虚线
dotted 点虚线
边框颜色:
border-color
边框粗细:
border-width 单位/px
简写:
border:solid red 2px;
单独给一条边加边框:
border-top:solid red 2px;
border-bottom:solid red 2px;
border-left:solid red 2px;
border-right:solid red 2px;
注意:
1.每个值之间用空格隔开
2.每个值之间的顺序任意
行内与块级
行内标签:
宽高不可控,不独占一行
<img/> <span></span> <font></font> <a></a>
块级标签:
块级宽高可控,独占一行
<p></p> <h1></h1> <div></div>
转换:
行内转块级:display:block;
块级转行内:display:inline;
转行内块:
宽高可控,不独占一行
display:inline-block;
列表:
1.有序列表 ol li
2.无序列表 ul li
3.自定义列表 dl dt dd
list-style: 列表样式
none: 取消
行高:
line-height 调整每一行之间的间距(高度)
上下居中:
把行高的值设置成与外侧盒子高度相同即可。
圆角效果:
border-radius
值:100% px
给盒子半径就会变成圆。
分别设置四个角的不同的圆角效果:
1.border-radius:10px 5px 8px 15px;
四个值: 左上 右上 右下 左下
2.border-radius:10px 5px 8px;
三个值: 左上 右上和左下 右下
3.border-radius:10px 5px;
两个值: 左上和右下 右上和左下
阴影:
1.盒子阴影
box-shadow:
-
X轴偏移量 阴影水平的宽度 必选 可以给负数
-
Y轴偏移量 阴影垂直的高度 必选 可以给负数
-
阴影模糊半径 阴影边缘模糊程度 可选 必须是正数
-
阴影颜色 可选
box-shadow: 10px 10px 7px rgb(151, 149, 149),
-10px -10px 7px rgb(151, 149, 149);
2.文字阴影
text-shadow:
-
X轴偏移量 阴影水平的宽度 必选 可以给负数
-
Y轴偏移量 阴影垂直的高度 必选 可以给负数
-
阴影模糊半径 阴影边缘模糊程度 可选 必须是正数
-
阴影颜色 可选
盒子模型:
所有的HTML元素都可以看成盒子模型。
组成:边框(border), 内容(width,height), 边距( 内边距(padding)和外边距(margin) )
<div></div>
盒子
布局方式: div+css
之前的布局方式:table表格
边距: 布局方式之一
1.内边距
padding
内容到边框的间距
padding-top 上内边距
padding-bottom
padding-left
padding-right
简写:padding:10px 20px 30px 40px;
简写的方向和外边距一样。
2.外边距
margin 调整盒子与盒子之间的距离
单独给一个方向加外边距:
margin-top
margin-bottom
margin-left
margin-right
简写:
-
margin:10px 20px 30px 40px; 四个值:上 右 下 左
-
margin:10px 20px 30px; 四个值:上 左右 下
-
margin: 10px 20px; 四个值:上下 左右
-
margin:10px; 一个值:四个方向
左右居中效果:
margin-left 和 margin-right 值给auto
浮动:
float 布局方式之一
会使我们的元素向左或者向右移动,不能上下移动,其周围的元素会重新排列。
值:
float:left; 左浮动
float:right; 右浮动
清除浮动:
1.调成一个层面上
2.给浮动元素外侧套一个盒子
3.clear:both;
盒子模型的两种方式:
1.标准模式:
一个盒子的总宽度=width+margin(左右)+padding(左右)+border(左右)
2.怪异模式(IE盒子模型):
一个盒子的总宽度=width+margin(左右)
说明:IE浏览器 width已经包含了宽度和内边距.
width:200px;
margin-left:20px;
padding:40px;
border-left:10px;
?
width: 300px;
10px 4
padding:20px
width:300-10*2-20*2
全局样式:
*{ margin:0px; padding:0px; font-size:12px; font-family:"微软雅黑";}
放在css样式的最上侧
什么原因造成div脱离标准文档流?
标准文档流:
是按照一定规矩排列的,默认就是元素从左到右,从上到下排列,块级元素独占一行,行内元素共享一行
本来在标准文档流下,各个元素相安无事,可突然有一天,某个元素心想,我这么优秀,不该出现在这里,于是它成精了,它发现了一道大门,走向新的空间.
原因:浮动 float
position 定位 布局方式之一
1.固定定位(根据浏览器定位)
position:fixed;
top left right bottom
2.相对定位(根据自身定位)
position:relative;
top left right bottom
3.绝对定位(根据父类定位)
position:absolute;
top left right bottom
层: z-index
注意:
必须结合定位使用.
值可以随便给 是数字
数字越大层数越高
position:relative
原始的位置依然占用,不会有其他元素填充.
其真实位置依然是原位置,用margin使其原盒子下方盒子移动,本质上说其物理位置依然是原位置,新位置是渲染出来的一个位置,也可以理解为是一个影子.