02 . 前端之CSS

CSS简介

CSS是Cascading Style Sheets（级联样式表）的缩写，也叫层叠样式表。定义如何显示HTML元素。

CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。当浏览器读到一个样式表，他就会按照这个样式表来进行文档如何进行格式化（渲染）。

CSS语法

CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/   
# 注释是代码之母

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式，不推荐大规模使用.

<p styple="color: red">Hello world.</p>

内部样式

<!-- 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下.   -->
<!DOCTYPE html>   
<html lang="en">   
<head>   
 <meta charset="UTF-8">   
 <title>Title</title>   
 <style>   
 #i1{   
 background-color: #007fff;   
 height: 46px;   
 }   
 </style>   
</head>   
<body>   
 <div id="i1">2</div>   
 <div>3</div>   
</body>   
</html>

外部样式

外部样式就是讲css写在一个单独的文件中，一般以.css结尾，就叫css文件，然后在html页面进行引入即可，推荐使用此方式:

<link href="mystyle.css" rel="stylesheet" type="textcss"/>

Example

/* commons.css */   
.c1 {   
background: red;   
color: white;   
}   
.c2 {   
 font-size: 40px;   
 color: black;   
}

stylesheet,href引入该css文件

<!DOCTYPE html>   
<html lang="en">   
<head>   
 <meta charset="UTF-8">   
 <title>Title</title>   
 <link rel="stylesheet" href="commons.css">   
</head>   
<body>   
 <div class="c1 c2" style="color: pink;">youmen</div>   
</body>   
</html>

CSS基础

背景色

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 body {  
 background: darkgray;  
 }  
 p {  
 width: 150px;  
 padding: 10px;  
 /*margin: auto;*/  
 background-color: chartreuse;  
 }  
 </style>  
</head>  
<body>  
<div class="backcolor">  
 <p class="p">测试一下背景是否可以继承</p>  
</div>  
</body>  
</html>

背景图片

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 body{  
 background-image: url(1.jpg);  
 background-repeat: no-repeat;  
 /* 不允许图片重复 */  
  
 background-position: center top ;  
 /* center top 图片居中，从上到下显示图片 */  
 }  
  
 /*p{*/  
 /*    background-image: url(1.jpg);*/  
 /*    height: 200px;*/  
 /*}*/  
 </style>  
</head>  
<body>  
 <p>测试一下背景是否可以继承</p>  
</body>  
</html>

文本颜色和缩进

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 body{  
 color: aqua;  
 }  
    
 /*p{*/  
 /*    color: red;*/  
 /*    text-align: center;*/  
 /*    !* 居中,right靠右 *!*/  
 /*}*/  
  
  
 /*缩进,也可以按百分比缩进*/  
 h1{  
 text-indent: -2em;  
 padding-left: 2em;  
 }  
  
 p{  
 padding-left: 1em;  
 }  
 </style>  
</head>  
<body>  
<!--    <p>查看颜色</p>-->  
<!--    <h1>标题查看颜色</h1>-->  
<!--    <p>hello </p>-->  
  
 <div>  
 <h1>静夜思</h1>  
 <p>窗前明月光,</p>  
 <p>疑是地上霜.</p>  
 <p>举头望明月,</p>  
 <p>低头思故乡.</p>  
 </div>  
</body>  
</html>

文本字母大小写转换和阴影、换行

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 .p1{  
 text-transform: capitalize;  
 /* 单词首字母大写 */  
 }  
  
 .p2{  
 text-transform: lowercase;  
 /* 将字母全部变成小写 */  
 }  
  
 .p3{  
 text-transform: uppercase;  
 /* 将字母变成大写 */  
 }  
  
 p{  
 text-shadow: 5px 100px 2px #7e55ff;  
 /* 字体背影,第一个值: 因为有前景，背景,背景距左的一个距离 */  
 /* 第二个值: 距离上方的距离 */  
 /* 第三个值: 清晰度 */  
 /* 第四个值: 背景颜色 */  
  
 text-wrap: normal;  
 /*width: 50px;*/  
 /* 换行规则,如果是英文可能为了单词不被拆开可能多一点点少一点点 */  
 }  
 </style>  
</head>  
<body>  
 <p class="p1">this IS my WEB paGe</p>  
 <p class="p2">this IS my WEB paGe</p>  
 <p class="p3">this IS my WEB paGe</p>  
 <p>sdaffffffaddddddddddddddddddsdfaassffffffdssssssssssss</p>  
</body>  
</html>

字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形

属性	描述
font-family	设置字体系列
font-size	设置字体尺寸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 p{  
 font-size: 40px;  
 font-family: fantasy;  
 }  
    
 /*@font-face {*/  
 /*    font-family: fantasy;*/  
 /*    src: url("");*/  
 /*} 此种方式可以让用户使用你页面自动下载此url字体，不用担心用户电脑没有此字体   */   
 </style>  
