2.前端笔记之css

title: 1.前端笔记之CSS

date: 2016-04-05 23:05:51

tags: 前端

categories: w3c

作者:刘耀

出处:http://www.liuyao.me欢迎转载

一、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;

}

![](http://i.imgur.com/ziYoSIg.png)

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 - 链接被点击的时刻