- CSS是Cascading Style Sheet的简称，中文为层叠样式表
- 属性和属性值用冒号隔开，以分号结尾
引入方式
行内式--在标签的style属性中设定CSS样式
<body>
<div style="background-color:red;height:200px;50px">你好</div>
</body>
嵌入式--是将CSS样式集中写在网页的<head>标签的<style></style>标签对中
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div{
background-color:blue;
height:500px;
100px
}
</style>
</head>
<body>
<div>未来很精彩！</div>
</body>
导入式--将一个独立的.css文件引入HTML文件中，导入式使用@import引入外部CSS文件，<style>标记也是写在<head>标记中
- 导入式会在整个网页装载完后再转载CSS文件
divs.css
div{
background-color:blue;
height:500px;
100px
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
@import "divs.css";
</style>
</head>
<body>
<div>未来很精彩！</div>
</body>
</html>
链接式--将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中
- 链接式会以网页文件主体装载前装载css文件
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<link href="divs.css" rel="stylesheet" type="text/css">
</head>
样式应用顺序
- 行内样式优先级最高
- 相同样式，不同样式属性将以合并的方式呈现
- 相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
- ！important 指定样式规则应用最优先
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
#cl{
background-color:red
}
div{
background:green !important
}
</style>
</head>
<body>
<div id="cl" style="background-color:blue">未来很精彩！</div>
</body>
选择器
基本选择器
1、通用元素选择器
- *表示应用到所有的标签
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
*{
background:green
}
</style>
</head>
<body>
<div id="cl">未来很精彩！</div>
<div id="c2">明天很美好！</div>
<div id="c3">今天也很如意</div>
</body>
2、标签选择器
- 匹配所有使用某种标签的元素
div{background:green}
3、类选择器
- 匹配所有class属性中包含info的元素
- 语法：.类名{样式}（类名不能以数字开头，类名区分大小写）
.lizhi{background:green}
<div class="lizhi">未来很精彩！</div>
<div class="lizhi">明天很美好！</div>
4、ID选择器
- 使用id属性来调用样式，在一个网页中id的值都是唯一的
- 语法：#ID名{样式}（id名不能以数字开头）
#c3{background:green}
<div id="c3">今天也很如意</div>
组合选择器
1、多元素选择器
- 同时匹配h3，h4标签，之间用逗号分隔
h3,div{background:green}
<h3>alex</h3>
<div>eric</div>
2、后代元素选择器
- 匹配所有div标签里嵌套的P标签，之间用空格分隔
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div p{background:green}
</style>
</head>
<body>
<div>
<p>nick</p>
<div>
<p>alex</p>
<p>eva</p>
</div>
<h1>eric</h1>
</div>
</body>
3、子元素选择器
- 匹配所有div标签嵌套的子p标签，之间用>分隔
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div>p{background:green}
</style>
</head>
<body>
<div class="cc">
<b class="dd">
<p>alex</p>
<p>eva</p>
</b>
<p>eric</p>
</div>
</body>
4、毗邻元素选择器
- 匹配所有紧随div标签之后的同级标签p，之间用+分割（只能匹配一个）
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div+p{background:green}
</style>
</head>
<body>
<p>eva</p>
<div>alex</div>
<p>eric</p>
<p>seven</p>
</body>
属性选择器
1、【属性】 and 标签【属性】
- 【属性】 设置所有具有这个属性的标签元素
- 标签【属性】 设置所有含有这个属性并是这类标签的标签元素
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
[id]{background:green}
p[id]{background:red}
</style>
</head>
<body>
<div id="大家好">nick</div>
<p id="才是真的好">seven</p>
</body>
2、【属性=属性值】
- 设置所有这个属性等于指定属性值的标签元素
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
[id="大家好"]{
background:green
}
[id="才是真的好"]{
font-size:100px;
color:red
}
</style>
</head>
<body>
<div id="大家好">nick</div>
<p id="才是真的好">seven</p>
</body>
3、【title~=Nick】
- 设置所有title属性具有多个空格分隔的值，其中一个值等于“Nick”的标签元素
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
[title~="Nick"]{
background:black;
font:500px;
color:white
}
</style>
</head>
<body>
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Jenny</p>
<p title="seven Jenny">seven</p>
</body>
4、【title|=Nick】
- 设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中值以‘Nick’开头的标签元素
- lang属性：“en”、“en-us”、“en-gb”
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
[title|="Nick"]{
background:black;
font:500px;
color:white
}
</style>
</head>
<body>
<p title="Nick-Jenny">Nick</p>
<p title="Nick_Jenny">Nick</p>
<p title="Jenny-Nick">Jenny</p>
<p title="Nick">Jenny</p>
<p title="seven Jenny">seven</p>
</body>
5、【title^=Nick】
- 设置属性值以指定值开头的每个标签元素
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
[title^="Nick"]{
background:black;
font:500px;
color:white
}
</style>
</head>
<body>
<p title="Nick-Jenny">Nick</p>
<p title="Nick_Jenny">Nick</p>
<p title="Jenny-Nick">Jenny</p>
<p title="Nick">Jenny</p>
<p title="Nick Jenny">seven</p>
</body>
6、【title$=Nick】
- 设置属性值以指定值结尾的每个标签元素
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
[title$="Nick"]{
background:black;
font:500px;
color:white
}
</style>
</head>
<body>
<p title="Nick-Jenny">Nick</p>
<p title="Nick_Jenny">Nick</p>
<p title="Jenny-Nick">Jenny</p>
<p title="Nick">Jenny</p>
<p title="Jenny Nick">seven</p>
</body>
7、【title*=Nick】
- 设置属性值中包含指定值的每个元素
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
[title*="Nick"]{
background:black;
font:500px;
color:white
}
</style>
</head>
<body>
<p title="Nick-Jenny">Nick</p>
<p title="jigNickJenny">Nick</p>
<p title="Jenny-Nick">Jenny</p>
<p title="Nick">Jenny</p>
<p title="Jenny Nick">seven</p>
</body>
伪类选择器
1、link、hover、active、visited
- a:link（未访问的链接状态），用于定义常规的链接状态
- a:hover（鼠标放在链接上的状态），用于产生视觉效果
- a:active（在链接上按下鼠标时的状态）
- a:visited（已访问过的链接状态）
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
a:link{color:black}
a:hover{color:green}
a:active{color:red}
a:visited{color:blue}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="https://www.sogou.com" target="_blank">搜狗一下</a>
</body>
2、befor、after
- p：before 在每个<p>元素的内容之前插入内容
- p：after 在每个<p>元素的内容后插入内容
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
p{color:blue;}
p:before{content:"before...";}
p:after{content:"..after";}
</style>
</head>
<body>
<p>seven</p>
<p>eric</p>
</body>
常用属性
1、颜色属性
<p style="color:blue">seven</p>
<p style="color:#ffee33">alex</p>
<p style="color:rgb(255,0,0)">eric</p>
<p style="color:rgba(255,0,0,0.5)">nick</p>
2、字体属性
font-style：用于规定斜体文本
- normal 文本正常显示
- italic 文本斜体显示
- oblique 文本斜体显示
font-weight：设置文本粗细
- normal（默认）
- bold（加粗）
- bolder（相当于<strong>和<b>标签）
- lighter（常规）
- 100~900 整百（400=normal，700=bold）
font-size：设置字体的大小
- 默认值：medium
- <absolute-size>可选参数值：xx-small，x-small，small，medium、large、x-large、xx-large
- <relative-size>相对父标签中字体的尺寸进行调节。可选参数值：smaller，largeer
- <percentage>百分比指定文字大小
- <length>用长度值指定文字大小，不允许负值
font-family:字体名称
- 使用逗号隔开多种字体
font：简写属性
- 语法：font：字体大小/行高 字体（字体要在最后）
<p style="font-size:20px">seven</p>
<p style="font-size:50%">seven</p>
<p style="font-size:larger">seven</p>
<p style="font-family:宋体">alex</p>
<p style="font-family:微软雅黑">alex</p>
<p style="font-weight:lighter">eric</p>
<p style="font-weight:bold">eric</p>
<p style="font-weight:border">eric</p>
<p style="font-weight:900">eric</p>
<p style="font-style:oblique">nick</p>
<p style="font-style:normal">nick</p>
3、文本属性
white-space：设置元素中空白的处理方式
direction:规定文本的方向--ltr（默认），rtl
text-align：文本的水平对齐方式--left，center，right
line-height：文本行高
text-indent：文本缩进
letter-spacing：添加字母之间的空白
word-spacing：添加每个单词之间的空白
text-transform：属性控制文本的大小写
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div{
background-color:blue;
color:white;
600px;
height:200px;
text-align:center;
line-height:200px;
}
p{
background-color:black;
color:yellow;
100px;
height:100px;
text-indent:50px;
}
h1{
letter-spacing:20px;
word-spacing:20px;
text-transform:capitalize;
}
</style>
</head>
<body>
<h1>seven eric alex nick</h1>
<div>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</div>
<p>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</p>
</body>
- capitalize 文本中的每个单词以大写字母开头
- uppercase 定义仅有大写字母
- lowercase 定义仅有小写字母
text-overflow：文本移出样式
- clip 修剪文本
- elipsis 显示省略符号...来代表被修剪的文本
- string 使用给定的字符串来代表被修剪的文本
文本溢出修剪：
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div{
background-color:black;
color:white;
50px;
height:50px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</div>
</body>
text-decoration：文本的装饰--none（默认）、underline、overline、line-through
text-shadow：文本阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个位置时虚化效果
- 第四个参数是颜色
word-wrap:自动换行--break-word
自动换行并加阴影
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div{
background-color:blue;
color:white;
100px;
height:100px;
box-shadow:10px 10px 5px green;
word-wrap:break-word;
}
h1{
text-shadow:5px 5px 5px #888;
}
</style>
</head>
<body>
<h1>seven</h1>
<div>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</div>
</body>
4、背景属性
background-color:背景颜色
background-image：设置背景图片
-
url("http://pic.cnblogs.com/avatar/942693/20160613182316.png")图片地址 - background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果
div{
height:500px;
500px;
background-image:url("1.jpg");
background-image:url("http://pic.cnblogs.com/avatar/942693/20160613182316.png");
background-image:linear-gradient(green,blue,yellow,red,black)
}
background-position：设置背景图像的位置坐标
- background-position：center center；图片置中，x轴center，y轴center
- 1px-195px 截取图片某部分，分别代表坐标x，y轴
background-repeat：设置背景图片不重复平铺
- no-repeat 设置图片不重复，常用
- round 自动缩放直到适应并填充整个容器
- space 以相同的间距平铺且填充满整个容器
background-size
-
contain
- cover
background-attachment 背景图片是否固定或随着页面的其余部分滚动
background 缩写
<style>
div{
height:1000px;
1000px;
border:5px red solid;
background:url("1.jpg") no-repeat left 30px bottom 15px;
background:url("1.jpg") no-repeat center bottom 15px;
}
</style>
5、列表属性
list-style-type：列表项标志的类型
- none 去除标志
- decimal-leading-zero 02
- square 方框
- circle 空心圆
- upper-alph或disc 实心圆
list-style-image：将图像设置为列表项标志
list-style-position：列表项标志的位置
- inside
- outside
list-style 简写
<ul style="list-style:none">
<li>alex</li>
<li>seven</li>
<li>eric</li>
</ul>
页面布局
1、边框
border-style:边框样式
- solid 默认，实线
- double 双线
- dotted 点状线条
- dashed 虚线
border-color:边框颜色
border-边框宽度
border-radius:圆角
- 1个参数：四个角都应用
- 2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
- 3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下
- 4个参数：左上、右上、右下、左下（顺手针）
border 简写
- border：2px yellow solid
box-shadow：边框阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个参数是虚化效果
- 第四个参数是颜色
- box-shadow：10px 10px 5px #888
点赞提醒
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
div{
border:2px solid;
border-radius:25px;
140px
}
</style>
</head>
<body>
<div> 点赞哦！dear</div>
</body>
画圆角
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
.rrrr1{
display:inline-block;
height:100px;
100px;
background:green;
border-radius:20px 40px;
}
.r2{
display:inline-block;
height:100px;
100px;
background:yellow;
border-radius:20px 30px 50px 70px
}
</style>
</head>
<body>
<div class="rrrr1"></div>
<div class="r2"></div>
</body>
2、盒子模型
一个标准的盒子模型：
- padding：用于控制内容与边框之间的距离
- margin：用于控制元素与元素之间的距离
- 一参四边，两参上下、左右，三参上、左右、下
内盒子移动到中间
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
.father{
300px;
height:300px;
background:green;
border:5px solid
}
.son{
100px;
height:100px;
background:red;
margin:100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
外盒子扩展
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
.father{
300px;
height:300px;
background:green;
padding-left:200px;
padding-top:200px;
}
.son{
100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子，外层还有html，
在默认情况下，body距离html会有若干像素的margin，所以body中的盒子不会紧贴浏览器窗口的边框了。
解决方法：
body {
margin: 0;
}
3、display
- none 不显示
- block 显示为块级元素
- inline 显示为内联元素
- inline-block 行内块元素（会保持块元素的高宽）
- list-item 显示为列表元素
4、visibility
- visible 元素可见
- hidden 元素不可见
- collapse 当再表格元素中使用时，此值可删除一行或一列，不会影响表格的布局
5、float 浮动-让一行显示两个块级标签，会脱离文档流
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说的流。
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
- none
- left 左浮动
- right 右浮动
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
.div1{
background:red;
height:50px;
100px;
}
.div2{
background:blue;
height:120px;
150px;
float:left;
}
.div3{
background:green;
height:100px;
300px;
float:left;
}
.div4{
background:yellow;
height:160px;
150px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
结论：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤到下一行）；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是A的顶部总和上一个元素的底部对齐。
div的顺序是HTML代码中div顺序决定的
靠近页面边缘的一端是前，远离页面边缘的一端是后
clear 清除浮动可以理解为打破横向排列：
- none：默认值，允许两边都可以有浮动对象
- left：不允许左边有浮动对象
- right：不允许右边有浮动对象
- both：不允许两边有浮动对象
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
.div1{
background:red;
height:50px;
100px;
}
.div2{
background:blue;
height:120px;
150px;
float:right;
}
.div3{
background:green;
height:100px;
300px;
float:right;
clear:right;
}
.div4{
background:yellow;
height:250px;
150px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
6、overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
- visible 默认，内容不被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的
- scroll 内容会修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
7、position 规定元素的定位类型
- static 默认值，没有定位，遵从正常的文档流
- relative 相对定位元素，相对于其正常位置进行定位，遵从正常的文档流
- absolute 绝对定位元素，脱离正常文档流
- fixed 绝对定位元素，固定在浏览器某处
<head>
<meta charset="UTF-8">
<title>你好明天</title>
<style>
.div1{
background:red;
height:50px;
100px;
}
.div4{
background:blue;
height:4000px;
6000px;
}
.div3{
background:green;
height:100px;
300px;
position:absolute;
left:100px;
top:100px;
}
.div2{
background:yellow;
height:50px;
50px;
font:red;
float:right;
position:fixed;
}
.father{
position:relative;
}
body{
margin:0px;
}
.div5{
height:100px;
100px;
background:black;
}
</style>
</head>
<body>
<div class="father">
<div class="div1"></div>
<div class="div2">qq交谈</div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
详见：http://www.cnblogs.com/suoning/p/5625582.html