CSS基础
层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
存在形式
1. 在标签上设置style属性：
background-color: #2459a2;
height: 48px;
2. 写在head里面，style标签中写样式
- id 选择器
#i1{
background-color: #2459a2;
height: 48px;
}
3. css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />
注释
/* 注释内容 */
属性
1. 边框属性
- border(border-left border-right border-top border-bottom)
- border-width: 4px;
- border-color: red;
- border-style: dotted(虚线); solid(实线); double(); dashed();
2. 尺寸属性
- height width
- height: 100px;
- width: 20%;
- min-width(min-height max-width max-width)
- min-width: 100px;
3. 文本属性
- color
- text-align
- text-align: center; left; right;(居中；左对齐；右对齐)
- line-height
- line-height: 10px;(行高，垂直方向居中)
4. 字体属性
- font
- font-size
- font-size: 10px;
- font-weight
- font-weight: bold; 100; 900；
5. 定位属性
- position
- position:
- fixed;(固定在页面的某个位置)
- absolute(绝对位置，从文档流中提出相对最近的父级进行定位，如果父级标签没有使用position定位，则body为父级标签);
- relative(相对位置，不会从文档流中提出，相对自身位置进行偏移);
- position:
- top bottom left right(配合 absolute、relative进行定位)
- display
- display: none(消失);
- display: inline(变成行内标签); block(变成块级标签); inline-block;
inline: 默认有多少占多少，无法设置高度，宽度，padding，margin
block: 默认占一行，可以设置高度，宽度，padding，margin
inline-block:默认有多少占多少，可以设置高度，宽度，padding，margin - float(让标签飘起来，块级标签也可以堆叠)
<div style="clear: both;"></div>
在父级标签最后加上可以防止子标签脱离父级标签 - overflow
- overflow: hidden(多出部分不可见); visible(多出部分可见); auto(若有不可见，出现滚动条);
- z-index(层级顺序， 大的在小的上面)
- z-index: 10;
6. 边距属性
- pedding()
- margin()
- margin: (0, auto);
7. 背景属性
- background-color
- background-image
- background-image: url('image/4.gif');
- background-position (background-position-x background-position-y)
- background-position-x: 10px;
- background-repeat
- background-repeat: repeat-y;
8. color属性
- opacity()
- opcity: 0.5; 50%;(透明度0.5)
选择器
1. class 选择器
.class_name{
...
}
(所有的 class_name)
2. 标签选择器
div{
...
}
(所有的 div)
3. 层级选择器(空格分隔)
.c1 .c2 div{
...
}
(c1 中的 c2 中的 div)
4. 组合选择器(逗号分隔)
#i1,.c2,div{
...
}
(i1 和 c2 和 div)
5. 属性选择器(对选择到的标签再通过属性再进行一次筛选)
.c1[n='bob']{ width:100px; height:200px; }
(所有 c1 中 name='bob' 的)
6. :link :visited :active :hover 选择器
- a:link{
（未访问链接的样式）
}
- a:visited{
（已访问链接的样式）
}
- a:hover{
（悬浮链接的样式，hover 必须在link、visited之后才能生效）
}
- a:active{
（活动时链接的样式，active 必须在hover之后才能生效）
}
优先级:
后面有 !important 的属性最优先，然后标签上style优先，就近原则
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.c1{
height: 100px;
color: gold!important;
}
.c2 {
color: blueviolet;
}
</style>
</head>
<body>
<div class="c1 c2" style="color: red">hello</div>
</body>
响应式布局
通过@media可以实现响应式布局
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.c1{
background-color: aquamarine;
height: 100px;
}
@media (min-width: 960px) {
/*当宽度小于960px时，以下样式生效*/
.c2{
background-color: palevioletred;
}
}
</style>
</head>
<body>
<div class="c1 c2"></div>
</body>
