Web前端学习——CSS
一、CSS简介
CSS全称cascading style sheeding，层叠样式列表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、CSS组成
1、选择器
（1）标签选择器
<head>
<style>
p{
background-color: green;
height: 48px;
}
</style>
</head>
<body>
<p>中国人</p>
</body>（2）ID选择器
<head>
<style>
#i1{
background-color: blue;
height: 48px;
}
</style>
</head>
<body>
<div >
中国人
</div>
</body>（3）class选择器
<head>
<style>
.c1{
background-color: yellow;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">
中国人
</div>
</body>（4）关联选择器（层级选择器，空格）
类似span标签里的p标签的样式，也可以是id,class,标签等组合
<head>
<style>
span p{
background-color: darkorchid;
height: 48px;
}
</style>
</head>
<body>
<p>中国人</p>
<span>
<p>中国人</p>
</span>
<p>中国人</p>
</body>（5）组合选择器(逗号)
<head>
<style>
.c1,.c2,.c3{
background-color: yellow;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">
中国人
</div>
<div class="c2">
中国人
</div>
<div class="c3">
中国人
</div>
</body>（6）属性选择器
对选择的标签过滤后再通过属性进行过滤
<head>
<style>
.cc[n="tom"]{
background-color: yellow;
height: 48px;
}
</style>
</head>
<body>
<div class="cc">
中国人
</div>
<div class="cc" n="tom">
中国人
</div>
</body>（7）行选择器
<body>
<div >
中国人
</div>
</body>2、link引入外部css
通过建立专属的css文件，在其他html导入css文件，从而使用css文件的样式
001.css内容如下：
#i1{
background-color: blue;
height: 48px;
}
.c1{
background-color: yellow;
height: 48px;
}
p{
background-color: green;
height: 48px;
}
span p{
background-color: darkorchid;
height: 48px;
}
.cc[n="tom"]{
background-color: yellow;
height: 48px;
}001.html内容如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="001.css">
</head>
<body>
<p>中国人</p>
</body>
</html>3、优先级
row style——>head style (按照编写顺序，自上而下优先)——> external style
4、css注释
/* 注释内容 */
5、背景、边框
样式、宽度、颜色、上下左右
<div >
中国人
</div>
##下面为边框属性
border-top-color: red;
border-top-style: solid;
border-top-width: 2px;
border-right-color: red;
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;background可以定义如下属性：
background-color 规定要使用的背景颜色；
background-image 规定要使用的背景图像；
background-repeat 规定如何重复背景图像；
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动；
background-position 指定背景图像的位置；
<div >
chinese
</div>6、float
漂移，挨着站齐
<div >
中国人
</div>
<div >
中国人
</div>7、display
块、行标签转换,inline、block、inline-block、none
行内标签：无法设置高度、宽度、padding、margin
块级标签：设置高度、宽度、padding、margin
<body>
<span >123</span>
<div >456</div>
</body>8、padding margin
9、position
固定位置,做层叠,其中主要有
fixed:固定在页面某个位置
relative+absolute:
top/bottom/left/right/
opacity:0-1透明度
z-index:层叠优先级，值越大越靠上
<body>
<div >
菜单栏
</div>
<div onclick="gotop()" >
返回顶部
</div>
<div >
</div>
<script>
function gotop() {
document.body.scrollTop=0;
}
</script>
</body>
11、overflow
auto:超出，出现滚动条
hidden:超出部分隐藏
<body>
<div >
<img src="001.jpg">
</div>
<div >
<img src="001.jpg">
</div>
</body>10、overflow
auto:超出，出现滚动条
hidden:超出部分隐藏
<body>
<div >
<img src="001.jpg">
</div>
<div >
<img src="001.jpg">
</div>
</body>11、hover
鼠标移动到相应位置，显示其stype
12、其他常用style属性
width: 100px ; ##可以使用89%,边框宽度
height: 20px ; ##可以使用89%,边框高度
font-size:19px; ##字体大小
font-weight:bold ; ##加粗,80px,normal
font-family:'Microsoft YaHei'; ##字体样式,
color:red; ##字体颜色
text-align:center; ##水平方向字体对齐方式，center/left/right
line-height:48px; ##根据div,垂直方向字体居中
background-color:red ##背景色
text-decoration ##字体装饰
<a href="http://www.baidu.com" >百度</a>