颜色的设置方式
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 800px;
border: 1px solid #ccc;
margin: 0 auto;
}
.box {
border: 1px solid red;
margin: 5px;
line-height: 100px;
text-align: center;
font-size: 16px;
padding: 20px;
}
.box1 {
/*使用颜色单词设置颜色*/
color: red;
}
.box2 {
/*十进制的方式*/
color: rgb(25, 22, 122);
}
.box3 {
/*十六进制的方式*/
color: #0f6674;
}
</style>
</head>
<body>
<h1>CSS中设置颜色的方式</h1>
<div class="container">
<div class="box box1">用单词的方式 red</div>
<div class="box box2">十进制的方式 rgb(25, 22, 122)</div>
<div class="box box3">十六进制的方式 #0f6674</div>
</div>
</body>
</html>
盒子三属性
盒子，指的就是标签。在网页中，内容都是由一个一个大大小小的盒子组成。可以理解为任意网页，都可以拆分为一个又一个具体的盒子。
div元素是HTML中用来进行布局的最常用的元素，没有任何的语义，也没有大小，是一个完全为空的元素。但是div元素中，可以装入任意的HTML元素，也就是说，div就像是不限容量的包装盒一样，你可以将任意内容往里面放。
不过，div是一个平面元素，也就是一个二维元素，只有宽度和高度。另外，每个div都有自己的背景颜色。
所以，任何div都具备以下三个属性：
-
width：宽度 -
height：高度 -
background：背景
比如，我们创建一个宽度为200px，高度为200px，背景颜色为红色的盒子，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 盒子:指的就是标签,在网页中都是又一个一个大大小小的盒子组成 */
/* 盒子基本三属性 */
div {
/* 宽度 */
width: 200px;
/* 高度 */
height: 200px;
/* 背景色 */
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果预览：
显示模式
每个HTML标签都有自己的显示模式，显示模式决定了该HTML标签在网页中是如何排布的。也就是说，标签是横着排布，还是竖着排布，主要是由标签的显示模式控制的。
竖着排布的HTML元素，往往还具备一个显著的特点，那就是独占一行。
div标签的显示模式是"块级显示模式"，该显示模式具备以下特点：
-
独占一行 -
设置宽高起作用 -
在没有设置固定宽度时，和父元素的宽度一样。如果设置了宽度，则以设置的宽度为准。 -
常见的块级元素有： html,body,div,h1-h6,p,ul,ol,li,dl,dt,dd,hr,form
span标签的显示模式是"行内显示模式"，该显示模式具备以下特点：
-
一行有多个 -
设置宽高不起作用 -
尺寸由内容决定，在没有内容时，宽高都是0。 -
当行内元素有一个及以上的空格时，会有一个默认的间距。 -
常见的行内元素有： i,b,s,u,span,a,strong,em,ins,del
img标签的显示模式是"行内块模式"，该显示模式具备以下特点：
-
一行有多个 -
设置宽高起作用 -
常见的行内块元素有： img，input
显示模式转换
使用display可以转换一个元素的显示模式，该属性接收以下参数：
-
inline-block：转换为行内块元素 -
block：转换为块元素 -
none：隐藏元素
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
margin: 10px auto;
width: 400px;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
.box .inline {
width: 30px;
height: 30px;
border: 1px solid #00FFFF;
margin: 3px;
display: inline-block;
}
.box .hide {
display: none;
}
</style>
</head>
<body>
<div class="box">
<h3>块元素转行内块元素</h3>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
</div>
<div class="box">
<h3>行内元素转行内块元素</h3>
<span class="inline"></span>
<span class="inline"></span>
<span class="inline"></span>
</div>
<div class="box">
<h3>隐藏元素</h3>
<div class="inline hide"></div>
<span class="inline"></span>
<span class="inline hide">xxx</span>
</div>
</body>
</html>
效果预览：
标签选择器和类选择器
标签选择器语法：
标签名{属性...}
类选择器语法：
.类名{属性...}
使用class属性可以给标签定义类名，比如：
<h1 class="laoliu6">张三</h1>
<h2 class="_zz">李四</h2>
<h2 class="stu-hongzhe">王五</h2>
<h2 class="yellowGreenStrudent">赵六</h2>
类名的定义需要遵循以下规范：
-
不能以数字开头 -
可以也能够字母或下划线开头 -
可以包含字母，数字，下划线，中划线 -
由有意义的英文单词组成，推荐使用下划线或中划线连接多个单词
我们可以使用类选择器给不同的类定义不同的css样式，比如：
._zz {
color: blue;
font-size: 30px;
}
.laoliu6 {
color: red;
}
.stu-hongzhe {
color: green;
}
.yellowGreenStrudent {
color: yellowgreen;
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
._zz {
color: blue;
font-size: 30px;
}
.laoliu6 {
color: red;
}
.stu-hongzhe {
color: green;
}
.yellowGreenStrudent {
color: yellowgreen;
}
</style>
</head>
<body>
<h1 class="laoliu6">张三</h1>
<h2 class="_zz">李四</h2>
<h2 class="stu-hongzhe">王五</h2>
<h2 class="yellowGreenStrudent">赵六</h2>
<h2>田七</h2>
</body>
</html>
效果预览：
Google的logo案例
效果预览：
案例分析：
-
总共由5个字母组成 -
5个字母排成一排 -
可以使用5个span标签存放5个字母，并分别添加类名 -
给每个类设置不同的颜色 -
给5个span添加一个相同的类名，使用这个类名设置字体样式和大小
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.gfont {
font-size: 150px;
}
.blue {
color: #1B6FEF;
}
.red {
color: #DB4732;
}
.yellow {
color: #FFD669;
}
.green {
color: #009A57;
}
</style>
</head>
<body>
<span class="gfont blue">G</span>
<span class="gfont red">o</span>
<span class="gfont yellow">o</span>
<span class="gfont blue">g</span>
<span class="gfont green">l</span>
<span class="gfont red">e</span>
</body>
</html>
ID选择器
所有的HTML元素都有一个id属性，可以通过id定义元素在整个HTML中唯一的一个名称，该名称一旦被定义，就不能再赋值给其他元素。也就是说，HTML元素的id全局唯一。
如果要唯一标识某个元素，可以给这个元素添加ID属性。id属性是最常用的属性之一，特别是在vue和echarts中，通常都需要给某个HTML元素设置一个ID，然后将整个js的计算结果通过id挂载到这个HTML元素上。
类名就像人的名字，是可能会重复的，比如一个班级中，可以同时好几个学生都叫张三。ID就像人的身份证号，是不会重复的，每个人都有自己唯一的一个身份证号。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#app {
width: 100px;
height: 100px;
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
css的三种书写位置
CSS代码通常可以写在三个位置：
-
第一种：内嵌式，写在 style标签中 -
第二种：行内式，写在元素的 style属性中 -
第三种：文件式，在一个 .css文件中，使用link标签引入
最推荐的是第三种，将css代码放在一个css文件中，这样能够实现分离管理。不过在vue开发中，同一个组件的html,css,js代码都放在一个vue文件中。
示例：内嵌式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.one {
color: red;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
示例：行内式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: yellow;">我是div</div>
</body>
</html>
示例3：文件式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="one.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div></div>
</body>
</html>
CSS层叠性
css的样式可以重叠，将多个样式进行组合，合并为一个样式。如果出现重复，则以后出现的为准。
比如，我们设置一个盒子的样式，可以分别在三个样式里面分别设置宽高，边框，字体样式，但是最后可以合并在一起。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.w100 {
width: 100px;
}
.h100 {
height: 100px;
}
.border-gray {
border: 1px solid gray;
}
.font-color-read {
color: red;
}
</style>
</head>
<body>
<div class="w100 h100 border-gray font-color-read">层叠示例</div>
</body>
</html>
效果预览：
CSS的权重
如果CSS样式发生重叠，谁的权重高就用谁的。
常见的权重如下：
-
标签选择器 < 类选择器 < id选择器 < !important
示例：分别使用不同的选择器给不同的元素设置不同的背景，查看结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
}
.box {
background-color: green;
}
#idbox {
background-color: blue;
}
</style>
</head>
<body>
<div class="box" id="idbox">层叠示例</div>
</body>
</html>
效果预览：
块元素的默认宽度
当块元素不设置宽度的时候，该块元素的宽度是父元素的宽度。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.one {
width: 500px;
height: 500px;
background: pink;
}
.two {
height: 300px;
background: blue;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
这里的.two没有设置宽度，但是父元素.one设置了宽度，所以.two的宽度默认和.one的宽度一样。
效果预览：
文本居中属性
使用text-align: center;，能让文本和行内元素以及行内块元素水平居中。需要注意的是，该属性是相对于盒子的，给哪个盒子设置了居中，那么该盒子中的文本则基于在盒子水平居中。
如果要让文本，行内元素，行内块元素水平居中，那么，可以给他们的父元素添加属性text-align: center;。
示例：默认让文本在整个网页中水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 {
background: pink;
text-align: center;
}
</style>
</head>
<body>
<h1>标题</h1>
</body>
</html>
示例：让盒子中的行内元素水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 800px;
height: 500px;
background: yellow;
text-align: center;
}
span {
color: red;
}
</style>
</head>
<body>
<div class="box">
我<span>是</span>
<b>box</b>
</div>
</body>
</html>
示例：让行内块元素水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 800px;
height: 500px;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<img src="liuzhiyuan.jpg" width="50">
</div>
</body>
</html>
新闻案例
提供如下文本：
中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天
2014年07月16日20:11 新浪体育 评论中大奖（11人参与） 收藏本文
新浪体育讯 7月16日是燕京啤酒[微博]2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈.
据记者多方了解的情况，李虎[微博]极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
这样的情况并没有影响到丽江嘉云昊队[微博]的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。请将其通过代码，制作为如下网页：
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 820px;
margin: 0 auto;
font-size: 16px;
}
.title {
font-size: 24px;
font-weight: 400;
text-align: center;
margin: 10px 0;
}
.time {
font-size: 14px;
text-align: center;
margin: 10px 0;
}
.s1 {
color: #abc;
}
.s2 {
color: #900;
}
.weibo {
color: #87CEEB;
/*
underline 下划线
overline 顶划线
line-through 中划线
none 去掉线
*/
text-decoration: none;
}
p {
font-size: 16px;
text-indent: 2em;
line-height: 1.5;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
<h1 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div class="time">
<span class="s1">2014年07月16日20:11</span>
<span class="s2">新浪体育 评论中大奖（11人参与）</span>
<a class="weibo" href="#">收藏本文</a>
</div>
<hr>
<p>
新浪体育讯 7月16日是燕京啤酒<a class="weibo" href="#">[微博]</a>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈.
</p>
<p>
据记者多方了解的情况，李虎<a class="weibo" href="#">[微博]</a>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
</p>
<p>
这样的情况并没有影响到丽江嘉云昊队<a class="weibo" href="#">[微博]</a>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。
<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong>
</p>
</div>
</body>
</html>
后代选择器
我们已经学过标签选择器，类选择器，ID选择器。这三种选择器都叫做基础选择器。后代选择器，是一种复合选择器，将基础选择器结合使用。
后代选择器，主要用于筛选出嵌套的标签。基本语法如下：
父元素 子元素 {属性...}
示例：后代选择器的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.h5 .teacher {
color: red;
}
</style>
</head>
<body>
<div class="h5">
<h1 class="teacher">老刘</h1>
<h3>前端组长</h3>
<h3>前端学员</h3>
<h3>前端学员</h3>
</div>
<div class="java">
<h1 class="teacher">老王</h1>
<h3>java学员</h3>
<h3>java学员</h3>
</div>
</body>
</html>
复合选择器如何计算权重
每种选择器的权重如下：
-
标签选择器：1 -
类选择器：10 -
id选择器：100 -
行内样式：1000 -
!important：无穷大
不同的选择器组合，按照单个选择器的权重进行相加。
发表评论