CSS 派生选择器定义strong为斜体

合集下载

CSS样式规则及字体样式

CSS样式规则及字体样式
}
字体样式应用:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体属性</title> <style>
可以通过escape() 来测试属于什么字体。
字体名称
英文名称
Unicode 编码
宋体
SimSun
\5B8B\4F53
新宋体
NSimSun
\65B0\5B8B\4F53
黑体
SimHei
\9ED1\4F53
微软雅黑
Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
p{ font-family:"微软雅黑";}
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
常用技巧:
1. 现在网页中普遍使用14px+。 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。 5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。 6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew。。。

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew。。。

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew。

在CSS3中,可以利⽤transform功能来实现⽂字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本⽂将对此做详细介绍。

⼀.旋转 rotate⽤法:transform: rotate(45deg);共⼀个参数“⾓度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作⽤是顺时针旋转45度。

⼆.缩放 scale⽤法:transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表⽰缩放倍数;⼀个参数时:表⽰⽔平和垂直同时缩放该倍率两个参数时:第⼀个参数指定⽔平⽅向的缩放倍率,第⼆个参数指定垂直⽅向的缩放倍率。

transform:scale(2,1.5):transform:scaleX(2):transform:scaleY(1.5):三.倾斜 skew⽤法:transform: skew(30deg) 或者 transform: skew(30deg, 30deg);参数表⽰倾斜⾓度,单位deg⼀个参数时:表⽰⽔平⽅向的倾斜⾓度;两个参数时:第⼀个参数表⽰⽔平⽅向的倾斜⾓度,第⼆个参数表⽰垂直⽅向的倾斜⾓度。

关于skew倾斜⾓度的计算⽅式表⾯上看并不是那么直观,这⾥借鉴某⼤拿绘制的图举例说明⼀下:⾸先需要说明的是skew的默认原点transform-origin是这个物件的中⼼点skewX(30deg) 如下图:skewY(10deg) 如下图:skew(30deg, 10deg) 如下图:我当初就是看到此图瞬间理解的。

四.移动 translate⽤法:transform: translate(45px) 或者 transform: skew(45px, 150px);参数表⽰移动距离,单位px,⼀个参数时:表⽰⽔平⽅向的移动距离;两个参数时:第⼀个参数表⽰⽔平⽅向的移动距离,第⼆个参数表⽰垂直⽅向的移动距离。

w3school的css教程完整篇

w3school的css教程完整篇

CSS 简介需要具备的基础知识在继续学习之前,你需要对下面的知识有基本的了解:HTML、XHTMLCSS 概述      CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一样式解决了一个普遍的问题HTML 标签原本被设计为用于定义文档内容。

通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是 段落”、“这是表格”之类的信息。

同时文档布局由浏览器来完成,而不使用任何的格式化标签。

由于两种主要的浏览器 (Netscape 和 Internet Explorer) 不断地将新的 HTML 标签和属性 (比如字体标签和颜色属性) 添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样 式(Style)。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。

样式通常保存在外部的 .css 文件中。

通 过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。

作为网站开发者,你能够为每个 HTML 元素 定义样式,并将之应用于你希望的任意多的页面中。

如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

CSS——选择器及三大特性

CSS——选择器及三大特性

CSS——选择器及三⼤特性标签选择器1.什么标签选择器:2.作⽤: 根据指定的标签名称, 在当前界⾯中找到所有该名称的标签, 然后设置属性.3.注意点:*标签选择器选中的是当前界⾯中所有的标签, ⽽不能单独选中某⼀个标签*标签选择器⽆论标签藏得多深都能选中*只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)4.格式标签名称{属性:值;}id选择器1.什么是id选择器:2.作⽤: 根据指定的id名称找到对应的标签,然后设置属性.3.注意点:*每个HTML标签都有⼀个属性叫做id, 也就是说每个标签都可以设置id**<p id="identity">必成⾼富帅</p>*在同⼀个界⾯中id的名称是不可以重复的*在编写id选择器时⼀定要在id名称前⾯加上#*id的名称是有⼀定的规范*在企业开发中⼀般情况下如果仅仅是为了设置样式, 我们不会使⽤id ,因为在前端开发中id是留给js使⽤的类选择器1.什么是类选择器?2.作⽤: 根据指定的类名称找到对应的标签,然后设置属性.3.格式:.类名{属性:值;}4.类名的命名规范和id名称的命名规范⼀样5.类名就是专门⽤来给CSS设置样式的6.在HTML中每个标签可以同时绑定多个类名id选择器和类选择器的区别:*id相当于⼈的⾝份证,是不可以重复的。

