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后面
<!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):
<!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>让我们自己算算:
<!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类也可以使用伪类:
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 类配合使用:
如果在上面的例子的链接已被访问,它会显示为红色。
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属性选择一个开始值 |