层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
选择器:要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
属性:要改变的样式名,例如:color,font-size,margin,font-fimaly。
一个选择器中每个声明之间用分号分隔开来。
注释:CSS中这样来注释:
1、内嵌式引入:
在html头部head部分内,使用style标签插入css样式,在head标签中使用style标签定义自己需要的样式:
<head>
<meta charest="UFT-8">
<title>Title</title>
<style type="text/css">
body{font-size:36px;}
div{color:red;border:1px solid blue;background:yellow;}
</style>
</head>
2、行内样式:
直接在HTML标签中,使用style属性内嵌css样式:
<b style="font-size:56px;">行内样式直接在标签中用style属性内嵌css样式</b>
3、外链样式:
把css样式写成一个单独的CSS文件,再在head标签中通过link标签即可复用:
<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/qingwendeblog/p/css文件地址">
4、嵌入样式:
使用@import引用外部CSS文件(不太常用):
<style type="text/css">
@import url("css/style.css");
</style>
注意:会显示哪种样式 取决于哪种样式离修饰的目标越近,
行内样式>剩下的其它三种形式,样式的显示取决于距离。
浏览器根据“选择器”来决定受CSS样式影响的html标签(元素)
1、标签选择器:
通过标签名选择器决定哪些标签被动的使用这个样式:
例如:body{color:red;} p{color:red},对html中的所有该标签都起作用。
2、id选择器:
让我们通过id属性选择性使用这个样式,id选择器的标识是 # 。(一个井号)
#one{
color:gold;
}
3、class选择器(类选择器):
通过class属性有效的选择使用这个样式,当标签中出现class属性的时候,
那么可以使用类选择器类选择器,通常应用于几个标签具有相同的样式。 class选择器的标识是 . 。(一个点)
.pink{
color:pink;
}
4、全选择器:
使用*号来表示 对整个html中的所有标签都起作用。
*{
font-size:36px;
color:black;
}
适用场景: 每种浏览器的默认属性的相关值都不一样,一般情况在网页开发的初始阶段,
需要把所有浏览器的默认值 都归到一个统一的默认值下。然后再进行具体其他操作。
5、组合选择器:
可以让多个选择器共用一个CSS代码,每个选择器名称间用逗号隔开。
选择器1,选择器2·····选择器n{
属性:值;
}
6、包含选择器(后代选择器):
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
前一个选择器和后一个选择器是包含关系,中间用空格隔开。
#content p{
color:red;
}
1、字体颜色:
color:red;
颜色可以写颜色名如:black,green,orange,yellow等。颜色也可以写 rgb值和十六进制表示值,写十六进制必须加#:如rgb(0,0,0),#ffffff。
2、宽度:
width:20px;
宽度可以写像素值:20px;。也可以写百分比值:50%;。
3、高度:
height:20px;
高度可以写像素值:20px;。也可以写百分比值:50%;。
4、背景颜色:
background-color:orange;
5、字体样式:
color:blue; 字体颜色蓝色。
font-size:30px; 字体大小。
font-wight:bold; 字体加粗。
6、边框:
border:1px solid black; 黑色1像素实线边框。
7、div居中:
margin:0 auto;使div居中。
8、文本居中:
text-align:center; 使文本居中。
9、超链接去掉下划线:
text-decoration:none;去掉链接的下划线。
10、在CSS中控制div中放图片:
background: url(图片的地址); 在css中将图片引入div中。