CSS基础知识
css用于控制html文档样式。Css链接方式：链接外部文件，导入外部样式文件，使用行内样式，使用内部样式定义（通常不建议使用：无法做到css样式被其他html文档使用；会导致html文件过大，大量重复下载，导致网络负载过重；如果需要改变整个网站的风格时，需要大量修改，不利于工程化管理）。
css选择器的基本种类，包括id选择器、类选择器、元素选择器。这里主要讲解id选择器、类选择器、包含选择器。
css选择器基础知识
https://www.w3cschool.cn/css/css-selector.html
Class选择器:.+class名称。Id选择器:#+id名称。
Css链接方式
1.链接外部文件
新建a.css文件，通过链接外部文件形式，加载css样式
（1）Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接外部css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
</table>
</body>
</html>
（2）Css
table{
background-color:#003366;
width:400px;}
td{
background-color:#fff;
font-family:"楷体_GB2312";
font_size:20px;
text-shadow:-8px 6px 2px #333;}
2.内部样式
通过style标签，嵌入css样式，直接引入内部css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部css样式</title>
<style>
table{
background-color:#003366;
width:400px;}
td{
background-color:#fff;
font-family:"楷体_GB2312";
font_size:20px;
text-shadow:-8px 6px 2px #333;}
.title{
font-size:18px;
color:#60c;
height:30px;
width:200px;
border-top:3px solid #cccccc;
border-left:3px solid #000000;
border-bottom:3px solid #cccccc;
border-right:3px solid #000000;}
</style>
</head>
<body>
<div class="title">java体系图书</div>
<table>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
</table>
</body>
</html>
3.内联样式
通过div标签中的style属性，设置css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
</head>
<body>
<div style="font-size:18px;color:#60c;height:30px;width:200px;border-top:3px solid #cccccc;border-bottom:3px solid #cccccc;
border-left:3px solid #000000;border-right:3px solid #000000;">
疯狂Java体系图书:</div>
<table style="background-color:#0099bb">
<tr>
<td style="background-color:#ffffff;font-falimy:楷体_GB2312;font-size:20px;text-shadow:-8px 6px 3px #333">疯狂Java</td></tr>
<tr>
<td style="background-color:#ffffff;font-family:楷体_GB2312;font-size:20px;text-shadow:-8px 6px 3px #333">疯狂Java</td></tr>
</table>
</body>
</html>
Css选择器
1. class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
<style>
.my{
width:240px;
height:40px;
background-color:#dddddd;}
div.my{
border:2px dotted black;
background:#ffffff;}</style>
</head>
<body>
<div class="my">中国北京</div>
<p class="my">http://www.baidu.com</p>
</body>
</html>
2.id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
<style>
div{
width:240px;
height:40px;
background-color:#dddddd;
padding:3px;}
#my{
width:240px;
border:2px dotted black;
background:#888;}</style>
</head>
<body>
<div>中国北京</div>
<div id="my">http://www.baidu.com</div>
</body>
</html>
3. 包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
<style>
div{
width:350px;
height:60px;
background-color:#ddd;
margin:3px;}
div .a{
width:200px;
height:35px;
border:2px dotted black;
background:#888;}</style>
</head>
<body>
<div>中国北京</div>
<div><div class="a">http://www.baidu.com</div></div>
</body>
</html>
原文地址：https://blog.csdn.net/qq_57417926/article/details/142710692
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！