HTML
超文本标记语言 是一种创建网页的标准标记语言。
HTML不是编程语言,就是一种标记语言。
HTML使用标记标签来描述页面
划分:
单标记标签
双标记标签
注意事项:
1.命名规则:
数字,字母,下划线 数字不能开头
如:d01 d_1 banner
2.改title
3.符号要在英文状态下书写
charset 字符集
UTF-8 国际通用字符集
gbk 宽字符集
<p> 段落
<h1> 标题
<br/> 换行
<hr/> 分割线
<img/> 图片
src 路径
返回上一层 ../
<b> 粗体
<i> 倾斜
<em> 倾斜
<sub> 下标
<sup> 上标
< >左右尖角号
空格
“crl+z 返回 crl+/注释”
css
层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
样式书写:
1.行内样式 style="color: red;"
2.页内样式 <style>写样式</style>
3.外链样式 <link href="css/style.css" rel="stylesheet" type="text/css"/>
选择器;
1.标签选择器 p{ }
2.id选择器
步骤:
<h1 id="add">我是h1</h1> 先起id名
#add{
color: pink; 通过#获取id,加样式
}
3.class选择器
步骤:
<p class="p1">我是p1</p> 先起名
.p1{
color: blue; 通过.获取class,加样式
}
id和class区别;
id名不允许重复,而class名允许重复
文本样式;
color 字体颜色
textalign 文本对齐方式
background-color 背景颜色
text-decoration 文本修饰
none 默认 取消
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 穿过文本的一条线
dotted 点虚线
wavy 波浪线
简写:text-decoration:underline overline wavy chartreuse;
文本转换:
text-transform:uppercase/lowercase/capitalize 大写/小写/首字母大写
文本缩进:
text-indent 单位:px
字体大小
font-size 单位:px
文字字体:
font-family
字体样式:
font-style
normal 正常
italic 倾斜
字体粗细:
font-weight
100-900 400默认
css背景:
background-color 背景颜色
颜色值:
1.英文
2.十六进制
3.rgb()
背景图片:
background-imgage:url();
background-size: 大小
background-repeat: 背景重复
no-repeat 不重复
repeat-x 沿着x轴重复
repeat-y 沿着y轴重复
background-position:位置
right bottom 右下
left top 左上
100% 100%
20px 20px
简写:
background: url(img/朴宝英.png) no-repeat right top;
边框;
border
边框线;
border-style;
soild 实线
dashed 虚线
dotted 点虚线
边框颜色;
border-color
边框粗细;
border-width 单位/px
简写;
border:soild red 2px
单独给一条边加边框:
border-top:soild red 2px;
border-bottom:soild red 2px;
border-left:soild red 2px;
border-right:soild red 2px;
注意:
1.每个值之间用空格隔开
2.每个值之间的顺序任意
行内与块级:
行内标签:
宽高不可控,不独占一行
<img/> <span></span> <font></font> <a></a>
块级标签:
块级宽高可控,独占一行
<p></p> <h1></h1> <div></div>
转换:
行内转块级: display:block;
块级转行内:dispaly:inline;
转行内块:
宽高可控,不独占一行
display:inline-block;
列表:
1.有序列表 ol li
2.无序列表 ul li
3.自定义列表 dl dt dd
列表样式:
list-style:
none: 取消
行高:
line-height 调整每一行之间的间距(高度)
上下居中:把行高的值设置成与外侧盒子高度相同即可
圆角效果:
border-radius
值:100% px
给盒子半径就会变成圆
分别设置四个角的不同的圆角效果:
border-radius:10px 5px 8px 15px;
四个值:左上 右上 右下 左下
border-radius:10px 5px 8px;
三个值:左上 右上和左下 右下
border-radius:10px 5px;
两个值:左上和右下 右上和左下
阴影:
1.盒子阴影:
box-shadow:
1.x轴偏移量 阴影水平宽度 必选项 可以给负数
2.y轴偏移量 阴影垂直高度 必选项 可以给负数
3.阴影模糊半径 阴影边缘模糊程度 可选项 必须是正数
4.阴影颜色 可选
box-shadow: 5px 5px 10px rgb(255, 0, 140),-5px -5px 10px rgb(255, 0, 191);
2.文字阴影:
text-shadow:
1.x轴偏移量 阴影水平宽度 必选项 可以给负数
2.y轴偏移量 阴影垂直高度 必选项 可以给负数
3.阴影模糊半径 阴影边缘模糊程度 可选项 必须是正数
4.阴影颜色
text-shadow: 5px 5px 5px rgb(0, 0, 0, 0.719);
盒子模型:
所有的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 10px 20px;
四个值:上 右 下 左
margin:10px 20px 10px ;
四个值:上 左右 下
margin:10px 20px;
四个值:上下 左右
margin:10px;
四个值:各个方向
左右居中效果:
margin-left和margin-right值给auto