我今天学到了什么
1.THML和CSS
网页由THML和CSS书写而成,THML是网页的结构,CSS修饰THML标签
2.THML标签
THML的结构
开始标签<body>
<body>结束表
3.常见THML标签
div盒子标签,
p段落标签,
h1~h6标题标签(1最大,依次递减,到6结束),
ul不排序列表标签,li列表项目标签,
dl,定义列表标签,dt定义项目标签,dd定义术语标签,
img图片标签,
input输入框标签,
a超链接标签,
button按钮标签,
4.常用CSS样式
color设置文字颜色
height设置一个元素高度
width设置一个元素宽度
background-color设置背景颜色
background-image设置一个元素的背景图片
line-height设置文字行高
text-align设置文字对齐方式
border-width边框宽度
border-style边框样式
border-color边框颜色
p:hover{color:blue}当鼠标移动到元素时改变元素CSS样式
5.CSS常用选择器
p{} 元素选择器
p.one{} class选择器
p#two{} id选择器
p:hover{}伪类选择器
<p class=''one''id="two">hello world</p>
6.盒子模型
6935825-f6dc49dcd17113d3.png
元素居中margin-left:auto;margin-right:auto 仅针对块元素有效
盒子距离
margin:30px 盒子四边外间距30px
margin:30px 40px 盒子上下边外间距30px 左右边外间距40px
margin:30px 40px 50px 盒子上边外间距30px 左右边外间距40px 下边外间距50px
margin:30px 40px 50px 60px 盒子上边外间距30px 右边外间距40px 下边外间距50px 左边外间距60px
b我今天掌握了什么
1.THML和CSS
网页由THML和CSS书写而成,THML是网页的结构,CSS修饰THML标签
2.THML标签
THML的结构
开始标签<body>
<body>结束表
3.常见THML标签
div盒子标签,
p段落标签,
h1~h6标题标签(1最大,依次递减,到6结束),
ul不排序列表标签,li列表项目标签,
dl,定义列表标签,dt定义项目标签,dd定义术语标签,
img图片标签,
input输入框标签,
a超链接标签,
button按钮标签,
4.常用CSS样式
color设置文字颜色
height设置一个元素高度
width设置一个元素宽度
background-color设置背景颜色
background-image设置一个元素的背景图片
p:hover{color:blue}当鼠标移动到元素时改变元素CSS样式
line-height设置文字行高
text-align设置文字对齐方式
border-width边框宽度
border-style边框样式
border-color边框颜色
5.CSS常用选择器
p{} 元素选择器
p.one{} class选择器
p#two{} id选择器
p:hover{}伪类选择器
<p class=''one''id="two">hello world</p>
6.盒子模型
6935825-f6dc49dcd17113d3.png
元素居中margin-left:auto;margin-right:auto 仅针对块元素有效
盒子距离
margin:30px 盒子四边外间距30px
margin:30px 40px 盒子上下边外间距30px 左右边外间距40px
margin:30px 40px 50px 盒子上边外间距30px 左右边外间距40px 下边外间距50px
margin:30px 40px 50px 60px 盒子上边外间距30px 右边外间距40px 下边外间距50px 左边外间距60px
