前言
如果说 HTML 是一个英雄的话，那么 CSS 就是他的豪华战衣。
CSS是什么？
- CSS 指层叠样式表 (Cascading Style Sheets)。
- 可以对html页面进行美化,实现了显示内容的html代码和展示样式的css代码的分离,增强了页面的展示能力
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
为什幺用它？
. 相信很多人都进入过漫威世界，在漫威世界里有很多英雄，但他们除了拥有一个英雄的内心时，还拥有一套足以支撑强大内心的套装，比如唐尼的贾维斯系列，队长的盾牌，雷神的锤子等等，而 CSS 就是 HTML 的一套战甲，通过 CSS 可以更好的将 HTML所想表达用更好的方式将其呈现。
CSS 的超能力呈现:
1.语法简介
. CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}
. 选择器 : (selector)通常是你希望定义的 HTML 元素或标签
. 属性 ： 是你希望改变的内容，通俗的讲就是HTML的标签。
. 值 ： 就是想要他变成的效果命令，
比如你想要他右对齐，就输出 right
1.1：在html页面中引入css样式的方式
(1)通过标签上的style属性引入
可以使用标签上的style属性为当前标签指定具体的css样式
<div style="color:red">aaabbbccc</div>
适用于个别标签添加样式,不建议在页面中大量使用,不利于代码后期的维护
(2)通过style标签的方式引入
在页面的<head>标签中,
通过在<style type="text/css"></style>标签内写css样式的方式引入css
可以将所有的样式代码集中统一管理,初步实现了样式和html代码的分离
(3)通过链接方式引入CSS样式
在HTML页面的head标签中,
通过一个
<link rel="stylesheet" href="1.css" type="text/css"/>
标签引入外部的css文件的内容
可以将所有的样式代码集中统一管理,真正实现了样式和html代码的分离
1.2：用语法调整表格内容所在方向，比Excel更轻松
<style> ： 标签用于为 HTML 文档定义样式信息。
位置： style 元素位于 head 部分中。
功能： 在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
属性： type 属性是必需的，
定义 style 元素的内容。唯一可能的值是 "text/css"。
. 至于没有说明的地方， 大部分是HTML的内容，
. 相关内容可以点击右边链接查看 用HTML做一个属于你的 “世界“
. 下图中：我们的选择器： td；属性： text-align； 值： right。
. 所以我们整个效果就是 td 规定的内容全部靠右对齐。
. （td：td所规定的的内容就是 1 2 3 4 （这是属于 HTML 的规定）所以效果就是 4个
. 数字全部靠右对齐）
2.标签介绍
<div> 定义:
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。
它可以用作严格的组织工具 并且不使用任何格式与其关联。
用法:
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
实际上，换行是 <div> 固有的唯一格式表现。
可以通过 <div> 的 class 或 id 应用额外的样式。
<span> : 标签被用来组合文档中的行内元素。
<p>: 标签定义段落。
p 元素会自动在其前后创建一些空白。
浏览器会自动添加这些空间，您也可以在样式表中规定。
<div>与<p>的区别：
1、结构差距
div与p均是一对最先与闭合标签。
div以<div>最先，以</div>结束的一对标签。
p以<p>开端，以</p>完结的一对标签。
2、称谓分歧
div是布局框架标签；
p是段落标签，布局文章标签。
3、div与p底子css属性
div与p均独有一行的块元素标签，唯一鉴识，
div凹凸没有距离间距，而p有。p自带间隔一行的间距，
而div没有上下间隔间距
p自带距离一行的间距，
、
2.1 我们做这样一个来更好的认识这几个标签
. div样式:
。 添加2px红色边框、字体大小为30px、字体为微软雅黑
. span样式:
。 添加2px绿色边框、字体大小为30px、设置字体斜体
. p样式:
。 添加2px蓝色边框、字体大小为30px、设置字体加粗
3.选择器
3.1.基本选择器
所谓选择器就是可以帮助我们在HTML中选择出想要修饰的标签的技术
3.1.1 : 标签名选择器
格式: 标签名{...}
通过标签名选择器可以选中指定名称的标签进行样式的修饰
. 图片内容解说
： 这里我们运用了标签名选择器，根据CSS的写法：CSS的内容必须定义在head中，所以我们将标签名选择器写到了head中，为了更好的理解div，span，p三个标签名，我们将其作为了模板，从图片中我们可以看出我们在head中定义标签的大小，在body中标签定义的内容，不需要做任何规划，他就自带我们head中定义的属性。这就好像唐尼拥有贾维斯，用的时候直接启动就可以了，不需要用的时刻在为其组装。
3.1.2 : 类选择器
class -- 通过HTML中通用的属性class, 可以为标签指定所属的类
class值相同的标签则为一类
通过 .类名{} 的方式来为这一类的标签设置样式
另外,可以为class指定多个值, 多个值之间用空格隔开,
表示一个标签属于多个类
多个类的样式会同时作用到这个标签上
.图片内容解说
： 这里我们使用的是类选择器，类选择器作用功能和标签器选择器是差不多的，他们的区别在于类选择器比标签名选择器更加灵活，标签名选择器一旦定义了就无法更改，这个标签的内容格式都为我们定义的，但是类选择器就可以选择性进行，不需要只用一种格式。（但是一定要注意 定义类名的时候，类名前面有 " . "）。
3.1.3 : id选择器
id -- 通过HTML中通用的属性id, 特点是id的值在整个HTML中是独一无二的,
可以作为标签的唯一标识
通过 #id值{} 的方式来为指定id值的标签设置样式
图片解说
： id选择器和类选择器作用功能差不多，但是他们的区别在于id值是唯一的。
3.1.4 : 使用注意事项
优先级：id > class > 标签
同类标签： 后出现的会覆盖前面出现的
综合图片解说
： 为了更加深入了解这几个标签，我们综合的看一他们的区别：效果图。
1. *图中最大那个红色框，也就是<head></head>中的内容，*
就是我们定义的 CSS “外套”
*1.1 : 红色框中的蓝色框*
我们在这里使用了 CSS 的语法（selector {property: value}）
这样我们在进行页面内容布局的时候，就不需要一个一个去布置他们的外表
div,span,p{border:1px solid red;}
这个是为 div span p 设置了一个 1px红色边框
（只要你在<body></body>中使用以上三个标签，他就自带 1px红色边框）
对应效果图中的 ：四个红色边框
*1.2 ： 红框中的绿色框（该方法使用的是*标签名选择器*）*
这里依旧使用了 CSS 的语法 （selector {property: value}）
只是单独的为 span 的内容进行了定义
span{
background:#DDA0DD;
font-size:20px;
}
这里标志着你只要在 span 标签中进行内容的写入
输出的内容自带这两个属性
大小对应所有的 span自定义内容，
颜色对应效果图中 第二个span4 span5 自定义内容
（至于 span1 2 3 4（第一个） 使用了类选择器，所以颜色发生了变化）
*1.3 ： 红框中的红色框（该方法使用的是*类选择器*）*
这里运用了 CSS 的语法（selector {property: value}）
然后自定义了两种标签：
.c1{
background:#8FBC8F;
color:green;
}
.c2{
background:#F0E68C;
color:blue;
}
这里标志着你的类选择器有两种选择，
使用格式是在<body> <标签 class= 你定义的选择 ></标签></body>
对应<body></body>中的：
<div>div1自定义内容<span class="c2">span1自定义内容</span>
div2自定义内容</div>
<br/>
<span class="c1 c2 "> span2自定义内容 </span>
<span class="c1">span3自定义内容</span>
<span class="c2">span4自定义内容</span>
对应效果图中span 1 2 3 4 自定义内容
*1.4：红框中的红色框（该方法使用的是*id选择器*）*
这里依旧是使用了 CSS 的语法（selector {property: value}）
然后定义了一个拥有两个属性的标签：
#p1{
font-weight: bolder;
text-indent: 20px;
}
这样标志着你已经定义好了 id选择器
使用格式是在<body> <标签 id= “你定义的Id名字” ></标签></body>
对应<body></body>中的：
<p id ="p1">
p1自定义内容<span>span4自定义内容</span>p2自定义内容</p>
对应效果图中的：
p1 p2 span4（第二个） 自定义内容
3.2 扩展选择器
基于基本选择器进行更加复杂选择的选择器
3.2.1 ：后代选择器
在父选择器选择的元素内部, 选中指定的子孙元素, 进行样式的设置
格式: 父元素选择器 子孙元素选择器{...}
图片解说
： 这里我们运用的是后代选择器，顾名思义，后代选择器通俗点讲，它有点像我们看的小说中的传承，它（div父元素选择器） 就像是第一位成为最强者的存在，由于他的血脉 （我们自定义的两个属性）强大，所以他的直系后代（span 子孙元素选择器）都可以继承他的血脉。
3.2.2 ：子元素选择器
在父选择器选择的元素内部, 选中指定的子元素, 进行样式的设置
格式: 父元素选择器>子元素选择器{...}
图片解说
： 这里我们运用的是子元素选择器，顾名思义，子元素选择器通俗点讲，它也用我们后代选择器的例子，它（div父元素选择器） 也是最强者的存在之一，但是他的血脉 （我们自定义的两个属性）也强大，但是并没有后代选择器器的那位强大，所以他只有儿子（span 子元素选择器）才可以继承他的血脉。所以对于 font 中的 span 就属于他的孙子了，他的孙子无法继承，只能传承一代。
3.2.3 ：分组选择器
将多个选择器选中的元素统一进行样式的设置
格式: 选择器1,选择器2,.....,选择器n{...}
图片解说
：这里我们运用了 分组选择器，分组选择器 相对比更好理解，他就和他的名字一样，让人一下就明白了；分组选择器就是分组定义属性；类似于我们做了一个文档，我们将所有重点文字，人物名称。。。等等多种元素凸显出来但要求几者又不同，这样级就可以使用分组选择器，将其分组管理，重要元素使用不同的标签名定义属性。
3.2.4 ：属性选择器
选择具有指定属性条件的元素
格式: 选择器[属性...]...{}
图片解说
： 这里我们运用的是属性选择器：属性选择器在为不带有 class 或 id 的表单设置样式时特别有用；在我使用它的时候，给我一种后代选择器的感觉，也是强者将自己的血脉之力传给了自己的儿子，从而他的儿子就可以拥有他的能力了。可能这个更加具体，强者直接指定了继承自己能力那个儿子。
这里我们强调一下定义属性各代表什么意思：
width : 设置图像的宽度；
display : 设置元素显示的方式；
（bolck:是此元素将显示为块级元素,
此元素前后会带有换行符）
margin-bottom : 属性设置元素的下外边距；
(通俗的讲：就是两个边框的中间的距离 )
background-color : 设置背景颜色；
font-family : 定义字体；
3.2.5 ：相邻兄弟选择器
如果两个元素具有相同的父亲，且紧邻在一起，则为相邻兄弟
可以通过相邻兄弟选择器选择紧邻A元素后的B元素
格式: 大哥+小弟{...}
图片解说
： 这里我们运用的是相邻兄弟选择器。这个要怎么理解呢？首先我们明确 兄弟的含义，无论发生什么我们都在你身边；所以我们这个相邻兄弟选择器就是一旦你确定他是你兄弟，是你大哥；你就要他站在一起，所以大哥在前面为你遮风挡雨，你只需要紧随其后，所以小弟括号里的内容是小弟的属性，他和大哥没关系；通过图我们就可以看出 无论把他们两个放在那里，小弟都会带着他的属性紧紧跟着大哥。
3.2.6 ：伪元素选择器
伪元素选择器选择的不仅仅是某个元素，而是某个指定状态下的元素。
可以选中元素的如下状态
:link 表示元素未被点击的状态
:hover 表示光标移入的状态
:active 表示元素被点击时的状态
:visited 表示元素被访问过后的状态
:text-decoration 属性规定添加到文本的修饰。
(我们代码中定义在了link hover active ，但真正能体现出
还是在active中，当你点击元素的时候观察，你点击的元素底部
出现了下划线；其他两个都是 none 意思是默认，不加任何修饰 )
格式: 选择器:状态{}
图片解说
： 这张图有点厉害了（主要是不会做动态图，哈哈），只能结合不同的多种图片说明了；而且谷歌浏览器好像对于这个选择器有点问题问题，所以只能用IE了。具体详细的内容我感觉不用多说了，只要你仔细看图中定义的属性和我给你的标签代表含义，你一看就懂了。如果不懂欢迎留言。
综合图片解说
. 以下两张图片综合的展示了多种扩展选择器；
. 第一张是对于head中的内容
. 进行了规划，也就是使用了 CSS 为 HTML 做好了外套，
. 在body中进行内容输出就可以了
. 第二张结合body页面内容效果图进行详细解释。
4. CSS盒子模型
： 在css中, 所有的元素都可以看成是一个盒子(框),这些框都可以具有外边(margin)/边框(border)/内边距(padding),这些值的设定,会直接影响框与框之间的位置关系和框内容与框之间关系,以及边框的样式
外边距
margin 统一的设置外边距
margin-top 设置顶部外边距
margin-right 设置右部外边距
margin-bottom 设置底部外边距
margin-left 设置顶左外边距
**外边距垂直方向上的合并。
内边距
padding
padding-top
padding-right
padding-bottom
padding-left
边框
border
border-xxx-color
border-xxx-style
border-xxx-width
(其中xxx代表的是top left right bottom)
以上属性
可以使用属性单独指定上下左右的样式
也可以使用复合属性指定样式, 如
margin:10px 20px 30px 40px //上 右 下 左 顺时针方向
margin:10px 20px 30px // 上 左右 下
margin:10px 20px //上下 左右
margin:10px //上下左右
扫一扫
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
