A今天学了什么
1.html和CSS是什么
html是标签组成的网页,加上css修饰的网页
2.了解了html标签的结构
开始标签是<body>
结束标签是</body>
3.html的常用标签有:
p是段落标签
h1~h6是标题,h1是一级标题(字体最大),h2是二级标题…
h0,h7,h8是无意义标签
ul是无序列表
li是列表项目
ul包含li
dl是定义列表
dt定义术语
dd定义描述
dl里面可以包含dt和dd
img是图片标签
input是输入框
a是超链接
button是按钮标签
div是盒子标签,可以盒子套盒子,可以包含很多标签在div里面
4.css的常用样式有:
color是颜色
width是宽度
height是高度
background-color是背景颜色
background-image是背景图片
text-align文字样式
border是边框
border-width是边框宽度
border-style是边框风格样式
border-color是边框颜色
margin是边界
margin-left是左边界
margin-right是右边界
如果margin只有一个数值(如margin:5px),那么它指的是上下左右边界各数值则相等(都是5px)
如果margin有两个数值(如margin:5px 10px),那么它指的是上下边界数值是5px,左右边界则是10px
如果margin有三个数值(如margin:5px 10px 15px),那么它指的是上边界是5px,左右边界是10px,下边界则是15px
如果margin有四个数值(如margin:5px 10px 15px 20px),那么它则是一个顺时钟的方向,上边界是5px,右边界是10px,下边界是15px,左边界是20px
padding是填充元素(同上)
p:hover{color:blue}
//当鼠标移动到元素上时可以改变css的样式
5.css的常用选择器
p{ }是元素标签选择器
.one{ }class选择器
#two{ }id选择器
:hover{ }是伪类选择器
B我掌握好的地方
1.了解了html标签的结构
开始标签是<body>
结束标签是</body>
2.html的常用标签有:
p是段落标签
h1~h6是标题,h1是一级标题(字体最大),h2是二级标题…
h0,h7,h8是无意义标签
ul是无序列表
li是列表项目
ul包含li
dl是定义列表
dt定义术语
dd定义描述
dl里面可以包含dt和dd
img是图片标签
input是输入框
a是超链接
button是按钮标签
div是盒子标签,可以盒子套盒子,可以包含很多标签在div里面
3.css的常用样式有:
color是颜色
width是宽度
height是高度
background-color是背景颜色
background-image是背景图片
text-align文字样式
border是边框
border-width是边框宽度
border-style是边框风格样式
border-color是边框颜色
margin是边界
margin-left是左边界
margin-right是右边界
如果margin只有一个数值(如margin:5px),那么它指的是上下左右边界各数值则相等(都是5px)
如果margin有两个数值(如margin:5px 10px),那么它指的是上下边界数值是5px,左右边界则是10px
如果margin有三个数值(如margin:5px 10px 15px),那么它指的是上边界是5px,左右边界是10px,下边界则是15px
如果margin有四个数值(如margin:5px 10px 15px 20px),那么它则是一个顺时钟的方向,上边界是5px,右边界是10px,下边界是15px,左边界是20px
padding是填充元素(同上)
p:hover{color:blue}
//当鼠标移动到元素上时可以改变css的样式
5.css的常用选择器
p{ }是元素标签选择器
.one{ }class选择器
#two{ }id选择器
:hover{ }是伪类选择器
C我掌握不好的地方
各元素单独拿出来用还可以弄清楚,很多组合在一起的时候容易弄晕
margin和padding容易弄混淆