CSS简介
CSS = 层叠样式表(Cascading Style Sheets)
用于定义HTML内容在浏览器内的显示样式:字体大小,颜色,字体加粗等
CSS代码语法
selector{
property:value
}
selector: 选择器,选择对哪一个进行显示样式的设置
property: 属性
value: 属性值
修改样式的简单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
font-size: 50px;
color:aqua;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
</style>
</head>
<body>
<p>haha</p>
</body>
</html>
image
分析
在<head>中建立了<style>,其中对P段落进行了显示样式的设置
<style>
p{
font-size: 50px;
color:aqua;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
</style>
修改样式的实例2_多个一起修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div,p,h1{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p>haha</p>
<div>haha</div>
<h1>haha</h1>
</body>
</html>
image
div,p,h1{
}
这样就对div,p,h1都设置了一样的显示样式
CSS注释代码
快捷方式: CTRL+?
CSS引入方式
- 内部样式
- 行内样式
- 外部样式
- 导入样式
推荐使用内部样式和外部样式,行内样式尽量少用
内部样式
<style>
div,p,h1{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
div,p,h1 放在了<style>内,所以叫内部样式
行内样式
<body>
<div style="width: 50px; height:50px; background-color:blue">haha</div>
</body>
<style>不再是卸载<head>中,而是在<body>的<div>行中直接进行显示样式的设置
外部样式
写一个.css的外部文件,在<head>中用<linK>将外部的.css文件导入到HTML文件中
rel属性表示两个文档之间的关系,rel="stylesheet"表示这是一个样式表
href属性表示被链接文档的路径
外部样式.css
p{
font-size: 50px;
color: blue;
}
外部样式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="外部样式.css"">
</head>
<body>
<p>hello world</p>
</body>
</html>
<link rel="stylesheet" href="外部样式.css"">
href表示导入的css文件
rel表示导入的是一个样式表
结果
image
导入样式
在内部样式的<style>标签里导入一个外部样式表,导入时用@import
导入样式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@import "外部样式.css"
</style>
</head>
<body>
<p>哈哈</p>
</body>
</html>
结果
image
四种方式的优先级
行内样式>内部样式>外部样式>导入样式
内部样式>外部样式的前提是: 内部样式的css样式的位置在外部样式的后面
网友评论