第1节:CSS简介
1.概述:
1)层叠样式表
2)用来美化和布局页面的一种语言,配合HTML一起使用
3)可以写在html里,也可以写在后缀名为.css的文件里
4)使用浏览器来“解释和执行”
5)实现样式与内容的分离,方便团队开发提高效率;提高效率;实现页面精确控制
2.用途:
1)美化外观
2)布局、定位
3.基本语法
1)<style type=”text/css”>
选择器(修饰对象){
对象的属性1:属性值;
对象的属性2:属性值;
}
2)<style>标签声明标签内为CSS
3)多条样式规则:用冒号声明对应属性值,多个属性值用分号分隔
4)注释:/*注释内容*/
5)Px“像素 em:倍数
第2节:CSS选择器
1.基本选择器:
1)标签选择器:匹配所有使用E标签的元素
2)类选择器(class):匹配所有class属性等于class值得元素
多个类值:class=”选择器1 选择器2” 中间空格分隔
3)ID选择器:匹配id属性等于id值的元素(id唯一,name可重复)
2.选择器优先级
ID选择器>类选择器>标签选择器
3.组合选择器
1)群组选择器:同时匹配所有元素
Div,p,#id,c{color:red;}中间用,分隔
2)后代选择器:匹配所有属于E元素后代的F元素
3)Div p{color:red;}中间用空格分隔
4.text-decoration 属性:可以添加删除线
1)none 默认,定义标准的文本
2)underline:定义文本下的一条线
3)overline:定义文本上的一条线
4)line-through:定义闯过文本下的一条线(删除线)
5)blink:定义闪烁文本
5.list-style-type属性
1)none:无标记
2)disc:默认,实心圆
3)circle:空心圆
4)square:实心方块
第3节:CSS属性
1.文本属性
1)字体大小:font-size
2)对齐方式:text-align
3)行高:line-height
4)字符间距:letter-spacing
5)字颜色:color
6)字体加粗:font-bold
7)首行缩进:text-index
8)隐藏列表符:list-style:none
9)文本修饰:text-decoration(underline、overline、line-through、blink、none
10)字符间距:white-space(表格如下)
normal | 默认。空白字符会被浏览器忽略。 |
pre | 空白字符会被浏览器全部保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | CSS 2.1新增保留空白符序列,但是正常地进行换行。 |
pre-line | CSS 2.1新增合并空白符序列,但是保留换行符。 |
inherit | IE 不支持规定应该从父元素继承 white-space 属性的值。 |
2.背景属性
1)background(复合写法)
2)Background-color(背景颜色)
3)Background-image(背景图片)
4)Background-repeat(背景图重复方式)
5)Background-position(位置坐标、偏移量)
6)图标截取步骤:
设置标签(div)的背景图片
计算图标的偏移量
获取图标的宽度与高度
设置此标签9div0宽度与高度
3.列表属性
1)list-style(列表风格)
None:无风格
Disc:实心圆
Circle:空心圆
Squre:实心正方形
Decimal:数字
2)作用:导航菜单
第4节:盒模型
1.概念:元素内容、内边距、边框、外边距
2.Margin属性:可统一设置或四边分开设置
1)margin:1px;
2)Margin:1px 2px 3px 4px;
3)Margin-top:ipx;
4)Margin:1px 2px;
5)Auto:让浏览器自动选择合适的margin(页边距)大小
3.border属性
1)属性修饰:border-coloe、border-width、border-style
2)四个方向:border-top、border-right、border-bottom、border-left
3)写法:...
4.padding属性:可统一设置或分开设置
5.盒子的实际占位:
盒子高度 = height属性+上下填充高度+上下边框高度
盒子宽度 = width属性+左右填充宽度+左右边框宽度
第5节:CSS+DIV布局
1.分析页面节结构,形成html组织结构
2.编写每一个div块的css,控制定位
第6节:CSS浮动
1.概念:
1)页面默认文档流,页面内容从上道谢排列,DIV块换行显示
2)浮动,脱离文档流
2.float特征:
1)div块元素失去“块状”换行显示特征,编程行内元素
2)紧贴上一个浮动元素(同方向)或父级元素的边框
3)占据行内元素的空间,导致行内元素围绕显示
3.clear属性:
1)作用:规定元素的哪一侧不允许出现其他浮动元素、只对kuaiji元素有效
2)值:
Left:左侧不允许出现浮动元素
Right:右侧不允许出现浮动元素
Both:左右均不允许出现浮动元素
None:默认值,允许出现
第7节:其他常用属性
1.定位属性
1)position:
Absolute:绝对定位,相对于浏览器偏移
Relative::相对定位,相对于原来位置偏移
Fixed:固定在屏幕某一位置
2)z-index:auto/number,对有position属性的盒子有效,值较大的在上层
3)Overflow:设置滚动条
Auto:需要时显示滚动条
Hidden:不显示滚动条
Scroll:总是显示滚动条
4)display:设置对象是否以及如何显示
Block:块级对象
Inline:行级对象
None:隐藏对象
第8节:伪类
1.超链接样式的特点
1)超链接样式的特殊性:文本或图像加上超链接,将失去原样式二继承超链接的样式
2)超链接演示的四种状态:
未访问状态(a:link)
已访问状态(a:visited)
鼠标移上状态(a:hover)
激活选定状态(a:active)
2.超链接伪类样式:a:link、a:visited、a:hover、a:active(鼠标点击未释放时)
采用选择器,对各种状态分别定样式,一般称为伪类
注:必须按以上顺序写
3.如何设置超链接样式
1)确定页面所有的链接样式是否相同,否则分卡定义
2)先定义四个状态共有样式,再定义其他状态
第9节:CSS样式种类
1.内部样式表:
1)html和css在同一文件,方便开发时修改,样式和内容分离不够彻底,不利于页面复用
2)<style ype=”text/css”></style>
2.外部样式表:
1)分别定义css和html文件,样式和内容彻底分离,多个页面可共享同一css
2)<link rel=”stylesheet” href=”css文件” type=”text/css”>
3.行内样式
1)<标签 style=”样式”></标签>
4.样式的优先级
1)各类样式有继承:由高到低,近者优先
2)各类样式的优先级:行内样式>内部样式>外部样式>浏览器默认样式
选择器优先级:ID选择器>类选择器>标签选择器
第10节:CSS布局介绍
1.典型的局部布局
1)div-u(o)l-li:常用于分类导航或菜单等场合;
2)Div-dl-dt-dd:常用于图文混编场合
3)Table-tr-td:常用于显示数据和页面规整的场合
4)Form-table-tr-td:常用于布局表单的场合
2.div-u(o)l-li
1)实现思路:布局结构分析、CSS样式分析
2)图文参差并列结构
列表样式:去除
右对齐:float
超链接:无下划线模式
调整文本对齐和间距
3)步骤:先建立HTML标签组织结构,建立CSS样式表,之一添加各类样式表,测试样式细节
3.Div-dl-dt-dd:
1)实现思路:布局结构分析,CSS样式分析
2)图文混编结构 dl做容器结构 dt放图片 dd放文字
图片和文字一行:采用float
调整文字样式
3)步骤:建立HTML标签组织结构,建立css样式表,逐一添加各类样式表,测试样式细节
第11节:CSS复用
1.如何复用css代码:抽取重复代码建立类