一.CSS是什么
CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。
二.CSS基础
1.CSS样式规则
如图：
具体写法如下：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: orange;
font-size:26px;
font-family: "宋体"；
}
</style>
</head>
<body>
<p>我是中国人</p>
</body>在head中设置style标签，然后使用 选择器 { 属性：值； 属性：值； } 的格式为某一个标签设置样式，这里是设置了p标签
这里的选择器也叫标签选择器，就是用html标签名作为选择器。
2.字体设置
- font-size：字号大小，一般用px来作为单位
- font-family：字体，如微软雅黑，宋体等
- font-weight：字体粗细
- font-style：字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，italic：倾斜
font:综合设置字体样式
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
<style>
p{
font:italic bold 18px "微软雅黑";
color:red;
}
</style>效果：
3.选择器（seletor）
1.标签选择器
标签选择器就是使用html标签来选择，就是上面使用的
选择了比如p，或者h2,div这样的标签，那么整个页面的某类标签就会变成该样式。
2.类选择器
使用class 和 . 符号来配合选择，如：
<head>
<meta charset="UTF-8">
<style>
.vv {
font:italic bold 18px "微软雅黑";
color:red;
}
</style>
</head>
<body>
<div class="vv">飞飞飞</div>
</body>
3.多类名选择器
多类名选择器就是class中放置多个类名，然后在style中设置，如：
<head>
<meta charset="UTF-8">
<style>
.beijing {
color:red;
}
.f-beijing {
font-size: 50px;
}
</style>
</head>
<body>
<span class="beijing f-beijing">上海</span>
</body>这个是为了在页面较复杂时，灵活的设置样式
4.id选择器
id选择器和类选择器用法一致，只是将class换成id，然后将 . 符号换成 # 符号而已如：
<head>
<meta charset="UTF-8">
<style>
#vv {
font:italic bold 18px "微软雅黑";
color:red;
}
</style>
</head>
<body>
<div id="vv">飞飞飞</div>
</body>
5.id选择器和类选择器的区别：
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次
如：
<body>
<div class="vv">飞飞飞</div>
<div class="vv">飞飞飞</div> 可行，可以使用多次
<div id="gg">飞飞飞</div>
<!-- <div id="gg">飞飞飞</div> 错误，只能使用一次-->
</body>
6.通配符选择器
*代表所有元素
<head>
<meta charset="UTF-8">
<style>
* {
color:red;
}
</style>
</head>
<body>
<p>啦啦啦</p>
<h2>飞飞飞</h2>
<h3>飞飞飞</h3>
</body>效果：
7.伪类选择器
伪类：Pseudo-classes，伪类选择器也是一种选择器，用冒号：表示 , 目的是添加一些选择器的特殊效果。
如超链接标签a，可以对a添加特殊效果：如：
<style>
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
</style>
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。既LVHA顺序必须不能更改，可以记成love-hate.
伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>如果在上面的例子的链接已被访问，它会显示为红色。
结构伪类选择器：
如：
<style>
p:first-child { /* 选择第一个孩子 */
color: pink;
}
p:last-child { /* 最后一个孩子 */
color: red;
}
p:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: blue;
}
</style>
<body>
<p>第一个</p>
<p>第二个</p>
<p>第三个</p>
<p>第四个</p>
<p>第五个</p>
</body>效果：
如下是所有伪类选择器：
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
１．交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special
交集选择器 是 并且的意思。 即...又...的意思
比如： p.one 选择的是： 类名为 one 的 段落标签。
２.并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
并集选择器是 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如 ：
.one, p , #test {
color: #F00;
}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
３.后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。
<style >
h1 em {color:red;}
</style>
<body>
<h1>This is a <em>important</em> heading</h1>
</body>将h1标签下的所有em标签 设置为红色
效果：
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
4.子元素选择器
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，可以使用子元素选择器（Child selector）
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意 > 符号左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
比如：
.demo > h3 {color: red;}
说明 h3 一定是demo 亲儿子。 demo 元素包含着h3
子元素选择器 只会选择儿子，而不会选择孙子，如下：
第二行的strong是em的子元素，这样就无法变成红色。只有第一行能变红
<style >
h1 > strong {color:red;}
</style>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important </h1>
<h1>This is <em>really <strong>very</strong></em> important</h1>
</body>
总结下选择器：
- # 用于选择id, id选择器
- . 用于选择class ，类选择器 和 交集选择器
- ： 用于 伪类选择器
- ，用于并集选择器
- 空格 用于后代选择器
- > 用于子类选择器
四.CSS外观样式
1.文本的对齐方式，行高和首行缩进：
- text-align可以设置水平对齐方式，有center,left 和right的常用属性
- line-height可以设置行高，一般用px做单位
- text-indent可以设置首行缩进，2em代表：2个字符的缩进，如果是文本内容为汉字，则缩进两个汉字
<head>
<meta charset="UTF-8">
<style>
h3 {
text-align: center;
}
p{
line-height:30px;
}
p{
text-indent:2em;
}
</style>
</head>
<body>
<h3>刘德华的经历</h3>
<p>
刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [23] 。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [24] 。
</p>
<p>刘德华从黄大仙天主教小学毕业后升读可立中学 [25] 。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路</p>
</body>效果：
2.字间距和单词间距
- letter-spacing 属性用于定义字间距，可以为负数，负数则会重叠在一起，默认为normal。
- word-spacing 属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal
<style>
p{
letter-spacing: 5px;
word-spacing: 10px;
}
</style>
<body>
<p>
刘德华出生于香港新界，在家中排行老四
</p>
<p>
my name is kevin
</p>
</body>效果：
3.颜色半透明 和 文字阴影（Css3新增）
颜色半透明： color: rgba(r,g,b,a)
a 是alpha 透明的意思 取值范围 0~1之间 ， 如：
<style>
p{
color: rgba(0,0,0,0.5);
}
</style>
<p>
刘德华出生于香港新界，在家中排行老四
</p>效果：
文字阴影：
text-shadow: 水平位置 垂直位置 模糊程度 阴影颜色; 如：
p{
text-shadow:3px 5px 1px rgba(100,0,0,0.5);
}效果：
4.CSS写在哪里
1.内部样式表（内嵌式）
这种就是把css写在head标签中，既上面的例子中都是使用这种方式
2.行内式（内联样式）
这种就是写在标签中，如:
<p style="color: red; font-size: 30px">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</p>3.外部样式表（外链式）
使用link标签来连接css文件
可以把css写在一个单独的css文件中，然后通过link标签的href属性来连接该css文件
如：
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="t.css">
</head>这样的好处是结构样式分离，可以一个css文件使用整个站点。
若是简单的demo，则可以使用第一种，第二种。若是大型的网页，推荐第三种。
5.CSS背景
背景有几种属性：
- background-color:定义背景颜色
- background-image:定义背景图片
- background： 可以定义背景的一切内容，包括颜色、图片、图片位置等东西，可以定义多个
- background-repeat:定义背景是否平铺
- background-position:定义背景的位置，用空格隔开
- background-attachment : 设置或检索背景图像是随对象内容滚动还是固定的
举例如下：
div{
width: 300px;
height: 300px;
background-color: pink;
background-image: url(san.jpg);
background-repeat:no-repeat;
background-position:center top
}效果：
其中background-position属性还可以用数值来定义如：
background-position:10px 50px;第一个为水平方向，第二个为垂直方向，x轴为10px，y轴为50px,
也可以是混搭如下面这样：
background-position:center 50px;水平为居中，垂直方向y轴为50px
background-attachment的参数说明：
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明：设置或检索背景图像是随对象内容滚动还是固定的。
如：
background-attachment：fiexd
background可以简写上面的语句：
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
如：
background: pink url(san.jpg) no-repeat fixed center 50px;这一句话等价于5句分开的
精灵图 CSS sprite：
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
如下：
<style>
.yy{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
<body>
<div class="yy"></div>
</body>
结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。
字体图标
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont).
字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小，但携带的信息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药...
字体图标使用流程
下载字体图标：http://www.iconfont.cn/
然后把.css文件放在项目中，然后link引入：
<head>
<link rel="stylesheet" href="./iconfont.css">
</head>
<body>
<i class="iconfont icon-meinv"></i>
</body>
鼠标样式：
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
</ul>
CSS 定位：
有float和position
float就好比浮动起来的，而position则是不占位置的绝对定位。
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
