第七章 CSS入门
元素的许多属性都可以设置样式，太多了，记不住，可以参考《CSS Pocket Reference》。
外部样式表，<link type = "text/css" rel = "stylesheet" href = "lounge.css">
CSS包含一些简单的语句，称之为规则。典型的规则包括一个选择器，以及一个或者多个属性和值。选择器将制定规则将应用于哪些元素。记住，每个属性声明要以分号结束。
可以使用元素名来做选择器。
可以通过逗号分隔元素名，可以一次选择多个元素。
很多属性都可以继承，比如<body>元素设置了一个可以继承的属性，那么<body>的所有子元素都会继承这个属性。某些CSS是可以继承的，而某些是不行的，总的来说，如果样式会影响你的文本外观，那么它就是可以继承的。当然也可以覆盖这个继承到的属性。
杂烩汤:
CSS样式 背景色 background-color 文本色 color 设置边框 border 1px 粗细为1像素 solid 实线 {border-bottom : 1px solid black;} 字体设置 {font-family : sans-serif;} left 左边间距 font-weight 设置文本粗细 可以设置粗体 top 控制元素顶部的位置 font-style 设置斜体 {font-style : italic;} list-style 改变列表的外观 background-img 在元素后面放置一个图片 padding 内边距 font-size 文本字体大小 text-align 文本左对齐 右对齐 居中等 line-height 行间距 letter-spacing 在字母之间设置间距 为类xxx设定样式 .xxx{} 如果希望属于类xxx的p元素设定css样式：<p class = “xxx”> p.xxx{ }
W3C验证CSS http://jigsaw.w3.org/css-validator
第八章 增加字体和颜色样式
五大字体 serif sans-serif monospace fanasty cursive，没个字体系列都包含大量的字体。
sans-serif：没有衬线，与serif比，更适合在计算机上显示。
serif：有衬线，新闻报纸的文字排版。
monospace：字体固定宽度，适合显示代码。
curisive和fantasy：比较有趣的字体。
Sans-serif字体系列：Verdana, Arial Black, Trebuchet MS, Arial, Geneva
Serif字体系列： Times, Times New Roman, Georgia
Monosapce字体系列：Courier, Courier New, Andale, Mono
Fantasy字体系列： LAST NINJA, Impact
Cursive字体系列： Comic Sans， Appe chancery
通常制定font-family需要一个候选字体列表,如下：
{font-family： Verdana, Geneva, Arial, sans-serif;} 指定字体的大小写需要注意，最后一个通常是通用字体系列名。
增加web字体，可以了用@font-face规则，而且这个规则最好放在body规则之上：
@font-face {
font-family: "Emblema One"; //font名字
src: url("..../EmblemaOne-Regular.woff"),
url("..../EmblemaOne-Regular.ttf");
}
可以使用google的字体托管服务
杂烩汤：
Text-decoration 文本装饰 比如下划线 删除线 上划线 {text-decoration: underline | override | line-through | noe}
Font-style 控制字体比如倾斜等，字体倾斜和文本倾斜 {font-style ： italic | oblique}
-->italic斜体文本倾斜，另外衬线还有弯曲.但是不是所有的字体都会支持斜体风格也就是italic,所以此时得到的其实就是倾斜文本oblique,oblique也是倾斜的,但是他不是使用一组专门设计的倾斜字符,只是浏览器将正常的文字倾斜,单纯的倾斜了而已。
Font-family : 指定字体系列
Font-size : 120% 1.2em
Font-weight : 设置字体粗细 {font-weight: lighter | normal | bold | bolder}
关键字指定字体大小 ： xx-small, x-small, small, medium, large, x-large和xx-large 大多数浏览器中 samll默认是12px
指定web颜色
-->{background-color ： rgb(80%,40%,0%);}代表红绿蓝各占得百分比
-->{background-color ： rgb(204,102,0);} 255的80%就是204 255的40%就是102 255的0%就是0
-->{background-color ： #cc6600;} 十六进制显示的方法，这里可以简写为#c60 ,但是如果是#cc6601就不可以简写
-->{background-color ： siliver;} 按名指定颜色，但是css只有16中基本颜色以及150种扩展颜色可以采用这种方法
我们改如何指定字体大小呢，有个小技巧：
选择一个关键字(推荐small或者medium),指定他为body规则中的字体的大小，这相当于页面的默认字体大小
然后使用em或者百分比,相对于body的大小为其他元素指定字体大小
第九章 盒模型
使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:
<link rel="stylesheet" href="corperate.css">//总公司样式 <link rel="stylesheet" href="beverage-division.css">//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式 <link rel="stylesheet" href="lounge-seattle.css">//西雅图休闲室对样式表做了自己的调整
简写中字体简写稍微复杂一点，如下：
font : font-style font-variant font-weight font-size/line-height font-family font的属性中font-size必须有 font-size前的属性是可选的，组合任意，不过必须出现在font-size之前 line-height是可选的，只要在font-size后加/然后指定行高即可 font-family名之间要使用逗号分隔 如: font : small/1.6em Verdana, Helvetica, Arial,sans-serif;
font-variant ： normal | samall-caps | inherit;
-->所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
媒体查询
1:link媒体查询
你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如
<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)"> #制定了有屏幕的设备并且宽度不超过480像素 <link rel="stylesheet" href="lounge-print.css" media="print"> #指定了打印机才能用 # 其他属性包括min-device-width,max-device-width,orientation(横向landscape,纵向portrait)
2:CSS媒体查询
可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如:
@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用
#guarantee {
margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用
#guarantee {
margin-right: 30px;
}
}
@media print { // 如果要打印页面，使用该规则
body {
font-family: Times, "Times New Roman", serif;
}
}
-->如果CSS文件很大的话，还是建议使用link元素进行媒体查询。
-->可以使用max-width和min-width指定浏览器的大小，他们表示浏览器窗口本身的最大和最小宽度，而不是屏幕。
杂烩汤：
padding 给内容四周加上一样的内边距 padding-left ： 左边距…
-->{padding : 10px 10px 10px 10px;}表示上，右，下，左的内边距各位10px(顺时针) 可以简写为 {padding ： 10px;} 或者 {padding :10px 10px;}
margin 内容四周加上外边距 background-image 属性用途非常特定，他只是用来设置一个元素的背景图像，只是为了让这个元素更具有吸引力，不可以取代<img>
-->url(images/background.gif); 不需要加引号
background-repeat ： no-repeat | repeat-x | repeat-y | inherit;
background-position : top left |top center |top right |center left |center center |center right |bottom left |bottom center |bottom right;
-->还可以使用%来表示，左上角是0% 0%，右下角是100% 100%
-->还可以使用xpos ypos来表示，左上角是0 0;
-->如果只是指定一个关键字，另外一个默认是center
元素的背景会在内容区和内边距下显示,但是不会延伸到外边距。
border-style 设置边框样式 共计8种 包括实线 虚线 脊线 槽线 { solid 实线 dotted 虚线 inset 内凹 outset外凸 dashed 破折线 double 两条线 groove 槽线 ridge 脊线 border-width 边框宽度(也可以使用thin,medium,thick等关键字来设置) border-color 边框颜色 指定边框其中一边 比如 border-top-style , border-top-color , border-top-width
border-radius 创建圆角 比如 {border-top-left-radius : 3em;}
}
Id和class的区别 Id是唯一的 不允许多个元素有一样的id 虽然可以指定元素有唯一id，但是不妨碍这个元素加入多个class。
list-style 列表的主要属性是list-style-type,利用这个属性可以控制列表中使用的项目符号这个
-->无序列表: disc | circle | squre | none
-->有序列表：decimal,十进制 | upper-alpha,大写字母 | lower-alpha,小写字母 | upper-roman,大写罗马数字 | lower-roman,小写罗马数字
-->可以定制
li{
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 20px;
}
list-style-position : inside 标记在列表项里 | outside 列表项外
第十章 div和span
div 块元素容器
在属于一个逻辑区的元素周围放置<div>开始和结束标记;
div中的元素也会从div继承一些属性(如font-size,color等);
可以用div为页面增加更多结构，进一步展示页面的底层逻辑结构，但不要为了加结构而不必要地增加结构，在完成任务的前提下让结构尽可能简单;
你也可以嵌套结构，例如可以把cats,dogs的<div>放在一个pets <div>中,如:
<div class="pets"> <div class="cats">...</div> <div class="dogs">...</div> </div>
span 内联元素容器
<ul> <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li> <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li> <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li> <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li> <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li> </ul>
伪类 pesudo-class:
a元素可能同时处于多个状态，一般认为适当的顺序是link,visited,hover,focus,active
-->foucs是指浏览器将焦点放在你的链接上时就是焦点状态，浏览器允许用户按下tab键轮流访问时，浏览器访问到某个链接，某个链接就拥有了"焦点"。
-->active是指用户第一次单击一个链接时，就处于活动状态。
-->伪类不止能处理链接，还能对其他类型的元素提供处理，如first-child对应元素的第一个子元素。
a:link { color: green; } a:visited { color: red; } a:hover { color: yellow; }
层叠:给定一组样式，浏览器是按照层叠的方式来确定使用哪一个样式
-->读者可以在他的css属性上加上!important，那他就能覆盖你的样式
-->浏览器会用多个样式表组织样式，首先是你的ccs所有样式表，其次是用户创建的样式，最后浏览器本身会维护一组默认样式
-->浏览器需要选择最特定的规则进行显示,特定性由3个数开始000,如下
杂烩汤：
width 允许改变内容区的宽度
text-align 对内联元素对齐，但是记住只能在块元素上设置 单独对内联元素使用是无效的 line-height 如果直接设置数值为1 说明是自己字体大小的一倍 而不是一个相对量
float ： right 浮动属性 浮动至右侧
第十一章 布局和定位
float流体布局(liquid layouts)，块元素从上往下流入，内联元素从左往右流入，
-->对于内联元素定位时，它们会考虑浮动元素的边界，因此会绕着浮动元素。
-->缺点是无法创建两个相同高度的列，可能还需要移动html的div ，需要其他的设计.
#amazing { width: 200px; float: right; }
当元素流入页面时，在这个元素左边，右边或两边不允许有浮动内容,例如为防止页脚和右边栏重叠，可以用clear设置:
#footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: right; }
流体与冻结设计 : 冻结布局(frozen layouts),冻结布局会锁定元素，如将body中的所有内容都放到一个id为#allcontent的div中
-->如下，页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间
#allcontent { width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; }
凝胶布局（Jello layouts）:凝胶布局会锁定页面中内容区的宽度，不过会将它在浏览器中居中，将内容区的外边距设为auto即可，浏览器会确定正确的外边距是多少，确保左和右外边距相同，所以内容会居中,如下所示:
#allcontent { width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; margin-left: auto; margin-right: auto; }
绝对定位(absolute):它会从流中删除并根据制定的top，left，right或bottom属性定位,由于边栏在流之外，其他元素甚至不知道有这样一个元素，它们会将它完全忽略,所以clear元素不管用了。
-->关于绝对定位还有一个分层放置的问题，一个元素可以放在另一个绝对定位元素上面，那如何分层？谁在上面？每个定位元素都有一个z-index的属性（越靠近”你，z-index更大).
-->可以对任何元素指定绝对位置
-->position的默认值为static，将元素放在正常的文档流中。position共有4个值:static,absolute,fixed和relative。fixed将元素放在相对于浏览器窗口（区别页面）的一个位置上，固定元素永远不会移动。relative让元素正常流入页面，不过在页面上显示之前要进行偏移。
-->绝对元素不必像浮动元素一样指定宽度，不过默认会占浏览器的整个宽度，所以如果要改变这种行为就要设置width属性
-->指定元素位置还可以用百分数,相对于浏览器宽度.
#sidebar { position: absolute; top: 100px; right: 200px; width: 280px; }
css表格:例如一行两列的表格可以按如下方式创建：
<div id="tableContainer"> <div id="tableRow"> <div id="main"> ... </div> <div id="sidebar"> ... </div> </div> </div>
对应的CSS如下:
#tableContainer { display: table; border-spacing: 10px;//于是不再需要div中的外边距 边框间距 } #tableRow { display: table-row; } #main { display: table-cell; background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom } #sidebar { display: table-cell; background: #efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; vertical-align: top; }
-->注意:上面的border-spacing会在单元格之间增加10像素空间，另外在边界周围也会增加10像素空间，但是border-spacing和外边距创建的空间不会折叠！就会导致页眉和页脚与两列之间有20像素的空间，如何修正？将页眉（页脚）的下边距（上边距）设为0即可。
杂烩汤:
固定定位布局fixed:即使滚动页面 这个位置也不会移动{position: fixed;}
Clear元素 不允许内容流动进来 但是使用绝对定位的时候不能使用
Vertical-align 表格的垂直对齐可以分为 top bottom middle
Position ： relative; 相对位置 相对正常流入的相对位置
第十二章 HTML5标记
杂烩汤:
Html5新增元素：
Nav 作为导航菜单
Header footer
-->也可以为article,section,aside增加header元素
--><footer> © 2012, Starbuzz Coffee <br> All trademarks and registered trademarks appearing on this site are the property of their respective owners. </footer>
Article 文章
Section 区块
--><section id="drinks"> </section>
Time 增加一个日期
--><time datetime="2012-02-18">2/18/2012</time>
ul 无序列表注意点:
要改成横向排列 ul li {display ： inline；}
Video 加载视频 : <video controls autoplay width = "512" height = "288">
Controls : 加载视频控件，具体控件格式有具体浏览器指定 也可以指定统一的样式
Autoplay 加载后就自动播放
记住要自定width和height！！！
浏览器不一定支持.mp4格式 所以指定多种格式 <source src = “xxxxx”>
Poster 如果去掉自动播放的属性 使用poster指定视频开始前的海报
width,height设置视频显示区，海报会缩放到指定宽度和高度，视频会保持宽高比，有多余则显示黑边
loop 属性，布尔属性，决定视频结束后哦是否自动重新开始播放视频
preload用来细粒度地控制视频如何加载，实现优化。大多数情况下，浏览器根据autoplay和用户带宽决定加载多少视频，可以覆盖这种设置。preload取值:
-->none,则用户播放视频之前不加载视频
-->metadata，下载视频元数据
-->auto,让浏览器做决定
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"> 指定视频格式,为浏览器提供帮助。
如果你喜欢flash可以把flash放到<object>...</object>控件中，并放到source标记下面，如果浏览器不认识video元素，就会使用flash视频。
MP4容器 包含H.264视频和AAC音频
WebM容器 包含VP8视频和Vorbis音频
Ogg容器 Theora视频和Vorbis音频
Html5额外新增元素:
Mark元素：突出显示一些文本
Audio 在页面中包含声音内容
Progress 显示进度
Meter 显示一个范围内的度量 比如一个0到212的温度计
Canvas 显示用javascript绘制的图像和动画
Figure 显示类似照片 图标 甚至代码清单等独立的内容
第十三章 表格与更多列表
表格:table
用<table>标记开始一个表格，一行用<tr>开始,每个<th>分别是某一列的表头,表头是前后排列的。每个<td>元素包含表格中的一个单元格。例子是一个3行5列的表格:
<table>
<caption>
增加标题<caption>...</caption>, 放在<table>元素之下,<tr>元素之上（即使你后面要用css把它显示在下方）,默认会显示在表格上方。 caption-side : bottom;
</caption> <tr> <th>City</th> <th>Date</th> <th>Temperature</th> <th>Altitude</th> <th>Population</th> <th>Diner Rating</th> </tr> <tr> <td>Walla Walla, WA</td> <td>June 15th</td> <td>75</td> <td>1,204 ft</td> <td>29,686</td> <td>4/5</td> </tr> <tr> <td>Magic City, ID</td> <td>June 25th</td> <td>74</td> <td>5,312 ft</td> <td>50</td> <td>3/5</td> </tr> </table> //添加css table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom;//将标题放在底部 } td, th { border: thin dotted gray; padding: 5px; } caption { font-style: italic; padding-top: 8px; }
nth-child 伪类:
nth-child伪类是一种更高级地选择元素的方法，例如让偶数段落有红色背景，奇数段落有绿色背景:
p:nth-child(even){ background-color: red; } p:nth-child(odd){ background-color: green; }
p:nth-child(2n){ background-color: red; }
p:nth-child(2n+1){ background-color: green; }
合并单元格
就是说有的单元格要跨越多行，可以使用rowspan属性，指定一个数据单元格占多少行，然后从这个单元格所跨越的其他行中删除相应的表格元素。表格元素还能跨多列，只要为td元素增加colspan属性，然后指定列数，跨多列时需要删除同一行中的表格数据元素，例如：
<tr> <td rowspan="2">Truth or Consequences, NM</td> <td class="center">August 9th</td> <td class="center">93</td> <td rowspan="2" class="right">4,242 ft</td> <td rowspan="2" class="right">7,289</td> <td class="center">5/5</td> </tr> <tr> <td class="center">August 27th</td> <td class="center">98</td> <td class="center">4/5</td> </tr>
嵌套表格
表格里可以嵌套表格,只需要把另一个table元素放在一个td中，例如:
<tr> <td class="center">August 27th</td> <td class="center">98</td> <td class="center"> <table> <tr> <th>Tess</th> <td>5/5</td> </tr> <tr> <th>Tony</th> <td>4/5</td> </tr> </table> </td> </tr>
默认情况下每个单元格都有边框，会形成双线，分散注意力，可以如下修改：
border-collapse: collapse;或者border-spacing : 0px;
第十四章 表单
表单form
action属性包含web服务器的url, method属性确定表单数据如何发送到服务器，如POST,另外input 是内联元素
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST"> <p>Just type:<br> First name: <input type="text" name="firstname" value=""><br> Last name: <input type="text" name="lastname" value=""><br> <input type="submit" value = "order now"> #value可以改变默认的名字 </p> </form>
<input type="text" name="fullname"> 文本输入 大多数表单元素都需要有个name，服务器会用到
<input type="password" name="secret"> 输入的文本会加掩码
<input type="submit"> 提交输入
<input type="checkbox" name = "spice" value = "Salt"> 复选框输入 相关的复选框有同哟个名字 但是有不同的值
<input type="checkbox" name = "spice" value = "Pepper">
<input type="checkbox" name = "spice" value = "Garlic">
<input type="radio" id="whole_beantype" name="beantype" value="whole"> 单选钮输入 <input type="radio" id="ground_beantype" name="beantype" value="ground" checked>
<input type="file" name="doc"> 创建一个文件输入控件,使用这个元素的前提是必须使用POST方法
<textarea name="comments" rows="10" cols="48"></textarea> 创建一个多行的文本区，如果文本在文本区中放不下，右边还会出现一个滚动条，非空元素
-->rows 告诉浏览器文本区高度为多少字符,cols属性告诉浏览器文本区宽度为多少字符。 <select name="characters" multiple> 多选菜单 <option value="Buckaroo">Buckaroo Banzai</option> <option value="Tommy">Perfect Tommy</option> <option value="penny">Penny Priddy</option> <option value="Jersey">New Jersey</option> <option value="John">John Parker</option> </select> <input type="text" placeholder="Buckaroo Banzai"> placeholder
<input type="text" placeholder="Buckaroo Banzai" required> required可用于任何表单控件, 指示一个域是必要的,如果没有指定值, 就无法正常提交表单
更多HTML5表单控件输入:
<input type="number" min="0" max="20"> 数字输入，可以限定输入范围
<input type="range" min="0" max="20" step="5"> 类似number，显示滑动条,step指定步长
<input type="color"> 单击是弹出颜色选择器
<input type="date"> 弹出日期选择器
<input type="email"> 会得到一个方便输入email的定制键盘
<input type="tel"> 与email类似
<input type="url"> 和email tel类似应该用<label>元素来标记那些标签，label元素可以提供页面结构的更多的信息，使你能更容易地使用css对标签设置样式，另外对于有视力障碍的人，也有助于他们使用的屏幕阅读器更准确地标识表单元素要使用表单元素必须为表单元素增加一个id属性，然后增加一个label，设置其for属性为相应的id。例如:
<input type="radio" id="whole_beantype" name="beantype" value="whole">
<label for="whole_beantype">Whole bean</label><br>
<input type="radio" id="ground_beantype" name="beantype" value="ground" checked>
<label for="ground_beantype">Ground</label>
杂烩汤:
dl,dt,dd 定义列表 每一项都由一个定义术语和定义描述组成
< dl>< /dl>用来创建一个普通的列表,
< dt>< /dt>用来创建列表中的上层项目，
< dd>< /dd>用来创建列表中最下层项目，
< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间 <dl> <dt>Burma Shave Sign...</dt> <dd>Road signs common in the US</dd> <dt>Route 66</dt> <dd>Most famous road in the U.S. highway system</dd> </dl>
附录:其他
伪元素(pseudo-element)和伪类类似:
p:first-letter:{ /*段落元素文本的第一个字母*/ font-size: 3em; } p:first-line{ /*段落元素文本的第一行*/ font-style: italic; }
选择器
属性选择器,根据属性值来选择元素
img[width]{...} 会选择heml中所有包含width属性的图像
img[height = "300"]{...} 选择height伪300的图像
img[alt~ = "flowers"]{...} alt属性我"flowers"的所有图像
按兄弟选择器
h1+p{...} 选择一个紧跟h1元素的段落
结合选择器
.bluerry p{...}
div#hreentea > blockquote p : first_line{...}
开发商特定的CSS属性
-moz-transform (moz 开发商标识符 标识Mozilla transform是属性)
CSS变换和过渡
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Transforms and Transitions</title> <style> #box{ position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; background-color: red; transition: transform 2s; <!--旋转的过程在2s内完成--> } #box:hover{ transform: rotate(45deg); -webkit-transform: rotate(45deg); /* Safari, Chrome, mobile Safari, and Android */ -moz-transform: rotate(45deg); /* Firefox */ -o-transform: rotate(45deg); /* Opera */ -ms-transform: rotate(45deg); /* IE 9 */ } </style> </head> <body> <div id="box"> </div> </body> </html>
音频<audio>和<video>很类似
<audio src = "song.mp3" id = "boombox" controls> sorrybut audio is not supported in your browser. </audio>
同样的，音频目前也没有统一的标准编码，主要有MP3,WAV和Ogg Vorbis