css基础知识(文本属性)

伪类选择器 同时被 2 个专栏收录
1 篇文章 0 订阅
1 篇文章 0 订阅

四、伪类选择器

①未点击时

a:link{
	color: black;
	}

②点击时

a:visited{
		color: blue;
		}

③鼠标悬停时

a:hover{
	color:red;
}

④点击后

a:active{
	color:green;
		}
<div>
	<a href="#">积分系统</a>
</div>

注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
注意:伪类的名称不区分大小写。

五、css文本属性

1、字体*
(1)、字体大小

	font-size: 12px/2em/200%;
/* 2em:父元素字体大小的两倍
	200%:父元素字体大小的两倍
	2em:只用来设置字体大小,若设置宽高则大小为字体的两倍
 */

(2)、字体系列

	font-family:"楷体","Helvetica Neue",sans-serif;

注:加双引号的情况:中文,多个英文单词组成的字体,使用字体的前提是系统里有此字体,若没有就使用sans-serif(非衬线体)或serif(衬线体)
(3)、字体粗细和字体样式
①粗细
font-weight:normal=500/bold/100/200-900
bold:加粗
②样式

	font-style:normal/italic;/**斜体/

(4)、行高:元素最下面到另一行元素最下面的距离,基线之间的距离

	line-height:40px;
	height:40px;

当行高值和元素的高度一致时,内容则垂直居中。
(5)、字体 颜色

	color:red/rgb(255,0,0)/#ff0000;

2、对齐方式
(6)、对齐方式/文本缩进
①水平方向:text-alight:right/center/left(默认)
适用于块级元素、内联元素需要使用块元素包裹起来整体移动
②文本缩进

	text-indent:20px;
	text-indent:2%;/*宽度的2%*/
	text-indent:2em;/*父元素字体大小的2倍*/

3、格式处理
(7)、空白处理

	white-space:pre;
	<pre>Hello Word!     Hello Word! </pre>

pre:保留原格式输出
注:(wite-space:pre;)若设置pre,则任意回车,空白都当做一个空格来出理。
white-space:pre-wrap;
效果和①中的pre一样
white-space:pre-line;/取消空白,保留换行/
white-space:nowrap;/不换行使内容显示为一行/
(8)、换行和断行

	word-wrap: break-all;/*断行 会把单词截断*/
	word-wrap: break-word;/*换行 单词充满在换行*/

4、文本修饰
(9)、文本阴影

	text-shadow: 1px 1px gold,1.2px 1.2px indianred,……;/*设置立体*/
	text-shadow: 1px 1px 1px black;/*水平方向 垂直方向 模糊值*/

(10)、下划线

	text-decoration: overline;/*上划线*/
	text-decoration: line-through;/*中划线*/
	text-decoration: underline;/*下划线*/
	text-decoration: overline underline line-through; /*三条线一起加 划线*/ 

5、高级设计
(11)、溢出

	overflow: hidden; /* 省略*/
	text-overflow: clip; /*修剪掉*/ 
	 white-space: nowrap;/*一行显示*/
	text-overflow: ellipsis;/* 省略号*/	
/* 1、2配合使用,多出的部分Hier省略掉。
	配合使用,多出的用省略号代替134*/	

(12)、光标

cursor:pointer;
	/* pointer:小手,a标签默认小手,可点击
		move:可移动
		help:帮助?
		wait:加载中(圆圈)
		crosshair:十字线,截图
	 */
user-select: none;/*不能复制*/
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

杨码

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值