CSS基础知识

来源：互联网发布：腾讯文件管理器源码编辑：程序博客网时间：2024/06/05 18:18

css基础语法

css规则有两个主要的部分组成：选择器，以及一条或者多条声明

 h1 { color:blue; font-sizeL12px; }

**css内部的注释以”/“开始，以”/”结束**

p {   text-align:center;   /* 这里是一个注释 */   color:blick;   font-family:arial;  }

id选择器，通过”#”来选择HTML元素

#username{ text-align:center;color:red; }

class选择器，通过”.”来选择一组class元素

.center{ text-align:center; }

指定特定的HTML元素使用class

p.center { text-align:center; }

引入外部样式表

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

内部样式表

<head>    <style>        hr { color:sienna; }        p { margin-left:20px; }        body { background-image:url("images/back40.gif"); }    </style></head>

内连样式表

<p style="color:sienna; margin-left:20px;">This is a paragraph.</p>

当同一个HEML元素被不止一个样式定义，所有的样式层叠与一个样式表中，优先级由小到达为

1.浏览器缺省样式
2.外部样式表(.css文件)
3.内部样式表(位于标签内部)
4.内连样式(在HTML元素内部)

background-color 属性定义了元素的背景颜色

body { background-color:red; }

background-image 属性描述了元素的背景图像

body { background-image:url('paper.gif'); }

定义背景图只在水平方向平铺

body { background-image:url('paper.gif'); background-repeat:repeat-x; }

改变图像在背景中的位置

body{background-image:url('paper.gif');background-repeat:no-repeat;background-position:right top;}

将这些属性合并在同一个属性中

body { background:#ffffff url('img_tree.png') no-repeat right top; }

0 0