CSS文本字体：
CSS字体属性定义字体，加粗，大小，文字样式。
serif和sans-serif字体之间的区别
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读
CSS字型：
在CSS中有两种类型的字体系列名称：
1.通用字体系列：拥有相似外观的字体系列组合（如：“Serif”或“Monospace”）
2.特定字体系列：一个特定的字体系列（“Times”或“Courier”）
| Generic family | 字体系列 | 说明 |
|---|---|---|
| Serif | Times New Roman Georgia | Serif字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | Arial Verdana | "Sans"是指无 - 这些字体在末端没有额外的装饰 |
| Monospace | Courier New Lucida Console | 所有的等宽字符具有相同的宽度 |
font-family属性：设置文本的字体系列
font-family属性：应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，它将会尝试下一种字体。
注意：如果字体系列的名称超过一个字，它必须用引号，如：font-family："宋体"
多个字体系列是用一个逗号分隔指明：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css字体系列</title> <style> .serif{font-family: "Times New Roman",Times,serif;} .sansserif{font-family: Arial, Helvetica,sans-serif;} </style> </head> <body> <h1>css font-family</h1> <p class="serif">这一段的字体是:Times New Roman</p> <p class="sansserif">这一段的字体是:Arial.</p> </body> </html>
字体样式：主要是用于指定斜体文字的字体样式属性
这个属性有三个值：正常-正常显示文本 斜体-以斜体字显示的文本 倾斜的文字-文字方向一边倾斜（和斜体非常相似，但不太支持）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>字体样式</title> <style> .normal{font-style: normal;} .italic{font-style: italic;} .oblique{font-style:oblique;} </style> </head> <body> <p class="normal">这是一个段落。正常</p> <p class="italic">这是一个段落。斜体</p> <p class="oblique">这是一个段落。斜体</p> </body> </html>字体大小：
font-size属性设置文本的大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体的大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签 <h1>-<h6>表示标题 <p>表示段落
字体大小的值可以是绝对或者相对的大小
绝对大小：
1.设定一个指定大小的文本 2.不允许用户在所有浏览器中改变文本大小 3.确定了输出的物理尺寸时绝对大小很有用
绝对大小：
1.相对于周围的元素来设置大小 2.允许用户在浏览器中改变字体大小
注意：如果你不能指定一个字体的大小，默认大小和普通文本段落一样，是（16px=1em）
设置字体大小像素：
设置文字的大小与像素，让你完全控制文字大小
实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置文字的大小</title> <style> h1{font-size: 40px;} h2{font-size: 30px;} p{font-size: 14px;} </style> </head> <body> <h1>I have a car</h1> <h2>I have a cat</h2> <p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p> <p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p> </body> </html>在上面的例子中，em文字大小是与前面的例子中像素一样。不过如果使用em单位，则可以在所有浏览器中调整字体的大小。虽然可以通过浏览器的缩放工具调整文本的大小，但是这个调整是整个页面，而不仅仅是文本。
用em来设置字体大小：
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此1em的默认大小是16px，可以通过下面这个公式将像素转换为1em：px/16=em
实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置字体的大小</title> <style> h1{font-size: 2.5em;}/*40px/16=2.5em*/ h2{font-size: 1.875em;}/* 30px/16=1.875em */ p{font-size: 0.875em;}/* 14px/16=0.875em */ </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>使用 em 单位，允许在所有浏览器中调整文本大小。 不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。 </p> </body> </html>注意：在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
使用百分比和em组合：
在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用百分比和em组合</title> <style> body{font-size: 100%;} h1{font-size: 2.5em;} h2{font-size: 1.875em;} p{font-size: 0.875em;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p> </body> </html>设置字体加粗：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置字体加粗</title> <style> .normal{font-weight: normal;} .lighter{font-weight: lighter} .thick{font-weight: bold} .thicker{font-weight: 900;} </style> </head> <body> <p class="normal">停泊在昨日离别的码头</p> <p class="lighter">好多梦层层叠叠有斑驳</p> <p class="thick">人在夕阳黄昏后，陪着明月等寂寞</p> <p class="thicker">年少痴狂有时难御晚秋风</p> </body> </html>可以设置字体的转变：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置字体的转变</title> <style> .normal{font-variant: normal;} .small{font-variant: small-caps;} </style> </head> <body> <p class="normal">经过你快乐时少烦恼多</p> <p class="small">My name is Hege Refsnes.</p> </body> </html>在一个声明中的所有字体属性：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>在一个声明中的所有字体属性</title> <style> .ext1{ font:italic bold 32px "楷体"; color: red; } .ext2{ font:normal bold 48px "楷体"; color: green; } </style> </head> <body> <p class="ext1">停泊在昨日离别的码头</p> <p class="ext2">好多梦层层叠叠有斑驳</p> </body> </html>所有CSS字体属性
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
CSS链接：不同的链接可以有不同的样式
链接样式：
1.链接的样式，可以用任何CSS属性（如：颜色 字体 背等） 2.特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
1.a:link 正常，未访问过的链接 2.a:visited 用户已访问过的链接 3.a:hover 当用户鼠标放在链接上时 4.a:active 链接被点击的那一时刻
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>链接样式</title> <style> a:link{color: green;}/*未访问链接*/ a:visited{color: #00ff00;}/*已访问链接*/ a:hover{color: #ff00ff;}/*鼠标移动到链接上*/ a:active{color: #0000ff;}/*鼠标点击时*/ </style> </head> <body> <p><b><a href="http://mp.blog.csdn.net">Vipwxs</a></b></p> <p><b>注意:</b>a:hover 必须在 a:link和a:visited之后，需要严格顺序才能看到效果</p> <p><b>注意:</b>a:active必须在a:hover之后。</p> </body> </html>当设置为若干链接状态时：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
常见的链接样式：
1.根据上述链接的颜色变化的例子，看它是在什么状态
2.让我们通过一些其他常见的方式赚到链接样式
文本修饰：
text-decoration属性主要用于删除链接中的下划线
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本修饰</title> <style> a:link{text-decoration: none;} a:visited{text-decoration: none;} a:hover{text-decoration: underline;} a:active{text-decoration: underline;} </style> </head> <body> <p><b><a href="/css/" target="_blank">This is a link</a></b></p> <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p> <p><b>注意:</b>active必须在hover之后定义是有效的.</p> </body> </html>背景颜色：背景颜色属性指定链接背景颜色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景颜色</title> <style> /*未访问链接*/ a:link{background-color: palevioletred;} /*已访问链接*/ a:visited{background-color: green} /*鼠标移动到链接上时*/ a:hover{background-color: yellow;} /*鼠标点击时*/ a:active{background-color: red;} </style> </head> <body> <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p> <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p> <p><b>注意:</b>active必须在hover之后定义是有效的.</p> </body> </html>添加不同样式的超链接：
!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>添加不同样式的超链接</title> <style> a.one:link{color: #ff0000;} a.one:visited{color: #0000ff;} a.one:hover{color: #ffcc00;} a.two:link{color: #ff0000;} a.two:visited{color: #0000ff;} a.two:hover{font-size: 150px;} a.three:link{color: #ff0000;} a.three:visited{color: #0000ff;} a.three:hover{background-color: #6666ff;} a.four:link{color: #ff0000;} a.four:visited{color: #0000ff;} a.four:hover{font-family: monospace;} a.five:link{color: #ff0000;text-decoration: none;} a.five:visited{color: #0000ff;text-decoration: none;} a.five:hover{text-decoration: underline;} </style> </head> <body> <p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p> <p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p> <p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p> <p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p> <p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p> </body> </html>高级-创建链接框：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>高级-创建链接框</title> <style> a:link,a:visited{ display: block; font-weight: bold; color: #ffffff; background-color: #98bf21; width: 200px; padding: 4px; text-decoration: none; } </style> </head> <body> <a href="/css/" target="_blank">这是一个链接</a> </body> </html>CSS盒子模型(Box Model)：
所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。
盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。
下面的图片说明盒子了模型（Box Model）:
不同部分的说明：
Margin(外边距)：清除边框外的区域，外边距是透明的
Border(边框)：围绕在内边距和内容外的边框
Padding(内边距)：清除内容周围的区域，内边距是透明的
Content（内容）：盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器的高度和宽度，你需要知道的盒子模型是如何工作的？
元素的宽度和高度：
重要：定你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
下边的例子中的元素的总宽度为300px：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型</title> <style> div{ background-color: lightgrey; width: 300px; border: 25px solid green;/*边框*/ padding: 25px;/*内边距*/ margin: 25px;/*外边距*/ } </style> </head> <body> <h2>盒子模型演示</h2> <p>CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。</p> <div>这是盒子的实际内容。有25px 内间距 25px 外边距 25px 绿色边框。</div> </body> </html>让我们自己算算：
300px+50px(左+右填充)+50px（左+右边框）+50px(左+右边距)=450px
试想一下，你只有250px的空间。让我们设置总宽度为250px的元素：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型</title> <style> .ex{ width: 220px; padding: 10px; border: 5px solid gray; margin: 0px; } </style> </head> <body> <img src="image/hetao.jpg" alt="无惨图片" width="250" height="250px"/> <div class="ex">上面的图片是250 px宽。这个元素的总宽度也是250 px。</div> </body> </html>最终元素的总宽度计算公式是：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是：
元素的总高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>链接样式</title> <style> a:link{color: green;}/*未访问链接*/ a:visited{color: #00ff00;}/*已访问链接*/ a:hover{color: #ff00ff;}/*鼠标移动到链接上*/ a:active{color: #0000ff;}/*鼠标点击时*/ </style> </head> <body> <p><b><a href="http://mp.blog.csdn.net">Vipwxs</a></b></p> <p><b>注意:</b>a:hover 必须在 a:link和a:visited之后，需要严格顺序才能看到效果</p> <p><b>注意:</b>a:active必须在a:hover之后。</p> </body> </html>
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写
伪类和CSS类
伪类可以与 CSS 类配合使用：
a
.red
:visited
{
color:
#FF0000
;
}
<
a
class
="
red
"
href
="
css-syntax
.html
">
CSS
语法</
a
>
如果在上面的例子的链接已被访问，它会显示为红色。
CSS - :first - child伪类
您可以使用 :first-child 伪类来选择元素的第一个子元素
注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪类</title> <style> p:first-child{ color: blue; } </style> </head> <body> <p>This is some text.</p> <p>This is some text.</p> <p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p> </body> </html>
匹配所有<p> 元素中的第一个 <i> 元素
在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪类</title> <style> p>i:first-child{ color: blue; } </style> </head> <body> <p>I have a cat<i>strong</i>man.I have a cat<i>strong</i>man.</p> <p>I have a cat<i>strong</i>man.I have a cat<i>strong</i>man.</p> <p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p> </body> </html>
匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪类</title> <style> p:first-child i{ color: blue; } </style> </head> <body> <p>I have a cat<i>strong</i>man.I have a cat<i>strong</i>man.</p> <p>I have a cat<i>strong</i>man.I have a cat<i>strong</i>man.</p> <p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p> </body> </html>
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。
在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪类</title> <style> q:lang(no){ color: blue; } </style> </head> <body> <p>I have a cat<q lang="no">strong</q>man.I have a cat<i>strong</i>man.</p> <p>这个例子中，：lang定义了q元素的值为lang="no"</p> <p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p> </body> </html>使用focus:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>focus的使用</title> <style> input:focus{ background-color: yellow; } </style> </head> <body> <form action="#" method="post"> <p>First name: <input type="text" name="fname"/></p> <p>Last name: <input type="text" name="lname"/></p> </form> <p><b>注意:</b>仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.</p> </body> </html>
所有CSS伪类/元素
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择每个父元素是p元素的第一个p子元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有p元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