class相当于⼈的名称,是可以重复的*⼀个HTML标签只能绑定⼀个id名称,⼀个HTML标签可以绑定多个class名称*id选择器是以#开头,类选择器是以.开头*id选择器⼀般是给js使⽤*为了避免代码冗余,⼀般情况下会将冗余的代码抽取到类加载器中,然后让标签和这个类选择器进⾏绑定后代选择器:1.格式:选择器1 选择器2{属性名:属性值}<!-- 先找到所有名称叫做"标签名称1"的标签,然后再在这个标签下⾯去查找所有名称叫做"标签名称2"的标签,然后设置属性值 div p{} -->2.注意点:*后代选择器必须空格隔开*后代选择器包括⼀切放在指定选择器中的后代*后代选择器不仅仅可以使⽤标签选择器,其他选择器也可以使⽤.p1 p2{}.p1 #i{}*后代选择器可以将空格⼀直沿⽤下去,直到找到指定选择器为⽌div ul li p{color: red;}⼦元素选择器1.什么是⼦元素选择器?2.作⽤: 找到指定标签中所有特定的直接⼦元素, 然后设置属性.3.格式:选择器1>选择器2{属性名:属性值}4.注意点:1.⼦元素选择器只会查找⼉⼦,不会查找其他嵌套的标签2.⼦元素选择器之间需要⽤>符号连接, 并且不能有空格3.⼦元素选择器不仅仅可以使⽤标签名称, 还可以使⽤其它选择器4.⼦元素选择器可以通过>符号⼀直延续下去后代选择器和⼦选择器的区别1.后代选择器使⽤空格作为连接符号; ⼦元素选择器使⽤>作为连接符号2.后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中⼉⼦/孙⼦…; ⼦元素选择器只会选中指定标签中, 也就是只会选中特定的⼉⼦标签。

制作Html页面规范的十大注意事项

制作Html页面规范的十大注意事项

要建立符合标准的网页,DOCTYPE 声明是必不可少的关键组成部分;除非你的 XHTML 确定了一个正确的 DOCTYPE,否则你的标识和 CSS 都不会生效。
XHTML 1.0 提供了三种 DTD声明可供选择:过渡的(Transitional):要求非常宽松的 DTD,它允许你继续使用 HTML4.01 的标识(但是要符合 xhtml 的写法)。
外部调用法:将样式表写在一个独立的.css 文件中,然后在页面 head 区用类似以下代码调用。
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
在符合 web 标准的设计中,我们使用外部调用法,好处不言而喻,你可以不修改页面只修改.css 文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。
补充
DOCTYPE 声明必须放在每一个 XHTML文档最顶部,在所有代码和标识之上。
2.设定一个名字空间(Namespace)
直接在 DOCTYPE 声明后面添加如下代码:
<html XMLns="/1999/xhtml" >
一个 namespace 是收集元素类型和属性名字的一个详细的 DTD,namespace 声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。
调用样式表
用web 标准设计网站,过渡的方法主要是采用 XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合 web标准的网站,不懂 CSS 是设计不出漂亮的页面的。

CSS语法经典手册(CSS指导手册)

CSS语法经典手册(CSS指导手册)

CSS语法手册字体属性1、font-family×能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。

浏览器由前向后选用字体。

语×:{font-family:字体1,字体2, ... ,字体n}2、font-style×能:使文本显示为扁斜体或斜体等表示强调。

数值:normal - 正常italic - 斜体oblique - 偏斜体3、font-variant×能:用于在正常与小型大写字母字体间切换。

