元素
从分类上，2种元素
1. 可被置换：没有内容
2. 非被置换的：有内容
从表现上，2种元素
1. 块级元素：
2. 行级元素：
CSS简介
CSS在HTML位置中的三种方式
1. 放在head中<head>，通过style标签指定
<head>
<style>B {text-transform: uppercase}</style>
</head>
selector: B
2. 放在body中，通过普通标签加上style，class及id属性来指定，扩展或覆盖普通标签的基本特征
<p style=”font-size: x-large”>
selector: p
在body中，也可以通过<span>及<div>特定的标签加上style，class及id属性指定
<div class=”test”>
3. 单独一个外部文件，通过link标签来指定
<link rel=’stylesheet’ href=’formatting.css’ type=’ text/css’>
应用CSS的4个HTML标签及3个HTML属性：
l <style><span><div><link>
l style, class, id
<span>是一个行级样式，用于临时覆盖已经定义好的样式。<div>也一样，但主要用于块级元素。
行级元素，指在一行内所出现的HTML标签，如<b>，<i>等，这些元素在屏幕上并不导致重新开始或结束一行。块级元素，如<p>，<h1>等，将导致重新开始或结束一行。
内联样式在定义两个以上的样式时，样式之间需要以“;”隔开。
几种CSS的优先顺序：
1. 父辈的样式将被子辈的样式继承
2. 按明示的权重排序，而标有!IMPORTANT的样式具有最高权重。
3. 通过<link>导入的标签，将被本页中的样式覆盖。
4. 特定的样式覆盖一般的样式
5. 具有相同权重的样式，最后出现的样式覆盖之前的样式。
CSS:
Cascade Styled Sheet
<class>的定义：
1. 与具体标签挂钩，只能被所定义的标签使用。如
h1.red {color: red}
h1.green {color: green}
h1.blue {color: blue}
2. 不与具体标签挂钩，可被任何标签使用。如
.red {color: red}
.green {color: green}
.blue {color: blue}
CSS格式与语法
CSS基本语法
l 选择器 {声明; | 声明; …}
声明中，如果有多项属性的，以空格隔开。唯一例外:
font: large/150% sans-serif;
l 组合：
Ø 选择器组合
h1, h2, h3 {font-family: Arial;}
Ø 声明组合
p1, p2, p3 {font-family: Arial;}
Ø 选择器 + 声明的组合
h1, h2, h3 {font-family: Arial; font-size: x-large;}
l 文档通配选择器(CSS2)：适用于文档下所有元素，但级别低于任何已经定义好的元素
* {color: red;}
class及id选择器
可将基本元素进行更细化的分类。
l class选择器
1. 定义: .warning {color: red} = *.warning {color: red}，可用于所有元素
使用: <p class=”warning”>This is a warning paragraph.</p>
<h1 class=”warning”> This is a warning h1.</h1>
2. 定义: p.warning {color: red}，只用于特定元素
使用: <p class=”warning”>This is a warning paragraph.</p>
3. 多类。
定义：.warning {font: bold;} ------------------------------à (a)
.urgent {font: italic;} -------------------------------à (b)
.warning.urgent {background: silver;} ----------à (c) 同时符合两个条件时(注意，类选择器中间不能有空格)
使用：[顺序无关紧要]
<p class=”urgent warning”>This paragraph contains multiple class selector.</p>
注意：IE bug: 在IE中，对于以上(a), (b), (c)三种定义，<p class=”urgent warning”>与<p class=”urgent”>均将背景设为silver。而正确的应是，只有在同时符合两个条件，即<p class=”urgent warning”>，才能设为silver。IE显然将(c)解释为只要符合两个条件其一即可。
l id选择器
在CSS中，id选择器可以被多次使用，但HTML要求同一网页中只能有一个唯一的id出现。id选择器大小写敏感。
定义：#warning {font: bold;}
使用：<p id=”warning”>A warning paragraph.</p>
属性选择器 [IE不支持]
1. 简单属性选择器：
h[class] {color: red;}
h[class][title] {color; red;}
2. 有属性值的属性选择器：
h[class=”warning”] {color: red;}
h[class=”warning”][title=”important”] {color: red;}
3. 匹配部分属性值的属性选择器：
h[class~=”warning”] {color: red;}
4. 匹配特定属性的属性选择器：
*[lang|=”en”] {color: red;}
相邻元素选择器
1. 普通下属选择器：应用于在DOM中具有上下级结构的两个以上的元素，不管是否直接父子关系
p em {color: red;}
2. 父子关系选择器：应用于在DOM中具有父子结构的两个以上的元素 [IE不支持]
h1 > strong {color: red;}
3. 相邻兄弟选择器：应用于在DOM中具有相邻兄弟结构的两个以上的元素 [IE不支持]
h1 + p {margin-top: 0;}
伪类选择器及伪元素选择器
l 伪类选择器
1. <a:XXX>：决定链接如何显示。
定义的顺序很重要：link -> visited -> focus -> hover -> active [lvfha]
a:link – 正常状态 [静态]
a:visited – 被点击后 [静态]
a:focus – 获得输入焦点时 [动态]
a:hover – 鼠标停留时 [动态]
a:active – 被点击时 [动态]
注意：动态的伪类可被所有元素使用，但在IE中，只有<a>元素才能使用动态的伪类。
2. first-child：选择作为其他元素第一个子元素的那个元素 [IE不支持]
p:first-child {color: red;}
3. lang：选择语言 [IE不支持]
*:lang(en) {color: red;}
4. 伪类的组合：
a:link:hover {color: red;}
注意：IE不支持，在上述例子中，它只使a:hover {color: red;}起作用。
l 伪元素选择器
1. first-line：选择元素第一行
p:first-line {}
除去字体、颜色及背景属性外，只能设置以下的属性：word-spacing, letter-spacing, text-decoration, text-transform, line-height, clear。此外，只能出现在选择器的最后。如p:first-line em{}是无效的。
2. first-letter：选择元素第一个字母
p:first-letter{}
除去字体、颜色及背景属性外，只能设置以下的属性：word-spacing, letter-spacing, text-decoration, text-transform, line-height, clear。此外，只能出现在选择器的最后。如p:first-letter em{}是无效的。
3. before：在元素之前产生特定的内容 [IE不支持]
h2:before {content: "[["; color: red;}
4. after：在元素之后产生特定的内容 [IE不支持]
h2:after {content: "]]"; color: red;}
CSS的级联结构
3种级联结构
1. 权重
2. 继承
3. 级联
权重
l 权重的格式
0,0,0,0
1,0,0,1
l 权重的比较
从左到右，逐一比较，大者胜出。
l 权重的计算：
Ø !important的权重最高，格式为：
p {color: green !important; background: yellow;}
Ø 行级样式，权重为1,0,0,0
Ø 对于选择器中每一个id的属性值，加0,1,0,0
例如：#warning {color: red;} /* 权重 = 0,1,0,0 */
Ø 对于选择器中每一个类属性值，属性选择，或伪类，加0,0,1,0
例如：.red {color: red;} /* 权重 = 0,0,1,0 */
*.red {color: red;} /* 权重 = 0,0,1,0 */
/* 通配符的权重为 0,0,0,0 */
a:link {color: red;} /* 权重 = 0,0,1,0 */
[href] {color: red;} /* 权重 = 0,0,1,0 */
Ø 对于选择器中每一个元素，伪元素，加0,0,0,1
例如：h1 {color: red;} /* 权重 = 0,0,0,1 */
p:first-line {color: red;} /* 权重 = 0,0,0,1 */
h1 em {color: red;} /* 权重 = 0,0,0,2 */
Ø 组合及通配选择器不增加权重
l 权重的拆分：
h1, h2, h3 {color: red; font-size: 12px;}
拆分为：
h1 {color: red;}
h1 {font-size: 12px;}
h2 {color: red;}
h2 {font-size: 12px;}
h3 {color: red;}
h3 {font-size: 12px;}
继承
从上到下，但有一例外：<body>的属性可以从下到上传给<html>。
几个不能继承的元素：border及其属性。
继承没有权重，或者说其权重比其他元素的权重都低，包括权重为0的通配符。
级联
规则：
1. 找出所有包含符合给定元素声明
CSS单位
度量单位：
12pt为一个汉字的宽度
绝对度量值：
u inches: 英寸，1英寸=25.4毫米 = 72点 = 6皮卡
u millimeters: 毫米
u centimeters: 厘米，1厘米=10毫米
u picas：皮卡，1皮卡 = 1/6英寸 = 12点 = 4.233毫米
u point: 点，1点= 1/72英寸 = 0.353毫米 （默认情况下，显示器上可变宽度字体的大小为12点，如Times Roman；固定宽度字体大小为10点，如Courier）
相对度量值：
u pixels: 像素，1像素 = 0.25 – 0.35毫米 （显示器长宽的标准度量单位，与显示器与分辨率有关）
u m-length：特定字体，英语单词”m”的宽度
u x-height：特定字体，英语单词”x”的高度
等宽字体的这两个值是相等的
l 长度单位：共有8种，inches(in), millimeters(mm), centimeters(cm), picas(pc), point(pt), pixels(px), m-length(em), x-height(ex).
l 百分比单位：%，相对于屏幕。
颜色表示方法：
1. 颜色名，如blue
2. 6位16进制，如#FFCCFF
3. 精简3位16进制，如#FCF，每位都将被复制一位出来
4. RGB方式，如rgb(255,255,0)
5. 百分比的RGB方式，如rgb(0%,100%,0%)
font属性
<font>标签在HTML 4.0中已被废弃。
l font-family
六个安全的font-family应放在最后: serif, sans-serif, cursive, fantasy, monospace
l font-size
值：
² xx-small | x-small | small | medium | large | x-large | xx-large : 绝对形式，从小到大
² larger | smaller: 相对于已经设定好的设定值
² n + 度量单位
² %
l font-style
是否斜体
值：
² normal | italic | oblique：后两者均为斜体
l font-variant
大小写
值：
² normal | small-caps
l font-weight
设置字体的粗度
值：
² 100 | 200 | 300 | 400(normal) | 500 | 600 | 700(bold) | 800 | 900: 绝对值
² bold | normal
² bolder | lighter: 相对于已经设定好的设定值
l font
设置以上所有字体属性。注意：{font: bold; 40pt; sans-serif;}与{font: 40pt; bold; sans-serif;}将会出现不一样的效果。
颜色
l color
设置颜色
值：
² 颜色名，如blue
² 6位16进制，如#FFCCFF
² 精简3位16进制，如#FCF，每位都将被复制一位出来
² RGB方式，如rgb(255,255,0)
² 百分比的RGB方式，如rgb(0%,100%,0%)
l background-color
设置背景颜色
值：
² 与color一样的5种设置方式
² transparent: 透明
背景图像
l background-image
设置背景图像
值：
² url(img): 如background-image: url(img/boy.gif)
l background-repeat
设置背景图像是否重复
值：
² repeat
² repeat-x
² repeat-y
² no-repeat
l background-attachment
设置窗口滚动时，背景图像是否移动
值：
² scroll
² fixed
l background-position
设置背景图像的位置
值：
² x% y%
² x y
² (left | center | right) | (top | center | bottom)
l background
设置以上所有图像属性，包括background-color。次序无关紧要。
文本
l letter-spacing
设置英语单个字母之间的间隙
值：
² normal
² n + 度量单位
l word-spacing
设置单字之间的间隙
值：
² normal
² n + 度量单位
l line-height
设置行距
值：
² normal
² n + 度量单位
² %
l vertical-align
设置相对于页面上其他元素的文本垂直位置
值：
² baseline
² bottom
² middle
² sub
² super
² text-top
² text-bottom
² top
² n + 度量单位
² %
在IE6中，只有sub, super, top得到支持
l text-align
排列文本
值：
² center
² justify
² left
² right
l text-decoration
修饰文本
值：
² blink: IE 6不支持
² line-through
² none
² overline
² uderline
l text-indent
相对于左边界的第一行的文本缩进
值：
² n + 度量单位 (可为负值)
² %
l text-transform
设置单词大小写
值：
² capitalize: 所有单词的首字母均为大写
² lowercase
² none
² uppercase
边框
三大类：
1. border: 边框
2. margin：外部间距，边框与其他元素的间距
3. padding：内部间距，内部元素与边框的间距
4. clear | float | height | width
l border-style
设置边框类型
值：
² dashed
² dotted
² double
² inset
² groove
² none
² outset
² ridge
² solid
在使用inset, outset, ridge, groove等属性时，注意将border-color的属性设为非黑色，否则看不出立体效果。
l border-color
设置边框颜色
值：
参看颜色
l border-width
设置边框厚度。在IE6中，只设置border-width不行，还必须同时设置border-style；而且边框的宽度将充满整个屏幕的宽度。
值：
² n [ n n n ] : 默认为像素(pixels)度量单位
² n [ n n n ] + 度量单位：必须设置所有需要的度量单位
² n: 所有的边框厚度
² n n: 第一个参数指定顶端及底端的厚度，第二个参数指定左右两边的厚度
² n n n: 第一个参数指定顶端的厚度，第二个参数指定左右两边的厚度，第三个参数指定底端的厚度
² n n n n: 第一个参数指定顶端的厚度，第二个参数指定右边的厚度，第三个参数指定底端的厚度，第四个参数指定左边的厚度(顺时针，从顶端开始)
² thin | medium | thick
l border-bottom
设置边框底端厚度。可设置border-style, border-color, border-width的所有属性。
l border-left
设置边框左边厚度。可设置border-style, border-color, border-width的所有属性。
l border-right
设置边框右边厚度。可设置border-style, border-color, border-width的所有属性。
l border-top
设置边框顶端厚度。可设置border-style, border-color, border-width的所有属性。
l border-bottom-width
设置边框底端厚度。border-bottom可以只设置单边的宽度，而与border-bottom不同的是，border-bottom-width由于必须设置border-style，而border-style将设置所有边的属性，因此，其他的边将用缺省的值来设置。
值：
² n : 默认为像素(pixels)度量单位
² n + 度量单位
² thin | medium | thick
l border-left-width
设置边框底端厚度。border-left可以只设置单边的宽度，而与border-left不同的是，border-left-width由于必须设置border-style，而border-style将设置所有边的属性，因此，其他的边将用缺省的值来设置。
值：
² n : 默认为像素(pixels)度量单位
² n + 度量单位
² thin | medium | thick
l border-right-width
设置边框底端厚度。border-right可以只设置单边的宽度，而与border-right不同的是，border-right-width由于必须设置border-style，而border-style将设置所有边的属性，因此，其他的边将用缺省的值来设置。
值：
² n : 默认为像素(pixels)度量单位
² n + 度量单位
² thin | medium | thick
l border-top-width
设置边框底端厚度。border-top可以只设置单边的宽度，而与border-top不同的是，border-top-width由于必须设置border-style，而border-style将设置所有边的属性，因此，其他的边将用缺省的值来设置。
值：
² n : 默认为像素(pixels)度量单位
² n + 度量单位
² thin | medium | thick
l border
设置边框属性。可设置border-style, border-color, border-width的所有属性。
l clear
设置其他元素不能浮动于其相应的边上。<br clear=”all”>可在设了float属性后真正地另起一行。
值：
² both
² left
² right
² none
l float
设置元素的浮动位置。可将块级元素的断行功能解除掉。注意，当同时设置了margin及float属性后，在IE6中将对margin对齐。
值：
² none
² left
² right
l height
设置元素的高度。适用于非文本对象。
值：
² auto
² %
² n + 度量单位
l width
设置元素的宽度。适用于非文本对象。
值：
² auto
² %
² n + 度量单位
l padding-bottom
设置块级元素中内部元素的底端到边框底端的距离。
值：
² %: 相对于本块级元素的宽度
² n + 度量单位
l padding-left
设置块级元素中内部元素的左端到边框左端的距离。
值：
² %
² n + 度量单位
l padding-right
设置块级元素中内部元素的右端到边框右端的距离。
值：
² %
² n + 度量单位
l padding-top
设置块级元素中内部元素的顶端到边框顶端的距离。
值：
² %
² n + 度量单位
l padding
设置padding-bottom, padding-left, padding-right, padding-top的所有属性值。
值：
² auto
² %
² n [ n n n ] : 默认为像素(pixels)度量单位
² n [ n n n ] + 度量单位：必须设置所有需要的度量单位
² n: 所有的边框距离
² n n: 第一个参数指定顶端及底端的距离，第二个参数指定左右两边的距离
² n n n: 第一个参数指定顶端的距离，第二个参数指定左右两边的距离，第三个参数指定底端的距离
² n n n n: 第一个参数指定顶端的距离，第二个参数指定右边的距离，第三个参数指定底端的距离，第四个参数指定左边的距离(顺时针，从顶端开始)
l margin-bottom
设置元素边框底端到其他元素边框顶端的距离。
值：
² auto
² %: 相对于本元素的宽度
² n + 度量单位
l margin-left
设置元素边框左边到其他元素边框右边的距离。
值：
² auto
² %:
² n + 度量单位
l margin-right
设置元素边框右边到其他元素边框左边的距离。
值：
² auto
² %:
² n + 度量单位
l margin-top
设置元素边框顶端到其他元素边框底端的距离。
值：
² auto
² %:
² n + 度量单位
l margin
设置margin-bottom, margin-left, margin-right, margin-top的所有属性值。
值：
² auto: 接受原来已经设置好的值
² %
² n [ n n n ] : 默认为像素(pixels)度量单位
² n [ n n n ] + 度量单位：必须设置所有需要的度量单位
² n: 所有的边框距离
² n n: 第一个参数指定顶端及底端的距离，第二个参数指定左右两边的距离
² n n n: 第一个参数指定顶端的距离，第二个参数指定左右两边的距离，第三个参数指定底端的距离
² n n n n: 第一个参数指定顶端的距离，第二个参数指定右边的距离，第三个参数指定底端的距离，第四个参数指定左边的距离(顺时针，从顶端开始)
CSS的使用
几条基本原则：
1. 先定义文档结构，再编辑CSS选择器
分享到：
相关推荐
综上所述，这个“CSSDemo资源文件CSS”是一个系统性的CSS学习资源，覆盖了从基础到进阶的多个层面，对于想要系统学习和提高CSS技能的人来说是非常有价值的。通过逐个学习这些案例和笔记，用户可以逐步建立扎实的CSS...
7. **优化与性能**：通过减少不必要的重绘和回流，优化CSS选择器性能，压缩CSS代码，以及正确使用CSS Sprites等技术，提升网页加载速度和性能。 最后，项目提供的"源码+素材"将帮助初学者理解整个动画的构建过程，...
- 配置 CSS 文件：配置项以 "web.css." 开头，后接 CSS 文件的唯一编码，等于输出路径，列出要合并的 CSS 文件。例如： ``` web.css.common = ${BASE_PATH}/css,${BASE_PATH}/css/style.css web.css.index = ${...
1. **选择元素**：使用`document.getElementById()`或`document.querySelector()`等方法选取要实现拖拽功能的`<div>`元素。 2. **事件监听**：添加`mousedown`、`mousemove`和`mouseup`事件监听器。`mousedown`事件...
CSS权威指南第四版是一本关于CSS（层叠样式表）的权威性指南书籍。这本书由Eric A. Meyer和Estelle Weyl共同编写，旨在为网页设计师或文档作者提供关于高级页面样式的实现、提升网站的可访问性以及节省时间和精力的...
首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其看起来像一个独立的层。这通常包括设置边框、背景色、透明度等属性，以及通过`position: absolute`或`position: fixed`来让该...
首先，我们要明白CSS（Cascading Style Sheets）主要用于定义网页的布局和样式，而JavaScript则负责增加动态行为和交互性。在实现拖拽效果时，CSS主要用来设置层的位置和外观，而JavaScript则是实现拖动行为的关键。...
选择器指明要应用样式的元素，声明则包含一个属性和该属性的值，两者之间用冒号隔开，声明结束时使用分号。例如，`p {color: red; font-size: 16px;}` 将所有段落文字设置为红色，字体大小设为16像素。 ### 二、...
要记录用户的皮肤选择，我们可以使用浏览器的本地存储（如localStorage）或cookies。例如，当用户选择一个皮肤时，可以保存对应的CSS文件名： ```javascript localStorage.setItem('selectedSkin', 'css1.css'); ```...
首先，我们要讨论的是CSS（Cascading Style Sheets）技术。CSS是网页设计中用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。在本模板中，CSS3被广泛运用，提供了更多的样式控制和更丰富的视觉...
在创建一个漂亮的HTML网页时，首先要理解HTML的基本元素。例如，`<html>`标签是整个文档的根元素，`<head>`包含元数据如标题，而`<body>`则包含网页的实际内容。内容通常包括头部、段落、列表、链接、图片等元素，如...
不过要注意性能影响，过度使用可能导致页面卡顿。 10. **CSS框架和库**：Bootstrap、Materialize等框架提供了预设的样式和组件，快速构建页面。然而，了解其底层原理并适时自定义，能更好地满足项目需求。 以上是...
1. **选择器**：CSS选择器用于选取我们想要应用样式的HTML元素。在国际象棋源码中，我们可以使用类选择器（如`.chess-square`）来选中所有表示棋盘格子的`div`，或者使用ID选择器（如`#white-king`）来选中特定的...
7. **优化与性能**：为了提高性能，避免不必要的计算，可以在检查五子连珠时只检查最近的几步棋，或者利用缓存减少重复计算。 8. **响应式设计**：为了让游戏适应不同设备和屏幕尺寸，可以利用CSS媒体查询实现响应...
例如，如果要让菜单项横向排列，可以设置`display: inline-block`或其他适当的CSS属性。 总的来说，通过ASP.NET控件重绘和加载自定义CSS，开发者能够摆脱框架提供的默认样式约束，实现更具创新性和个性化的Web界面...
在深入探讨CSS3课程之前，我们首先要理解CSS3是 Cascading Style Sheets（层叠样式表）的第三版，是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的样式语言。CSS3的引入带来了许多新特性，使得网页设计...
- 避免不必要的DOM操作，如使用类选择器而不是直接操作样式属性，减少页面重绘和回流。 - 使用事件委托降低内存占用，例如将点击事件绑定到父元素而非每个图片元素。 通过这些技术，我们可以创建出一个交互性强、...
在CSS3中，3D翻转切换特效是一个引人注目的功能，它为网页设计带来了新的维度和交互体验。这个特效允许元素在两个或多...不过，要谨记在保证功能的同时，也要注意性能优化，避免过度依赖3D变换导致页面加载和渲染缓慢。
当处理大量元素时，避免在`mousemove`事件中遍历所有元素进行检查，而是可以利用`requestAnimationFrame`来控制渲染，减少不必要的计算。 8. **兼容性考虑**： 虽然现代浏览器对CSS和JavaScript的支持已经相当...
"表格布局"是早期网页设计中常见的一种方式，而"品味主题"则意味着我们要打造一个以咖啡文化为主题的网页设计。 首先，让我们深入理解“div+css”。Div（Division）是HTML中的一个容器元素，用于组合其他HTML元素，...