视频参见php中文网玉女心经视频教程
讲解的相当的清楚和明白
第1章 ：css快速入门
1.1 什么是css
改变html框架的样式.
1.2 css的三种引入形式
第一种形式：直接在元素后面使用style的形式
<html> <body style="background:pink;"> <p>这是段落。</p> <p>段落元素由 p 标签定义。</p> </body> </html>
第二种形式：在当前文档中使用style标签引入
<html> <style type="text/css"> p{ color: red; } </style> <body style="background:pink;"> <p>这是段落。</p> <p>段落元素由 p 标签定义。</p> </body> </html>
上面就是给p标签设置文字颜色为红色
第三钟方式，采用引入外部的css文件来引入
Style.css文件的内容如下所示：
p{
color: blue;
}
在html中需要引入这个css文件
<html> <link rel="stylesheet" type="text/css" href="style.css"> <body style="background:pink;"> <p>这是段落。</p> <p>段落元素由 p 标签定义。</p> </body> </html>
在html中需要引入css<link rel="stylesheet" type="text/css" href="style.css">文件
1.1 css的基础语法
css的基本语法，主要有两部分构成，一部分是基本的语法，一部分是基本的｛｝
选择器{
属性1:属性值;
属性2:属性值;
}
属性与属性之间使用分号隔开
同时给多个标签添加属性，就是选择器的分组
<html> <style type="text/css"> h1,h2,h3{ color: blue; } </style> <body style="background:pink;"> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> </body> </html>
选择器分组让h1、h2和h3的标题的颜色都是红色
1.1 css的基础选择器
所谓的选择器就是选择需要被操作的元素，选中元素之后用来设置对于的css样式
第一种：元素选择器
例如上面的p标签
p{
color: red;
}
这种就是元素选择器
第二种：类别选择器，通过class来进行选择
<html> <style type="text/css"> /*类别选择器*/ .list_1{ color: red; } </style> <body style="background:pink;"> <span class="list_1">您好，小哥哥</span> </body> </html>
对于类别选择器，需要在最前面加上一个点进行引用
第二种类别选择器可以和元素选择器一起配合使用，中间使用逗号区别
<html> <style type="text/css"> p,.list_1{ color: red; } </style> <body style="background:pink;"> <span class="list_1">您好，小哥哥</span> <p>您好，小姐姐</p> </body> </html>
第三种选择器：id选择器，id在html中必须具有唯一性，使用#进行引用
<html> <style type="text/css"> /*id选择器*/ #one{ color: red; } </style> <body style="background:pink;"> <span id="one">您好，小哥哥</span> </body> </html>
三者具有优先级：id>class>元素选择器
1.1 派生选择器和属性选择器
派生选择器分为下面的几种：
第一种：后代选择器，也叫做包涵选择器
<html> <style type="text/css"> /*后代选择器*/ ul em{ color: blue; } </style> <body style="background:pink;"> <ul> <li>小哥哥</li> <li><em>小姐姐</em></li> <li>小师太</li> </ul> </body><em></em> </html>
Ul具有子元素li，li中又有子元素em，所以em是ui的后代，可以使用后代选择器将em选择出来
父亲 后代{
属性:属性值；
}
父亲和后代之间采用空格进行分割，后代选择器中父亲和后代之间可以有多层的间隔，可以选择任意一个后代
第二种：子元素选择器，只能找到对应的子元素，父亲只能找到自己的子元素，中间采用>隔开
<html> <style type="text/css"> /*后代选择器*/ ul>li{ color: blue; } </style> <body style="background:pink;"> <ul> <li>小哥哥</li> <li><em>小姐姐</em></li> <li>小师太</li> </ul> </body><em></em> </html>
Ui的子元素是li是可以找到到，如果写成
ul>em{
color: blue;
}
这里是无法找到em的，只能找到对应的子元素。这里要区别子元素和后代元素之前的区别。
第三种：兄弟选择器，二者之间具有相同的父亲
<html> <style type="text/css"> /*相邻兄弟选择器*/ ul+ol{ font-size: 60px; } </style> <body style="background:pink;"> <ul> <li>小哥哥</li> <li><em>小姐姐</em></li> <li>小师太</li> </ul> <ol> <li>小哥哥</li> <li><em>小姐姐</em></li> <li>小师太</li> </ol> </body><em></em> </html>
Ul的相邻兄弟是ol，现在讲ol的字体设置成60px，相邻兄弟选择器之间采用加号进行分割
第四种：属性选择器
<html> <style type="text/css"> /*属性选择器*/ a[href="http://wwww.baidu.com"]{ color: blue; } </style> <body style="background:pink;"> <a href="http://wwww.baidu.com">访问百度</a> </body><em></em> </html>
属性采用[]进行分割
css中常见的伪类
将a标签中未被访问的链接设置成绿色
<html> <style type="text/css"> /*属性选择器*/ a:link{ color: blue; } </style> <body style="background:pink;"> <a href="http://wwww.baidu.com">访问百度</a> </body><em></em> </html>
已经访问的连接颜色设置成红色
<html> <style type="text/css"> /*属性选择器*/ a:link{ color: blue; } a:visted{ color: red; } </style> <body style="background:pink;"> <a href="https://www.baidu.com/">访问百度</a> </body><em></em> </html>
对input输入框设置focus属性
使用focus向input输入框添加样式
<html> <style type="text/css"> /*属性选择器*/ input:focus{ background: blue; } </style> <body style="background:pink;"> <a href="https://www.baidu.com/">访问百度</a> <input type="text" name="name"/> </body><em></em> </html>
当输入框获得输入焦点的时候，背景颜色会变成蓝色
接下来介绍下选择first-child类型，向标签的第一个子元素添加样式
如果html中存在两个p标签，我们可以通过frist-child给第一个p标签赋值
<html> <style type="text/css"> p:first-child{ font-size: 60px; } </style> <body style="background:pink;"> <p>小哥哥</p> <p>小姐姐</p> </body><em></em> </html>
运行效果如下所示：
如果p标签的第一个元素中还包含了一个b标签，使用first-child如何选择了
<html> <style type="text/css"> p:first-child b{ color: red; } </style> <body style="background:pink;"> <p><b>小哥哥1</b></p> <p>小姐姐</p> </body><em></em> </html>
p:first-child b 其中p:first-child就是获得第一个子元素，第一个元素的后代就可以采用父亲空格后代的形式来获得
第1章 css中的常见样式
1.1 css中的文本控制
改变文本的颜色、改变文本的字体等操作
1.1 css中的字体控制
1.1 css中的背景控制
我们来看下案例
给一个p标签设置背景颜色
<html> <style type="text/css"> .one{ width: 100px; height: 100px; background-color: red; } </style> <body style="background:pink;"> <p class="one">小哥哥</p> <p class="two">小姐姐</p> </body><em></em> </html>
运行效果如下所示：
颜色也可以写成二进制的形式background-color: #ff0000;
也可以写成RGB的形式background-color: rgb(255,0,0);
给p标签设置一个背景图片
<html> <style type="text/css"> .one{ width: 100px; height: 100px; background-image: url(1.jpg);width: 200px;height: 768px; } </style> <body style="background:pink;"> <p class="one">小哥哥1</p> <p class="two">小姐姐</p> </body><em></em> </html>
注意添加要添加图片的宽度和高度
200px;height: 768px，设置图片的时候具有默认的属性背景图像在水平和垂直方向上重复。
如果要禁止图片在水平和垂直方向上的重复，可以设置no-repeat属性
可能的值
|
值 |
描述 |
|
repeat |
默认。背景图像将在垂直方向和水平方向重复。 |
|
repeat-x |
背景图像将在水平方向重复。 |
|
repeat-y |
背景图像将在垂直方向重复。 |
|
no-repeat |
背景图像将仅显示一次。 |
|
inherit |
规定应该从父元素继承 background-repeat 属性的设置。 |
1.1 css中的列表控制
第一种：让列表的编号是数字开头
<html> <style type="text/css"> li{ list-style-type: decimal; } </style> <body style="background:pink;"> <ul> <li>小哥哥</li> <li>小姐姐</li> <li>小师太</li> </ul> </body><em></em> </html>
第二种：让图片的编写以图片的形式显示出来
<html> <style type="text/css"> li{ list-style-image: url(1.png); } </style> <body style="background:pink;"> <ul> <li>小哥哥</li> <li>小姐姐</li> <li>小师太</li> </ul> </body><em></em> </html>
1.1 css中的链表控制
<html> <style type="text/css"> a{ color: red; font-size: 20px; text-decoration: none; font-weight: bold; } </style> <body style="background:pink;"> <a href="shhh">小哥哥</a> <a href="sjjs">小姐姐</a> <a href="jsjjs">师太</a> </body><em></em> </html>
第二种使用伪类，当鼠标放在链接上的时候将字体变大
当鼠标点在小姐姐的链接上，对应的字体颜色变大
1.1 css中的表格控制
其中需要强调的是：
border-collapse: collapse;
border-spacing: 20px 50px;
这个两个属性的效果不能同时存在，二者只能同时使用一个
<html> <style type="text/css"> table{ width: 400px; height: 400px; border-style: solid; border-collapse: collapse; } table td{ border-style: solid; } </style> <body style="background:pink;"> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body><em></em> </html>
程序运行的效果是：
要让表格显示出来除了个table设置属性之外，还必须单独给td设置属性
table td{
border-style: solid;
}
1.1 css中的常见伪元素
在h2元素的前期添加文字
<html> <style type="text/css"> h2:before{ content: "hello"; } </style> <body style="background:pink;"> <h2>大家好，我是家具家电</h2> </body><em></em> </html>
程序运行的效果是：
也可以在之前插入图片
h2:before{
content: url(1.png);
}
第1章 css的盒子模型
1.1 了解css中的盒子模式
边框内部为内边距，边框外部为外边距
1.1 css的边框
<html> <style type="text/css"> p{ border-style: dotted; width: 100px; height: 100px; } </style> <body style="background:pink;"> <p>小哥哥</p> </body><em></em> </html>
第二种：只显示上下的边框，左右的边框不显示
p{
100px;
height: 100px;
border-top-style: dotted;
border-bottom-style: dashed;
}
还可以设置边框的宽度
p{
100px;
height: 100px;
border-top-style: dotted;
border-bottom-style: dashed;
border- 10px;
}
运行效果
1.1 css的内边距
padding是用来设置内边距的，
给span添加一个10px的内边距
<html> <style type="text/css"> span{ border-style: dotted; border-color: red; border-width: 2px; padding: 10px; } </style> <body style="background:pink;"> <span>您好，努力奋斗</span> </body><em></em> </html>
运行效果如下：
1.1 css的外边距
首先创建一个未添加外边距的span
<html> <style type="text/css"> *{ padding: 0px; margin: 0px; } </style> <body style="background:pink;"> <span>您好，努力奋斗</span> </body><em></em> </html>
未加外边距的运行效果如下所示：
接下来我们给span添加一个边框，设置外边距
}
span{
border-style: dotted;
border- 2px;
border-color: red;
margin: 20px 20px 20px 20px;
}
第1章 css的定位
1.1 css的定位概述
1.1 css的相对定位
接下来我们给div设置一个相对的定位
<html> <style type="text/css"> *{ padding: 0px; margin: 0px; } div{ width: 100px; height: 100px; border-style: dotted; border-width:2px; border-color: red; position: relative; top: 20px; left: 20px; } </style> <body style="background:pink;"> <div>小哥哥</div> </body><em></em> </html>
Span想对于父元素左上角有个偏移
1.1 css的绝对定位
决定定位是想对于父亲元素来进行绝对定位的，现在创建两个div1和div2，div1包涵div2，div2通过绝对定位来设置其相当于div1的位置、
未设置绝对定位
<html> <style type="text/css"> *{ padding: 0px; margin: 0px; } #div1{ width: 400px; height: 400px; background-color: red; position: relative; top: 20px; left: 20px; border-style: dotted; border-width: 2px; border-color: blue; } #div2{ width: 200px; height: 200px; background-color: blue; position: relative; border-style: dotted; border-width: 2px; border-color: red; } </style> <body style="background:pink;"> <div id="div1"> <div id="div2"></div> </div> </body><em></em> </html>
程序运行的效果是：
现在设置div2想对于div1，top和left偏移20px
#div2{
200px;
height: 200px;
background-color: blue;
position: relative;
border-style: dotted;
border- 2px;
border-color: red;
position: absolute;
top: 20px;
left: 20px;
}
1.1 css中的浮动
