Css外观属性

最新推荐文章于 2024-06-14 18:03:23 发布

abc219365

最新推荐文章于 2024-06-14 18:03:23 发布

阅读量850

点赞数

本文链接：https://blog.csdn.net/abc219365/article/details/118859391

版权

color:文本颜色　color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red,green,blue等。

2.十六进制，如#FF0000,#FF6600,#29D794等。实际工作中，十六进制是最常见的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

实现代码：<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style>
   .red{
           color:red;
       }

       li:nth-child(4){
           color:#f60;
       }

       #rgb{
           color:rgb(53,50,205);
       }
   </style>
   <body>
       <h3>color属性定义文本的颜色，取值方式有如下三种：</h3>
       <ol>
           <li class="red">预定义的颜色值，如red,green,blue等。</li>
           <li>十六进制，如#FF0000，#FF6600，#29D0794等。十六进制是最常用的定义颜色的方式</li>
           <li id="rgb">RGB代码，如红色可以表示为rgb（255,0,0）或rgb（100%，0%,0%）。</li>
           <li>woahghygyyg</li>
       </ol>


   </body>
</html>

运行截图：

line-height:行间距（行与行之间的距离）属性值单位一般由三种，像素px，相对值em和百分比%，一般用像素。一般行距字号打7.8的像素。

例如：

div {line-height:6px; }

div {line-height:10.5em; }

代码：

<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>

text-align：水平对齐方式（一般用来设置文本内容的水平对齐）

ext-align:center; 文本居中对齐

text-align:left; 文本左对齐

text-align:right; 文本向右对齐

justify：内容两端对齐。写本文档时仅Firefox能看到正确效果

start：内容对齐开始边界。（CSS3）

end：内容对齐结束边界。（CSS3）

代码：

<html>

<head>

<title>text-align</title>

</head>

<body>

</html>

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-align_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test p{border:1px solid #000;}
.left p{text-align:left;}
.center p{text-align:center;}
.right p{text-align:right;}
.justify p{width:200px;text-align:justify;}
.start p{text-align:start;}
.end p{text-align:end;}
</style>
</head>
<body>
<ul class="test">
   <li class="left">
       <strong>左对齐</strong>
       <p>我是左对齐内容</p>
   </li>
   <li class="center">
       <strong>居中对齐</strong>
       <p>我是居中对齐内容</p>
   </li>
   <li class="right">
       <strong>右对齐</strong>
       <p>我是右对齐内容</p>
   </li>
   <li class="justify">
       <strong>两端对齐</strong>
       <p>我是两端对齐内容，除了最后一行外，我的每行文字两端都是对齐的。你将在Firefox中看到效果。</p>
   </li>
   <li class="start">
       <strong>start</strong>
       <p>start效果</p>
   </li>
   <li class="end">
       <strong>end</strong>
       <p>end效果</p>
   </li>
</ul>
</body>
</html>

实例

缩进段落的第一行50像素：

p
{
text-indent:50px;
}

字间距;p{

letter-spacing:15px;

}

单词间距：p{

work-spacing：10px;

}

让文字半透明：用rgb去实现，

h1{

color:rgb(0,0,0,0.5);

}

最后的数值就是决定透明度，取值在0-1之间，4个参数不能省略。

文字阴影：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}
代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

前两个参数必须要写。

abc219365

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css外观属性

color:文本颜色　color属性用于定义文本的颜色，其取值方式有如下3种：1.预定义的颜色值，如red,green,blue等。2.十六进制，如#FF0000,#FF6600,#29D794等。实际工作中，十六进制是最常见的定义颜色的方式。3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。...
复制链接

扫一扫