CSS样式表
内部样式表
将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
选择器{
属性: 属性值;
}
</style>
</head>
在html5中type="text/css"可以省略。
行内式（内联样式）
<标签名 style="属性: 属性值">内容</标签名>
外部样式表（外链式）
将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到html文档中。
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
link标签需要放在head头部标签中，必须指定link标签的三个属性。
| 属性 | 作用 |
|---|---|
| href | 定义链接外部样式表文件的url |
| type | 定义链接文档的类型 |
| rel | 定义当前文档与被链接文档之间的关系。（stylesheet表示被链接的文档是一个样式表文件） |
样式表的优缺点
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 整个站点 |
标签显示模式
块级元素（block-level）
通常会独自占据一整行或多整行。
用于网页布局和网页结构的搭建。
常见块元素：<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>
特点：
1.总是从新行开始。
2.可以设置宽度、高度、对齐等属性。
3.宽度默认是容器的100%。
4.可以容纳内联元素和其他块元素。
行内元素（inline-level）
即 内联元素。
不占有独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构。
用于控制页面中文本的样式。
常见的行内元素：<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>
特点：
1.和响铃行内元素在一行上。
2.宽、高无效，可以设置水平方向的margin和padding，垂直方向的无效。
3.默认宽度就是本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
注意：
1.只有文字才能组成段落，因此文字类块级标签（p，h1~h6，dt）内不能放块级元素。
2.链接里面不能再放链接。
行内块元素（inline-block）
属于行内元素，但可以设置宽高和对齐属性。
<img />、<input />、<td>
特点：
1.和相邻行内元素（行内块）在一行上，之间会有空白间隙。
<input type="text"/>
<input type="text"/>
2.默认宽度就是它本身内容的宽度。
3.高度、行高、外边距以及内边距都可以控制。
模式转换
块转行内：display: inline
行内转块：display: block
块、行内转行内块：display: inline-block
复合选择器
交集选择器
两个选择器之间不能有空格。
<style >
h3.a1{
color: red;
font-size: 30px;
}
</style>
<body>
<h3 class="a1">我的名字叫a1</h3>
<h3 class="a2">a2在此</h3>
</body>
h3.a1选择的是：类名为a1的h3标签。
并集选择器
当某些选择器定义的样式完全相同或部分相同时使用。
通过 逗号 连接。
通常用于集体声明。
<style >
.a2,p{
color: orange;
}
</style>
<body>
<h3 class="a1">我的名字叫a1</h3>
<h3 class="a2">a2在此</h3>
<p>今天也要加油鸭</p>
</body>
.a2 和 p 这两个选择器都会执行颜色为橘色。
后代选择器（包含选择器）
用来选择元素或元素组的后代。
外层标签在前，内层标签在后，中间用 空格 分隔。
能选择任何包含在内的标签。
<style >
.d1 span{
color: pink;
}
</style>
<body>
<div class="d1">
<span > 9.19 拳头公司说的，最后一次无限火力 </span>
<p > 9.20 阴阳师周年庆 </p>
<div>
<span>我还是个孩子</span>
</div>
</div>
</body>
.d1中的所有span标签更改颜色为粉色。
子元素选择器
只能选择作为某元素 子元素 的元素。
父级标签在前，子级标签在后，中间用 > 连接。
只能包含下一级元素。
<style >
.d1>span{
color: pink;
}
</style>
<body>
<div class="d1">
<span > 9.19 拳头公司说的，最后一次无限火力 </span>
<p > 9.20 阴阳师周年庆 </p>
<div>
<span>我还是个孩子</span>
</div>
</div>
</body>
这里只能对类名为.d1的div的儿子span修改字体颜色，而对于儿子div的儿子span则不起作用。
属性选择器
选取标签带有某些特殊属性的选择器。
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style >
div[class^=font]{
color: red;
}
div[class$=footer]{
font-size: 30px;
}
div[class*=tao]{
color: orange;
}
</style>
</head>
<body>
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
</body>
class^=font 表示 font 开始位置。
class$=footer 表示 footer 结束位置。
class*=tao *= 表示tao 在任意位置都可以。
伪元素选择器
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style >
p::first-letter{
font-size: 30px;
color: yellow;
}
p::first-line{
color: chartreuse;
}
p::selection{
color: orange;
}
</style>
</head>
<body>
<p>我在想：假如世界一直是热闹的，
那么，生命静处常常涌动的寂寥，
和它所浸透的滋味，
氤氲出的到底是怎样的一种情怀。
假如世界一直是清欢的，
那么岁月深处时时滚动的喧嚣，
带给人的浮躁和不安，
缠绕的又是怎样的一种心结。
</p>
</body>
E::first-letter选择的是当前文本的第一个单词或者第一个文字。
E::first-line文本第一行。（浏览器的第一行）
E::selection改变选中文本的样式。（鼠标点击选中）
E::before和E::after敬请期待下回分解。
CSS背景
| 属性 | 用法 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
背景图片
background-image: none | url
none：无背景图。
url：使用绝对或相对地址指定背景图像。
背景平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y
repeat：在纵向和横向上平铺（默认）。
no_repeat：不平铺。
repeat-x：横向平铺。
repeat-y：纵向平铺。
背景位置
设置背景图像的起始位置。
background-position : length length
background-position : position position
length：百分数。默认值：0% 0%。
position：top | center | bottom | left | center | right
说明：
1.如果只规定了一个值，另一个值将是 50%。
2.第一个值是水平位置，第二个值是垂直位置。
背景附着
background-attachment: scroll | fixed
scroll ：背景图像随对象内容滚动。
fixed：背景图像固定。
背景简写
background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background:transparent url(image.jpg) repeat-y scoll 50% 0 ;
背景透明
background:rgba(0,0,0,0.3);
最后一个参数为 alpha-透明度，取值范围：0-1
注意：
背景半透明指盒子背景半透明，盒子里面的内容不受影响。
背景缩放
background-size:300px 100px;
contain;
cover;
数值：设置长度单位或百分比。
contain：自动调整缩放比例，保证图片始终完整显示在背景区域。
cover：自动调整缩放比例，保证图片始终填满背景区域，如有溢出部分则会被隐藏。
凹凸文字
text-shadow：水平位置 垂直位置 模糊距离 阴影颜色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #ccc;
}
div{
color: #cccccc;
font: 700 80px "微软雅黑";
}
div:first-child{
text-shadow: 1px 1px 1px #000,-1px -1px 1px #ffffff;
}
div:last-child{
text-shadow:-1px -1px 1px #000,1px 1px 1px #ffffff;
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
文本装饰
text-decoration
| 值 | 描述 |
|---|---|
| none | 默认 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #000000;
}
a{
width: 200px;
height: 50px;
display: inline-block; /*把a元素转换为行内元素*/
text-align: center; /*文字水平居中*/
line-height: 50px; /*设定行高等于盒子高度，使文字垂直居中*/
color: #ffffff;
font-size: 22px;
text-decoration: none;
}
a:hover{
background: url("img/logo.png") no-repeat;
}
</style>
</head>
<body>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">兑换奖励</a>
<a href="#">下载游戏</a>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