数值:normal - 如果该标志继承父元素的small-caps 设置,则关键字normal 将font-variant 设置为正常字体。

small-caps - 把小写字母显示为字体较小的大写字母。

4、font-weight×能:用于设置字体灰度,生成字体的深,浅版本。

数值:正常灰度- normal相对灰度- bold, bolder, light, lighter梯度灰度- 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。

5、font-size×能:用各种度量单位控制文本字体大小。

数值:有四种数值方式绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - small, x-small, small, medium, large, x-large, xx-large。

不同字体有不同的数值。

相对尺寸- larger, smaller,产生的尺寸是相对于父容器字号而言的。

长度- 用毫米(mm),厘米(cm),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。

百分比- 相对于其父元素字体大小的百分比。

6、font×能:简写属性,提供了对字体所有属性进行设置的快捷方×。

CSS样式常见属性单词解释

CSS样式常见属性单词解释
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
ቤተ መጻሕፍቲ ባይዱ
onUnload 当访问者离开网页时产生。
css属性
这个东西,在你需要还原默认值的时候,比较有用。 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原网站制作默认CSS值了。
以前1直在找这份文档,今天偶然在w3上看到了。除了inline和block的定义,主要是要注意 body│h1~h6│blockquote│menu│ul│ol│dd等标签的默认样式(margin和font-size)。
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }

css语法规则

css语法规则

css语法规则CSS语法规则CSS是一种用于网页设计的样式表语言,它可以为HTML文档添加样式和布局。

为了正确地使用CSS,我们需要遵循一些基本规则和语法。

下面是一个全面的、详细的CSS语法规则,以帮助您更好地掌握这门语言。

一、基本概念1. CSS指层叠样式表(Cascading Style Sheets)。

2. CSS样式定义了HTML元素的外观和布局。

3. CSS样式可以通过内部样式表、外部样式表或行内样式来定义。

4. CSS选择器用于选择要应用样式的HTML元素。

二、CSS语法1. CSS规则由选择器和声明块组成。

2. 选择器指定要应用样式的HTML元素。

3. 声明块包含一个或多个声明,每个声明由属性和值组成,属性与值之间使用冒号分隔,每个声明之间使用分号分隔。

4. 外部CSS文件必须以.css扩展名保存,并通过<link>标签在HTML 文档中引入。

5. 内部CSS可以在<head>标签中使用<style>标签来定义,并将其放置在<head>标签中间。

6. 行内CSS可以直接在HTML元素中使用style属性来定义。

三、CSS选择器1. 元素选择器:通过HTML元素名称来选择元素。

例如,p选择器会选择所有的段落元素。

2. ID选择器:通过HTML元素的ID属性来选择元素。

例如,#myid 选择器会选择ID为“myid”的元素。

3. 类选择器:通过HTML元素的class属性来选择元素。

例如,.myclass选择器会选择class为“myclass”的所有元素。

4. 属性选择器:通过HTML元素的属性来选择元素。

例如,[href]选择器会选择所有具有href属性的元素。

5. 伪类选择器:通过HTML元素的状态或位置来选择元素。

例如,:hover伪类可以在鼠标悬停在一个链接上时改变链接的颜色。

6. 组合选择器:将多个不同类型的CSS规则组合在一起,以便同时应用于一个或多个HTML元素。

CSS语法手册(CSS手册)

CSS语法手册(CSS手册)

CSS语法手册字体属性1、font-family×能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。

浏览器由前向后选用字体。

语×:{font-family:字体1,字体2, ... ,字体n}2、font-style×能:使文本显示为扁斜体或斜体等表示强调。

数值:normal - 正常italic - 斜体oblique - 偏斜体3、font-variant×能:用于在正常与小型大写字母字体间切换。

数值:normal - 如果该标志继承父元素的small-caps 设置,则关键字normal 将font-variant 设置为正常字体。

sm all-caps - 把小写字母显示为字体较小的大写字母。

4、font-weight×能:用于设置字体灰度,生成字体的深,浅版本。