</head>  
<body>  
 <p>标题</p>  
</body>  
</html>

css链接

属性	描述
link	普通的、未被访问的链接
visited	用户已访问的链接
hover	鼠标指针位于链接的上方
active	链接被点击的片刻

text-decoration	去掉a标签链接中的下划线
background-color	设置a标签链接背景颜色

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 a:link{  
 color: #FF0000;  
 /* 未被点击的链接 */  
 text-decoration: none;  
  
 background: violet;  
 /* a标签的背景颜色 */  
 }  
  
 a:visited{  
 color: #00FF00;  
 /* 用户已访问的链接 */  
  
 text-decoration: none;  
 /* a标签下面的下划线如果不需要可以加上上面那条属性 */  
 }  
  
 a:hover{  
 color: #0000FF;  
 /* 鼠标位于链接上方的颜色 */  
 }  
  
 a:active{  
 color: #7e55ff;  
 /* 连接被点击片刻的颜色 */  
 }  
 </style>  
</head>  
<body>  
 <a href="http://www.baidu.com">百度一下</a>  
</body>  
</html>

css列表

属性	描述
list-style	简写列表项
list-style-image	列表项图像
list-style-position	列表标志位置
list-style-type	列表类型

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 /*ul li{*/  
 /*list-style-type: decimal;*/  
 /* 设置列表前缀为数字,默认为黑圆心，也可以设置为图片*/  
 /*}*/  
  
 /*ul li{*/  
 /*    list-style-image: url("1.jpg");*/  
 /*}*/  
  
 ul.ul1 {  
 list-style-position: inside;  
 /* 输出结果往界面中间更靠近一点 */  
 }  
  
 ul.ul2 {  
 list-style-position: outside;  
 /* 输出结果往界面外边更靠近一点 */  
 }  
 </style>  
</head>  
<body>  
<p>看一下效果</p>  
<ul class="ul1">  
 <li>苹果</li>  
 <li>苹果</li>  
</ul>  
  
<p>看一下效果</p>  
<ul class="ul2">  
 <li>苹果</li>  
 <li>苹果</li>  
</ul>  
</body>  
</html>

css之表格

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 .tb {  
 border-collapse: collapse;  
 /* 折叠边框 */  
 width: 200px;  
 height: 200px;  
 }  
  
 .tb, tr, th, td {  
 border: 1px solid bisque;  
 /* 外边框设置为１像素并设置颜色 */  
 padding: 5px;  
 /* 内边距 */  
 }  
  
 .tb th {  
 text-align: right;  
 /* 表格居左 */  
 background-color: aqua;  
 color: #FFFFFF;  
 }  
  
 .tb tr.alt td {  
 color: black;  
 background-color: aquamarine;  
 }  
 </style>  
</head>  
<body>  
<table class="tb">  
 <thead>  
 <tr>  
 <th>姓名</th>  
 <th>年龄</th>  
 <th>性别</th>  
 </tr>  
 </thead>  
  
 <tbody>  
 <tr>  
 <td>小周</td>  
 <td>20</td>  
 <td>男</td>  
 </tr>  
  
 <tr class="alt">  
 <td>小兰</td>  
 <td>18</td>  
 <td>女</td>  
 </tr>  
  
 <tr>  
 <td>小萌</td>  
 <td>18</td>  
 <td>女</td>  
 </tr>  
  
 <tr class="alt">  
 <td>小萌</td>  
 <td>18</td>  
 <td>女</td>  
 </tr>  
 </tbody>  
</table>  
  
</body>  
</html>

CSS轮廓

用来突出一些元素的作用，比如说一个元素需要一些强烈的视觉效果让用户去注意他.例如下面代码就是为了突出文字重点.

属性	描述
outline	设置轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 p{  
 outline: groove;  
 /* 双实线 */  
  
 outline-color: #7e55ff;  
 /* 实线颜色　*/  
  
 outline-style: dotted;  
 /* 虚线 */  
 }  
 </style>  
</head>  
<body>  
 <p>突出效果文字</p>  
</body>  
</html>

CSS选择器

# css指层叠样式表  
# css样式表极大地提高了工作效率

ID选择器

id选择器可以为标有id的HTML元素指定特定的样式.
id选择器以"#" 来定义
目前比较常用的方式是id选择器常常用于建立派生选择器

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 #divid {  
 background-color: #2459a2;  
 height: 48px;  
 }  
  
 #pid a{  
 /* 只给i1下的a标签设置指定样式 */  
 background-color: lavender;  
 }  
 </style>  
