CSS的三种引入方式
行内样式表
-
行内样式表就是在元素标签内部设置
style属性来设置CSS样式 -
选择器在
style标签中
<标签 style="属性:属性值;"></标签>
内部样式表
-
内部样式表也是选择器放在style中
-
然后在HTML文档的head中书写
-
一般在平时练习的时候使用内部样式表
<标签 style="属性:属性值;"></标签>
外部样式表
外部样式表的书写步骤:
- 新建一个后缀名为.css样式文件,把所有的CSS代码放在文件中
- 在HTML页面中引入,使用
<link>标签
通过link引入外部css文件
<link rel="stylesheet href="css文件路径">
href与src
- href 是引用
- src下载资源到当前页面
外部的css用的多 ：
1.实现结构与样式的分离
2.实现模块化 实现公用
3.减少不必要的代码。
三种方式修改一个标签（内容）
- 优先级最大的是行内 内部样式与外部样式 优先级是相同的 谁在下面结果就是谁
百度首页案例
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度首页</title>
<link rel="stylesheet" href="css包/css.css">
</head>
<body>
<form align="center">
<div>
<img src="img/百度.gif" alt="百度一下">
</div>
<div>
<a href="#">新闻</a>
<a href="#" class="webpage">网页</a>
<a href="#">贴吧</a>
<a href="#">知道</a>
<a href="#">音乐</a>
<a href="#">图片</a>
<a href="#">视频</a>
<a href="#">地图</a>
</div>
<br>
<input type="text" name="kuang" width="5" class="input" align="center">
<input type="submit" name="tijiao" value="百度一下">
<br>
<div class="top">
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a>
<label for="">|</label>
<a href="#">更多>></a>
<div class="botton">
<a href="#" class="botton">把百度设为主页</a>
<a href="#" class="botton">安装百度浏览器</a>
<br>
<a href="#" class="botton">加入百度推广</a>
<label for="" class="botton">|</label>
<a href="#" class="botton">搜索风云榜</a>
<label for="" class="botton">|</label>
<a href="#" class="botton">关于百度</a>
<label for="" class="botton">|</label>
<a href="#" class="botton">About Baidu</a>
<br>
<p class="bot">2013 Baidu 使用百度必读 京ICP证0301173号</p>
</div>
</form>
</body>
</html>
外部样式表CSS
.webpage {
color: black;
text-decoration: none;
}
a{
color: blue;
font-size: 15px;
}
label {
color: blue;
}
.botton {
font-size: 5px;
}
.bot {
font-size: 3px;
}
.top {
margin-top: 30px;
margin-bottom: 0px;
}
.botton {
margin-top: 350px;
}
.input {
width: 300px;
height: 25px;
}
搜索记录
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css包/搜索记录css.css">
</head>
<body>
<table class="div">
<tr>
<td>
<input type="text" value="请输入歌名.." class="biaoge">
<input type="submit" value="搜索" class="kuang">
<hr>
</td>
</tr>
<tr>
<td>
<h2>历史搜索记录</h2>
<ul>
<li>
野狼
</li>
<li>芒种</li>
<li>嚣张</li>
</ul>
<h2>热门搜索</h2>
<ol>
<li>漂洋过海来看你</li>
<li>银河护卫队</li>
<li>小苹果</li>
<li>匆匆那年</li>
</ol>
</td>
</tr>
</table>
</body>
</html>
外部样式表CSS
.div {
background-color: lightgray;
width: 270px;
}
.biaoge {
width: 200px;
height: 25px;
}
.kuang {
height: 25px;
}
专业简历
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css包/专业简历css.css">
</head>
<body>
<h1 align="center">专业简历</h1>
<h2>个人信息</h2>
<ul>
<li> <label class="yi">个人信息</label></li>
<b><label>姓名:</label></b>张三 <b><label>年龄:</label></b>29 <b><label>电话::</label></b>15648794562 <b><label>邮箱:</label></b>zhangsan@itcast.cn
<br>
<br>
<li> <label class="yi">求职意向</label></li>
<b><label>从事职业:</label></b>前端工程师 <b><label>期望月薪:</label></b>10k-15k
<br>
<br>
<li> <label class="yi">教育背景</label></li>
<b><label>学校名称:</label></b>上海某某学校 <b><label>就读时间:</label></b>2019.04.01-2021.05.06 <b><label>所学专业:</label></b>计算机科学与技术
<br>
<br>
<li> <label class="yi">证书</label></li>
<li> <label class="er">舞蹈大赛第一名</label></li>
<li> <label class="er">十佳学习标兵</label></li>
<li> <label class="er">唱歌比赛第一名</label></li>
<li> <label class="er">优秀读者</label></li>
<li> <label class="er">优秀实习生</label></li>
</ul>
<h2>工作经历</h2>
<div class="san">
<p>大一和大二期间，在学院组织部任职，虽然管理的是学生，但锻炼了我的组织能力。大一到大三我都是校报记者团成员，发表了20篇稿子，这很好地锻炼了我的文笔，大三暑假我在一家传媒公司实习了三个月，实习职位是文案策划，这次实习我的收获很大，无论是在工作经验上，还是在为人处事上，我觉得这为我以后的职业生涯打下了很好的基础。现在，我想找一份文案策划工作，我在实习期间对文案策划这个职位的工作内容有了一定的了解，我很喜欢这样的工作，三个月的实习也算是一种工作经验。
</p>
<p>20XX/4 — 20XX/6：XX有限公司[1年2个月] 所属行业：检测/认证</p>
<p>实验室 质量管理编制员</p>
<p>1、协助项目工程质量管理体系的策划、质量管理的标准、制度、程序和作业文件的编制。</p>
<p>2、对项目材料专业的建设方主体质量行为和实体工程质量监督检查。</p>
<p>3、负责对承包商、监理、设备监造、独立无损检测单位质量管理文件的审查。</p>
</div>
<p class="san">
20XX/6 — 20XX/3：XX有限公司[9个月]
</p>
<p class="san">
所属行业：检测/认证
</p>
<p class="san">
实验室 工程监理
</p>
<p class="san">
1、对项目材料专业的建设方主体质量行为和实体工程质量监督检查。
</p>
<p class="san">
2、负责对承包商、监理、设备监造、独立无损检测单位质量管理文件的审查。
</p>
<p class="san">
3、负责工程项目实施过程的质量文件和工程归档资料的审查。
</p>
<h2>自我评价</h2>
<div class="san">
<p>本人性格开朗、稳重、有活力，待人热情、真诚；工作认真负责，积极主动，能吃苦耐劳，用于承受压力，勇于创新；有很强的组织能力和团队协作精神，具有较强的适应能力；纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神。
</p>
<p>对待工作认真负责，善于沟通、协调有较强的组织能力与团队精神；活泼开朗、乐观上进、有爱心并善于施教并行；上进心强、勤于学习能不断提高自身的能力与综合素质。在未来的工作中，我将以充沛的精力，刻苦钻研的精神来努力工作，稳定地提高自己的工作能力，与企业同步发展。
</p>
</div>
</body>
</html>
外部样式表CSS
.yi {
color:yellowgreen;
}
.er {
color: red;
font-style: italic;
}
.san {
text-indent: 40px;
}
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