数值:正常灰度- normal相对灰度- bold, bolder, light, lighter梯度灰度- 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。

5、font-size×能:用各种度量单位控制文本字体大小。

数值:有四种数值方式绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - sm all, x-sm all, small, m edium, large, x-large, xx-large。

不同字体有不同的数值。

相对尺寸- larger, smaller,产生的尺寸是相对于父容器字号而言的。

长度- 用毫米(mm),厘米(c m),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。

百分比- 相对于其父元素字体大小的百分比。

6、font×能:简写属性,提供了对字体所有属性进行设置的快捷方×。

快速设置文本的斜体样式

快速设置文本的斜体样式

快速设置文本的斜体样式文本的斜体样式是一种常见的排版效果,它能够为文本增添一定的视觉变化和重点强调。

在许多写作场景中,快速设置文本的斜体样式是一项非常有用的技巧。

本文将为您介绍几种常见的方式来快速设置文本的斜体样式。

一、通过HTML标签快速设置斜体样式在HTML语言中,可以使用`<i>`或`<em>`标签来设置文本的斜体样式。

例如,要将一段文字设置为斜体,可以像下面这样写:```<i>这是一段斜体文字</i>```或者```<em>这是一段斜体文字</em>```使用HTML标签设置文本的斜体样式非常简单,只需在要设置斜体的文字前后加上相应的标签即可。

二、通过CSS样式表快速设置斜体样式如果您不希望在每个需要斜体样式的文本上都加上HTML标签,您可以使用CSS样式表来快速设置斜体样式。

首先,在HTML文件的`<head>`标签中添加如下样式表:```css<style type="text/css">.italic {font-style: italic;}</style>```然后,在需要设置斜体样式的文本外部标签上添加class属性:```html<p class="italic">这是一段斜体文字</p>```通过CSS样式表的方式,您可以在需要设置斜体样式的文本所处的整个区块上统一添加class属性,方便快捷地设置斜体样式。

三、通过Word等文字处理软件快速设置斜体样式在常用的文字处理软件(如Word、Pages等)中,设置文本的斜体样式也是非常简单的。

只需选中要设置斜体样式的文字,然后点击软件工具栏上的斜体按钮,即可将文字设置为斜体。

四、通过Markdown语法快速设置斜体样式如果您在写作过程中使用Markdown语法,也可以快速设置文本的斜体样式。

css strong加粗用法

css strong加粗用法

css strong加粗用法CSS strong加粗用法在CSS中,我们可以使用strong元素来实现文本的加粗效果。

strong元素是一个语义化的标签,它用于表示文本的重要性或强调。

在默认情况下,浏览器会将strong元素的文本显示为加粗字体。

下面是一些使用strong元素的示例及详细讲解:使用strong标签加粗文本<strong>这是一段加粗的文本</strong>这段代码会将其中的文本显示为加粗字体。

使用CSS的font-weight属性加粗文本<style>.bold-text {font-weight: bold;}</style><span class="bold-text">这是一段加粗的文本</span>在这个示例中,使用CSS的font-weight属性将文本加粗。

通过为文本节点的父元素添加一个类名,并在CSS中设置该类的font-weight属性为bold来实现加粗效果。

使用CSS的text-decoration属性加粗文本<style>.bold-text {text-decoration: bold;}</style><span class="bold-text">这是一段加粗的文本</span>这个示例中,我们使用CSS的text-decoration属性将文本加粗。

通过为文本节点的父元素添加一个类名,并在CSS中设置该类的text-decoration属性为bold来实现加粗效果。

使用CSS的font标签加粗文本<style>font {font-weight: bold;}</style><font>这是一段加粗的文本</font>在这个示例中,我们使用了已经废弃的font标签并通过CSS的font-weight属性将文本加粗。

font 的参数

font 的参数

在CSS中,font是一个复合属性,可以设置多个字体属性,例如字体样式、字体粗细、字体大小、行高、字体家族等。

以下是一些常见的font参数:
font-style: 用于设置字体的样式,如正常(normal)、斜体(italic)或倾斜(oblique)。

