CSS3
CSS概念
层叠样式表(英文全称:Cascading Stle Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
一、CSS简介
什么是CSS
- CSS:全称:Cascading Style Sheets 层叠样式表定义如何显示HTML元素
- 多个样式可以层层覆盖叠加，如果不同的CSS样式对同-html标签进行修饰，样式有冲突的 应用优先级高的，不冲突的共同作用
CSS能干什么
- 修饰美化html网页。
- 外部样式表可以提高代码复用性从而提高工作效率。
- html内容与样式 表现分离，便于后期维护。
CSS书写规范
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和一个值组成。
基础语法
选择器{属性:值;属性:值...}
注意事项：
请使用胡括号来包围声明
如果值为若干单词，则要给值加引号
多个声明之间使用分号;分开
css对于大小写不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感
二、CSS导入方式
内嵌方式(内联方式 )
把CSS样式嵌入到html标签中，类似属性的用法
<div style="color:blue;font-size:50px">This is my HTML page.</div>
内部方式
在head标签中使用style标签引入css
<style type="text/css">
div{color:red;font-size:50px}
</style>
外部方式
将css样式抽成一个单独文件，使用者直接引用
创建单独文件 div.css
内容示例:div{color:green;font-size:50px}
引用语句写在head标签内部
<link rel="stylesheet" type="text/css" href="div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型,告诉浏览器使用css解析器去解析
href:css文件地址
@import方式
在页面中引入一个独立的单独文件
<style type="text/css">
@import url("div.css")
</style>
link和@import方式的区别:
link所有浏览器都支持,@import某些版本低的IE不支持
@import是等待html加载完成才加载
@import不支持js动态修改
三、CSS选择器
主要用于选择需要添加样式的html元素
基本选择器
元素选择器:在head中使用style标签引入在其中声明元素选择器:html标签(属性:属性值)
<style type="text/css">
span{color:red;font-size:100px}
</style>
id选择器：给需要修改样式的html元素添加di属性标识，在head中使用style标签引入在其中声明id选择器：#id值{属性:属性值}
创建id选择器:
<div id="s1">hello,everyone!</div>
<div id="s2">hello,everyone!</div>
<div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
#s1{color:red;font-size:100px}
#s2{color:green;font-size:100px}
#s3{color:blue;font-size:100px}
</style>
class选择器:给需要修改样式的html元素添加class属性样式标识，在head中使用style标签引入在其中声明class选择器:class名{属性:属性值}
创建class选择器:
<div class="s1">hello,everyone!</div>
<div class="s2">hello,everyone!</div>
<div class="s3">hello,everyone!</div>
根据class选择器进行html文件修饰:
<style type="text/css">
.s1{color:purple;font-size:100px}
.s2{color:pink;font-size:100px}
.s3{color:yellow;font-size:100px}
</style>
备注:以上选择器的优先级从高到低:id选择器，class选择器，元素选择器
属性选择器
根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明
格式为:
htm标签[属性='属性值']{css属性:css属性值;}
html标签[属性]{css属性:css属性值;}
body内容：
<form name="login" action="#" method="get">
<font size="3">用户名:</font>
<input type="text" name="username" value="zhangsan"><br>
<font size="3">密码</font>
<input type="password" name="password" value="123456"><br/>
</form>
head中书写:
<style type="text/css">
input[type='text']{
background-color:pink;
}
input[type='password']{
background-color:yellow;
}
font[size]{
color:green;
}
a[href]{
color:blue;
}
/*name以h开头的a标签*/
a[name^="h"]{
color:red;
}
/*name以h结束的a标签*/
a[name$="h"]{
color:red;
}
</style>
伪对象选择器
<style type="text/css">
/*伪类选择器在指定的对象之前或者之后插入内容*/
.div1:before{
content:url(img/1.jpg);
}
.div1:after{
content:url(img/1.jpg);
}
</style>
伪元素选择器
主要是针对a标签
语法:
静止状态a:link{css属性}
悬浮状态a:hover{css属性}
触发状态:a:active{css属性}
完成状态:a:visited{css属性}
设置伪类的顺序：a:link->a:visited->a:hover->a:active
代码：
<a href="https://hao.360.cn/">点我吧</a>
样式:
<style type="text/css">
<!--静止状态-->
a:link{color:red;}
<！--悬浮状态-->
a:hover{color:green;}
<!--触发状态-->
a:active{color:yellow;}
<!--完成状态-->
a:visited{color:blue;}
</style>
层级选择器
父级选择器 子级选择器......,具体示例如下:
<div id="div1">
<div class="div11">
<span>span1-1</span>
</div>
<div class="div12">
<span>span1-2</span>
</div>
</div>
<div class="div2">
<div id="div22">
<span>span2-1</span>
</div>
<div id="div23">
<span>span2-2</span>
</div>
</div>
<style type="text/css">
#div1 .div11{color:red;}
#div1 .div12{color:purple;}
.div2 #div22{color:green;}
.div2 #div23{color:blue;}
</style>
高级选择器
| 例子 | 例子描述 |
|---|---|
| .intro | 选择 class="intro" 的所有元素。 |
| .name1.name2 | 选择 class 属性中同时有 name1 和 name2 的所有元素。 |
| .name1 .name2 | 选择作为类名 name1 元素后代的所有类名 name2 元素。 |
| #firstname | 选择 id="firstname" 的元素。 |
| * | 选择所有元素。 |
| p | 选择所有 <p> 元素。 |
| p.intro | 选择 class="intro" 的所有 <p> 元素。 |
| div, p | 选择所有 <div> 元素和所有 <p> 元素。 |
| div p | 选择 <div> 元素内的所有 <p> 元素。 |
| div > p | 选择父元素是 <div> 的所有 <p> 元素。 |
| div + p | 选择紧跟 <div> 元素的首个 <p> 元素。 |
| p ~ ul | 选择前面有 <p> 元素的每个 <ul> 元素。 |
| [target] | 选择带有 target 属性的所有元素。 |
| [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
| [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
| [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| a[href^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
| a[href$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 |
| a[href*="w3school"] | 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。 |
| a:active | 选择活动链接。 |
| p::after | 在每个 <p> 的内容之后插入内容。 |
| p::before | 在每个 <p> 的内容之前插入内容。 |
| input:checked | 选择每个被选中的 <input> 元素。 |
| input:default | 选择默认的 <input> 元素。 |
| input:disabled | 选择每个被禁用的 <input> 元素。 |
| p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 |
| input:enabled | 选择每个启用的 <input> 元素。 |
| p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 |
| p::first-letter | 选择每个 <p> 元素的首字母。 |
| p::first-line | 选择每个 <p> 元素的首行。 |
| p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
| input:focus | 选择获得焦点的 input 元素。 |
| :fullscreen | 选择处于全屏模式的元素。 |
| a:hover | 选择鼠标指针位于其上的链接。 |
| input:in-range | 选择其值在指定范围内的 input 元素。 |
| input:indeterminate | 选择处于不确定状态的 input 元素。 |
| input:invalid | 选择具有无效值的所有 input 元素。 |
| p:lang(it) | 选择 lang 属性等于 "it"（意大利）的每个 <p> 元素。 |
| p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
| p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
| a:link | 选择所有未访问过的链接。 |
| :not(p) | 选择非 <p> 元素的每个元素。 |
| p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
| p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
| p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
| p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
| p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
| input:optional | 选择不带 "required" 属性的 input 元素。 |
| input:out-of-range | 选择值超出指定范围的 input 元素。 |
| input::placeholder | 选择已规定 "placeholder" 属性的 input 元素。 |
| input:read-only | 选择已规定 "readonly" 属性的 input 元素。 |
| input:read-write | 选择未规定 "readonly" 属性的 input 元素。 |
| input:required | 选择已规定 "required" 属性的 input 元素。 |
| :root | 选择文档的根元素。 |
| ::selection | 选择用户已选取的元素部分。 |
| #news:target | 选择当前活动的 #news 元素。 |
| input:valid | 选择带有有效值的所有 input 元素。 |
| a:visited | 选择所有已访问的链接。 |
四、CSS属性
文字属性
| 属性名 | 取值 | 描述 |
|---|---|---|
| font-size | 数值 | 设置字体大小 |
| font-family | 默认，宋体，楷体等 | 设置字体样式 |
| font-style | normal正常;italic斜体; | 设置斜体样式 |
| font-weight | 100-900数值;bold;bolder; | 粗体样式 |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px "宋体"; |
文本属性
| 属性名 | 取值 | 描述 |
|---|---|---|
| color | 十六进制;表示颜色的英文单词; | 设置文本颜色 |
| text-decoration | none;underline;overline;blink; | 文本的装饰线 |
| text-align | left;right;center; | 文本水平对齐方式 |
| word-spacing | normal;固定值; | 单词之间的间隔 |
| line-height | normal;固定值; | 设置文本的行高 |
| text-shadow | 四个取值依次是: 水平偏移;垂直偏移;模糊值;阴影颜色; | 设置阴影及模糊效果 |
| text-indent | 5px缩进5像素;20%缩进父容器宽度的百分之二十; | 缩进元素中文本的首行 |
背景属性
| 属性名 | 取值 | 描述 |
|---|---|---|
| 背景色 | 16进制;用于表示颜色的英语单词; | 设置背景色 |
| 背景图像 | url("图片路径") | 设置背景图片 |
| 背景重复 | 重复-y;重复-x;重复;不重复; | 设置背景图的平铺方向 |
| 背景位置 | 上下;左;右;中; | 改变图像在背景中的位置 |
渐变属性
线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
列表属性
| 属性名 | 取值 | 描述 |
|---|---|---|
| list-style-type | disc,none等 | 改变列表的标识类型 |
| list-style-image | url(“图片地址”) | 用图像表示标识 |
| list-style-position | inside;outside | 标识出现在列表项内容之外还是内部 |
尺寸属性
width:设置元素的宽度
height:设置元素的高度
显示属性
显示属性display,以下是常用取值:
none:不显示
block:块级显示
inline:行级显示
#div{
display:block;
/*块状元素*/
}
#div{
display:inline;
/*内联元素*/
}
#div{
display:block;
/*内联块状元素*/
}
#div{
display:none;
/*元素隐藏*/
}
块级元素与行级元素的转变（block,inline）
控制块元素排到一行(inline-block)
控制元素的显示和隐藏(none)
轮廓属性
绘制于元素周围的一条线,位于边框边缘的外围，可起到突出元素的作用。常用属性：
| 属性名 | 取值 | 描述 |
|---|---|---|
| outline-style | solid(实线)/dotted(虚线)/dashed(虚线)等 | 设置轮廓的样式 |
| outline-color | 16进制;用于表示颜色的英文 | 设置轮廓的颜色 |
| outline-width | 数值 | 设置轮廓的宽度 |
浮动属性float
.layer01{
float:left;
}
.layer01{
float:right;
}
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2、使框2从视图中消失。
如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
clear属性：规定元素的哪一侧不允许其他浮动元素。它的取值如下：
| 取值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧 。 |
| onherit | 规定应该从父元素继承clear属性的值。 |
.lay04{
clear:left;
}
.lay04{
clear:right;
}
.lay04{
clear:both;
}
inline-block和float的区别
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
父元素塌陷
如何解决当前div中的所有小div全部浮动 此时大div会变成一个线，不好看，此时解决方案有四种：
1.给div设置宽度和高度
2.加一个空的div给这个div设置清除左右浮动，内外边距都为0
3.给父div设置overflow：hidden
4.<div class="clear">
</div>
.clear:after{
content:'';/*在clear类后面添加内容为空*/
display:block;/*把添加的内容转化为块元素*/
clear:both;/*清除这个元素两边的浮动*/
}
overflow属性
定位属性
position属性
div.static{
position:static:/*默认定位;清除定位*/
}
div.static{
position:relative:/*相对定位*/
top:30px;
left:40px;
}
div.static{
position:absolute:/*绝对定位*/
top:30px;
left:40px;
}
div.static{
position:fixed:/*固定定位*/
top:30px;
left:40px;
}
/*父相子绝*/
相对定位：元素框便宜某个距离，元素仍保持其未定为前的形状，他原本所占位置的空间仍保留。
<head>
<style type="text/css">
h2.pos_left{
position:relative;
left:-20px
}
h2.pos_right{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对于定位会按照元素的原始位置对该元素进行移动</p>
<p> 样式"left:-20px" 从元素的原始左侧位置减去20像素。</p>
<p>样式"left:20px" 从元素的原始左侧位置增加20像素。</p>
</body>
绝对定位(absolute):元素框从文档流完全删除，并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
h2.pos_abs{
position:absolute;
left=100px;
top:150px;
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧100px,距离页面顶部150px。</p>
</body>
</html>
固定定位(fixed):元素框的表现类似于将 position 设置为absolute，不过其包含块是视窗本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#left{
width:200px;
height:200px;
background-color:red;
position:fixed;
left:0px;
bottom:0px;
}
#right{
width:200px;
height:200px;
background-color:green;
position:fixed;
right:0px;
bottom:0px;
}
#middle{
width:200px;
height:200px;
background-color:blue;
position:fixed;
left:0px;
bottom:50%;
}
</style>
</head>
<body>
<div id="left">左下</div>
<div id="right">右下</div>
<div id="middle">中间</div>
</body>
</html>
z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
网页中的元素都含有两个堆叠层级
未设置绝对定位时所处的环境，z-index是0
设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可
网页元素透明度
| 属性 | 说明 | 举例 |
|---|---|---|
| opacity:x | x值为0~1,值越小越透明 | opacity:0.4; |
| filter:alpha(opavity=x) | x值为0~100，值越小越透明 | filter:alpha(opacity:40); |
五、盒子模型
边框相关属性
| 属性名 | 取值 | 描述 |
|---|---|---|
| border-style | solid;double;dashed;dotted等 | 设置边框的样式 |
| border-color | 16进制;用于表示颜色的英文; | 设置边框的颜色 |
| border-width | 数值 | 设置边框的粗细 |
外边距相关属性
margin:外间距,边框和边框外层的元素的距离
| 属性 | 取值 | 描述 |
|---|---|---|
| margin | top;right;bottom;left | 四个方向的距离 |
| margin-top | 数值 | 上间距 |
| margin-bottom | 数值 | 下间距 |
| margin-left | 数值 | 左间距 |
| marfin-right | 数值 | 右间距 |
内边距相关属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
网页居中
margin:0px auto;
网页居中对齐的必要条件:
块元素 、固定宽度
| 属性值 | 描述 | |
|---|---|---|
| padding-left | ||
| padding-right | ||
| padding-top | ||
| padding-bottom |
尺寸
六、CSS3扩展属性
border-radius创建圆角
示例：border-radius：25px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/test042401.css"/>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
</body>
</html>
#d1{
border: 1px solid mediumpurple;
background-color: mediumpurple;
width: 20px;
height: 40px;
border-radius: 0px 20px 20px 0px;
margin-bottom: 10px;
}
#d2{
border: 1px solid mediumpurple;
background-color: mediumpurple;
width: 20px;
height: 20px;
border-radius: 20px 0px 0px 0px;
margin-bottom: 10px;
}
#d3{
border: 1px solid mediumpurple;
background-color: mediumpurple;
width: 20px;
height: 20px;
border-radius: 0px 20px 0px 0px;
margin-bottom: 10px;
}
#d4{
border: 1px solid mediumpurple;
background-color: mediumpurple;
width: 20px;
height: 20px;
border-radius: 0px 0px 20px 0px;
margin-bottom: 10px;
}
#d5{
border: 1px solid mediumpurple;
background-color: mediumpurple;
width: 20px;
height: 20px;
border-radius: 0px 0px 0px 20px;
}
box-shadow:用于向方框添加阴影
示例:box-shadow:10px 10px 5px #888888;
background-size: 属性规定背景图片的尺寸
<body style="text-aligin:center;
background:url(img/1.png);
background-size:200px 300px;
background-repeat:no-repeat;">
</body>
text-shadow:可向文本应用阴影
示例:text-shadow:5px 5px 5px #ffff00;
