css基础(1)——样式表，选择器，文本修饰

最新推荐文章于 2022-09-29 18:40:53 发布

大地笨笨熊

最新推荐文章于 2022-09-29 18:40:53 发布

阅读量277

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51913153/article/details/124769451

版权

1.css概述

html中主要讲标签，标签是构成网页的主要内容；

而css用来修饰网页的外观，定义布局。

级联：即就是关联的意思，将页面内容与样式表相关联

样式表：用来修饰网页的语法集。

2.样式表的分类

行内样式表：将样式表写入标签内容中；使用较少

<a href="" style="color: red;font-size:30px;">百度</a>

内嵌样式表：将样式表与内容分离，通过选择器将内容与样式表关联起来，练习使用较多

/* 一个{} 表示一个样式表*/
            .aa{
                color: red; font-size:30px;
            }

外部样式表：css与html混合在一起，维护起来较为麻烦，因此将css代码抽取到外部文件中，

多用于实际项目开发

.aa{
	color: red; font-size:30px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- html外部引入css文件  rel="stylesheet"引入css文件-->
		<link href="css/out.css" rel="stylesheet" />
	</head>
	<body>
		<!-- 外部样式表（多用于实际开发中） css文件多与html文件混合在一起，维护起来较为麻烦，因此将css代码抽取到外部文件中 -->
		<a href="" class="aa">百度</a>
	</body>
</html>

3.选择器

标签选择器：以标签名作为选择器

/*标签选择器：以标签作为选择参照*/
			a{
				color: red;font-size: 30px;
			}

类选择器：以类名作为在选择器

/* 类选择器：以类名作为选择参照 */
			.aa{
				color: green; font-size:20px;
			}

id选择器：以id属性作为选择器

/* id选择器：id的值不允许重复 */
			#a12{
				color:deepskyblue;font-size:10px;
			}

通配选择器：可以选中所有标签，一般用于去除非纯净标签的边框，外边距，内边距等

/* 通配选择器 ：可以选中所有标签*/
			*{
				color: aquamarine;font-size: 50px;
			}

组合选择器：将多个具有共同属性的选择器组合在一起，对应同一个样式表

/* 组合选择器：将多个具有和共同属性的选择器组合在一起，对应同一个样式表 */
			p,.aa{
				 font-family: 隶书 ;
			}

选择器优先级：

行级样式表>id选择器>组合选择器>类选择器>标签选择器>通配选择器

4.文本修饰

            font-size: 20px; /*定义字体大小*/ 注：另一种单位em指一个标准字体的大小
           color: red;/*定义内容颜色*/
           font-family: 隶书;/*定义字体*/
           text-align: left;/* 文本对齐方式 */
           text-decoration: underline;/* 定义下划线*/
           /* text-decoration: line-through; /*定义删除线*/ */
           text-decoration: none;/*定义无任何修饰,可用于消除超链接标签中自带的下划线*/
           text-indent:2em;/*em为当前段落中一个字符的大小*/
           font-weight: bold;/*定义字体加粗的粗细大小*/
           letter-spacing:20px ;/*字符之间的间距*/ */
           line-height: 20px;/*定义行高*/
           font-style: italic;/*定义字体为斜体*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		p{
			font-size: 20px; 
			color: red;
			font-family: 隶书;/*定义字体*/
			text-align: left;/* 文本对齐方式 */
			text-decoration: underline;/* 定义下划线*/
			/* text-decoration: line-through; /*定义删除线*/ */
			text-decoration: none;/*定义无任何修饰,可用于消除超链接标签中自带的下划线*/
			text-indent:2em;/*em为当前段落中一个字符的大小*/
			font-weight: bold;/*定义字体加粗的粗细大小*/
			/* letter-spacing:20px ;/*字符之间的间距*/ */
			line-height: 20px;/*定义行高*/
			/* font-style: italic;/*定义字体为斜体*/ */
		}
		</style>
	</head>
	<body>
		<p>
			有2个数组，第一个数组内容为：[黑龙江省,浙江省,江西省,福建省]，第二个数组为：[哈尔滨,杭州,南昌,广州,福州]，将第一个数组元素作为key，第二个数组元素作为value存储到Map集合中。如{黑龙江省=哈尔滨, 浙江省=杭州, …}。
		</p>
		<p>
			第一个数组内容为：[黑龙江省,浙江省,江西省,广东省,福建省]，第二个数组为：[哈尔滨,杭州,南昌,广州,福州]，将
		</p>
	</body>
</html>

大地笨笨熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础(1)——样式表，选择器，文本修饰

1.css概述html中主要讲标签，标签是构成网页的主要内容；而css用来修饰网页的外观，定义布局。级联：即就是关联的意思，将页面内容与样式表相关联样式表：用来修饰网页的语法集。2.样式表的分类行内样式表：将样式表写入标签内容中；使用较少<a href="" style="color: red;font-size:30px;">百度</a>内嵌样式表：将样式表与内容分离，通过选择器将内容与样式表关联起来，练习使用较多/* 一个{} 表示一个样式表*
复制链接

扫一扫