反之，按照href="foldername/mystyles.css"的方式指明路径。
“screen”表明用于计算机屏幕。如果指明“print”，规则只有在页面打印时才会被使用。
W3C文档这样描述的：The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
翻译过来就是：only是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only。
@media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and (min-width:xxx) and (max-width:xxx) 在支持媒体查询的浏览器中其实是一模一样的，没有任何区别，因为only将被忽略。但是在不支持媒体查询的浏览器中由于没有only这个媒体类型，因此会直接忽略这条媒体查询。在不支持媒体查询的浏览器中，如果不加only，@media screen and (min-width:xxx) and (max-width:xxx)将会被解析为@media screen，明显与期望不一致。因此通过加一个浏览器不认识的媒体类型only则浏览器将会直接忽略这条媒体查询。
media="only screen and (min-width: 401px) and (max-width: 600px)"/* 在支持媒体查询的浏览器中等于*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用）*/
media="only"
/*如果不带only，在不支持媒体查询的浏览器中*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*将被解析为screen，将会被应用到屏幕类型设备上*/
media="screen"
基本
常识与实践
链接方式
基本
最基本的方式就是直接在html文件中指定元素样式，这种方式不推荐，因为将表现层和结构层混起来了
"style="background-image:url({{user.avatar}})"
内部链接
要为html直接增加css样式，需要在元素中增加开始和结束style标记，css规则放在里面
<style>
p {
color: gray
}
</style>
css文件外置
另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:
<link type="text/css" rel="stylesheet" href="lounge.css" >
多样式表
使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:
<link rel="stylesheet" href="corperate.css">//总公司样式
<link rel="stylesheet" href="beverage-division.css">//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式
<link rel="stylesheet" href="lounge-seattle.css">//西雅图休闲室对样式表做了自己的调整
简写
css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。
简写格式
padding
padding: 0px 40px 30px 20px,顺序是上右下左,顺时针有木有,如果都相同可以用padding: 20px
padding-top: 0px
padding-right: 40px
padding-bottom:30px
padding-left: 20px
margin
上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px,前面指定上下，后面指定左右。
border
边框属性简写 border: thin solid #007e73,可以用你喜欢的任何顺序。
background
背景简写 background: white url(images/cocktail.gif) repeat-x，同样顺序随便
字体
字体简写的格式稍微复杂一些:
font : font-style font-variant font-weight font-size/line-height font-family
选择
子孙选择器
父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如
color: black
}
直接孩子
如果要选择直接的孩子,用>
color: black
}
复杂选择
更复杂的选择,方法还是一样
color: blue
}
规则添加
类
当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性”class”,并提供类名,如”greentea”:
<p class="greentea">
...
</p>
类元素选择器
先选择这个类中的元素,再用”.”指定一个类,最后是类名,如:
p.greentea {
color: green
}
添加类元素
如果想对所有<blockquote>也做同样的处理，可以:
blockquote.greentea,p.greentea {
color: green
}
<blockquote class = "greentea">
类选择器
如果想把<h1>,<h2>,<h3>,<p>和<blockquote>都增加到greentea呢？要对类中的所有元素都用同一样式可以用:
.greentea{
color: green
}
/ 省略所有元素名,只有一个点,则会应用到所有成员 /
多类元素
元素可以有多个类,例如:
<p class="greentea raspberry blueberry"
特定元素选择器
如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?
id
id的作用
id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如
<p id="footer">...</p>
选择元素
用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配
color: red
}//选择id为footer的任意元素
p#footer{
color: red
}//选择id为footer的<p>元素
实践建议
继承
样式继承
层叠
媒体查询
link媒体查询
你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如
<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="lounge-print.css" media="print">
css媒体查询
可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如
@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用
margin-right: 250px
}
}
@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用
margin-right: 30px
}
}
@media print { // 如果要打印页面，使用该规则
body {
font-family: Times, "Times New Roman", serif
}
}
实践建议
属性
盒模型
盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:
border 边框
color 颜色
文本元素的字体颜色
body{
background-color: rgb(80%, 40% , 0%)//橙色
}
还可以指定0-255之间的一个数值,例如:
body{
background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204...
}
font-family 字体
大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,”Courier New”,如:
body{
font-family: Verdana, Geneva, Arial, sans-serif<一一首选字体呈降序
}
字体系列
每个font-family包含一组有共同特征的字体。共有5个字体系列:
body { font-size : small}
h1 { font-size : 150%}
h2 { font-size : 120%}
注意老版IE不支持用像素指定的文本缩放
浏览器默认字体大小
其他属性
left 指定一个元素的左边所在位置
top 控制一个元素顶部的位置
background-image 在元素后面放置一个图像,如
background-image: url(images/background.gif)
//用url括起来,注意没有引号
background-repeat 背景图像是否重复
line-height: 1//代表elixirs中的所有元素的行间距为其自己字体大小的1倍
}
width: 200px
float: right
}
background-color: #675c47
color:#efe5d0
text-align: center
padding: 15px
margin: 10px
font-size:90%
clear:right
}
width: 800px
padding-top: 5px
padding-bottom: 5px
background-color: #675c47
}
那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间
凝胶布局 Jello
width: 800px
padding-top: 5px
padding-bottom: 5px
background-color: #675c47
margin-left: auto
margin-right: auto
}
绝对定位
position: absolute
top: 100px
right: 200px
width: 280px
}
display: table
border-spacing: 10px//于是不再需要div中的外边距
}
display: table-row
}
display: table-cell
background: #efe5d0 url(images/background.gif) top left
font-size:105%
padding: 15px
/ margin: 0px 10px 10px 10px/
vertical-align: top//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom
}
display: table-cell
background: #efe5d0 url(images/background.gif) bottom right
font-size:105%
padding: 15px
/ margin: 0px 10px 10px 10px/
vertical-align: top
}
