下载文档原格式
css知识点总结CSS知识点总结。
一、CSS简介。
1. 定义。
- CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML（或XML 等标记语言）文档外观和布局的样式语言。
它可以控制网页元素的样式，如颜色、字体、大小、间距、布局等。
2. 作用。
- 将内容（HTML）与表现（CSS）分离。
这使得网页的维护和更新更加容易，例如，如果要改变整个网站的字体颜色，只需要修改CSS文件中的相关样式规则，而不需要逐个修改HTML页面中的每个元素。
二、CSS的基本语法。
1. 选择器（Selector）- 元素选择器。
- 直接使用HTML元素名称作为选择器，例如`p`选择所有的`<p>`段落元素，`h1`选择所有的`<h1>`标题元素等。
- 类选择器。
- 以`.`开头，后面跟着自定义的类名。
例如`.my - class`可以选择所有带有`class = "my - class"`属性的元素。
在HTML中可以这样使用：`<div class="my - class">...</div>`。
- ID选择器。
- 以`#`开头，后面跟着自定义的ID名。
ID在一个HTML页面中应该是唯一的。
例如`#my - id`可以选择带有`id = "my - id"`属性的元素，如`<div id="my - id">...</div>`。
2. 声明块（Declaration Block）- 由一个或多个声明（Declaration）组成，每个声明包含一个属性（Property）和一个值（Value），中间用`:`分隔，声明之间用`;`分隔。
例如：p {color: red;font - size: 16px;}- 在这个例子中，`p`是选择器，`{}`内部是声明块。
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
以下是一份关于CSS的笔记，涵盖了基础概念、属性和布局技巧等方面：一、基础概念CSS是层叠式样式表的简称，也称为级联样式表或样式表。
它主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。
CSS文件的后缀是.css，通常在HTML文档中嵌入或链接到外部CSS文件。
CSS不区分大小写，建议小写。
CSS具有层叠性，一个元素可以设置多个样式。
当样式冲突时，优先级高的样式生效；优先级相同时，写在后面的样式生效。
二、CSS属性和布局技巧文本样式：可以使用CSS设置文本的颜色、字体、大小、对齐方式等。
例如，color属性用于设置文本颜色，font-family属性用于设置字体，font-size属性用于设置字体大小，text-align属性用于设置文本对齐方式。
图片样式：可以使用CSS设置图片的宽度、高度、边框、边距等。
例如，width和height属性用于设置图片宽度和高度，border属性用于设置图片边框，margin和padding属性用于设置图片边距。
布局技巧：CSS提供了多种布局技巧，如浮动布局、定位布局、弹性布局等。
其中，浮动布局是最常用的布局方式之一，通过float属性可以让元素左右浮动；定位布局通过position属性可以实现元素的定位；弹性布局则是一种更灵活的布局方式，通过flexbox或grid属性可以实现元素的灵活布局。
三、CSS选择器CSS选择器是用于选择HTML元素的一种语法。
常用的选择器有元素选择器、类选择器、ID选择器等。
例如，p选择器可以选择所有的段落元素，.myClass选择器可以选择所有类名为myClass的元素，#myID选择器可以选择ID为myID的元素。
四、CSS的引入方式内联样式：在HTML标签内使用style属性直接定义CSS代码。
这种方式的优点是方便快捷，但只对当前元素生效。
内部样式表：在HTML文档的<head>部分使用<style>标签定义CSS代码。
css相关笔记摘要：一、CSS 概述1.CSS 的定义2.CSS 的作用3.CSS 与HTML 的关系二、CSS 的基本语法与选择器1.基本语法2.选择器类型a.元素选择器b.类选择器c.ID 选择器d.属性选择器三、CSS 常用属性1.文本属性a.字体b.字号c.颜色d.行高e.字间距2.背景属性a.背景颜色b.背景图片c.背景重复d.背景位置3.边框属性a.边框宽度b.边框样式c.边框颜色d.圆角边框4.布局属性a.定位方式i.静态定位ii.相对定位iii.绝对定位iv.固定定位b.浮动c.清除浮动d.定位与浮动的结合使用5.列表属性a.列表样式b.列表符号四、CSS 的盒模型1.盒模型的组成2.内容区3.内边距4.边框5.外边距五、CSS 的响应式布局1.媒体查询2.百分比单位3.弹性布局正文：【CSS 相关笔记】CSS 是一种用于描述HTML 或XML（包括SVG，MathML 等）文档样式的样式表语言。
CSS 不仅可以应用于网页设计，还可以应用于其他领域，如桌面应用程序、移动应用程序等。
CSS 的作用是使开发者可以将样式与内容分离，方便统一管理和修改样式。
CSS 与HTML 的关系非常密切。
HTML 负责文档的结构，而CSS 负责文档的样式。
通常，我们在HTML 文档中通过`<style>`标签或者外部样式表引入CSS 代码。
CSS 的基本语法主要包括选择器、属性以及属性的值。
选择器用于选取需要设置样式的元素，例如元素选择器、类选择器、ID 选择器和属性选择器等。
属性用于设置元素的样式，例如字体、字号、颜色、背景、边框等。
属性的值则决定了元素的样式效果。
CSS 有很多常用的属性，例如文本属性、背景属性、边框属性和布局属性等。
文本属性用于设置文本的样式，如字体、字号和颜色等；背景属性用于设置元素的背景颜色或图片等；边框属性用于设置元素的边框宽度、样式和颜色等；布局属性则用于设置元素的位置、浮动和布局方式等。
一、CSS选择器1、标签选择器2、类选择器3、ID选择器二、CSS复合选择器1、后代选择器●在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明●外层的标签写在前面，内层的标签写在后面，之间用空格分隔●标签嵌套时，内层的标签成为外层标签的后代2、交集选择器●由两个选择器直接连接构成，选中二者各自元素范围的交集●第一个必须是标签选择器，第二个必须是类选择器或者ID选择器●选择器之间不能有空格，必须连续书写3、并集选择器●多个选择器通过逗号连接而成●利用并集选择器同时声明风格相同样式三、CSS美化网页1、<span>标签2、字体样式●Font-family：设置字体类型●Font-size：设置字体大小●Font-weight：设置字体粗细3、文本属性●Color：设置文本颜色●Text-align：设置元素水平对齐方式●Text-indent：设置首行文本的缩进●Line-height：设置文本的行高●Text-decoration：设置文本的装饰4、超链接样式实际网页开发中通常只设置两种状态，一种是a{ }—包括链接的各个状态，一是a:hover { }---鼠标移到对象上的样式5、网页背景●Background-color：背景颜色●Background-image：背景图像●Background-repeat：背景重复方式●Background-position：背景定位。
---属性值可以为数值，可以为百分比，也可以为关键词；第一个为水平方向，第二个为垂直方向。
●Background：背景样式简写Background：背景颜色背景图片背景定位背景是否重复显示；例：background:#C00 url(image/arrow-down.gif) 205px 10px no-repeat;6、列表样式●List-style-type：none 无标记符号●List-style-type：disc 实心圆●List-style-type：circle 空心圆●List-style-type：square 实心正方形●List-style-type：decimal 数字四、盒子模型CSS 盒子模型，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
前端css知识笔记前端CSS知识笔记。
CSS（层叠样式表）是前端开发中的一项重要技术，用于控制网页的样式和布局。
下面是一份关于前端CSS知识的笔记，涵盖了常用的CSS属性和技巧。
一、CSS选择器。
1. 标签选择器，选择指定标签的元素，例如p、div、h1等。
2. 类选择器，选择具有相同类名的元素，以"."开头，例如.class。
3. ID选择器，选择具有相同ID的元素，以"#"开头，例如#id。
4. 属性选择器，选择具有指定属性的元素，例如[type="text"]。
5. 伪类选择器，选择具有特定状态的元素，例如:hover、:active等。
6. 伪元素选择器，选择元素的特定部分，例如::before、::after等。
二、CSS盒模型。
1. 内容区域（content），元素的实际内容。
2. 内边距（padding），内容区域与边框之间的空间。
3. 边框（border），内边距与外边距之间的边框线。
4. 外边距（margin），边框与相邻元素之间的空间。
三、CSS布局。
1. 相对定位（relative），相对于元素原本位置进行定位，不影响其他元素的位置。
2. 绝对定位（absolute），相对于最近的已定位父元素进行定位，若无则相对于文档进行定位。
3. 固定定位（fixed），相对于浏览器窗口进行定位，元素固定在页面上的位置不变。
4. 浮动（float），使元素脱离文档流，可以实现多列布局。
5. 弹性布局（flexbox），通过设置容器和项目的属性，实现灵活的布局效果。
四、常用CSS属性。
1. 字体属性，font-family、font-size、font-weight等。
2. 文本属性，color、text-align、text-decoration等。
3. 背景属性，background-color、background-image、background-size等。
CSS基础学习笔记⼀、导⼊样式表：当想要将样式运⽤到整个⽹站⽽不是单张页⾯时，管理样式的更好的⽅法是将它们从⽹页中分离出来，放到称作样式表的独⽴⽂件中，以便在需要时导⼊。
(1).使⽤CSS的@immport指令导⼊样式表：<style>@import url(;styles.css');</style>(2).从HTML内部导⼊样式表：<link rel='stylesheet' type='text/css' href='styles.cdd' />(3).嵌⼊样式:<div style='font-style:italic; color:blue;'> Hello there</div>⼆、CSS规则：CSS规则是指⼀条或⼀系列语句，⽤以告诉⽹页浏览器怎样在页⾯上渲染某个或某些元素。
CSS规则中的每条语句以选择器开始，指定施加规则的元素。
规则中所有要修改的属性必须在选择器后⾯的"{"和"}"内出现。
例如，要将⼀号标题改为红⾊并放⼤24%：h1 { font-size:240%; color:red; }三、CSS选择器⽤于在页⾯上访问⼀个或多个元素的⽅法称为选择，在CSS规则中的这⼀部分被称为选择器。
(1) 类型选择器：类型选择器为HTML元素指定类型，像<p>、<div>等：p { text-align:justify; }(2) 后代选择器：允许将样式施加在那些包含在其他元素的元素之上：p b { color:red; }(3) ⼦选择器：与后代选择器类似，但具有更具有强制性，仅选择那些作为其他元素的直接⼦元素：p > b { color:red; }(4) 相邻选择器：对应于同⼀级上前后相邻的元素，在它们之间不存在别的元素，但可以有⽂本：i + b { color:red; }(5) id选择器：如果给元素设置⼀个id(例如，id='mydiv')，就可以使⽤id直接从CSS访问它：#mydiv { font-style:italic; }(6) 类选择器：当在⼀个页⾯中有许多元素要使⽤相同样式时，可以赋予它们相同的类名(例如，class='myclass')，然后创建⼀个规则来⼀次性改变所有这些元素：.myclass { margin-left:10px; }此外，还可以通过明确元素类型的⽅式来缩⼩类的范围。
css总结笔记
CSS 是层叠样式表的缩写，是一种用于设计和布局网页的编程语言。
以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页，可以让网页变得更加生动、美观和易读。
CSS 可以用于网页的头部、主体和底部，以及用于网页的各个部分。
二、CSS 的语法
CSS 的语法包括选择器、属性和值等。
选择器用于选择网页中的元素，属性和值用于设置元素的样式。
三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。
通过设置这些样式，可以让网页变得更加美观。
四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。
为了解决这个问题，可以使用CSS 的媒体查询和伪元素等方法。
六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。
可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。
七、CSS 的拓展
CSS 还有很多拓展功能，如响应式设计、动画效果、Web 组件等。
通过使用CSS，可以让网页变得更加生动、美观和易读。
八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
在学习 CSS 时，需要熟练掌握语法、样式和应用场景，并了解 CSS 的兼容性和拓展功能。
css常见问题超详细笔记以下是一些常见的CSS 问题及其详细笔记：1. 选择器问题•ID 选择器：使用# 符号，例如#myId。
◦ 类选择器：使用 . 符号，例如 .myClass。
◦ 元素选择器：直接使用元素名，例如div。
◦ 组合选择器：可以使用后代选择器div p 选择div 内的所有p 元素。
2. 盒模型问题•标准盒模型：width = content + padding + border，height = content + padding + border。
◦ IE 盒模型：width = content + border，height = content + border。
可以通过box-sizing: border-box; 使盒子模型变为标准盒模型。
3. 浮动问题•当一个元素设置为浮动后，它会脱离文档流，并且其后的元素会围绕它布局。
◦ 使用clear 属性可以清除浮动，使元素恢复到正常文档流中。
4. 显示隐藏问题•使用display: none; 可以隐藏元素，并且不占据文档流中的空间。
◦ 使用visibility: hidden; 可以隐藏元素，但仍然占据文档流中的空间。
5. 定位问题•相对定位：使用position: relative; 可以使元素相对于其正常位置进行定位。
◦ 绝对定位：使用position: absolute; 可以使元素相对于最近的已定位祖先元素进行定位（如果没有则为<html>）。
◦ 固定定位：使用position: fixed; 可以使元素相对于浏览器窗口进行定位。
6. CSS3 动画问题•使用transition 属性可以平滑地过渡元素的样式变化。
◦ 使用animation 属性可以创建复杂的动画效果。
7. CSS 单位问题•px (像素)：最常用的单位，但实际上是相对单位，不是绝对像素。
◦ em (相对单位)：相对于当前元素的字体大小。
一、文本前前三层：1、Html：超文本标记语言，从语义的角度描述页面的结构2、Css：层叠样式表，从审美的角度来描述页面的样式3、Js：JavaScript，从交互的角度来描述页面的行为二、Css整体感知：Css：cascading style sheets 层叠样式表三、在html中添加css样式的方式：1、外部引入式（整体建议使用）：<link rel="stylesheet" href="css/01.css">2、文档内嵌式：3、元素内嵌式（整体结束后，有一些部分需要调整）：四、Css常见属性：1.字体颜色：color：red；2.字号大小：font-size：60px; px是像素的单位3.背景颜色：background-color：blue;4.加粗：font-weight：bold; weight：重量；bold：粗；Normal：去除加粗5.斜体：font-style：italic;6.下划线：Text-decoration：underline; decoration：装饰；underline 下划线；None 去除下划线7.列表样式：list-style：none（无样式）8.设置水平方向居中：text-align：center9.Font属性：1)加粗：font-weight：blod2)斜体：font-style：italic3)字号大小：font-size：10px4)颜色：Color：red5)字体：Font-amily：”宋体”6)行高：line-height：10pxa)把行高和高度设置一致，就可以把文字在垂直方向居中显示7)综合属性：Font：900 30px/20px “微软雅黑”代表：加粗字体大小/行高字体8)Border：thin细线、medium中粗线、thick粗线、dotted 点状虚线、double 双线Outset：3D外嵌、groove 3D沟槽状边框、ridge：脊状边框10.Background属性1)背景图片：Background-image：url（images/007.jpg）URL：（uniform resource locator）统一资源定位符如果不设置其他，组图片会铺满屏幕2)背景颜色：background-color：red3)背景重复属性：background-repeat：no-repeat（不重复）Repeat-x/y（在x/y轴上重复）4)综合属性：background：url（images/007.jpg）no-repeat五、选择器：1、标签选择器：直接在标签上写上名字。
css相关笔记【原创实用版】目录1.CSS 概述2.CSS 的基本语法3.CSS 选择器4.CSS 的盒模型5.CSS 的布局6.CSS 的样式7.CSS 的动画正文CSS，全称层叠样式表（Cascading Style Sheets），是一种用于描述HTML 或 XML 文档样式的样式表语言。
它是一种用来控制网页样式和布局的语言，使得网页开发者能够轻松地为网页设置字体、颜色、大小、间距、边框等样式。
CSS 的基本语法非常简单，主要由选择器（selector）、属性（property）和值（value）三部分组成。
例如：“p {color: red;}”，其中，“p”是选择器，表示所有段落元素；“color”是属性，表示文字颜色；“red”是值，表示文字颜色为红色。
CSS 选择器是 CSS 的核心功能之一，它可以用来选择需要应用样式的 HTML 元素。
CSS 选择器有很多种，包括标签选择器、类选择器、ID 选择器等。
例如，“p”是标签选择器，表示所有段落元素；“.classname”是类选择器，表示所有具有指定类名的元素；”#idname”是 ID 选择器，表示具有指定 ID 的元素。
CSS 的盒模型是 CSS 中一个重要的概念，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
开发者可以通过设置这四个部分的样式，来控制元素在页面上的布局和显示效果。
CSS 的布局方式有很多种，包括浮动（float）、定位（position）、弹性盒子（flexbox）等。
开发者可以根据页面的需求，选择合适的布局方式。
CSS 的样式包括字体、颜色、大小、间距、边框等，开发者可以通过设置这些样式，来控制页面的显示效果。
CSS 的动画是一种可以让页面元素产生动态效果的技术，包括过渡（transition）、变换（transform）和动画（animation）等。
1-CSS初体验层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
提示：属性名和属性值成对出现→键值对。
02-CSS引入方式•内部样式表：学习使用o CSS 代码写在 style 标签里面•外部样式表：开发使用o CSS 代码写在单独的 CSS 文件中（.css）o在 HTML 使用 link 标签引入•行内样式：配合 JavaScript 使用o CSS 写在标签的 style 属性值里03-选择器作用：查找标签，设置样式。
标签选择器标签选择器：使用标签名作为选择器→选中同名标签设置相同的样式。
例如：p, h1, div, a, img......注意：标签选择器无法差异化同名标签的显示效果。
类选择器作用：查找标签，差异化设置标签的显示效果。
步骤：•定义类选择器→.类名•使用类选择器→标签添加class="类名"注意：•类名自定义，不要用纯数字或中文，尽量用英文命名•一个类选择器可以供多个标签使用•一个标签可以使用多个类名，类名之间用空格隔开开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。
id选择器作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般配合 JavaScript使用，很少用来设置 CSS 样式步骤：•定义 id 选择器→ #id名•使用 id 选择器→标签添加 id= "id名"规则：同一个 id 选择器在一个页面只能使用一次。
通配符选择器作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。
css100个必背知识点CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等各个方面。
对于前端开发者来说，掌握CSS的基本知识是非常重要的。
下面是100个必背的CSS知识点，希望对大家有所帮助。
1. CSS是一种样式表语言，用于描述网页的外观和样式。
2. CSS可以通过选择器来选择HTML元素，并为其应用样式。
3. CSS样式可以通过内联样式、内部样式表和外部样式表来定义。
4. 内联样式是直接在HTML元素的style属性中定义的样式。
5. 内部样式表是在HTML文档的head部分中定义的样式。
6. 外部样式表是一个独立的CSS文件，通过link标签引入到HTML 文档中。
7. CSS选择器可以根据元素的标签名、类名、ID等属性来选择元素。
8. 标签选择器可以选择指定标签名的所有元素。
9. 类选择器可以选择具有指定类名的元素。
10. ID选择器可以选择具有指定ID的元素。
11. 后代选择器可以选择指定元素的后代元素。
12. 子元素选择器可以选择指定元素的直接子元素。
13. 相邻兄弟选择器可以选择指定元素的下一个兄弟元素。
14. 伪类选择器可以选择元素的特定状态或位置。
15. 伪元素选择器可以选择元素的特定部分。
16. CSS样式可以通过属性和值来定义。
17. 属性是用于描述元素的特性，如颜色、字体、边框等。
18. 值是属性的具体取值，如红色、宋体、1px等。
19. CSS样式可以通过简写属性来定义，如font、border等。
20. CSS样式可以通过继承来应用到子元素。
21. CSS样式可以通过层叠来决定最终的样式。
22. CSS样式可以通过优先级来决定应用的顺序。
23. 内联样式的优先级最高，其次是ID选择器、类选择器和标签选择器。
24. 伪类选择器的优先级比类选择器和标签选择器高。
25. 伪元素选择器的优先级比伪类选择器高。
26. !important关键字可以提高样式的优先级。
css3知识点总结CSS3知识点复习整理一、css3模块1.选择器2.框模型3.背景和边框4.文本效果5.(2D、3D)转换6.动画7.多列布局8.用户界面二、css3边框1.border-radius2.box-shadow3.border-image三、css3背景1.background-size2.background-origin3.background-clip四、文本效果1.text-shadow2.word-wrap五、css3字体@font-face网络字体，可自行更改。
六、2D转换1.translate:通过 translate() 方法，元素从其当前位置移动，根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数2.rotate:通过 rotate() 方法，元素顺时针旋转给定的角度。
允许负值，元素将逆时针旋转。
3.scale:通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度(X 轴)和高度(Y 轴)参数4.skew:通过 skew() 方法，元素翻转给定的角度，根据给定的水平线(X 轴)和垂直线(Y 轴)参数5.matrix:matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
七、3D转换1.rotateX()：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
2.rotateY()：通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
八、CSS3过渡通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：1.规定您希望把效果添加到哪个 CSS 属性上2.规定效果的时长九、CSS3动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
Css 学习笔记CSS 学习笔记1.什么是 CSS ? CSS 全称层叠样式表 (Cascading Style Sheets) 样式(css)定义如何显示 HTML 元素 样式(css)通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一2. 不同 Css 样式的优先级顺序一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中 数字 4 拥有最高的优先权。
1. 2. 3. 4.浏览器缺省设置 外部样式表 内部样式表（位于 <head> 标签内部） 内联样式（在 HTML 元素内部）因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优 先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明， 或者浏览器中的样式声明（缺省值）。
3. css 的构成Css 主要由三部分构成 一、 选择器 （选择器通常是您需要改变样式的 HTML 元素） 二、 花括号 {选择器后面紧跟花括号，声明放在在花括号内} 三、 声明 声明由属性与属性值组成，每个属性有一个值。
属性和值被冒号分开 每条声明后面加一个分号间隔。
如：Css 学习笔记4. 选择器的分组将要分组的选择器集中到一起，用逗号分隔。
如：h1,h2,h3,h4,h5,h6{ color: green; }5.派生选择器（上下文选择器）派生选择器根据文档的上下文关系来确定某个标签的样式 如：li strong{ font-style: italic; font-weight: normal;} 此规则表示 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定 义特别的 class 或 id，代码更加简洁。
6.id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
css学习笔记11.1什么是CCSS翻译为“层叠样式表”或者“级联样式表”，简称样式表。
1.2CSSS的主要作用它主要是用来给HTML网页来设置外观或者样式外观或者样式：HTML 网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片！31.3书写CCSSS的语法规则,h1{color:red;fornt-size:14px;}2.css代码的书写方式12.1什么是书写方式Css代码应该书写在什么地方！书写方式分为三种：嵌入式、外链式、行内式22.2嵌入式什么是嵌入式？KeyvaluesvaluesKey选择器声明声明<head><styletype=”text/css”>/*书写CSS代码*/选择器{属性:值;属性:值;}</style></head>Eg:如果我们使用的是HTML5的文档type属性可以省略不写！32.3什么是外链式？Css文件不能单独的运行，必须依赖HTML文件！语法格式：<linkrel=”stylesheet“type=”text/css”href=”CSS文件的地址“>代码示例：我们一定要确认.css文件被引入，怎么确认？42.4什么是行内式？语法格式：总结：使用嵌入式的方式来书写css代码，它只能作用域当前的HTML文件使用外链式的方式来书写css代码，它可以作用于多个HTML3.注释格式：/*注释内容*/Sumlime快捷键注释Ctrl+Shift+/注意：Css中只能使用/**/注释❌<!---->不能使用4.选择器14.1什么时选择器选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器24.2基本选择器4.2.1通用选择器：4.2.3类选择器4.2.4Id选择器34.3复合选择器4.3.1多元素选择器4.3.2后代元素选择器效果：4.3.3子元素选择器效果图：4.3.4相邻元素选择器效果图：5．尺寸样式属性Eg:6.文本与字体属性16.1文本属性26.2字体属性7.列表样式属性：这里的列表指的是：无序列表和有序列表因为在整个网页布局中无序列表是使用的最多的。
Day01一.CSS2.0(Cascading Style Sheet)层叠样式表1.作用：CSS用来修饰网页的(网页表现)w3c规定尽量用css样式替代XHTML的属性2.css的使用a.内部样式(写在网页的头部)<style>.......</style>b. 内联样式(写在网页标记中)<标记名称style="css代码"/><标记名称style="css代码">...</标记名称>c.外部样式<link type="text/css" rel="stylesheet" href="css样式URL" media="all|print|screen|tv"/>(1)type :链接页面的文档类型(2)rel:当前文档和目标文档的关系(3)href:css样式目标页面(4)media:根据媒体类型使用不同的css样式all所有|screen计算机屏幕|tv电视|print打印机说明：内联样式优先级最高,如果内部样式和外部样式冲突，后面的覆盖前面的样式3.css的语法结构选择器{属性:值;属性:值;...}selector{attrbute:value}4.选择器（selector）(1)通配选择器==== *(自动应用所有标记)(2)标记（类型）选择器==== 标记名称(自动应用指定标记)(3)class类选择器=== .class名称(手动应用任意标记中,一个标记中多个class名称用空格隔开)应用:在标记中属性class="class名称"(4)id选择器==== #id名称(手动应用唯一标记中)应用:在标记中属性id="id名称"(5)群组选择器=== 选择器名称,选择器名称...(多个选择器有相同属性的缩写)(6)后代选择器=== 选择器名称选择器名称(两个选择器至少是父子关系)(7)子代选择器=== 选择器名称>选择器名称(两个选择器必须是父子关系)5.颜色值a.单词字符：red红,green绿...b.十六进制: #ff0000 ===#f00 红色c.rgb()：rgb:分别是red,green,blue0-255或百分比例如:红色: #f00 rgb(255,0,0) rgb(100%,0%,0%)绿色：#0f0 rgb(0,255,0)蓝色：#00f rgb(0,0,255)黄色: #ff0 rgb(255,255,0)白色: #fff rgb(255,255,255)黑色: #000 rgb(0,0,0)浅灰: #eee rgb(230,230,230)深灰：#333 rgb(3,3,3)6.文本样式1(1)文本颜色color:颜色值(2)文本大小font-size:value (单位：像素px,em:网页默认字体大小的比例例如：1.5em默认字体的1.5倍)(3)文本加粗font-weight:normal|bold|值(100-900)(normal==400 bold==700)(4)文本倾斜font-style:normal|italic(5)文本字体font-family:宋体,微软雅黑,'Times New Roman'(6) text-decoration:none|underline下划线|overline上划线|line-through删除线7.选择器优先级标记选择器权值0001class类选择器权值0010id 选择器权值0100内联样式权值1000说明：选择器权值越大优先级有高，样式显示选择器优先级高的继承的样式优先级最低,如果权值相同后面的覆盖前面的样式!important 的优先级最大Day02一.伪类选择器：a.行为伪类:link：链接未访问状态:visited：链接已访问状态:hover:设置鼠标悬停状态:active:设置鼠标激活状态说明: LVHA 顺序设置工作：a{color:#333;text-decoration:none;}a:hover{color:#f00;text-decoration:underline;}:focus 设置获得光标效果去掉文本框默认边框:focus{outline:none;}b.UI元素伪类:checked：设置元素选择状态:disabled:设置元素禁止状态:enabled:设置元素启用状态二.伪元素选择器:before:after例如：:before{content:"内容"|url(图像URL);}三.布局样式中盒子属性：1.width:宽度2.height：高度div标记：块元素，宽度是父级百分之百span标记：行元素,宽度是元素的宽度说明：行元素不能设置宽高，只能给块元素设置宽高，及有宽高属性的元素设置img,input等3.padding:内边距（边框和内容的距离）padding-top:value 上内边距padding-right:value 右内边距padding-bottom:value 下内边距padding-left:value 左内边距缩写：padding:value 上下左右一个值padding:value value 上下左右padding:value value value上左右下padding:value value value value上右下左说明：padding 会撑大盒子，并且只有正值没负值4. margin:外边距（元素边框的外围）margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:左外边距缩写：margin:value 上下左右一个值margin:value value 上下左右margin:value value value上左右下margin:value value value value上右下左说明:a.有正值，负值，autob.margin:0 auto;实现盒子块元素的水平居中c.将盒子中的空隙清除margin:0, padding:0d.两个元素上下margin冲突取大值左右冲突值相加e.嵌套元素，子元素会将上下margin值传递给父元素，如果父元素和子元素margin冲突取大值5. border (边框)border-top-width:上边框宽度border-top-sytle:上边框样式(实线solid, 虚线dashed,点线dotted,双线double) border-top-color:上边框颜色border-right-width:右边框宽度border-right-sytle:右边框样式border-right-color:右边框颜色border-bottom-width:下边框宽度border-bottom-sytle:下边框样式border-bottom-color:下边框颜色border-left-width:左边框宽度border-left-sytle:左边框样式border-left-color:左边框颜色缩写1border-width:value 四个方向的宽度border-width:value value 上下左右border-width:value value value上左右下border-width:value value value value上右下左border-style:value 四个方向的样式border-color:value 四个方向的颜色缩写2border:width style color例如：border:2px solid #f00;6.盒子的总宽度计算总宽度= 左外边距+左边框+左内边界+盒子width+右内边界+右边框+右外边距四.文本样式2font:font-style 倾斜|font-variant 小号的大写字母|font-weight 加粗|font-size 字大小|line-height 行高|font-family 字体font-style:normal|italicfont-variant:normal|small-caps小号的大写字母font-weight:normal|bold|值(100-900)normal==400 bold==700font-size:value (单位: px, em)font-family:宋体,Arial,'Times New Roman';line-height:value 行高说明:元素的行高等于盒子的高度，实现元素的垂直居中text-align:left|center|right元素的水平对齐text-decoration:none|underline|overline|line-throughtext-transform:none|capitalize首字母大写|uppercase 大写字母|lowercase 小写字母text-indent: value (单位px em)首行缩进说明：只能对块元素使用text-indent五.浮动（Float）float:left左浮动|right右浮动|none不浮动说明:1.元素浮动脱离文档流(不占位),无论是左浮动还是右浮动靠在含边框的边界或浮动盒子上才停止编辑2.设置块元素浮动，宽度会缩到和内容一样宽度3.设置行元素浮动，可以设置宽高4.设置元素浮动对后面元素的影响是实现文字环绕六.清除浮动clear:both 清除两边浮动|left 清除左浮动|right 清除右浮动说明：高度塌陷：父元素中的子元素都浮动，并且没有设置父元素的高度，父元素高度为0解决方法：a. clear:both （父级中的子级盒子）b.万能清除（给父级加样式）.clear{clear:both;zoom:1;}.clear:after{content:'.';display:block;clear:both;height:0;visibility:hidden;}七.布局显示(1) display:none|block 块inline 行inline-block 内联块说明：inline-block 属于块元素，能设置宽高，但是还具有行元素不自动换行的功能display:none 不显示，脱离文档流（不占位）(2) visibility：visble 默认值| hidden 隐藏说明：visibility:hidden 占文档流(占位)Day03一.背景(background)background-color:value 背影颜色background-repeat:repeat(重复默认值)|repeat-x 水平重复|repeat-y 垂直重复|no-repeat 不重复background-image:url(图片路径)背影图片background-attachment:scroll(滚动)|fixed(固定)background-position:value(水平位置) value(垂直位置)说明:a.水平位置值:left center right垂直位置值：top center bottomb.当background-position有一个值代表水平方向，垂直方向默认垂直居中例如:background-position:right;//center水平居右垂直居中c. background-position: 数值数值如果是正值背景图片往右，负值往左缩写：background:color image repeat attachment position;二. 图片精灵(图片整合) css sprites1.原理：将多张小背景图片整合到一张大图中2.作用：减少服务器请求，客户端显示每张图片都要向服务器请求，为了减少服务器请求将图片整合三.无序，有序列表list-style-type:disc :circle :CSS1 空心圆|square :CSS1 实心方块|decimal :CSS1 阿拉伯数字|lower-roman :CSS1 小写罗马数字|upper-roman :CSS1 大写罗马数字|lower-alpha :CSS1 小写英文字母|upper-alpha :CSS1 大写英文字母|none :CSS1 不使用项目符号list-style-image:none|url(图片路径)list-style-position:outside|inside缩写list-style:type image position例如：list-style:none;(重要)list-style:url(1.jpg) inside;工作中：background:url(images/dot.gif) no-repeat 0px -96px;padding-left:12px;Day04布局：文档流布局浮动布局定位布局一.定位(Position)(1)属性值a. static(默认值):标准文档流b. fixed(固定定位):脱离文档流(不占位)，通过top,left,right,bottom属性定位置c. absolute(绝对定位)：脱离文档流(不占位)，通过top,left,right,bottom属性定位置说明：默认情况坐标在浏览器的左上角，通过左上角移动位置d. relative(相对定位)：通过自身文档流定位（位置保留），通过top,left,right,bottom属性定位置说明:默认情况坐标在自身盒子的左上角工作中：给父元素或祖先加相对定位(relative),实现坐标定位到自身盒子的左上角,然后给子元素加绝对定位(absolute),最后对子元素通过top,left,right,bottom实现移动效果(2) z-index (实现层排序)说明：z-index属性只能有fixed,absoluterelative 属性值时使用可以是正值，负值；默认值是0值越大定位层越在上面二.透明度属性(1) opacity:0~1;(支持的浏览器：chrome谷歌，firefox火狐，safari苹果浏览器,opera欧朋)说明：透明度属性值0 代表完全透明1 代表不透明(2) filter:alpha(opacity=1~100)(支持的浏览器:IE)Day05一.定位(Position)（1）属性值static：默认值（标准文档流）fixed(固定定位):脱离文档流(不占位),通过top,left,right,bottom属性移动absolute(绝对定位):脱离文档流(不占位),通过top,left,right,bottom属性移动说明:默认坐标在浏览器的左上角，通过左上角坐标来移动fixed 有滚动条时与absolute有区别relative(相对定位):根据自身文档流定位(保留位置)说明：默认坐标自身盒子的左上角工作中:首先给父元素或祖先一个相对定位，实现默认坐标在自身盒子的左上角，然后再子元素绝对定位（在自身盒子的基础上移动），子元素通过top,left,right,bottom属性移动二.透明度(1) opacity:0~1说明: chrome(谷歌)，firefox(火狐)safari (苹果浏览器),opera（欧朋）(2)：filter:alpha(opacity=1~100)说明：IE支持三.Hack技术(针对不同浏览器兼容问题解决方法)(1)条件注释表示法<!--[IF IE]>...<![ENDIF]--><!--[IF IE 6]>只有IE6.0支持的内容<![ENDIF]-->(2)属性前缀表示法* 只有IE6.0 和IE7.0 例如: *background_ 只有IE6.0 例如_background(3)选择器前缀表示法*html标记{...} 只有ie6支持*+html标记{...} 只有ie7支持四.overflow属性：overflow:visible 默认值|auto |hidden |scrollauto :在必需时对象内容才会被裁切或显示滚动条hidden:不显示超过对象尺寸的内容scroll :总是显示滚动条总结:1.css样式链接方法（内部链接，外部链接，内联样式）2.选择器(通配符选择器标记选择器class类型选择器id 选择器群组选择器后代选择器子代选择器)3.伪类选择器4.盒子属性（width,height,padding,margin,border,background）5.全局样式6.布局中浮动7.布局定位8.hack 兼容。
