一、CSS(层叠样式表)
1.CSS引入方式
(1)内嵌式:CSS写在style标签中
style标签虽然可以写在页面任意位置,但是通常约定写在head标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
/* 文字颜色变成红色 */
color: red;
/* 字变大 px:像素 */
font-size: 30px;
/* 背景颜色 */
background-color:green;
/* 宽度、高度 */
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
(2)外链式:CSS写在一个单独的.css文件中
需要通过link标签在网页中引入,常在项目中使用
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 关系:样式表 -->
<!-- 外链式引入方式 -->
<link rel="stylesheet" href="./02CSS引入方式.css">
</head>
<body>
<p>这是P标签</p>
</body>
</html>
css文件:
p{
color: red;
}
(3)行内式:CSS写在标签的style属性中
配合JS使用
<div style="color: green;font-size: 30px;">这是div标签</div>
2.基础选择器
(1)标签选择器
结构:标签名{CSS属性名:属性值;}
作用:通过标签名,找到页面中所有这类标签,设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>这是P1</p>
<p>这是P2</p>
<p>这是P3</p>
</body>
</html>
三句话同时变红,因为选择器会选择所有P标签。
(2)类选择器
结构:.类名{CSS属性名:属性值;}
作用:通过类名,找到页面所有带有这个类名的标签,设置样式
注意点:一个标签可以同时有多个类名,类名之间以空格隔开
类名可以重复,一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<p class="green">111</p>
<p class="red">222</p>
<div class="red size">333</div>
</body>
</html>
可针对标签选择器进行修改。
(3)id选择器
结构:#in属性值{CSS属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:(1)所有标签上都有id属性
(2)id属性值类似身份证号码,在一个页面中是唯一的,不可重复
(3)一个标签上只能有一个id属性值
(4)一个id选择器只能选中一个标签
配合JS使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#blue{
color:skyblue;
}
</style>
</head>
<body>
<div id="blue">111</div>
<!-- id只能用一次,可以变蓝,但不符合规范 -->
<!-- <p id="blue">222</p> -->
</body>
</html>
(4)通配符选择器
结构:*{CSS属性名:属性值;}
作用:找到页面中所有的标签,设置样式
注意点:使用极少,可能用于去除标签默认的margin和padding。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<div>111</div>
<p>222</p>
<h1>333</h1>
<span>444</span>
</body>
</html>
3.字体和文本样式
(1)字体大小
属性名:font-size
取值:数字+px
谷歌浏览器默认文字大小是16px,单位需要设置,否则无效。
(2) 字体粗细
属性名:font-weight
取值:关键字:正常:normal
加粗:bold
纯数字:正常:400
加粗:700
(3) 字体倾斜
属性名:font-style
取值:正常:normal
倾斜:italic
(4)样式的层叠问题
如果给一个标签设置了相同的属性,此时样式会覆盖,写在最下面的会生效。
p{
color: red;
color: blue;
}
最终会显示蓝色属性。
(5)文本缩进
属性名:text-indent
取值:数字+px
数字+em(1em=当前标签font-size的大小)
首行缩进一般写2em
(6)文本水平对齐方式
属性名:text-align
取值:left-左对齐 center-居中对齐 right-右对齐
如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置。
text-align可以让文本、span标签、a标签、input标签、img标签居中。
若要使图片对齐,在css中不是对img进行修饰,而是body。
(7)文本修饰
属性名:text-decoration
取值:underline——下划线
line-through——删除线
overline——上划线
none——无装饰线
开发中会使用 text-decoration : none 清除a标签默认的下划线
(8)行高
作用:控制一行的上下行间距
属性名:line-height
取值:
数字+px
倍数(当前标签font-size的倍数)
(9)font复合属性:
取值:font : style weight size family;
(10) 字体
属性名:font-family
常见字体系列:
网页中的字体一定是非衬线的。
(11)颜色常见取值
(12)标签居中
在标签中写 margin : 0 auto ;
二、chome调试工具