关于w3school上学习css的简单总结(二)

最新推荐文章于 2025-05-20 15:53:42 发布

原创最新推荐文章于 2025-05-20 15:53:42 发布 · 269 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS的使用方法，包括外部、内部和内联样式表的应用，以及如何设置文本、背景、列表样式等。同时，文章还讲解了如何利用CSS进行布局设计，如设置边框、间距、表格布局等。

练手可以去官网看看http://www.w3school.com.cn/h.asp

外部样式表

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

内部样式表

<style type="text/css"> p {} body {} </style>

内联样式

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

css文本

下面格式是我测试乱打的，只是记录一下

.test{
backgroud-color:yellow;
color:red;
direction:rtl;
line_height:1.5;
letter-spacing:10px;
word-spacing:20px;
text-align:center;
text-decoration:underline;
text-indent:-5em;
padding-left:5em;
text-shadow:5px 5px 5px #FF0000;
text-transform:capitalize
white-space:pre-line;
unicode-bidi:embed;
}

p.test2{
font:italic bold 12px arial,sans-serif;
}
p.test{
font-family:arial;
font-size:150%;
font-style:italic;
font-variant:normal;
font-weight:bold;
}

.test{
background-color:yellow;
}
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

eg2:body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

}

.test{
list-style-type:katakana-iroha;
list-style-position: inside;
}
.test2{
list-style-image: url('/i/eg_arrow.gif');
list-style-position: outside;
}

caption-side:bottom
}
table
{
border-collapse:separate;
border-spacing:10px 30px;
empty-cells:hide;
table-layout: automatic;
}

table, td, th
{
border:1px solid black;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
.test{
outline-color:green;
outline-style:dotted;
outline-width:3px;
}
</style>
</head>

<body>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本）才支持 outline 属性。</p>
<p class="test"><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本）才支持 outline 属性。</p>
</body>
</html>