CSS 的学习-CSDN博客

本文链接：https://blog.csdn.net/qq_41622994/article/details/84395109

CSS的简单学习笔记

CSS概述：

全称：Casading Style Sheets：层叠样式表
主要作用：用来美化我们的HTML页面，HTML决定了网页的骨架，CSS化妆
将HTML与CSS进行分离。

CSS的简单语法：
在一个style标签中，编写CSS内容，最后将style标签写在head标签中。

具体用法格式如下：

<style>
选择器{
属性名称：属性值;
属性名称2：属性值2;
}
</style>

CSS选择器：帮助我们找到我们要修饰的标签或者元素

元素选择器：

元素的名称{
	属性名称：属性值;
	属性名称2：属性值2;
} 
举例：
p{
	color:red;
	font-size:63px;
}

ID选择器：

以#号开头 ID在整页面必须是唯一的
#ID的名称{
	属性名称：属性值;
	属性名称2：属性值2;
} 
举例：

#p1{
	color:blue;
	font-family: 金梅毛筆匾行書;
}

类选择器：

以.开头

.类的名称{
属性名称：属性值;
属性名称2：属性值2;
}
 举例：
 
.p2{
color:yellow;
font-family: 金梅毛筆匾行書;
}

CSS的引入方式：

外部样式：通过link标签引入一个外部的CSS文件。

用法如下：

<head>
<link href="css/css1.css" rel="stylesheet"/>
</head>

内部样式：直接写在style标签内的CSS代码。
行内样式：直接在标签内添加一个style属性，编程CSS的样式。
CSS的浮动：浮动的元素会脱离正常的文档流，在正常的文档流中不占有空间。

float属性：
　 left
　right

clear属性：清楚浮动
　both: 两边都不允许浮动
　 left: 左边不允许浮动
　right: 右边不允许浮动

css扩展内容

按照选择器搜索精确度来编写：行内样式>ID选择器>类选择器>元素选择器
就近原则：哪个离得近就选用哪个样式
CSS：层叠样式
主要作用：
1.美化页面
2.将页面美化和HTML代码进行分离，提高代码的重用性
选择器：元素选择器，ID选择器，类选择器。

CSS浮动：float:【left,right】不占有正常文档流中的空间，流式布局
clear:【both,left,right】

CSS中其他选择器：
选择器分组：

	选择器1,选择器2………{
		属性名称：属性值;
		属性名称2：属性值2;
	} 举例：
	
	p,.p1{
		color:red;
		font-size:24px;
	}

派生选择器【后代选择器】

选择器1 选择器2…………{
	属性名称：属性值;
	属性名称2：属性值2;
} 
p b{
	color:red;
	font-size:24px;
}

伪链接选择器【伪类别选择器】：通常都是用在a标签

a
.Css链接的四种状态：
	i.  a:link 普通的、未被访问的链接
	ii. a:visited 用户已访问的链接
	iii.a:hover 鼠标指针位于链接上方
	iv. a:active 链接被点击的时刻
b.常见的链接样式：
	text-decoration属性大多用于去掉链接中的下划线 none
c.设置背景颜色：
	background-color
举例：
a:link{
color: blue;
font-size: 14px;
} 
a:hover{
color: red;
font-size: 26px;
font-family: 金梅草行書;
} 
a:active{
font-size: 60px;
}
 a:visited{
color: aqua;
} .
p1:hover{
color: greenyellow;
}

未完待续。。。。