奉天承运,博主诏曰:
css基础知识
CSS的概念
Cascading Style Sheet 级联样式表,表现HTML或XHTML文件样式的计算机语言,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。
style标签和css基本语法结构展示
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
行内样式
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css行内样式</title>
</head>
<body>
<ul>
<li style="color: red;font-size: 20px;">锄禾日当午</li>
<li>汗滴禾下土</li>
<li>随之盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</body>
</html>
运行结果:
内部样式表
代码:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css行内样式</title>
<style type="text/css">
li{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>随之盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</body>
</html>
运行结果:
外部样式表
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css行内样式</title>
<link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>随之盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</body>
</html>
运行结果
css级联样式表:
写在标签内部属性style中,优先级最高
内部样式:style标签内部(head中)
外部样式:写在外部的css文件中
内部样式和外部样式优先级:
1、如果有相同标签,更靠近中html代码的优先级更高
2、如果没有相同标签,内层标签的样式优先级更高
加载标签中的是标签选择器
类选择器
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css行内样式</title>
<style type="text/css">
.aa{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li class="aa">锄禾日当午</li>
<li>汗滴禾下土</li>
<li>随之盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</body>
</html>
运行结果:
id选择器
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css行内样式</title>
<style type="text/css">
.aa{
color: red;
font-size: 20px;
}
#bb{
color: green;
font-size: 10px;
}
</style>
</head>
<body>
<ul>
<li class="aa">锄禾日当午</li>
<li id="bb">汗滴禾下土</li>
<li>随之盘中餐</li>
<li class="aa">粒粒皆辛苦</li>
</ul>
</body>
</html>
运行结果:
区别:
类选择器可以有多个,ID选择器是唯一的。
钦此。