首页 > 代码库 > CSS 学习笔记
CSS 学习笔记
CSS 常用帮助文档
CSS：被用来同时控制多重网页的样式和布局。
HTML页面中CSS样式的写法有3种：
1：标签中写入
<body style=‘margin o auto;‘>
2：head头标签内
<style>
body { margin:0 auto;}
</style>
3：head头标签内引入css文件
<link rel=‘stylesheet‘ href=http://www.mamicode.com/‘commons.css‘ />
优先级：标签上的style最高，编写顺序，就近原则
CSS注释方法：/* ... */
CSS 选择器有以下几种：
第一种：id选择器(#i1)
<标签 id=‘i1‘>
#i1{
background-color: #00000;
height: 48px;
}
第二种：class选择器
<标签 class=‘c1‘></标签>
.c1{
background-color: #00000;
height: 48px;
}
第三种: 标签选择器
<div></标签>
div{
background-color: #00000;
height: 48px;
}
第四种：层级模式（可以多个层级）
<span><div>test</div></span>
span div{ ... } 表示span下的div标签使用此样式
.c1 div{...} 表示class为c1下的div标签
第五种：组合选择器
<div id=‘i1‘></div>
<div id=‘i2‘></div>
<div id=‘i3‘></div>
#i1,#i2,#i3{...}
.c1,.c2,.c3{...}
第六种：属性选择器，对选择到的标签再通过属性进行一次赛选
<input type=‘text‘>
input[type=‘text‘]{width:100px;height:200px;}
以下主要介绍些常用的css样式
border: 1px solid red; 边框属性依次为，边框宽度，边框样式，边框颜色
height：标签高度
width：标签宽度（像素，百分比）
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
line-height：垂直方向根据标签高度居中
text-aligh：center 水平方向居中
color：字体颜色
font-size：字体大小
font-weight：字体加粗
float：标签进行漂移，也就是块级标签堆叠，（left 左漂，right 右漂），注意：如果将父级覆盖，则在最后使用参数：<style=‘clear:both;‘>
display：可选参数如下
- block：将内联标签转换为块级标签
- inline：将块级标签转换为内联标签
- inline-block：同时具有块级标签和内联标签的属性。（内联标签不具有padding,margin,高，宽等属性设置）
- none：设置此属性的标签消失
padding：内边距,元素边框与元素内容之间的空间
margin：外边距，定义元素周围的空间，div整体居中（0,auto）
position：元素定位，参数如下
- fixed：固定元素在游览器窗口的指定位置，不随页面的滚动而移动。 举例：（position:fixed,top:0,left:0,right:0)
- relative + absolute：这2个元素要一起使用，二者之间是相对定位
- Relative 定位：相对定位元素的定位是相对其正常位置。
- Absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
举例：
<div style=‘position:relative;‘>
<div style=‘position:absolute;top:0,left:0;‘></div>
</div>
这里absolute的位置是相对于relative标签的位置周边定位
opcity：透明度，取值范围（0 - 1）
z-index：层级顺序，要结合opcity进行透明度设定。
2层写法举例：
<div style=‘z-index:10;position:fixed;top:50px;left:100px;background-color:white;‘>
# 这里在引入一层，需要通过z-index:10值的高低来确定优先度，数字越大越在最上层。
<div style=‘z-index:9;position:fixed;background-color:black;top:0,bottom:0;right:0;left;0;opacity:0.5;></div> # 这个就是设置透明度(1就完全覆盖）
<div style=‘height:5000px;background-color:green;‘>sdf</div>
overflow：设置当元素的内容溢出其区域时发生的事情,参数如下
- auto：当图片大小超过设定的大小，则在设定的范围出现滑轮。
- hidden：当图片大小超过设定的大小，则只显示设定大小的窗口。
hover：当鼠标移动到当前标签上时，以下css属性才生效，
写法：.pg-header .menu:hover{ background-color:blue}
background-image：背景图像。body {background-image:url(‘paper.gif‘);}
background-color：背景颜色，使用在body。 body {background-color:#b0c4de;}
background-repeat：背景图像增加方式，参数如下：
- repeat-x： 只横向增加
- repeat-y： 只纵向增加
- no-repeat： 不堆叠
background-position：改变图像在背景中的位置，如：background-position:10px,10px；
实例：账户输入框内最右侧增加用户名的图片
<div style=‘height:35px;width:400px;position;relative;‘>
<input type=‘text‘ style=‘height:35px;width:370px;padding-right:30px;‘>
<span style=‘position:absolute;right:6px;top:10px;background-image:url(i_name.jpg);height:16px;width:16px;display:inline-block;‘></span>
</div>
技巧：
1：CSS重用功能
<style>
.c{ 共有}
.c1{ 独有}
.c2{ 独有}
</style>
<div class=‘c,c1‘></div>
<div class=‘c,c2‘></div>
2：默认图片的外边框是1px，去掉：img:{broder:0}
举例：常用页面的布局
1：主站的布局
<div class=‘pg-header‘>
<div style=‘width:980px;margin:0 auto;‘>页面头</div>
</div>
<div class=‘pg-content‘>
<div style=‘width:980px;margin:0 auto;‘>页面体</div>
</div>
<div class=‘pg-footer‘>
<div style=‘width:980px;margin:0 auto;‘>页面尾</div>
</div>
CSS 学习笔记