css01

最新推荐文章于 2021-06-23 00:32:20 发布

Synga

最新推荐文章于 2021-06-23 00:32:20 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/Synga/article/details/89173007

版权

css
css层叠样式表，主要用于设置html页面中的文本内容，图片的外形以及版面的布局等外观显示样式。

引入css的三种方式
内联样式（行内样式）

<div style="width:100px;height:100px;"></div>

内部样式表（内嵌式）
将css代码集中写在HTML文档的head头部标签中，并且用style标签定义

<head>
	<style>
				.box {
						width:100px;
				}
	</style>
</head>

外部样式表（外链式）
扩展名后缀为.css

<head>
				<	link href="css文件路径" rel="stylesheet"
				type="text/css"
>
</head>

基础选择器

css规则由两个主要部分构成：选择器，一条或多条声明
标签选择器

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

通配符选择器*

* {
	margin: 0;padding: 0;
}

class选择器（伪类选择器）

.box {
		width:100px;
}
<div class="box"></div>

类名始终使用字母，数字或连字符，并且始终以字母开头，除了 "-“和”_"连接符不要使用其他特殊字符，类名会区分大小写！
一个标签可以包含多个类名，以空格分隔开

<div class="box red"></div>

id选择器
以id属性来设置id选择器，css中id选择器以“#”来定义
id具有唯一性，同一个页面中同样的id只可出现一次

<div id="text">文字</div>
#test {
		text-align: center;color: red;
}

选择器进阶
群组选择器

h1,h2,h3 {
		color: red;
}

交集选择器

div.red（标签选择器.类选择器或者ID选择器） {
			background-color: red;
}

子代选择器
以下代码实现选择div标签中所有直接子标签p

div>p {
		background-color: red;
}

后代选择器
后代选择器可以选择作为某标签后代的标签。

div span {
			color: red;
}

伪类选择器
·a:hover 鼠标悬停
·a:link 正常，未访问过的链接默认样式带有下划线
·a:visited 访问过后
·a:active 鼠标激活时

文本字体属性
css文本属性
color: 设置文字颜色
text-align：设置水平对齐方式
text-decoration：添加文本装饰效果常用属性值：
·none 默认
·underline 下划线
·overline 上划线
·line-through 穿过文本的线
text-indent 文本块首行的缩进

css字头
font-size 设置文本大小
font-family 设置文本的字体系列
font-style 指定斜体文字的字体样式。常用属性值：
·normal 文本显示正常
·italic 文本显示斜体
font-weight 设置文本的粗细常用属性值：
·normal 正常 400
·bold 粗体 700
line-height 设置行高常用属性值：
·normal 默认
·number 设置数字
·length 设置固定的行间距
line-height等于height可使文本垂直居中
font 字体简写属性
简写顺序：

font: font-style font-weight font-size/line-height font-family

1、顺序不能改变；
2、简写为一行的时候，font-size和line-height直接一样要用斜杠，不能分开写；
3、没有赋值的属性，会自动使用默认值；
4、只有同时具有 font-size和font-family时，简写有效

css的长度单位
·px 像素，绝对单位
·em 相对单位，如果用于font-size属性本身，则是相对于父标签的font-size。若用于其他属性，则相对于本身标签的font-size。所有未经调整的浏览器都符合：1em=16px；
·百分比
·rem 相对字体长度单位，只相对根标签即html标签字体大小

css颜色表示
· 十六进制表示法：可表示为：#RRGGBB，RR为红色，GG为绿色，BB为蓝色，所以值必须介于0和FF之间。
·rgb表示法：rgb（红，绿，蓝）可在0-255之间调整
·rgba表示法 rgba（红，绿，蓝， alpha） alpha 是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数