</head>  
<body>  
 <p id="pid">hello css<a href="http://www.baidu.com">百度一下</a></p>  
  
 <div id="divid">  
 这是第一个div<p>div中的p</p>  
 </div>  
</body>  
</html>

Class选择器

类选择器以一个点显示

类选择器也可作派生选择器

Example1

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 .pclass a{  
 color: red;  
 }  
  
 .divclass {  
 color: deepskyblue;  
 }  
 </style>  
</head>  
<body>  
 <p class="pclass" >这是一个class选择器<a href="http://www.baidu.com">百度一下</a></p>  
  
 <div class="divclass">这是第二个class选择器</div>  
</body>  
</html>  
  
.名称{   
 ...   
}   
<标签 class=‘名称’> </标签>

Example2

<!DOCTYPE html>   
<html lang="en">   
<head>   
 <meta charset="UTF-8">   
 <title>Title</title>   
 <style>   
 span div{   
 background-color: black;   
 color: white;   
 }   
 </style>   
</head>   
<body>   
 <span class="c1">32143214   
 <div id="c2">dafadsf</div>   
 </span>   
</body>   
</html>   
<!-- 让span只用span里面的样式.   -->

标签选择器

div {
	...
}
<!-- 所有div设置上此样式 -->

层级选择器

.c1 .c2 div {

}

组合选择器

<!DOCTYPE html>   
<html lang="en">   
<head>   
 <meta charset="UTF-8">   
 <title>Title</title>   
 <style>   
 .i1,.i2,.i3{   
 background: red;   
 color: black;   
 }   
 </style>   
</head>   
<body>   
 <div class="i1">1</div>   
 <div class="i2">2</div>   
 <div class="i3">3</div>   
</body>   
</html>

属性选择器

在IE6及更低版本不支持
对带有指定属性的HTML元素设置样式
根据具体属性值选择,除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择特定属性值的元素.
属性和属性值必须完全匹配
根据部分属性值选择

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 [title]{  
 color: deepskyblue;  
 }  
  
 [title=te]{  
 color: red;  
 }  
 </style>  
</head>  
<body>  
 <p title="t">属性选择器</p>  
 <p title="te">属性选择器二</p>  
</body>  
</html>

<!DOCTYPE html>   
<html lang="en">   
<head>   
 <meta charset="UTF-8">   
 <title>Title</title>   
 <style>   
 input[type="text"] {   
 width: 100px;   
 height: 200px;}   
 </style>   
</head>   
<body>   
 <input type="text" >   
 <input type="password">   
</body>   
</html>

选择器优先级

# 标签上style优先，编写顺序，就近原则.   
# 选择器之间的优先级   
id > 属性 > 类 > 标签   
# 但是可以使用limportant指定某一类优先级最高   
# 相同类型的优先级: 就近原则，即谁在最后谁生效

类选择器和ID选择器区别

# ID选择器只能在文档中使用一次，而类可以多次使用  
# ID选择器不能结合使用  
# 当使用js时候，需要用到id

css重用**

<style>   
 .c1{   
 共有   
 }   
 .c2{   
 独有   
 }   
 .c3{   
 独有   
 }   
</style>   
<div class='c1 c2'></div>

自适应/改变大小变形

# 左右滚动条的出现   
# 宽度，百分比   
# 页面最外层: 像素的宽度=>最外层设置绝对宽度，里面设置百分比.   
    
# 自适应   
# media

默认img的标签，有一个1px的边框

img{   
 border: 0;   
}

css盒子模型

盒子模型内容范围包括margin、border、padding、content组成
下图就是个盒子模型

CSS内边距

# 内边距在centent外，边框内  
# 内边距属性

属性	描述
padding	设置所有边距
padding-bottom	设置底边距
padding-left	设置左边距
padding-right	设置右边距
padding-top	设置上边距

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style>  
 td{  
 /*padding: 100px;*/  
 /*padding-left: 100px;*/  
 /*padding-right: 100px;*/  
 padding-bottom: 100px;  
 }  
 </style>  
</head>  
<body>  
<table border="1">  
 <tr>  
 <td>内边距</td>  
 </tr>  
</table>  
</body>  
</html>

CSS边框

我们可以创建效果出色的边框，并且可以应用于任何元素.
边框的样式: border-style: 定义了10个不同的非继承样式,包括none.
边框的单边样式

border-top-style  
border-left-style  
border-right-style  
border-bottom-style

Example1

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Title</title>  
<style>  
p{  
width: 100px;  
height: 30px;  
border-style: dotted;  
/* 虚线边框 */  
border-top-style: double;  
/* 设置边框顶部样式 */  
border-width: 5px;  
/* 设置边框的宽度，也可以设置单边框的宽度 */  
/* border-top-width */