font-weight: 用于设置字体的粗细,可以是关键字(normal、bold)、数字(100-900)或相对值(lighter、bolder)。

font-size: 用于设置字体的大小,可以使用相对值(larger、smaller)或像素值(12px、16px 等)。

line-height: 用于设置行高,可以是相对值(例如相对于字体大小的倍数)或像素值。

font-family: 用于设置字体的家族,可以是具体的字体名称(如Arial、Times New Roman)或通用家族(如serif、sans-serif、monospace等)。

使用这些参数时,可以将它们组合在一起,例如:
css复制代码
font: italic bold 16px/30px Arial, sans-serif;
这将设置字体样式为斜体,字体粗细为粗体,字体大小为16像素,行高为30像素,字体家族为Arial或sans-serif。

CSS语法手册(CSS手册)

CSS语法手册(CSS手册)

CSS语法手册字体属性1、font-family×能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。

浏览器由前向后选用字体。

语×:{font-family:字体1,字体2, ... ,字体n}2、font-style×能:使文本显示为扁斜体或斜体等表示强调。

数值:normal - 正常italic - 斜体oblique - 偏斜体3、font-variant×能:用于在正常与小型大写字母字体间切换。

数值:normal - 如果该标志继承父元素的small-caps 设置,则关键字normal 将font-variant 设置为正常字体。

sm all-caps - 把小写字母显示为字体较小的大写字母。

4、font-weight×能:用于设置字体灰度,生成字体的深,浅版本。

数值:正常灰度- normal相对灰度- bold, bolder, light, lighter梯度灰度- 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。

5、font-size×能:用各种度量单位控制文本字体大小。

数值:有四种数值方式绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - sm all, x-sm all, small, m edium, large, x-large, xx-large。

不同字体有不同的数值。

相对尺寸- larger, smaller,产生的尺寸是相对于父容器字号而言的。

长度- 用毫米(mm),厘米(c m),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。

百分比- 相对于其父元素字体大小的百分比。

6、font×能:简写属性,提供了对字体所有属性进行设置的快捷方×。

使用CSS属性定义文本的字体系列

使用CSS属性定义文本的字体系列

使⽤CSS属性定义⽂本的字体系列CSS 字体属性定义⽂本的字体系列、⼤⼩、加粗、风格(如斜体)和变形(如⼩型⼤写字母)。

CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称:通⽤字体系列 - 拥有相似外观的字体系统组合(⽐如 "Serif" 或 "Monospace")特定字体系列 - 具体的字体系列(⽐如 "Times" 或 "Courier")除了各种特定的字体系列外,CSS 定义了 5 种通⽤字体系列:Serif 字体Sans-serif 字体Monospace 字体Cursive 字体Fantasy 字体如果需要了解更多有关字体系列的知识,请阅读 CSS 字体系列。

指定字体系列使⽤ font-family 属性定义⽂本的字体系列。

使⽤通⽤字体系列如果你希望⽂档使⽤⼀种 sans-serif 字体,但是你并不关⼼是哪⼀种字体,以下就是⼀个合适的声明:body {font-family: sans-serif;}这样⽤户代理就会从 sans-serif 字体系列中选择⼀个字体(如 Helvetica),并将其应⽤到 body 元素。

因为有继承,这种字体选择还将应⽤到 body 元素中包含的所有元素,除⾮有⼀种更特定的选择器将其覆盖。

指定字体系列除了使⽤通⽤的字体系列,您还可以通过 font-family 属性设置更具体的字体。

下⾯的例⼦为所有 h1 元素设置了 Georgia 字体:h1 {font-family: Georgia;}这样的规则同时会产⽣另外⼀个问题,如果⽤户代理上没有安装 Georgia 字体,就只能使⽤⽤户代理的默认字体来显⽰ h1 元素。

我们可以通过结合特定字体名和通⽤字体系列来解决这个问题:h1 {font-family: Georgia, serif;}如果读者没有安装 Georgia,但安装了 Times 字体(serif 字体系列中的⼀种字体),⽤户代理就可能对 h1 元素使⽤ Times。

常用的csss标记属性

