title: 1.前端笔记之CSS
date: 2016-04-05 23:05:51
tags: 前端
categories: w3c
作者:刘耀
一、css简介
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。
存在方式有三种：元素内联、页面嵌入和外部引入
1.元素内联
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a style="color: #b2002e" href="#">耀耀</a>
</body>
</html>
显示如下：
<a style="color: #b2002e" href="#">耀耀</a>
</body>
</html>
2.页面嵌入
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
<!--定义-->
.test{
color: #b2002e;
}
</style>
</head>
<body>
<!--使用-->
<a class="test" href="#">耀耀</a>
</body>
</html>
显示：
.test{
color: #b2002e;
}
</style>
3.引入外部css文件
新建一个css文件
名字叫做index.css
内容
.test{
color: #b2002e;
}
新建一个html文件
内容
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--这里通过link导入样式，有点类似与python导入模块中的import *-->
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<!--使用-->
<!--这里直接应用指定好的CSS样式名即可-->
<a class="test" href="#">耀耀</a>
</body>
</html>
二、选择器
class选择器
点开头
.c1{}
<div class='c1'> 123</div>
<div class='c1'> 123</div>
标签选择器
a{
color:red;
}
div
span
select
input，type=text
*****
input[type='text']{
}
html中所有的a标签，全部红色字体
ID选择器
#uu{
}
<div></div>
<div id='uu'>123</div>
层级选择器
.c3 #i8 div .c4{
}
<div class='c3'>
<a id='i8'>
<div>
<span class='c4'></span>
</div>
<span class='c4'></span>
</a>
</div>
<span class='c4'></span>
组合选择器
,
a{
}
p{
}
.c3 #i8 div .c4,.c3 #i8 div .c9{
xxxx
}
三、常用属性
1.background
背景颜色
p {background-color: gray;}
背景图片
body {background-image: url(/i/eg_bg_04.gif);}
背景平铺
background-repeat: repeat-y;
背景不平铺
background-repeat: no-repeat;
背景定位
background-position:center;
2.border
边框的宽度
p {border-style: solid; border-width: 5px;}
3.Display
使段落生出行内框：
p.inline
{
display:inline;
}
4.cursor
鼠标停放所显示的效果
5.浮动
把图像向右浮动：
img
{
float:right;
}
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
6.内、外边距
标准盒子模型
margin
padding
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
7.定位position
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
1.相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
2.绝对定位
使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
8.样式：overflow
设置 overflow 属性：
div
{
width:150px;
height:150px;
overflow:scroll;
}
9.透明度
设置 div 元素的不透明级别：
div
{
opacity:0.5;
}
10.文本
缩进
p {text-indent: 5em;}
使用百分比
div {width: 500px;}
p {text-indent: 20%;}
水平对齐
text-align:center
11.字体
使用通用字体系列
body {font-family: sans-serif;}
指定字体
h1 {font-family: Georgia;}
字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，
那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，
900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
字体大小
font-size 属性设置文本的大小。
12链接.
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