码迷,mamicode.com
首页 > Web开发 > 详细

css入门

时间:2014-11-06 12:38:03      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:style   io   color   ar   os   使用   for   sp   strong   

插入样式表

1.外部样式表:

<head>

<link rel="stylesheet" type="text/css" href="a.css" />

</head>

2.内部样式表:

<head>

<style type="text/css">

.......

</style>

</head>

3.内联表

<p style="color:red;margin:0"></p>

语法

css语法由3部分构成:select {property: value}

如果值为多个单词,则要给值加引号:p {font-family: "sans serif";}

多重声明:p {text-align: center; color:red;}

选择器分组:h1, h2, h3, h4, h5, h6 {color: green;}

继承:body {font-family: Verdana, sans-serif;}所有子元素都从body继承属性

a.css第一行:@charset "utf-8";

选择器

派生选择器:li strong {...}用于选择元素<li><strong>...</strong></li>

id选择器:#id1 {...}

类选择器:.class1 {...}

背景

背景色:background-color:gray;

背景图像:background-image:url(/ab/cd/e.gif);

背景重复:background-repeat:repeat-x|repeat-y|no-repeat;

背景定位:background-position:center|top|bottom|right|left|50% 50%|100px 200px;

背景关联:background-attachment:scroll|fixed|inherit;

文本

color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

字体

font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight

设置字体的粗细。

框模型

内边距:padding, padding-top, padding-right, padding-bottom, padding-left

边框:border, border-top, border-right, border-bottom, border-left, ...

外边距:margin, margin-top, margin-right, margin-bottom, margin-left

定位

position: static, relative, absolute, fixed

float: left, right

伪类

a:link {...}

a:visited {...}

a:hover {...}

a:active {...}

LVHA顺序定义

使用技巧

 

css入门

标签:style   io   color   ar   os   使用   for   sp   strong   

原文地址:http://www.cnblogs.com/feilv/p/4078216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!