常用的csss标记属性

常用的csss标记属性1、字体属性(type)font-family(使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant(字体大小写):normal/small-capsfont-weight(字体的粗细):normal/bold/bolder/lithterfont-size(字体的大小):absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色,例如:p{color:red})background-color(定义背景色)background-image(定义背景图片)background-repeat(背景图案重复方式):repeat-x/repeat-y/no-repeatbackground-attachment(设置滚动):scroll(滚动)/fixe(固定的) background-position(背景图案的初始位置):percentage/length/top/left/right/bottom3、文本属性:(block)定义间距:word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration(定义文字的装饰):nore/underline/overline/line-through/blinkvertical-align(元素在垂直方向的位置):baseline(基线)/sub/super/top/text-top/middle/bottom/text-bottom text-transform(使文本转换为其它方式):capitalize(大写)/uppercase(首字母大写)/lowercase(小写)/nonetext-align(文字的对齐):left/right/center/justifytext-indent(文本的首行缩进)length/percentageline-height(文本的行高):normal/numbet/lenggth/percentage(百分比)定义超链接:a:link {color:green;text-decoration:nore}(未访问过的状态)a:visited {color:ren;text-decoration:underline;16pt}(访问过的状态)a:hover {color:blue;text-decoration:underline;16pt}(鼠标激活的状态)4、块属性(block)边距属性:margin-top(设置顶边距)margin-right(设置右边距)margin-bottom(设置底边距)margin-left(设置左边距)填充距属性:padding-top设置顶端真充距)padding-right设置顶端真充距)padding-bottom设置顶端真充距)padding-left设置顶端真充距)5、边框属性(border)border-top-width(顶端边框宽度)border-right-width(右端边框宽度)border-bottom-width(底端边框宽度)border-left-width(d左边框宽度)border-width(一次定义边框宽度)border-color(设置边框颜色)border-style(设置边框样式)border-top(一次定义顶端各种属性)border-right(一次定义右端各种属性)border-bottom(一次定义底端各种属性)border-left(一次定义左端各种属性)图文混排:width(定义宽度属性)height(定义高度属性)float(文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分):normal/pre/nowraplist-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square(方形)/decimal(阿拉伯数字)/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/norelist-style-tyle(在列表前加图案):<url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style(一次性定义所有属性)7、定位(positioning)即层属性Type:设定对象的定位方式。

CSS字体样式

CSS字体样式

CSS字体样式我们学习 html 的时候学过⼀些⽤于字体加粗、倾斜的标签,但是使⽤标签来实现的效果肯定没有我们通过 css 中的样式来的⽅便。

接下来我们会给⼤家介绍下⾯这⼏个属性的使⽤:属性描述font-family设置元素的字体font-size设置字体的⼤⼩font-style设置字体的风格font-weight设置字体的粗细font在⼀个声明中设置所有的字体属性通过学习上述这⼏个 css 属性,我们可以实现给 html 中的⽂字设置字体、⼤⼩、风格、倾斜、加粗等。

font-familyfont-family 属性⽤于设置⼀个元素的字体,字体就是像宋体、楷体等。

通过 font-family 属性,可以同时声明多种字体,字体之间使⽤逗号分隔。

根据字体的调⽤原则,会优先调⽤第⼀种字体,如果没有找到,则会尝试调⽤下⼀个字体,如果都找不到则调⽤默认字体。

⽰例:例如为下⾯这个 <p> 标签中的⽂本设置字体:<p>Hello,侠课岛</p>可以使⽤标签选择器,然后在 font-family 属性中设置:p{font-family:'Times New Roman','sans-serif', 宋体, 楷体;}在声明字体时,我们应该分别声明英⽂字体和中⽂字体,且英⽂字体的声明应该在中⽂字体之前。

因为绝⼤部分中⽂字体⾥包含英⽂字母,但是不是很好看,⽽英⽂字体⾥不包含中⽂字符。

所以如果我们不希望⽤中⽂字体来显⽰英⽂,就⼀定要记得先声明英⽂字体。

先声明的会先调⽤。

