Web基础学习笔记——CSS基础

第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代码：抽取重复代码建立类