Head FIRST HTML & CSS 16/03/17
最后更新时间 2016-03-18 19:11:51
css基本:
font-famliy
font-size
font-style
text-decoration
color
background-color
line-height
盒型
...
技巧:
在body选择器内先定义父类元素,给子类继承,便于管理
font-famliy后的选项其实是一个待选的优先列表
font-size 在body内最好先定义small,medium,large...子类通过200%,1.2em改变
font-style控制斜体,和<em>本质不同 italic
text-decoration 文本样式 underline
color,background-color通过rgb控制颜色 (0~255)
通过<link>满足不同设备的用户体验
@font-face{
font-family:"EdsonLin Font";
src:url("font/AlexBrush-Regular.ttf");
}
css内置格式
若字体pc未安装,可以通过webfont进行操作,自定义font
置顶操作
盒型:内距:(25px)
padding
边框:
border-color
border-width
border-style
外距:(30px)
margin
背景:
background-image: url(../jpg); 没有引号
background-repeat: no-repeat;
background-position: top left;
根据需要为html增加过个<link>标记,涵盖所有的设备
<link href="../.css" rel="stylesheet" media="screen and (max-device-width : 480px");
屏幕显示 screen
打印 print
了解设备的像素 max-device-width 最大为 min-device-width 最小为
设置不同浏览器像素 max-width min-width
css的内置媒体格式
代码样例
@media screen and (min-device-width:481px){
#guarantee{
margin-right: 250px;
}
}
@media screen and (max-device-width:481px){
#guarantee{
margin-right: 30px;
}
}