CSS控制样式

最新推荐文章于 2022-09-15 21:52:17 发布

法哥2012

最新推荐文章于 2022-09-15 21:52:17 发布

阅读量1.1k

点赞数

分类专栏： html/css/javascript 文章标签： CSS 样式

本文链接：https://blog.csdn.net/shufac/article/details/26630661

版权

html/css/javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、CSS控制背景样式

background-color :

transparent值代表背景色为透明。

示例代码：

<html>
<head>
<style type="text/css">
body {
background-color: yellow
}
h1 {
background-color: #00ff00
}
p {
background-color: #ff00ff
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
</body>
</html>

效果：

图1-1

background-image ：

注：此属性不能被继承

值的格式为：url(URL)

示例代码：

<html>
<head>
<style type="text/css">
body {
background-image:url(img/02.jpg);
background-repeat:repeat-y;
}
</style>
</head> 
<body> 
<div></div> 
</body> 
</html>

效果图：

background-repeat：

注：此属性不能被继承

repeat默认。背景图像将在垂直方向和水平方向重复。

repeat-x背景图像将在水平方向重复。

repeat-y背景图像将在垂直方向重复。

no-repeat背景图像将仅显示一次。

background-attachment：

注：此属性不能被继承

此属性可选值为scroll / fixed

示例代码：

<html>
<head>
<style type="text/css">
body 
{
background-image:url(img/banana.jpg);
background-repeat:repeat;
background-attachment:scroll;
}
</style>
</head>
 
<body>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
</body>
</html>

效果图：

background-position:

注：此属性不能被继承

此属性格式：“top left”、“20px 30px”、“40% 50%”

示例代码：

<html>
<head>
<style type="text/css">
body 
{
background-image:url(img/chunjie.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
}
</style>
</head> 
<body>
</body> 
</html>

效果图：

二、CSS控制字体样式

font-family :

属性的可选值：family-name / generic-family

示例代码：

<html>
<head>
<title>css14</title>
<style>
<!--
h2{
font-family:黑体, 幼圆;
}
p{
font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{
font-family:楷体_GB2312, "Times New Roman";
}
-->
</style>
</head>
 
<body>
<h2>手 印</h2>
<p>即手指所结形状。修行者结手印，能感受佛、菩萨的力量而与之成为一体。结手印的两手一般称为二羽、日月掌；称十指为十度、十轮、十法界、十真如、十峰；左右手分别表示止、观、定、慧、福、智、权、实、慈、悲等；小指次第至拇指则表示色、受、想、行、识或地、水、火、风、空。手印最早时并无固定规则，密教兴起后，采取印度教的行事而有手印之说，并进一步阐释手印的意义。在十二神殿篇沙加与闯宫人对战之时，亦结得数种手印。除最常用的双手合十外，星矢等人初入处女宫，见沙加盘膝而坐，双手叠放于腹前，拇指相对，为释迦牟尼大印。沙加使用六道轮回时，右手食指与拇指相扣，余指微弯，相对左手中指与拇指相扣，乃月天印。其后，右手五指并拢，指尖向上，掌心向外，称施无畏印；同时左手亦五指并拢，指尖向下，掌心向外，称与愿印。沙加最常使用的手印是双掌虚合于胸前，掌间似含宇宙，是金刚掌。初究此题，惊佩正美用心细密，无一遗漏，瞠目之余，五体投地矣！</p>
<p class="kaiti">作者: wayne</p>
</body>
</html>

效果图

font-size :

属性的可选值为：xx-small / x-small / small / medium / large / x-large / xx-large / length / %

示例代码：

<html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 40px}
</style>
</head>
 
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body> 
</html>

<html>
<head>
<title>css16</title>
<style>
<!--
p.one{ font-size:xx-small; }
p.two{ font-size:x-small; }
p.three{ font-size:small; }
p.four{ font-size:medium; }
p.five{ font-size:large; }
p.six{ font-size:x-large; }
p.seven{ font-size:xx-large; }
-->
</style>
</head>
 
<body>
<p class="one">文字大小，xx-small</p>
<p class="two">文字大小，x-small</p>
<p class="three">文字大小，small</p>
<p class="four">文字大小，medium</p>
<p class="five">文字大小，large</p>
<p class="six">文字大小，x-large</p>
<p class="seven">文字大小，xx-large</p>
</body>
</html>

font-style :

属性的可选值为：normal / italic / oblique

font-weight : normal / bold / bolder / lighter / 100~700

三、css控制文本样式

color :

text-align :

属性的可选值为：left / right / center

text-decoration :

属性的可选值为：none / underline / overline / line-through

示例代码：

<HTML>
 <HEAD>
  <TITLE> test </TITLE>
  <link href="css/5.css" type="text/css">
  <style type="text/css">
<!--
p{
color:red;
}
.aaa{
color:green;
font-size:40px;
}
a{
text-decoration : none;
}
-->
  </style>
 </HEAD>
 
 <BODY>
<p><span class="aaa">中华人民</span><a href="">共和国yyyyyyyyyy</a></p>
 </BODY>
</HTML>

letter-spacing

word-spacing

text-transform :

属性的可选值为：none / capitalize / uppercase / lowercase

text-indent : 定义首行缩进

示例代码：

<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head> 
<body>
<p>
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
</p>
<p>sdaflsakdjflsakjfdlksajfdljdsafljsadfl jsfdlkjsdlfjsadlfjsaldfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajd flksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajd flksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflfjlsadfjlsajdflksajdflsajdflsakflsajdflksdlfkjsad</p>
</body> 
</html>

四、css控制列表样式

list-style-type ：属性可选值如下表

值描述

none 无标记。

disc 默认。标记是实心圆。

circle 标记是空心圆。

square 标记是实心方块。

decimal 标记是数字。

decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)

lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman 大写罗马数字(I, II, III, IV, V, 等。)

lower-greek 小写希腊字母(alpha, beta, gamma, 等。)

lower-latin 小写拉丁字母(a, b, c, d, e, 等。)

upper-latin 大写拉丁字母(A, B, C, D, E, 等。)

示例代码：

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
</style>
</head> 
<body>
<ul class="disc">
<li>Disc 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="circle">
<li>Circle 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="square">
<li>Square 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="none">
<li>The "none" 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="decimal">
<li>Decimal 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="decimal-leading-zero">
<li>Decimal-leading-zero 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="lower-roman">
<li>Lower-roman 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="upper-roman">
<li>Upper-roman 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="lower-greek">
<li>Lower-greek 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="lower-latin">
<li>Lower-latin 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="upper-latin">
<li>Upper-latin 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul> 
</body>
</html>

list-style-image ：

属性的格式为：url(blueball.gif);

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url('img/eg_arrow.gif')
}
</style>
</head> 
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
<li>可口可乐</li>
</ul>
</body> 
</html>

五、css控制元素尺寸

width

注：此属性不能被继承

属性的可选值为：auto / % / length

height

注：此属性不能被继承

属性的可选值为：auto / % / length

line-height

属性的可选值为：normal / % / length

六、css控制鼠标样式

cursor :

注：此属性不可继承

属性可选值：crosshair / default / pointer / move / e-resize / ne-resize / nw-resize / n-resize / se-resize / sw-resize / s-resize / w-resize / text / wait / help