Day02-CSS

CSS

概述

什么是CSS：层叠样式表

CSS的使用：CSS的基本语法

语法

CSS的引入方式：

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

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

CSS的选择器

元素选择器：p{}

id选择器:#id{}

类选择器：.类名{}

后代选择器：p span

子元素选择器：p > span

优先级

ID>Class>HTML

同级时选择离元素最近的一个的\t\t\t#p { color: red }#p { color: #f60 }\t\t\t执行颜色为#f60的

常见属性

颜色

color属性定义文本的颜色\t\tcolor：green\t\tcolor：#ff6600\t\tcolor：#f60\t\t\t简写式\t\tspan data-wiz-span=\"data-wiz-span\

背景

1. background-color 背景颜色\t\t2.background-image 背景图片    background-image:url(图片路径)   background-image:none3.background-repeat 背景重复    repeat  重复平铺满   repeat-x  向Y轴重复   repeat-y  向Y轴重复   no-repeat  不重复 4.background-position 背景位置span data-wiz-span=\"data-wiz-span\

边框

\t\t1.边框风格 border-style   边框风格样式的属性值       1、none 无边框       2、solid  直线边框       3、dashed  虚线边框       4、dotted 点状边框       5、double  双线边框\t\t2.边框宽度 border-width\t\t3.边框颜色 border-color    属性值        1、颜色值的名称            red、green            RGBspan data-wiz-span=\"data-wiz-span\

文本

1.text-align:center/left/right;2.text-decoration:none/underline3.line-height:10px;

字体

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

列表

 list-style-type:none

盒模型

margin:盒子的外边距

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

border

width

height

content

计算盒子的宽高

宽：border-left + padding-left + width + padding-right + border-right

高：border-top + padding-top + height + padding-bottom + border-bottom

浮动和定位

浮动

什么是浮动

如何清除浮动

clear:both

浮动常用的两种方式

什么时候使用浮动

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

定位position

relative 相对

absolute 绝对定位