css初体验

最新推荐文章于 2024-10-10 23:23:47 发布

YYQX爱跳舞

最新推荐文章于 2024-10-10 23:23:47 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/weixin_42551920/article/details/94590022

版权

一、css的三种引用方式

css的样式：由选择符和声明构成
元素选择符span{
声明：属性名和属性值
}

1、行内式又称内联式

在body标签中

<!-- 行内式 -->
<body>
	<!-- 行内式 -->
	 <p style="font-size:12px;
			color:red;
			font-weight:bold;">
    	唱歌跳舞
	</p>
</body>

2、嵌入式

<!-- 嵌入式 -->
 <style type="text/css">
	span{
		font-size:12px;
		color:blue;
		font-weight:bold;
	}
</style>
</head>
<body>
	<p>唱歌跳舞</p>
</body>

3、外部式

<head>
	<title></title>
	<!-- 外部式 -->
	<link rel="stylesheet" type="text/css" href="E:\sublime\css\index.css">
</head>
<body>
	<p>唱歌跳舞</p>
</body>

在文件index.css中

p{
	color: red;
	font-size: 14px;
}

执行顺序是从上往下执行，优先级最高的是行内式

二、 css选择器

格式：选择器{
                样式1;
                样式2;
    }

1、基础选择器

1.1 标签（元素）选择器

p{
	color:red;
	font-size: 10px;
}

1.2 类选择器

.class{
	color:gray;
	font-size: 10px;
}

1.3 ID选择器

id具有唯一性

#id_name{
	color:orange;
}

2、高级选择器

2.1 后代选择器（a b）

 注意：选择符可以是任何的基本选择器

a b{
	color:red;
}

2.2 子代选择器（a>b）

a>b{
    color:purple;
 }

2.3组合选择器(a,b)

a,b{
	color:red;
}

2.4交集选择器

交集选择器只能交2个，其中第1个是标记，第2个是类选择器或者ID选择器，之间不能有空格，形如：h2.special；

2.5 伪类选择器

/超链接没有被访问过的状态/
a:link{
color:red;
}
/超链接访问过后的状态/
a:visited{
color:green;
}
/鼠标悬浮时超链接a的状态/
a:hover{
color: blue;
}
/鼠标按住时超链接a的状态/
a:active{
color: black;
}
只有hover可以应用于所有标签

三、选择器权重（优先级）

内联式的权重1000
ID选择器权重100
类选择器权重10
元素选择器权重1
权重计算永不进位
继承来的属性其权重非常低几乎为0；！important 打破规则，使该指令成为最高级

四、字体属性

/*字体，备选字体*/
	font-family: "新宋体"，"微软雅黑";
/*字体大小*/
	font-size: 50px;
/*颜色表示方法1*/
	color: red;
/*颜色表示方法2 取值范围0-255*/
/*rgba r=red g=green b=blue a=alpha 透明度 取值范围0-1*/
	color: rgba(0,0,0,1);
/*表示方法3 十六进制*/
	color: #98191E;
/*默认类型为normal,italic是斜体*/
	font-style: italic;
/*字体粗细 默认类型为normal数值为400； 可以在100-900间取值*/
	font-weight: bold;

效果图：
在这里插入图片描述

五、文本属性

<p>
/*下划线 underline  上划线 overline  删除线 line-through 无线none*/
/* 超链接标签a默认包含下划线*/
	text-decoration: line-through; 
/*缩进 相对字体大小，缩进 n em个字符*/
	text-indent:2em; 
	font-size: 16px;
/*行高-行间距*/
	line-height: 32px;
/*背景色*/
	background-color: green;
/*文字间距--只能改变中文*/
	letter-spacing: 10px;
/*英文间距*/
	word-spacing: 10px; 
/*对齐方式 center-水平居中 right--右对齐 left--左对齐(默认)*/
	text-align: center;
</p>

效果图：
在这里插入图片描述