CSS3基础
1 样式表的使用
1.内联样式表。
只影响单个元素，常用于标签。
<p style="color: aqua;font-size: 20px">This is CSS.</p>
2.内部样式表。
对本页面元素起作用，一般写在<head></head>中，用<style></style>定义。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
font-family: "宋体";
}
</style>
</head>
3.连接外部样式表。
建立一个外部CSS文件用link元素引入到HTML中。
<link rel="stylesheet" type="text/css" href="CSS/realtest.css">
总结：
CSS内联：就是把CSS放在HTML Head里使用Style包围。<style type="text/css"></style>
CSS外联：就是把CSS放到一个单独的文件里，然后在HTML通过调用。<link rel="stylesheet" type="text/css" href="">。
我们知道HTTP请求是比较昂贵的，CSS内联的话肯定会更快，因为把CSS放到HTML文件里，这意味着减少了一次HTTP请求。而外联的话就是 一次HTTP请求，但是可以缓存，当浏览器加载过这个文件时，第二次请求的时候是第缓存里读取的，所以第二次请求时是很快的，外联的CSS还可以重用代 码。那到底是使用内联还是外联呢？这就要看需求，如果一个页面不需要缓存时，也就是这个页面不太访问，或者访问不多的时候，比如注册页面，一般情况下人家 只会进入一次，不可能第次进入这个网站你都去注册，那就另当别论了，这个页面不需要缓存，把CSS放在Head里时可以缩短加载时间，提高用户体验。对于 经常访问的页面，外联肯定是不二的选择。
在一些大的网站，如：Google，Yahoo也可以看到把CSS写在Head里。对于结构表现行为分离的原则，我们对于CSS入在Head里是可以接受的，只要不是写在元素上面。
Copyright@Kingwell Leng
2 定义选择器
选择器分两个种类，第一种为DOM选择器，包含类型选择器、类选择器和选择元素一部分和ID选择器，第二种包含伪选择器。
1.按照类型选择元素。
以标签为单位来设置相同的显示样式，不需要定义前缀符。
<style>
p{
font-family: "宋体";color: red;
}
a{color: #ADADAD;}
</style>
2.按照类型选择标签。
以标签样式类型选择为选择条件，类型为class，“.”为前缀，可以对多个标签应用样式，也可以派生样式。
<head>
<style type=”text/css”>
.anyname{
font-family: "宋体";
color: #ADADAD;
100px;
height: auto;
border: 1px solid blue;
}
</style>
</head>
<body>
<p>This is CSS.</p>
<div class="anyname">
<p>This is CSS!</p>
</div>
</body>
3.按照ID选择元素
类似与类型选择器，以“#”为前缀，在标签中加入id属性引用样式。
<head>
<style type="text/css">
#box{
font-family: "宋体";
color: #ADADAD;
100px;
height: auto;
border: 1px solid blue;
}
</style>
</head>
<body>
<p>This is CSS.</p>
<div id="box">
<p>This is CSS!</p>
</div>
</body>
4.选择元素的一部分
单独选择元素从而不影响其他元素，有子元素选择器和多重元素选择器。
1)子元素选择器
h1>strong{color:red;}
或者：h1 strong{color:red;}
注：只对第一层有效
2)多重元素选择器
优点在于避免过多的id、class属性设置，直接对所需元素进行定义。
#anyname p li a{float:right; color:#ADADAD;}
3)选择部分元素
实现多个元素或标签设置为同一样式。
<style type="text/css">
html {color:black;}
p {color:blue;}
h2 {color:silver;}
</style>
5. 伪类选择器
CSS中已经定义好的选择器，不可以重命名。
1)<a>标签中的集中选择器
a:link表示未访问的链接
a:visited表示已访问的链接
a:hover表示鼠标悬停的链接
a:active表示选定的链接（被按下时）
注：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
如：a:link{color:#ADADAD;text-decoration:none;}/*none表示将默认下划线去掉*/
2)CSS中四个伪元素选择器
First-line 对所选标签元素的第一行应用样式 p:first-line{color:red;}
First-letter 对所选标签元素的文字首字母应用样式 p:first-letter{color:bule;}
Before 在某个元素前插入一些内容 li:before{content:”^^^”;}
After 在某个元素后插入一些内容 li:after{content:”(仅用于测试)”;}
3 文本与排版样式的使用
1. 长度、百分单位
像素（px）与百分比是常用的长度单位。
在没有CSS规则限制下，长度关系：1em(相对单位)==16px(像素)==0.17in(英寸)==12pt(点)==1pc(派卡)==4.2mm(毫米)==0.42cm(厘米)
2. 文本样式属性
1) text-shadow 文字阴影。
div {
text-shadow: 10px 10px 10px orange,/*x偏移量，y偏移量，模糊半径，颜色*/
40px 40px 40px yellow,
20px 20px 23px #ADADAD;/*设置多个文字阴影*/
font-size: 50px;
font-weight: bold;/*{normal|bold|bolder|lighter|inherit}*/
font-family: "宋体";
color: navy;
}
2) word-wrap 文本的控制换行。用于指定区域如div显示不完一行文字的时候为了不超出区域范围而使用的强制换行。
Word-wrap; normal | break-word
*normal 只能在两个单词之间折断，break-word允许词内换行
3) webfont与font-face CSS3中webfont功能使网页上能显示服务器端的字体。
使用方法：直接在<style></style>中插入以下代码
@font-face{
font-famliy:WebFont;
src: url('Font_Sans_R_45b.otf')format("opentype");/*应用服务器端字体*/
font-weight: normal;
}
4) font-size-adjust 可以保持字体在大小部发生变化的情况下改变字体的类型。
font-size-adjust: 0.46;
5) text-ouline与text-stroke 轮廓控制属性。
Text-outline: 2px 4px red; /*宽度，模糊半径，颜色*/
Text-stroke 描边控制
-webkit-text-stroke:3px #ADADAD; /*宽度，颜色*/
4 背景和颜色的使用
1. 背景颜色
网页背景颜色设置：Background-color: transparent | color /*透明或者设置颜色*/
HSLA：/*色调(0-360,0&360==red,120==green,240==bule)，饱和度(100%)，亮度(100%)，透明度(0~1)*/
div.a{background:hsla(120,35%,50%,0.2);height: 20px;}
2. 背景图片
格式如下：
Body{background-img:url(../picture.jpg);}
关于background还有一些属性如-cilp、origin、size等控制背景图片位置等属性
5 盒子概念与使用
1. 元素外边界。
外边界定义了矩形对象与其他矩形对象的距离，即模块与模块之间的空隙。
margin-bottom: 10px;/*下边界*/
margin-left: 20px;/*左边界*/
padding: 40px 30px 20px 60px;/*上下左右边界*/
margin: 0 auto;/*auto居中*/
2. 元素边框
可以定义边框粗细。
border: 50px #ADADAD;/*定义粗细，颜色*/
border-style: solid dotted double dashed;/*上下左右边框单独设置样式*/
border-style属性：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
3. 元素内边界
内容与边框的空隙，与外边界属性类似。
padding: 40px;
设置一个的时候表示上下左右距离一样，也可以用分别设置上下左右边界距离。
padding: 40px 30px 20px 60px;
4. 内容的宽度、高度设置
在设置边框的时候可以一同定义内容的宽高度。
div.a{
background:hsla(120,35%,50%,0.2);height: 20px;200px;
margin-bottom: 10px;/*外边界定义*/
margin-left: 20px;
margin: 0 auto;
padding: 40px 30px 20px 60px;/*内边界定义*/
height: 100px;/*宽高度定义*/
100px;
border: 50px #ADADAD;/*边框定义*/
border-style: solid dotted double dashed;
}
5. 列表样式
常见的列表属性值
list-style-type /*设定引导列表的符号类型*/
list-style-image /*选择图像作为项目的引导符号*/
list-style-position /*决定列表项目缩进*/
常见的列表符号属性
Circle 设定类型
Square 图像
Decimal 阿拉伯数字
Lower-roman 小写罗马数字
Wpper-roman 大写罗马数字
Lower-alpha 小写字母
Wpper-alpha 大写字母
None 不现实项目符号
Disc 实心圆
在style中使用列表样式
List-style-type:decimal;
注：
//-ms代表ie内核识别码
//-moz代表火狐内核识别码
//-webkit代表谷歌内核识别码
//-o代表欧朋【opera】内核识别码
//统标识语句句写符合w3c标准
2017-11-15