常⽤英⽂字体:Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。

常⽤中⽂字体:宋体 SimSun、⿊体 SimHei、微软雅⿊ Microsoft YaHei、仿宋 FangSong、楷体 KaiTi 等。

font-sizefont-size 属性⽤于设置字体的⼤⼩,常⽤的单位为 px,即像素。

定义 CSS 类型属性

定义 CSS 类型属性

定义CSS 类型属性使用“CSS 规则定义”对话框中的“类型”类别可以定义CSS 样式的基本字体和类型设置。

1.如果尚未打开“CSS 样式”面板,请打开该面板(Shift+F11)。

2.双击“CSS 样式”面板顶部窗格中的现有规则或属性。

3.在“CSS 规则定义”对话框中,选择“类型”,然后设置样式属性。

下列任何属性若对于样式并不重要,可将其保留为空:Font-family为样式设置字体系列(或多组字体系列)。

浏览器使用用户系统上安装的字体系列中的第一种字体显示文本。

为确保与Internet Explorer 兼容,应首先列出Windows 字体。

两种浏览器都支持字体属性。

Font-size定义文本大小。

可以通过选择数字和度量单位选择特定的大小,也可以选择相对大小。

使用像素作为单位可以有效地防止浏览器扭曲文本。

两种浏览器都支持大小属性。

Font-style指定“正常”、“斜体”或“偏斜体”作为字体样式。

默认设置是“正常”。

两种浏览器都支持样式属性。

Line-height设置文本所在行的高度。

习惯上将该设置称为行高。

选择“正常”自动计算字体大小的行高,或输入一个确切的值并选择一种度量单位。

两种浏览器都支持行高属性。

Text-decoration向文本中添加下划线、上划线或删除线,或使文本闪烁。

常规文本的默认设置是“无”。

链接的默认设置是“下划线”。

将链接设置设为无时,可以通过定义一个特殊的类去除链接中的下划线。

两种浏览器都支持修饰属性。

Font-weight对字体应用特定或相对的粗体量。

“正常”等于400;“粗体”等于700。

两种浏览器都支持粗细属性。

Font-variant设置文本的小型大写字母变体。

Dreamweaver 不在“文档”窗口中显示此属性。

Internet Explorer 支持变体属性,但Navigator 不支持。

Text-transform将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。

谈谈利用CSS改变字体的方法

谈谈利用CSS改变字体的方法

谈谈利用CSS改变字体的方法谈谈利用CSS改变字体的方法在过去页面上的字体是一成不变的,静静的呆在那。

当DHTML(动态网页)出现后,我们能有更多方式控制字体了。

一般来说,动态字体的'实现核心是CSS(层叠样式表)加JavaScript。

使用了以上两项技术后,字体就能产生许多变化。

那店铺今天就来谈谈利用CSS改变字体的方法。

1.CSS定义字体的标签元素font-family: 设置字体字族。

“span style="font-family: 黑体, 宋体(GB)">田涛”/span>font-sytle:设置字体类型。

“span style="font-style: normal">田涛”/span>font-weight:设置字体的字重。

“span style="font-weight: bold">田涛”/span>font-size:设置字体大小。

“span style="font-size: 14pt">田涛”/span>font-decoration:修饰文本字体,比如带下划线“underline”。

“span style="text-decoration: underline">田涛”/span>对于以上的字体设置,我们可以采用一个方便的方法:“span style="font:normal bold 14pt 黑体">田涛”/span>在style定义的次序是:font-style,font-weight,font-size,font-family.2.CSS定义字体和”font>定义字体的冲突对于CSS定义字体和”font>定义字体,我们都要注意以下问题,比如有以下字体设置:“span style="font-family: 宋体(KSC); font-size: 200pt">“font>田涛”/font>“/span>这时侯字体大小将以font-size: 200pt的定义来设置。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。
比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:
li strong {
font-style: italic;
<li>我是正常的字体。</li>
</ol>
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。
font-weight: normal;
}
请注意标记为 <strong> 的蓝色代码的上下文关系:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong>&<strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
相关文档
最新文档