html:
1.html主要包括 文档类型声明、头部标记、主体标记。带有<>的元素称为html标记
2.标记就是放在“<>”中表示某个功能的编码命令,称为HTML标签或HTML元素。
3.标记中可以插入
css中很重要的一个是使用选择器,如上方的14条内容,使用的是类选择器。
1. 先介绍标签选择器,在css文件中添加
li{
list-style: none;
float: left;
color: #666;
line-height: 5px;
margin-right: 10px;
margin-top: 10px;
}
这段内容会对li标签进行样式添加,所有包含该标签的都会变成这种样式
2.类选择器
格式为 .类名{样式} 如:
.foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;
}
通过定义类名,设置样式,然后在需要的标签中,用class="设置的类名",即可调用样式
可以 也可以
3.ID选择器
格式 #名{内容}
css内:
#a{
width:500px;
height:500px;
background-color:#999;
}
html内:
使用id选择器,然后让div区域变成500*500,颜色为#999;
4.复合选择器
1)并集选择器:用逗号隔开
格式:.名1,.名2{内容}
.center_button1,.center_button2,.center_button3{
width: 158px;
height: 44px;
float: left;
margin-left: 30px;
margin-top: 10px;
line-height: 44px;
text-align: center;
}
2)后代选择器:用空格隔开,先父后子
格式:名1 名2{内容}
.input li{
float: left;
margin-right: 10px;
white-space: nowrap;
color: #999;
line-height: 20px;
list-style: none;
font-size: 12px;
}
3)超链接选择器:
a:link{}
a:visited{}
a:hover{}
a:active{}
超链接选择器4个的顺序不能变注:选择器很重要
5.标签:可以用来修饰文字,一行内用多个,可以在一行内划分出多个区域
如:
6.样式属性:
a) 字体样式
i. 对页面中的字体进行设置样式
ii. Font-size font-family font-weight
b) 背景设置
i. 背景颜色设置:background-color
ii. 背景图片设置:background-image background-size background-repeat
c) 文本属性
行高:line-height
d) 盒子属性
i. 在前端页面设计中,记住所有的元素都是一个盒子(每一个div就是一个盒子)
ii. 盒子包含属性:宽度、高度、颜色、内边距、外边距
iii. 宽度:width,高度:height
iv. 边框:border、border-top、border-left、border-right、border-bottom
v. 内边距:padding、padding-top、padding-left、padding-right、padding-bottom
vi. 外边距:margin、margin-top、margin-left、margin-right、margin-bottom
a) 定位
i. 绝对定位:absolute
ii. 相对定位:relative
iii. 浮动:float
在父亲盒子里面进行浮动的
注意点:
1、如果设置了盒子的边框或者padding区域,一定要相应的减小盒子的宽高值
2、宽度高度值取值方式:像素取值法、百分数取值