CSS外观属性

最新推荐文章于 2023-03-18 17:34:42 发布

_wjl_

最新推荐文章于 2023-03-18 17:34:42 发布

阅读量418

点赞数

分类专栏： web前端文章标签： CSS外观属性 submit快捷键

本文链接：https://blog.csdn.net/abc_123_linbin/article/details/90339095

版权

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种（第2中常用）：

预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式(重要)。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS颜色格式</title>
	<style type="text/css">
       .red {
       	color: red;  /* red green blue pink skyblue deeppink */
       }
       li:nth-child(2) {
       	  color: #FF6600;
       }
        li:nth-child(2) {
       	  color: #f60;    /* 十六进制简写  #ffffff 简写#fff */
       }
       #rgb{
       	 color: rgb(0,255,0);
       }
	</style>
</head>
<body>
	<h3>color属性用于定义文本的颜色，其取值方式有如下3种</h3>
	<ul>
       <li class="red">1.预定义的颜色值，如red，green，blue等。</li>
       <li>2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式</li>
       <li id="rgb">3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)</li>
	</ul>
	<!--需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%-->
</body>
</html>

在这里插入图片描述

line-height:行间距

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）
right：右对齐
center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 02line-height行间距</title>
	<style type="text/css">
          p {
          	line-height: 25px;  /* 行间距 */
          	text-indent: 2em;   /* 首行缩进 此时2em就是两个汉字的宽度 */
          }
          h3 {
          	text-align: center; /* 文字水平对齐 */
          }
          div {
          	letter-spacing: 15px;  /* 字间距 */

          }
          span {
          	word-spacing: 30px;   /* 单词间距 */
          }
	</style>
</head>
<body>
    <h3>阿里巴巴</h3>
    <p>阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立的公司</p>

    <p>
	阿里巴巴集团经营多项业务，另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括：淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。
	2014年9月19日，阿里巴巴集团在纽约证券交易所正式挂牌上市，股票代码“BABA”，创始人和董事局主席为马云。
	2018年7月19日，全球同步《财富》世界500强排行榜发布，阿里巴巴集团排名300位。 [4]  2018年12月，阿里巴巴入围2018世界品牌500强。
    </p>
    <div>马云-阿里巴巴</div>
    <span>My name is Tom</span>
 </body>
</html>

在这里插入图片描述

颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

 color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范围 0~1之间    color: rgba(0,0,0,0.3)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字半透明</title>
	<style type="text/css">
      h1 {
      	color: rgba(255,0,0,0.3);
      }
	</style>
</head>
<body>
	<h1>文字半透明</h1>
</body>
</html>

在这里插入图片描述

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字阴影</title>
	<style type="text/css">
	    h1{
	    	font-size: 100px;
	    	text-shadow: 57px 21px 1px rgba(0,0,0,0.2); 
	    	/* 水平位置 垂直位置 模糊距离 阴影颜色 */
	    	/* 前两个必写 */
	    }
	</style>
</head>
<body>
	<h1>互联网有海量的知识 </h1>
</body>
</html>

在这里插入图片描述

sublime快捷方式

sublime可以快速提高我们代码的书写方式

1.生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成
2.如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
3.如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4.如果有兄弟关系的标签，用 + 就可以了比如 div+p
5.如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>综合案例</title>
	<style type="text/css">
        body {
        	color: #3c3c3c;         /* 一般网页不用纯黑 用淡灰色 */
        	font-size: 16px; 
        }
        h1 {
        	text-align: center;  /* 水平居中 */
        	font-size: 25px;
        	font-weight: normal;  /* 让粗体不加粗 */
        }
        div {
        	text-align: center;
        	font-size: 14px;
        }
        .sports {
        	color: #f40;
        }
        .packtake {
        	color:#f00;
        }
        .sc {
        	font-weight: 700;
        	color: #ccc;
        }
        .sc:hover {
        	color:#f00;  /* 链接伪类选择器 鼠标经过 该类 变色 */
        }

        p {
        	font-size: 14px;
        	line-height: 22px;
        	text-indent: 2em;   /* 首行缩进 */
        	letter-spacing: 1px;  
        }

        em {
        	font-style: normal;  /* 让斜体不倾斜*/
        	color:skyblue;
        }

	</style>
</head>
<body>
	<h1>阿里巴巴集团简介</h1>
	<div>2019年5月6日 10:28:03 来源：百度 <span class="sports">评论有奖</span> &nbsp;&nbsp;<a href="" class="packtake">125人参与</a>&nbsp;&nbsp;  <a href="" class="sc">收藏本文</a></div>
	<hr/>

	<p>阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的<em>[马云]</em>为首的18人于1999年在浙江杭州创立的公司</p>
	<p>阿里巴巴集团经营多项业务，另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括：淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。</p>
	<p>2014年9月19日，阿里巴巴集团在纽约证券交易所正式挂牌上市，股票代码“BABA”，创始人和董事局主席为<em>[马云]</em>。</p>
	<p>2018年7月19日，全球同步《财富》世界500强排行榜发布，阿里巴巴集团排名300位。 [4]  2018年12月，阿里巴巴入围2018世界品牌500强。</p>
</body>
</html>

在这里插入图片描述

_wjl_

关注

0
点赞
踩
0

收藏

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

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

扫一扫

专栏目录