首页  思维导图  详情

Day02-CSS

2017-09-21 11:29:43   0  举报





仅支持查看

AI智能生成

开发中常用的CSS知识点

CSS 前端开发网页设计

作者其他创作

大纲/内容

概述

什么是CSS：层叠样式表

CSS作用：美化HTML页面,代码复用,将样式和页面进行分离.

CSS的使用：CSS的基本语法

语法

CSS的引入方式：

行内样式：在元素上使用style属性

页面内样式：在<style></style>中定义CSS

外部样式：定义一个CSS文件,引入文件.<link href="xx.css"/>

CSS的选择器

元素选择器：p{}

id选择器:#id{}

类选择器：.类名{}

后代选择器：p span

子元素选择器：p > span

伪元素选择器: a:link{}, a:hover{} ,a:active{},a:visited{}

组合选择器:p,a,div{}

优先级

<span>ID>Class>HTML</span>

<div><span data-wiz-span="data-wiz-span">同级时选择离元素最近的一个的</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">#p { color: red }</span></div><div><span>#p { color: #f60 }</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">执行颜色为#f60的</span></div>

常见属性

颜色

<div><div><span data-wiz-span="data-wiz-span">color属性定义文本的颜色</span><br></div></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">color：green</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">color：#ff6600</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">color：#f60</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">简写式</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">color：rgb（255,255,255）</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">红(R)、绿(G)、蓝(B) 每个的取值范围0~255</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">color：rgba（255,255,255,1）</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度，透明度0~1s</span></div>

背景

<div><div><span data-wiz-span="data-wiz-span"><div><div><span data-wiz-span="data-wiz-span"><span data-wiz-span="data-wiz-span">1. <b>background-color</b> </span></span><span><span data-wiz-span="data-wiz-span">背景颜色</span></span></div></div></span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span></div><div><span data-wiz-span="data-wiz-span">2.<b>background-image</b> </span><span><span data-wiz-span="data-wiz-span">背景图片</span></span><span data-wiz-span="data-wiz-span"> <br></span>   background-image:url(图片路径)<br>   background-image:none</div><div><span data-wiz-span="data-wiz-span">3.<b>background-repeat</b> </span><span><span data-wiz-span="data-wiz-span">背景重复</span></span><span><span data-wiz-span="data-wiz-span"> </span></span></div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">   repeat  </span><span data-wiz-span="data-wiz-span">重复平铺满</span><br><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">   repeat-x  </span><span data-wiz-span="data-wiz-span">向Y轴重复</span><br><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">   repeat-y  </span><span data-wiz-span="data-wiz-span">向Y轴重复</span><br><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">   no-repeat  </span>不重复<div><span data-wiz-span="data-wiz-span"> </span><span data-wiz-span="data-wiz-span">4.<b>background-position</b> </span><span><span data-wiz-span="data-wiz-span">背景位置</span></span></div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">   横向（left,center,right）</span><br><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">   纵向（top,center,bottom）</span><br><span><span data-wiz-span="data-wiz-span">                 </span></span><span><span data-wiz-span="data-wiz-span">     </span></span><span><span data-wiz-span="data-wiz-span">如果使用英文，background-position: top left ,第一个代表纵向，第二个代表横向</span></span></div><div><div><span><span data-wiz-span="data-wiz-span">                 </span></span><span><span data-wiz-span="data-wiz-span">     </span></span><span><span data-wiz-span="data-wiz-span">如果使用数字位置,background-position:20px 20px; 第一个代表横向，第二个代表纵向        </span></span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span"><font color="#ff0000"><span data-wiz-span="data-wiz-span">简写方式</span></font></span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">background:背景颜色 url(图像) 重复位置</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">background:#f60 url(images/bg,jpg) no-repeat top center</span></div></div>

边框

<div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">1.边框风格 <b>border-style</b></span><br></div></div><div>   边框风格样式的属性值<br></div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">       1、none 无边框</span></div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">       2、solid  直线边框</span></div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">       3、dashed  虚线边框</span></div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">       4、dotted 点状边框</span></div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">       5、double  双线边框</span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">2.边框宽度 <b>border-width</b></span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">3.边框颜色 <b>border-color</b></span></div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    属性值</span></div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>    1、颜色值的名称</div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>        red、green</div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>        RGB</div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>        rgb(255,255,0)</div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>        RGBA</div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>        rgba(255,255,0,0.1)</div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>        十六位进制</div><div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    </span>        #ff0、#ff0000</div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span"><font color="#ff0000"><span data-wiz-span="data-wiz-span">简写方式</span></font></span></div><div><span><span data-wiz-span="data-wiz-span"> </span></span><span data-wiz-span="data-wiz-span">border：solid 2px #f60</span></div>

文本

1.text-align:center/left/right;<br>2.text-decoration:none/underline<br>3.line-height:10px;

字体

<div><span data-wiz-span="data-wiz-span"><div><div><span><span data-wiz-span="data-wiz-span">1.font-size 字体大小</span></span></div></div></span></div><div><span><span data-wiz-span="data-wiz-span">2.font-family 定义字体</span></span></div><span><span data-wiz-span="data-wiz-span"></span></span><span data-wiz-span="data-wiz-span">    font-family：微软雅黑，serif；</span><br><span><span data-wiz-span="data-wiz-span">    建议使用英文，百度微软雅黑英文即可</span></span>可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个<div><span>3.font-weight 字体加粗<br></span>    normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)<br>4.font-style</div><div><span data-wiz-span="data-wiz-span">    normal 正常</span></div><div><span data-wiz-span="data-wiz-span">    italic 斜体，比倾斜更倾斜</span></div><div><span data-wiz-span="data-wiz-span">    oblique 倾斜</span></div><div><span data-wiz-span="data-wiz-span">    inherit 继承</span></div><div>    <br>字体属性的连写 font:font-style font-weight font-size font-family;<span><span data-wiz-span="data-wiz-span"><br></span></span></div><div>可以省略前两个，但是后面两个必须写且不能省略</div>

列表

<span><span data-wiz-span="data-wiz-span"> </span></span><span><span data-wiz-span="data-wiz-span">list-style-type:none</span></span>

盒模型

margin:盒子的外边距

padding:盒子的内边距，相当于箱子里面的泡沫

border

width

height

content

计算盒子的宽高

<p><span>宽：</span><span lang="EN-US">border-left + padding-left + width + padding-right + border-right</span></p>

高：<span lang="EN-US">border-top + padding-top + height + padding-bottom + border-bottom</span>

浮动和定位

浮动

什么是浮动

如何清除浮动

clear:both

使用伪元素<br><div><br></div><div>.clearfix:before,</div><div>.clearfix:after {</div><div><span> </span>content: "";</div><div><span> </span>display: table;</div><div>}</div><div><span> </span></div><div>.clearfix:after {</div><div><span> </span>clear: both;</div><div>}</div><div><span> </span></div><div>.clearfix {</div><div><span> </span>*zoom: 1;</div><div>}</div><div><br></div>

浮动常用的两种方式

什么时候使用浮动

注意：使用浮动后造成的后果千奇百怪，如我们只需要清除浮动即可.在开发中我们常常将需要浮动的元素放入一个盒子，然后在盒子上使用"clearfix"清除浮动

定位position

relative 相对

absolute 绝对定位