什么是CSS
Cascading Style Sheet，层叠级联样式表
CSS 表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
CSS优势：
（1）内容和表现分离
（2）网页结构表现统一，可以实现复用
（3）样式十分丰富
（4）建议使用独立于html的css文件
（5）利于SEO，容易被搜索引擎收录
CSS作用：
（1）有效传递页面信息
（2）美化网页，吸引用户
（3）凸显页面主题
（4）提高用户体验
CSS的导入方式
1.行内样式
<h1 style="color: red"></h1>
2.内部样式表
<head>
<style>
h1{
color: red;
}
</style>
<head>
3.外部样式表
<head>
<link rel="stylesheet" href="a.css">
</head>
同级下新建一个a.css文件：
h1{
color: red;
}
优先级：就近原则，看谁离元素更近。
基本选择器
作用：选择页面上的某一个或某一类元素
1.标签选择器
标签选择器会选择到这个页面上所有这个标签的元素
<head>
<style>
h1{
color: red;
background: green;
}
</style>
</head>
<body>
<h1>hello</h1>
<h1>world</h1>
</body>
2.类选择器
好处是可以给标签归类，同一个class是同一类，可以复用
<head>
<style>
.c1{
color: red;
background: green;
}
.c2{
color: blue;
background: white;
}
</style>
</head>
<body>
<h1 class="c1">hello</h1>
<h1 class="c2">world</h1>
<h1 class="c1">!!!</h1>
</body>
3.id选择器
id必须保证全局唯一
<head>
<style>
#c1{
color: red;
background: green;
}
</style>
</head>
<body>
<h1 id="c1">hello</h1>
</body>
优先级：id选择器>类选择器>标签选择器
层次选择器
1.后代选择器
h1 em {color:red;}
这可以把h1下的所有em标签进行渲染。
2.子选择器
h1 > strong {color:red;}
这可以把h1下的strong子元素标签进行渲染，和后代选择器相比，它只渲染一代。
3.相邻兄弟选择器
h1 + p {margin-top:50px;}
这可以把紧接着h1元素后的p元素（同级）进行渲染，这只会影响到1个p标签。
h1标签也可以被".类名"替换。
4.通用兄弟选择器
p ~ span {color: red;}
这可以把紧接着p元素后的所有span元素（同级）进行渲染。
p标签也可以被".类名"替换。
结构伪类选择器
伪类用于定义元素的特殊状态。
/* ul的第一个子元素是li可以匹配并渲染*/
ul li:first-child{
color:red;
}
/* ul的最后一个子元素是li可以匹配并渲染*/
ul li:last-child{
color:blue;
}
/*选中p的父元素，选择它的第n个子元素，如果这个子元素是p，则进行渲染*/
p:nth-child(2){
color:green;
}
/*选中p的父元素，选择它的第n个p类子元素进行渲染*/
p:nth-of-type(2){
color:yellow;
}
属性选择器
属性名=属性值（正则）
=：绝对等于
*=：包含
^=：以…开头
$=：以…结尾
/*选中有id属性的a标签 */
a[id]{
color:red;
}
/*选中有id是first的a标签 */
a[id=first]{
color:green;
}
/*选中有class属性包含link的a标签 */
a[class*="link"]{
color:blue;
}
/*选中href属性以http开头的a标签 */
a[href^=http]{
color:yellow;
}
字体样式
span标签：重点要突出的字，用span标签套起来。
<head>
<style>
.title{
font-size:50px;
}
</style>
</head>
<body>
欢迎学习<span class="title">Java</span>
</body>
字体样式：
font-family:楷体; /*字体*/
font-size:50px; /*字体大小*/
font-weight:bold; /*字体粗细*/
文本样式
color:red; /*颜色*/
text-align:center; /*排版*/
text-indent:2em; /*段落首行缩进*/
line-height:100px; /*行高*/
text-shadow:blue 10px 10px 5px; /*阴影颜色，水平偏移，垂直偏移，阴影半径*/
/*如果要让文字上下对齐，只要把height和line-height设置为一致即可*/
text-decoration:underline; /*下划线，line-through中划线，overline上划线*/
超链接伪类
/*鼠标悬浮*/
a:hover{
color:red;
}
/*鼠标按住未释放*/
a:active{
color:green;
}
列表样式
<head>
<style>
.nav{
width:100px;
background:grey;
}
ul li{
height:30px;
/* none去掉，circle空心圆，decimal数字，square正方形*/
list-style:none;
}
a{
font-size:14px;
text-decoration:none;
color:black;
}
a:hover{
color:orange;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">a</a> <a href="">b</a> <a href="">c</a></li>
<li><a href="">d</a> <a href="">e</a> <a href="">f</a></li>
<li><a href="">g</a> <a href="">h</a> <a href="">i</a></li>
</ul>
</div>
</body>
背景图像应用及渐变
<head>
<style>
div{
width:1000px;
height:700px;
border:1px solid red;
/*设置背景图片*/
background-image:url("h.jpg");
}
.div1{
/*不同的重复方式*/
background-repeat:repeat-x;
}
.div2{
background-repeat:repeat-y;
}
.div3{
background-repeat:no-repeat;
}
.div4{
/*缩小或放大图片直到恰好撑满区域，可能会丢失部分信息，不需要再设置no-repeat*/
background-size: cover;
/*图片的位置在水平方向上取正中间，垂直方向上取最上面*/
background-position:center 0;
/*这两条语句配合起来，极端条件会出现两种情况：
1.图像的纵和区域的纵契合（竖区域放横图片），会截取图像中间部分
2.图像的横和区域的横契合（横区域放竖图片），会截取图像最上面的部分
*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
有关渐变，直接使用这个工具网站：
渐变网站
盒子模型及边框使用
margin：外边距
padding：内边距
border：边框
#box{
/*边框粗细 边框样式 边框颜色*/
/*其中样式还可以是dashed，虚线*/
border:1px solid red;
}
有些标签是带有一个默认的margin的，可以覆盖调整。
内外边距及div居中
/*padding一样*/
margin-right:5px;
margin-bottom:5px;
margin-left:5px;
margin-top:5px;
/*margin的妙用，实现了左右居中*/
margin:0 auto;
/*代表上下左右四个方位*/
margin: 0;
/*代表上下（第一个参数）左右（第二个参数）*/
margin:0 1px;
/*四个参数代表上、右、下、左*/
margin:0 1px 2px 3px;
盒子的计算方式：
margin+border+padding+内容的宽度（高度）
圆角边框及阴影
/*圆角边框*/
border-radius:10px;
/*左上、右下变成10px，左下右上变成20px*/
border-radius:10px 20px;
/*四个参数分别为左上、右上、右下、左下*/
border-radius:10px 20px 30px 40px;
/*画圆:圆角=半径*/
/* 阴影的水平位置、垂直位置、模糊距离、阴影颜色*/
box-shadow:10px 10px 100px yellow;
display和浮动
/*变成块元素*/
display:block;
/*变成行内元素*/
display:inline;
/*是块元素，但是可以内联在一行*/
display:inline-block;
/*消失*/
display:none;
使用display可以实现将列表横置等功能。
这是一种实现行内元素排列的方式，但是我们很多情况都使用float。
/*会让图片或文字左浮，但是当页面大小变化时，会重新排版，不好*/
float:left;
overflow及父级边框塌陷问题
/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*/
overflow:scroll;
/*内容会被修剪，并且其余内容是不可见的。*/
overflow:hidden;
/*不允许右边有浮动元素*/
clear:right;
/*不允许左边有浮动元素*/
clear:left;
/*不允许两边有浮动元素*/
clear:both;
父级边框塌陷问题解决：
1.增加父级元素的高度
不推荐这种方法。高度无法确定，一次次地试高度很麻烦，何况不能从本质上解决问题。
2.在最后一个子元素后增加一个空的div标签，清除浮动
clear:both;
这种方法也很有效，但是加了一个空的div，造成代码的冗余。
3.在父级元素中加上如下属性：
overflow:hidden;
overflow是溢出管理的意思，但是有一点不好，在有下拉菜单的时候，下拉菜单会显示不出来。
4.在父级中添加一个伪类after：
#father:after{
content:'';
display:block;
clear:both;
}
这种方法虽然有些麻烦，但是没有任何副作用，对文件中的其他元素没有任何影响。
相对定位
相对定位：相对于原来的位置进行定位。
position:relative;
top:5px; //离上面距离+5px，即向下移动
bottom:-5px; //离下面距离-5px，即向下移动
left:5px; //离左边距离+5px，即向右移动
right:-5px; //离右边距离-5px，即向右移动
绝对定位及固定定位
绝对定位：基于XXX定位，上下左右。
1.如果没有父级元素，相对于浏览器定位。
2.假设有父级元素，相对于父级元素定位。
3.在父级元素范围内移动。
position:absolute
固定定位：不管浏览器怎么动，位置固定不变。
position:fixed
z-index及透明度
z-index设置元素的堆叠顺序。
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
/*在后面出现，离用户更远*/
z-index:-1;
文本和背景色都受到不透明级别的影响。
opacity:0.5;
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
