CSS：初步学习

最新推荐文章于 2024-07-31 14:35:30 发布

马俊玮

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量341

点赞数 6

文章标签： css 学习前端

本文链接：https://blog.csdn.net/Kochiya_ika/article/details/135801373

版权

一.CSS概述:

CSS(Cascading Style Sheets,级联样式表): 其功能是用来修饰标签语言.简单来说就是和HTML一起合作完成一个网页制作:HTML负责标签的构建,CSS负责对标签进行修饰.

举个例子就好像是盖一栋楼,HTML就是钢筋水泥搭好的没有任何装饰的空房,CSS就是贴的砖,买的家具这类装饰、修饰

二.CSS基本语法

1.行内样式表

行内样式表:简而言之就是在标签内对标签的属性进行修饰,常见的就是我们在HTML中简单学习的修饰语句,但是行内样式表的优先级是最高的

2.内嵌样式表

内嵌样式表:内嵌就是说,我们将css代码集中写在HTML文档的head头部标签中,并通过style标签来定义,我们平常自己进行练习的时候使用频率较高:

<style >
			b{
				color: #FFD700;
				background-color: black;
			}
		</style>

3.外部样式表

外部样式表也是最常用的一种,通过.css文件来集中处理css代码,然后通过<link>标签来引入外部写好的.css文件代码:

a{
	color: darkorange; 
	font-size: 14px; 
	font-family: 楷体; 
	text-decoration: none;
}
/*这一部分是css文件中的代码*/

<head>
		<meta charset="utf-8" />
		<title></title>
		 <!-- 外部样式表（最常用）-->
		<link href="css/index.css" rel="stylesheet"/>
		</style>
	</head>

三.选择器

选择器:就是我们真正实现针对特定标签进行修饰的工具,总共又很多种,能碰到什么就记录什么,至于目前先介绍四个比较常用的选择器:标签选择器,类选择器,id选择器,以及通配选择器

1.标签选择器:

标签选择器:通过标签来进行选择,使用方法如下:标签名{修饰语句}

<!-- 标签选择器 -->
		<style >
			b{
				color: #FFD700;
				background-color: black;
			}
		</style>

2.类选择器:

类选择器:通过不同的类名来进行选择,我们可以在标签内部填入相应的类名,使用方法如下:"."类{修饰语句}

<!-- 类选择器 -->
		<style >
			.genshin{
				background-color: #00FFFF;
				/*结果证明类选择器优先级较高*/
			}

<b class="genshin";>不要玩原神了</b><br />

3.id选择器:

id选择器:通过不同的id来进行选择,我们同上也可以自定义id,使用方法如下:#id{修饰语句}

<!-- id选择器 -->
		<style >
			#start{
				font-size: 20px;
				/*优先级最高*/
			}
		</style>

<b class="genshin"; id="start">不要玩原神了</b><br />

4.通配选择器:

通配选择器:优先级最低,但是会对所有的标签进行修饰,使用方法如下:*{}

四.文本

这里我们例举一些常用的文本:

p{
	/* color: aqua; */
	font-size: 18px;
	/* 文本对齐 :左对齐*/
	text-align: left;
	/* 定义穿过文本下的一条线 :看起来跟删除很像的那条线*/
	text-decoration: line-through;
	/* 定义文本下的一条线 :下划线*/
	text-decoration: underline;
	/* 会覆盖掉上一条语句 */
	
	/* 定义标准的文本 :取消所有修饰*/
	/* text-decoration: none; */
	
	/* 斜体文本 */
	font-style: italic;
	/* 字体粗细 :bold默认为700*/
	font-weight: bold;
	/* 设置行高 */
	line-height: normal;
	/* 可以指定字符间距 :*/
	letter-spacing: normal;
	/* 用来设置首行缩进 :
	em对应的是之前设定好的文字大小,一个文字对应1em*/
	text-indent: 2em;
	/* 即缩进两个文字的大小 */
	
	/* 背景图片 */
	background-image: url(../img/1.png);
	/* 背景图片是否重复 :默认为自动填充*/
	background-repeat: no-repeat;
}

五.伪类

伪类:CSS伪类专门用来修饰标签的一种特殊的状态(比如鼠标指针移入,点击等状态),当我们需要位处在这些特殊状态的标签设置样式时就可以使用伪类.

伪类的语法:

1.hover:

hover:鼠标移入的时候会自动切换成此标签:

a{
	color: darkorange; 
	font-size: 14px; 
	font-family: 楷体; 
	text-decoration: none;
}
a:hover{
	color: gold;
	font-size: 20px;
	font-family: 楷体;
	text-decoration: underline;
}

2.active:

active:被鼠标点击的时候会自动切换成此标签:

a{
	color: darkorange; 
	font-size: 14px; 
	font-family: 楷体; 
	text-decoration: none;
}
a:hover{
	color: darkorange;
	font-size: 14px;
	font-size: 楷体;
	text-decoration: none;
}

3.focus:

focus:想拥有键盘输入焦点的标签添加样式,用大白话讲就是,有文本框的时候可以使用.

input:focus{
	background-color: aquamarine;
}

<input type="text"/><br />

马俊玮

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS：初步学习

CSS(Cascading Style Sheets,级联样式表): 其功能是用来修饰标签语言.简单来说就是和HTML一起合作完成一个网页制作:HTML负责标签的构建,CSS负责对标签进行修饰.举个例子就好像是盖一栋楼,HTML就是钢筋水泥搭好的没有任何装饰的空房,CSS就是贴的砖,买的家具这类装饰、修饰。
复制链接

扫一扫