CSS常用总结

最新推荐文章于 2025-05-28 22:37:28 发布

最新推荐文章于 2025-05-28 22:37:28 发布 · 97 阅读

·

0

·

本文详细介绍了CSS的基础知识，包括选择器类型、不同样式表的应用方式及其优先级、常用属性如文字、背景及链接等的设置方法，并探讨了DIV与SPAN标记的区别及CSS布局的应用。

CSS索引

一.CSS样式选择器 2

1.通用选择器——{font-family:"宋体";declaration2;...declarationN} 2

2.类型选择器——p{font-family:"宋体";}或p1，p2{font-family:"宋体";}逗号代表或者的意思。 2

3.Class——p.code{font-family:"宋体";} 2

4.ID——#code{font-family:"宋体";} 2

二.样式表 2

1.行内样式表 2

2.内部样式表 2

3.外部样式表 2

4.样式表优先级——就近原则 3

3.背景属性 4

5.边距属性 4

6.边框属性 4

四.CSS布局 5

1.DIV标记（分块标记）——<divstyle="color:#00FF00">***</div> 5

2.span标记（行标记）——<spanstyle="***">***</span> 6

3.DIV&span区别 6

4.display属性 6

5.@import合并央视文件 6

一.CSS样式选择器

1.通用选择器——{font-family:"宋体";declaration2;...declarationN}

2.类型选择器——p{font-family:"宋体";}或p1，p2{font-family:"宋体";}逗号代表或者的意思。

3.Class——p.code{font-family:"宋体";}

td.fancy{

color:#f60;

background:#666;

}

在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。

<tdclass="fancy">

4.ID——#code{font-family:"宋体";}

#sidebarp{font-style:italic;text-align:right;margin-top:0.5em;}

二.样式表

1.行内样式表

<pstyle+"color=Blue";></p>

2.内部样式表

<head>

<styletype="text/css">

hr{color:sienna;}

p{margin-left:20px;}

body{background-image:url("images/back40.gif");}

</style>

</head>

3.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

<head>

<linkrel="stylesheet"type="text/css"href="mystyle.css"/>

</head>

4.样式表优先级——就近原则

三.属性

1.文字

<styletype="text/css">

.font1{font-family:verdana;font-style:italic;font-variant:small-caps;font-weight:lighter;

font-size:18pt;color:red}

.code{font-size:16pt;color:red}

</style>

2.文本

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	文本对齐。
text-decoration	向文本添加修饰。
text-indent	首行缩进。
text-transform	控制元素中的字母。
word-spacing	设置字间距。
<styletype="text/css"> .text1{word-spacing:4;letter-spacing:4;text-decoration:blink;font-size:18pt;color:red} </style>

3.背景属性

<styletype="text/css">

.p1{background-image:url(images/02.jpg);background-repeat:no-repeat;}

</style>

4.超链接

A:link未访问时的状态

A:visited访问过后的状态

A:active鼠标点中不放时的状态

A:hover鼠标划过时的状态

<styletype="text/css">

/*我是注释*/

a:link{color:green;text-decoration:none}

a:active{color:blue;text-decoration:none}

a:visited{color:orange;text-decoration:none}

a:hover{color:red;text-decoration:underline}

</style>

5.边距属性

<styletype="text/css">

.p1{background-image:url(images/02.jpg);background-repeat:no-repeat;margin-left:5em}

</style>

6.边框属性

<styletype="text/css">

p{border:10pxdoublepurple}</style>

四.CSS布局

1.DIV标记（分块标记）——<divstyle="color:#00FF00">***</div>

<html>

<body>

<h3>Thisisaheader</h3>

<p>Thisisaparagraph.</p>

<divstyle="color:#00FF00">

<h3>Thisisaheader</h3>

<p>Thisisaparagraph.</p>

</div>

</body>

</html>

2.span标记（行标记）——<spanstyle="***">***</span>

<p><span>sometext.</span>someothertext.</p>

3.DIV&span区别

Div会造成换行，span不会。

4.display属性

display属性规定元素应该生成的框的类型。

p.inline{display:inline;}

Inline在同一行中显示，none文字不会被显示，block换行输出.

5.@import合并央视文件

可将多个css文件合并成一个css文件.

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。