CSS
# 今日目标1. 理解CSS的基础语法2. 会使用CSS基本选择器3. 会使用常见的CSS样式
一 CSS概述
层叠样式表（Cascading Style Sheet）
作用：给html标签添加样式, 达到美化页面的目的
层叠样式: 对同一个标签添加多个不同的样式,所有样式会叠加在一起展示出效果
初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
TODO: css
1. 作用: 给html标签添加样式,达到美化网页的效果
2. css与html属性进行对比
1). html属性耦合度比较大,css添加样式跟html标签不耦合
2). html属性能做到的css都能做到,html属性做不到,css也能
html专注网页布局,css专注网页美化
-->
<style>
h1{
color: deeppink;
}
span{
color: blue;
font-size: 50px;
font-family: 楷体;
}
</style>
</head>
<body>
<h1>标题</h1>
<font color="#ff1493" size="9" face="楷体">字体1</font>
其他文本
<font color="#ff1493" size="6" face="楷体">字体2</font>
<hr>
<span>字体1</span>
其他文本
<span>字体2</span>
</body>
</html>
优点
1. 实现了样式和内容的分离，提高了显示效果和样式的复用性。
2. 降低耦合性，分工更加明确，CSS专门用于美化，HTML专门用于结构搭建。
二 CSS基础语法【看懂】
2.1 HTML引入CSS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-HTML引入CSS</title>
<style>
div{
color : green;
font-size: 40px;
font-family: 楷体;
}
</style>
<link rel="stylesheet" href="../css/my.css">
</head>
<body>
<!--
css是一个独立的语言,有自己的语法
css不能独立,需要放在html中运行
TODO: html引入css的3种方式
1. 行内样式
1). 介绍: 写在标签行内的css
2). 每个标签都有style属性,在属性中编写css内容
3). 作用范围: 只对当前标签起作用
2. 内部样式
1). 介绍: 写在当前html页面内的css
2). 编写一个style标签(软性规范: 一般写在head标签中),在标签体内编写css内容
选择器{
css内容
}
3). 作用范围 : 对选择器范围起作用
3. 外部样式
1). 介绍: 将外部的css文件引入当前html页面
2). 书写
a. 编写一个css文件 :
选择器{
css内容
}
b. 用link标签引入到当前html页面
<link rel="stylesheet" href="../css/my.css">
rel : relationship 关系 , 固定值 stylesheet
href : 关联css文件
3). 作用范围 : 对选择器范围起作用
优先级: 行内 > 内部 = 外部
css的执行: 从上至下,后面会覆盖前面
只覆盖相同属性,不同的属性效果叠加
-->
<div style="color: red;font-size: 30px">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</body>
</html>
2.2 CSS书写规范
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-CSS语法</title>
<style>
span{
color: red;
font-size: 30px;
/*
边框: 1px宽 绿色 实线
*/
border: 1px green solid
}
</style>
</head>
<body>
<!--
-->
<span>样式名多个单词用横杠分割</span><br/>
<span>样式值多个单词用空格分割</span><br/>
<span>多个样式之间，以分号分割</span><br/>
</body>
</html>
2.3 基本选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-基本选择器</title>
<!--
TODO: css选择器 (selector)
1. id选择器
1). 每个标签都可以设置id属性,属性值全局唯一
2). 语法:
#boss -> 选中id=boss的标签
2. class选择器
1). 每个标签都可以设置class属性,属性值可以重复,也可以取多个值
2). 语法:
.female -> 选中class=female的所有标签
3. 标签选择器
1). 每个标签都有标签名
2). 语法:
span -> 选择所有名为span的标签
优先级关系:
id > class > 标签
规则: 范围越小,优先级越高
-->
<style>
#boss{
color : red;
font-size: 30px;
}
.female{
color : green;
font-size: 40px;
}
.hero{
font-family: 楷体;
}
span{
color: blue;
border: 1px black solid;
}
</style>
</head>
<body>
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss" class="female">灭霸</span>
</body>
</html>
三 CSS常用样式【了解】
3.1 字体和文本属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-字体和文本属性</title>
<style>
/*
渲染需求 (绘制)
1.所有文字绿色
2.所有文字大小20px
3.所有行高40px
4.所有字体加粗
5.所有字体楷体
6.第一句文字倾斜
7.第一句隐藏下划线
*/
div{
color : green;
font-size: 20px;
line-height: 40px;
font-weight: bold;
font-family: 楷体;
}
a{
font-style: italic;
text-decoration: none;
}
a:link{
color: pink;
}
</style>
</head>
<body>
<div>
<p>
<a href="#"> 学习的误区：</a><br/>
眼睛：看了一遍记住了<br/>
耳朵：听了一遍明白了<br/>
脑子：想了一遍搞懂了<br/>
手：你们会个屁！^_^ <br>
</p>
</div>
</body>
</html>
3.2 案例：公司简介(作业)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06-案例：公司简介</title>
<style>
h1{
text-align: center;
}
/* hr{
color: orange;
}*/
p{
text-indent: 2em;
}
</style>
</head>
<body>
<h1>公司简介</h1>
<hr color="orange">
<p>
<span style="color:red">“中关村黑马程序员训练营”</span>是由<span style="font-weight: bold;font-style: italic">传智播客</span>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，
黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
<hr color="orange">
<div style="text-align: center;color: grey;font-size: 10px">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2020, All Rights Reserved 苏ICP备16007882
</div>
</body>
</html>
3.3 背景属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-背景属性</title>
<!--
background : 背景
-->
<style>
body{
background-color: pink;
background-image: url("../img/a.jpg");
background-repeat: no-repeat;
background-position: 10px 20px;
}
</style>
</head>
<body>
</body>
</html>
3.4 显示属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-显示属性</title>
<style>
/*
display : 展示
1. block : 块级 (自动换行)
2. inline : 本行 (不会自动换行)
3. none : 隐藏
*/
span{
display: block;
}
div{
display: none;
}
li{
display: inline;
}
</style>
</head>
<body>
<span>内联标签span1</span>
<span>内联标签span2</span>
<span>内联标签span3</span>
<div>块级标签div1</div>
<div>块级标签div2</div>
<div>块级标签div3</div>
<ul>
<li>美的</li>
<li>苏宁</li>
<li>格力</li>
</ul>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
