层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。(转自百度百科)
1.引入CSS样式表 1.1行内式(内联式)基本语法如下:
内容
例如:
是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 。
基本语法如下:
选择器(选择的标签) { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }
如:
div {
width: 300px;
height: 200px;
background-color: blanchedalmond;
}
称链入式,是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中。
基本语法如下:
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
基本语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如:
div{
width: 100px;
height: 100px;
background-color: aqua;
}
h1{
width: 100px;
height: 100px;
background-color: bisque;
}
p{
width: 100px;
height: 100px;
background-color: rgb(219, 82, 27);
}
2.2类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名. 多个类名时,各个类名中间用空格隔开。
基本语法:
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
多类名语法: .类名1 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} .类名2 {属性4:属性值4; 属性5:属性值5; 属性6:属性值6; ......} 标签调用的时候用: class = "类名1 类名2"
例如:
.vip{
/* color设置文字颜色 */
color: crimson;
/* 字体加粗 */
font-weight: bolder;
}
.normal{
color: darkgray;
font-weight: normal;
}
显示效果如下:
id选择器使用#
进行标识,后面紧跟id名
基本语法格式如下:
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如:
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#user1{
background-color: darkgray;
color: darkseagreen;
}
实现效果如下:
通配符选择器用*
号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2.5选择器总结 选择器作用缺点使用情况用法标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p { color:red;}类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color: red; }id选择器一次只能选择器1个标签只能使用一次不推荐使用#nav {color: red;}通配符选择器选择所有的标签选择的太多,有部分不需要不推荐使用* {color: red;}