摘要：这几天临近过年，事情有点多，学习总是段段续续的，今天总算完成了CSS的基本知识学习。
学习笔记：
西瓜学习javaweb
1.css简述。
1.1 css是什么？有什么作用？
HTML-------》 页面的结构 ------》人的面部（素颜）
CSS--------》 美化页面 ------》给人化妆
CSS（Cascading Style Sheets）：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
就好像：给一个人的面部化妆， 画口红， 画眼影， 打粉底。
HTML标签， 样式1， 样式2， 样式3。
CSS通常称为CSS样表或层叠样式表，主要用于设置HTML页面的文本内容（字体、大小、对其方式等）、图片的外形（高度、宽度、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以使HTML页面更加好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构。
CSS作用：修饰HTML页面，更加丰富多彩地展示超文本信息。
1.2 CSS入门案例
<font size="7">今天天气好晴朗</font><br/>
<font style="font-size:120px;">今天天气好晴朗</font>
1.3为什么实用CSS代替HTML属性设置样式
因为HTML属性在单独使用时有一定的局限性，所以要配合CSS样式代码才可以展示更为丰富的效果。
1.4 CSS代码规范
放置规范：
在<style>标签的内容体中书写CSS样式代码
<style>标签放置在<head>标签之中。
格式规范：
选择器名称{属性名1：属性值；属性名2：属性……}
选择器：即指定CSS样式作用在哪些HTML标签上。
代码规范：
属性名和属性值之间是键值对关系；
属性名和属性值之间 用“：”连接，最后“:”结尾；
如果一个属性有多个值，多个值之间用 空格 隔开。
CSS注释：/*注释内容*/ 等同于java的多行注释
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
/*如果一个属性名有多个值，多个值之间用 空格 隔开。*/
span{
font-size:12px;
color:pink;
border:1px solid blue;
}
</style>
</head>
<body>
<!-- <span>是行级别的块标签 -->
<span>德玛西亚无可匹敌！</span> <br/>
<span>诺克萨斯即将崛起！</span>
</body>
2.CSS选择器
2.1基本选择器
2.1.1 元素选择器
HTML标签又名HTML元素。
元素选择器：即以HTML标签名作为选择器名称。
作用：选择CSS样式代码 作用于 对应标签名的标签上。
格式：
标签名：{
/*CSS样式代码*/
}
适用范围：适用于将相同样式 作用在多个同名标签上
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
/*如果一个属性名有多个值，多个值之间用 空格 隔开。*/
span{
font-size:12px;
color:pink;
border:1px solid blue;
}
</style>
</head>
<body>
<!-- <span>是行级别的块标签 -->
<span>德玛西亚无可匹敌！</span> <br/>
<span>诺克萨斯即将崛起！</span>
<div>德玛西亚无可匹敌！</div>
<div>诺克萨斯即将崛起！</div>
</body>
2.1.2类选择器
每个HTML标签都有一个class属性，class属性值即为类名。
类选择器：即以HTML的类名（class属性值）作为选择器名称。
作用：选择CSS样式代码 作用于 对应类名HTML标签。
格式：
.类名{
/*CSS样式代码*/
}
适用范围：适用于将样式 一次作用在相同类名的标签上。
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
/*如果一个属性名有多个值，多个值之间用 空格 隔开。*/
.redF
{
color:red
}
</style>
</head>
<body>
<!-- <span>是行级别的块标签 -->
<span>span1我是黑色字体</span> <br/>
<span class="redF">span2我是红色字体</span>
<div>div1我是黑色字体</div>
<div class="redF">div2我是红色字体</div>
</body>
2.1.3 ID选择器
每个HTML标签都有一个id属性，id属性值必须在本页面是惟一的。
id选择器：即以HTML标签都有一个id属性，id属性值必须在本页面是惟一的。
作用：选择CSS样式代码 作用于 某个规定id值得HTML标签上
格式：
#id值{
/*CSS样式代码*/
}
适用范围：适用于将样式 作用某个标签上。
注意：必须手动保证ID值在本页面唯一。
2.2基本选择器的组合方式
2.2.1层级关系
标签和标签之间有层级关系，例如<html>标签的子标签为<body>标签。
我们可以对基本选择器进行组合，表现出层级刮吸，从而更加针对性地把样式作用于某些标签上。
格式：
选择器1 选择器2……{
/*CSS代码*/
}
意义：包裹关系 选择器1下的选择器2
例如：
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
div font{
color:red;
}
</style>
</head>
<body>
<div>
<font>我想变红</font>
</div>
<font>而我想保持黑色</font>
</body>
</html>
3.1边框属性
所有HTML标签都有边框，默认边框不可见。
3.1.1 border
设置边框的样式：
格式：宽度 样式 颜色
例如：border：1px solid red，1像素粗 实线 红色边框。
线条样式：solid 实线，none无边，double 双线
3.1.2 width
用于设置标签的宽度。、
3.1.3 height
用于设置标签的高度。
3.1.4 background-color
用于设置标签的背景颜色
背景颜色设置的两种主流方式：
a.英文单词 例如：red，blue，yellow
b.颜色代码 格式：#红黄蓝，每个颜色用两个十六进制位数表示。
例如：#ff1100 红色ff 绿色11 蓝色00，红色颜色最重，绿色其次，没有蓝色。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
div{
border:1px solid red;
width:300px;
height:300px;
background-color:#ff1100;
}
</style>
</head>
<body>
<div>我是边框代码</div>
</body>
</html>
3.2布局
3.2.1 float
通常默认的排版方式，将页面中的元素从上到下一一罗列，从实际开发中，需要左右方式进行排版，就需要用到浮动属性。
格式：
选择器{float:属性值;}
常用属性值：
none：元素不浮动；
left：元素向左浮动；
right：元素向右浮动；
注意：因为元素设置浮动属性后，会脱离原有的文档流（会脱离原有的板式），从而影响其他元素的样式，所以设置浮动以后页面样式需要重新调整。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
}
#d2{
background-color:green;
width:110px;
height:110px;
}
#d3{
background-color:blue;
width:120px;
height:120px;
}
div{
float:left
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
float:left;
}
#d2{
background-color:green;
width:110px;
height:110px;
float:left;
}
#d3{
background-color:blue;
width:120px;
height:120px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
3.3转换
3.3.1 display
HTML提供了丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素。
块元素：以区域块方式出现。每个块标签独自占据一整行或多整行，块结束会自动换行（根据这点来判断）。
常见的块元素：<h1>、<p>、<div>、<ul>等。
行内元素：根据内容多少来占用行内空间，不会自动换行。
常见的航呢元素：<span>、<a>等
display属性可以使得元素 在行内元素和块元素之间相互转换。
格式：
选择器：{display：属性值}
常见的属性值：
block：此元素将显示为块元素（块元素默认的display属性值）
inline：此元素将显示为行内元素（行内元素默认的display属性值）
none：此元素将被隐藏，不显示，也不要占用页面空间。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
div{
display:inline;
}
li{
display:none;
}
span{
display:block;
}
</style>
</head>
<body>
<h1>块级元素1-div-由块元素装换为行内元素（不自动换行）</h1>
<div id="d1">div1</div>
<div>div2</div>
<h1>块级元素2-无序列表</h1>
<ul>
<li>德玛西亚</li>
<li>诺克萨斯</li>
<li>救赎之地</li>
</ul>
<h1>行内元素-span</h1>
<span>span1</span>
<span>span2</span>
</body>
</html>
3.4 字体
font-size：用于设置字体大小。可以设置像素。
color：用于设置字体的颜色。
4.CSS盒子模型
所有的HTML元素，我们都可以看成一个四边形，即一个盒子。
用CSS来设置元素盒子的 内边距、边框和外边距 的样式的方式。
相当于设置盒子的样式，所以我们将其称之为 盒子模型。
4.2边框(border回顾和再阐述)
边框：HTML元素的框体
上边框：border-top
下边框：border-bottom
左边框：border-left
右边框：border-right
整边框：border
4.3内边距 padding
内边距有四个属性可以设置：
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
通用性设置：
一次性设置上下左右内边距为 px
padding： px；
4.4外边距margin
外边距：HTML元素边框 到 其他HTML元素边框的距离。
外边距有四个属性可以设置：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
通用性设置：
一次性设置外边距为 px
margin：20px；
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
#div1{
border-left:1px solid red;
border-right:1px solid yellow;
border-top:1px solid blue;
border-bottom:1px solid green;
padding:100px;
}
#div2{
border:2px solid red;
margin-top:20px;
}
</style>
</head>
<body>
<div id="div1">内容体</div>
<div id="div2">内容体</div>
</body>
</html>
5.CSS和HTML结合方式
行内样式，是通过标签的Style属性来设置元素的样式。
格式：
<HTML标签 style=“CSS样式代码”/>
示例：
<body>
<a style="font-size:100px; border:10px solid red; ">德玛西亚</a>
</body>
5.1.2 <style></style>标签样式
当某些样式在页面中被多个标签重复使用，为了编码更加灵活，避免书写重复代码，我们将样式代码从标签style属性中抽取出来，统一写到style标签中。
格式：
<style>
CSS样式代码
</style>
5.2外部样式。
来源：https://www.cnblogs.com/wind-and-sky/p/12229306.html