为什么要使用CSS
CSS主要目的：
-可以让相同的一个页面在不同的浏览器中呈现相同的样式。（样式定义如何显示HTML元素）
-为了解决内容与表现分离的问题（1、什么是内容？内容主要指HTML中的元素2、什么是表现？表现主要指内容在浏览器中呈现的样式）因此，CSS和HTML是低耦合的，实现内容与表现的分离
CSS基础语法
-CSS声明
background-color : #FFFFFF ;
一 二 三 四
-样式属性
-操作符
-样式值
-分隔符
-CSS声明块(实现对一个样式多个样式属性的操作)
{
background-color : #FFFFFF;
color :#000000;
}
-CSS规则
CSS选择器（定义页面中的一类元素）
声明块（用花括号包含的内容）
定义CSS
-内联样式方式
运用style属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>如何使用CSS样式--内联样式方式</title> </head> <body> <p style="color: lightcoral">这是一个段落内容</p> </body> </html>
存在的问题：
1、内联样式是运用style元素对某一个标签进行属性的操作，当我们需要对多个相同的标签进行相同操作时，此时内联样式就显得很繁琐，因为他要求对每一个标签都进行相同的代码敲入。
2、通过“<p style="color: lightcoral">这是一个段落内容</p>”我们可以发现<p></p>是HTML中的内容，而style="......"是CSS中的表现，内联样式是一种内容与表现高度耦合的方式。
-外联样式方式
一：首先在<head>A</head>，在A当中定义<style>B</style>，在B当中编写对CSS样式的内容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外联样式</title> <style> p{ color: lightcoral; font-weight: boler; } </style> </head> <body> <p>这是一个段落内容</p> <p>这是一个段落2</p> </body> </html>
好处：
1、实现了内容和表现的有效分离。
2、实现了对多个相同标签的相同操作
问题：
1、在代码中只有<style>...</style>是属于CSS的，其余剩下的部分都为HTML，因此CSS和HTML的分离不彻底。
二：
因为CSS可以实现独立文件，因此我们可以在HTML中调用外部的CSS文件来实现对内容样式的操作。在这里我们需要在<head></head>当中声明<link>属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>如何使用外联样式二</title> <link rel="stylesheet" href="2-7.css"> </head> <body> <p>这是一个段落内容</p> </body> </html>
p{
color: lightcoral;
font-weight: bolder;
}
在<link>当中rel为默认的属性"stylesheet"（样式表），href为存放的.css文件的路径。同时在<link>当中含有一个隐藏属性type="text/css"，他表示当前HTML可以引用的格式，一般不编写。
CSS使用方式的优先级别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>样式使用的优先级别</title> <style > p{ color: orange; font-weight: lighter; } </style> </head> <body> <p style="color: lightcoral ;font-weight: bolder;">这是一个段落内容</p> </body> </html>
当我们同时使用外联样式和内联样式时，内联样式的优先级别会比外联样式的优先级高，由于浏览器执行代码时，外联样式一和外联样式二只是代码的书写方式不同，但浏览器的解析方式是一样的，因此二者并无区别。
<html lang="en"> <head> <meta charset="UTF-8"> <title>CSS引入方式二--内联样式和外联样式结合使用</title> <style> p{ background-color:red; color:orange; font-size:10px; font-weight:bolder; } </style> </head> <body> <p style="background-color:red; color:orange;font-size:20px;font-weight:bolder;">我爱慕课</p> <p>我爱慕课</p> </body> </html>
CSS选择器
-ID选择器（通过HTML页面中元素的ID属性值进行定位，id属性唯一不可重复！）
-元素选择器（通过HTML页面中元素的名称进行定位）
-类（class）选择器（class 本身也是HTML当中元素通用的属性）
-属性选择器（HTML中的元素具有通用或私有的属性，通过这些属性就可以找到
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS选择器</title> <style > #p{ color:orange; } .myclass{ color:brown; } span{ color:white; } [title]{ color:purple; } </style> </head> <body> <p id="p">这是一个id为p的元素</p> <p class="myclass">这是一个class为myclass的元素</p> <span>这是一个span元素</span> <p title="this is p.">属性选择器</p> </body> </html>
注意在这里属性选择器只是运用了最简单的方式，在实际开发中比较少用的是id选择器，因为id属性唯一不可重复，若编写相同的样式则产生冗余。用的比较多的是属性选择器和类选择器。我们可以先使用属性选择器对页面中同一个标签提供统一的属性，然后再使用类选择器对不同的类提供不同的属性。
CSS的后代元素选择器（基于关系的选择器）
| 选择器 | 选择的元素 |
| A E | 元素A的任一后代元素E（后代节点指A的子节点，子节点的子节点，以此类推） |
| A>E | 元素A的任一子元素E（也就是直系后代！） |
| B+E | 元素B的任一下一个兄弟元素E |
一（后代元素选择器）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 补充代码 --> <style> ul li{ color:green; font-size:20px; } ol li{ color:blue; font-size:20px; } </style> </head> <body> <!-- 补充代码 --> <p>图书排行榜</p> <ul> <li>三体</li> <li>盗墓笔记</li> <li>三生三世十里桃花</li> </ul> <p>游戏排行榜</p> <ol> <li>英雄联盟</li> <li>DOTA</li> <li>魔兽世界</li> </ol> </body> </html>
二（子元素选择器）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子元素选择器</title> <style> span{ background-color: blue; } div>span{ background-color: red; } </style> </head> <body> <div> <span> Span 1.In the div. <span>Span 2.In the span that is in the div.</span> </span> </div> <span> Span 3. Not in a dia at all </span> </body> </html>
三（相邻元素选择器）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>相邻元素选择器</title> <style> #one+li{ color: red; } </style> </head> <body> <ul> <li id="one">ONE</li> <li>TWO</li> <li>THREE</li> </ul> </body> </html>
CSS的伪类
主要应用于HTML中的A元素
常见的伪类：
| 伪类 | 描述 |
| :link | 向未被访问的链接添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :active | 向被激活的元素添加样式 |
| :visited | 向已被访问的链接添加样式 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类</title> <style> a:link{ color:red; } a:hover{ color:green; } a:active{ color:yellow; } a:visited{ color:red; } </style> </head> <body> <a href="#">慕课网 imooc.com</a> </body> </html>
CSS的伪元素
::before 会为当前元素创建一个虚拟的子元素作为伪元素。
::after 用来匹配已选中元素的一个虚拟的最后子元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <style> q::before{ content: "<<"; color:red; } q::after{ content: ">>"; color:blue; } </style> </head> <body> <q>引用</q> 什么 <q>????</q> </body> </html>
CSS选择器的优先级别
元素选择器和伪元素的级别最低
其次是类选择器、属性选择器和伪类
ID选择器是选择器中级别最高的
内联样式总会覆盖外部样式表的任何样式
！importang 声明将覆盖任何其他声明
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器的优先级别</title> <style> .myclass{ color:red; } p{ color:blue !important; } #p{ color:black; } </style> </head> <body> <p id="p" class="myclass" >这是什么鬼？？？</p> </body> </html>
CSS设置背景样式
| 属性 | 描述 |
| background | 简写属性，作用是将背景属性设置在一个声明中 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图像设置为背景 |
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图像是否及如何重复 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS设置背景样式</title> <style> #p1{ background-color: red; } #p2{ background-image: url("girl.jpg"); width: 500px; height: 500px; } #p3{ background-image: url("sakura.jpg"); width: 460px; height:460px; background-position: 30px -80px; } body{ background-image: url("sakura.jpg"); background-repeat: no-repeat: ; } </style> </head> <body> <p id="p1">ONE</p> <p id="p2"></p> <p id="p3"></p> </body> </html>
注意：background-position中，图片默认坐标点为(0,0)，第一个值为横坐标，第二个值为纵坐标，坐标值的正负与我们实际中的一样。
background-repeat中，有四个属性值。分别为repeat、repeat-x、repeat-y和no-repeat。repeat表示横纵方向都重复，repeat-x表示横方向重复,repeat-y表示纵方向重复，no-repeat表示不重复。
CSS设置文本样式
| 属性 | 描述 |
| color | 设置文本颜色 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| vertical-align | 设置元素的垂直对齐 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS设置文本样式</title> <style type="text/css"> #p1{ color:pink; } #p2{ vertical-align: middle; } #p3{ text-align: right; } #p4{ text-align: center; } a{ text-decoration: none; } #p5{ text-indent: 50px; } </style> </head> <body> <p id="p1">这是一个段落内容1</p> <p id="p2">这是一个段落内容2</p> <p id="p3">这是一个段落内容3</p> <p id="p4">这是一个段落内容4</p> <a href="#">这是一个链接</a> <p id="p5">这是一个段落内容5</p> </body> </html>
CSS设置字体样式
| 属性 | 描述 |
| font | 在一个声明中设置所有的字体属性 |
| font-size | 指定文本的字体大小 |
| font-family | 指定文本的字体系列 |
| font-style | 指定文本的字体样式 |
| font-weight | 指定字体的粗细 |
| 等等 | 等等 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS设置字体样式</title> <style type="text/css"> /*设置自定义字体系列*/ @font-face{ font-family: 'Source Han Sans'; src:url(font/KaiGenGothicCN-Light.eot); src:url(font/KaiGenGothicCN-Light.eot?) format("embedded-opent"), url(font/KaiGenGothicCN-Light.woff) format("woff"),url(font/KaiGenGothicCN-Light.ttf) format("truetype"),url(font/KaiGenGothicCN-Light.svg) format("svg"); font-weight: 400; font-style: normal; } #p1{ font-family: "Times New Roman"; } #p2{ font-family: "Source Han Sans"; } #p3{ font-size :larger; font-style: italic; font-weight: bolder; } </style> </head> <body> <p id="p1">this is a text</p> <p id="p2">text2</p> <p id="p3">text3</p> </body> </html>
CSS样式
| 属性 | 描述 |
| list-style | 用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志 |
| list-style-type | 设置列表项标志的类型 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> <style> /*此处写代码*/ #u1{ list-style-image:url("http://climg.mukewang.com/58dc9e4e0001ba9000160016.png"); } </style> </head> <body> <!-- 此处代码 --> <ul id="u1"> <li>飞机？</li> <li>大炮？</li> <li>潜艇？</li> <li>fireman!</li> </ul> </body> </html>
CSS设置表格样式
| 属性 | 描述 |
| border | 设置表格边框 |
| border-collapse | 设置表格的边框是否被折叠成一个单一的边框或隔开 |
| width | 定义表格的宽度 |
| text-align | 表格中的文本对齐 |
| padding | 设置表格中的填充 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS设置表格样式</title> <style> table ,th,td { border: 1px blue solid; border-collapse: collapse; } table{ width: 80%; margin:0px auto; } th,td{ padding: 10px; } th{ background-color:black; color: red; } .info{ background-color: red; color:yellow; } </style> </head> <body> <table> <tr> <th>名称</th> <th>职位</th> <th>收入</th> </tr> <tr class="info"> <td>张无忌</td> <td>老板</td> <td>100000</td> </tr> <tr > <td>张三</td> <td>王者</td> <td>100</td> </tr> <tr class="info"> <td>周芷若</td> <td>主管</td> <td>20000</td> </tr> </table> </body> </html>
CSS布局
-两行三列布局
首先将页面分成两行，再在第二行将其分成三列。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*此处写代码*/ html,body{ margin:0px; } header{ background-color:black; height:150px; background-image:url(http://climg.mukewang.com/59093e9c00016ce303000100.png); background-repeat:no-repeat; background-position:left center; text-align: right; } body{ background-color:yellow; height:150px } .left{ background-color:red; width:33%; height:100%; float: left; } .center{ background-color:blue; height:100%; } .right{ background-color:green; width:33%; height:100%; float:right; } footer{ background-color:purple; height:150px; } </style> </head> <body> <!-- 此处写代码 --> <header> <p>课程</p> <p>职业路径</p> <p>实战</p> <p>猿问</p> <p>手记</p> </header> <div class="left"> </div> <div class="right"> </div> <div class="center"> </div> <footer> </footer> </body> </html>
由于使用了浮动（float）如果加入文本内容时，有可能不被显示！
-三行两列布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三行两列布局</title> <style> html,body{ margin: 0; } header{ background-color: red; height: 200px } #container{ background-color: blue; height: 300px; } footer{ background-color: green; height: 200px; } nav{ background-color: black; height: 100%; width:150px; float:left; } article{ background-color: yellow; height: 100%; margin-left: 150px; } </style> </head> <body> <header></header> <div id="container"> <nav></nav> <article></article> </div> <footer></footer> </body> </html>
CSS盒子模型
雏形：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> div{ width: 200px; height: 100px; background-color: red; /**设置边框的内容：边框宽度、边框颜色、边框样式（实线/虚线）**/ border: 10px black solid; /**设置边框的内边距**/ padding: 100px; /**设置边框外边距**/ margin:1000px; } </style> </head> <body> <div></div> </body> </html>
设置盒子模型的边框
| 属性 | 描述 |
| border | 简写属性，用于把针对四个边的属性设置在一个声明 |
| border-style | 用于设置元素所有边框的样式，或者单独地位各边设置边框样式 |
| border-width | 用于为元素的所有边框设置宽度，或者单独地为各边框设置宽度 |
| border-color | 设置元素的所有边框中可见部分的颜色，或者为四个边分别设置颜色 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>border属性</title> <style type="text/css"> li{width:200px;height:50px;} /*补充样式*/ .li1{ border-width:2px 0 0 0; border-color:red; border-style:solid; } .li2{ border-width:0 2px 0 0; border-color:green; border-style:dotted; } .li3{ border-width:0 0 2px 0; border-color:blue; border-style:dashed; } .li4{ border-width:0 0 0 2px; border-color:purple; border-style:double; } .li5{ border-width:2px; border-color:orange; border-style:solid; } </style> </head> <body> <ul> <li class="li1">第一个li</li> <li class="li2">第二个li</li> <li class="li3">第三个li</li> <li class="li4">第四个li</li> <li class="li5">第五个li</li> </ul> </body> </html>
设置盒子模型的内边距
| 属性 | 描述 |
| padding | 使用缩写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>border属性</title> <style type="text/css"> .container{ width:200px; height:200px; background-color:pink; /*补充样式*/ padding:50px 0 0 100px; } .content{ width:100px; height:100px; background-color:purple; /*补充样式*/ padding:30px 30px 0 30px; } span{background-color:yellow;} </style> </head> <body> <div class="container"> <div class="content"> <span> 我是span元素 </span> </div> </div> </body> </html>
设置盒子模型的外边距
| 属性 | 描述 |
| margin | 简写属性。在一个声明中设置所有外边距属性 |
| margin-bottom | 设置元素的下外边距 |
| margin-left | 设置元素的左外边距 |
| margin-right | 设置元素的右外边距 |
| margin-top | 设置元素的上外边距 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>margin外边距</title> <style type="text/css"> ul{ list-style:none;width:300px;height:400px; background-color:pink; padding-top:80px; } li{ width:200px;height:50px;background-color:yellow; /*样式补充*/ margin:40px 0 40px 40px; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
CSS中的float
float基本参数的介绍
-float:left (元素左浮动)
-float:right （元素右浮动）
-float:none （元素不浮动）
-float:inherit （元素继承父元素中的浮动，若父元素无浮动则子元素也不浮动）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style> *{ padding:0; margin:0; } .test{ width:100px; height: 100px; background:red; /*float:inherit;*/ float:left; margin-right:10px; } .father{ width:300px; height:300px; float:right; background:blue; } </style> </head> <body> <div class="father"> <div class="test">1</div> <div class="test">2</div> </div> </body> </html>
在这里要注意，当我们div设置为左浮动时，块状元素是按自然顺序排列的，但是如果我们设置为右浮动时，则是按照自然倒序排列的。
float属性实现文本环绕图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style type="text/css"> .per{ width:400px; height:400px; border: 1px solid #CCC; } img{ float:left; } </style> </head> <body> <div class="per"> <img src="../CSS/girl.jpg" width="200" alt=""> 《英雄联盟》(简称LOL)是由美国拳头游戏(Riot Games)开发、中国大陆地区腾讯游戏代理运营的英雄对战MOBA竞技网游。 游戏里拥有数百个个性英雄，并拥有排位系统、天赋系统、符文系统等特色养成系统。 《英雄联盟》还致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“季中冠军赛”“全球总决赛”“All Star全明星赛”三大世界级赛事，获得了亿万玩家的喜爱，形成了自己独有的电子竞技文化。 </div> </body> </html>
文字环绕图片的原理
浮动属性会使原元素脱离正常标准流进行排列布局！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>原理</title> <style type="text/css"> .s1{ /**span为行内元素因此即使设置了宽度和高度也无法显示，但是当添加了float属性，它就可以添加宽度**/ width: 100px; height:100px; background:red; float: left; } </style> </head> <body> <span class="s1"> </span> </body> </html>
虽然span添加了float属性，脱离了正常的文档流，但是依然会占据文档流的空间！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>原理</title> <style type="text/css"> .s1{ /**span为行内元素因此即使设置了宽度和高度也无法显示，但是当添加了float属性，它就可以添加宽度**/ width: 100px; height:100px; background:red; float: left; } .father{ width: 300px; height: 300px; border:1px solid black; } </style> </head> <body> <div class="father"> <span class="s1"> </span> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </div> </body> </html>
float浮动的原因以及副作用分析
CSS中的定位机制：1、标准流（普通流）2、定位 3、浮动
元素进行浮动后，其他元素也会受到干扰，元素浮动后将脱离标准流，父类无法检测子类的高度和宽度，因此元素浮动后可能会产生塌陷。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style type="text/css"> *{ margin:0; padding:0; } .per{ width: 500px; height: auto; border: 1px solid black; } .test{ width: 80px; height: 20px; background:red; border:1px solid #FFF; float:left; } .bro{ width: 100px; height: 100px; background: blue; } </style> </head> <body> <div class="per"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> <div class="bro"></div> </body> </html>
浮动副作用的解决
-手动给父类元素添加高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style type="text/css"> .per{ width: 500px; /*height: auto;*/ /**手动为父元素添加高度**/ height:30px; border: 1px solid black; } .test{ width: 100px; height: 30px; background:red; border:1px solid blue; float: left; } </style> </head> <body> <div class="per"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> </body> </html>
-通过clear清除内部和外部浮动
-clear:none（）
-clear:left（不允许左边有浮动对象）
-clear:right（不允许右边有浮动对象）
-clear:both（不允许有浮动）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <style type="text/css"> .div1{ width: 100px; height: 100px; background-color: red; float: right; } .div2{ width: 120px; height: 120px; background-color: blue; /*clear:left;*/ /*clear:right;*/ clear:both; } .per{ width: 200px; height: 400px; border:1px solid black; } </style> </head> <body> <div class="per"> <div class="div1"></div> <div class="div2"></div> </div> </body> </html>
-给父元素添加overflow属性并结合zoom:1使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style type="text/css"> *{ margin:0; padding:0; } .per{ width: 500px; height: auto; border: 1px solid black; /*overflow为CSS中的一个属性，含有多个参数。用来处理溢出问题，比如子元素的宽度超过父元素的宽度，应用overflow会截去子元素超出的部分，但是这同时也是一个弊端！*/ overflow: hidden; /*zoom为IE专用的属性，通过子元素的高度来自动赋予父元素高度*/ zoom:1; } .test{ width: 1000px; height: 20px; background:red; border:1px solid #FFF; float:left; } } </style> </head> <body> <div class="per"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> </body> </html>
-给父元素添加浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style type="text/css"> .per{ width: 500px; height: auto; border: 1px solid black; /*虽然父类添加float之后正常了，但是父类的兄弟元素也需要使用clear来消除浮动带来的异常*/ float:left; } .test{ width: 100px; height: 30px; background:red; border:1px solid blue; float: left; } .bro{ width: 100px; height: 30px; background:black; border:1px solid blue; clear:both; } </style> </head> <body> <div class="per"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> <div class="bro"></div> </body> </html>
扫一扫
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
