html指定p中段落的样式,HTML5学习笔记(二)

 2024-02-17 00:01:18  阅读 0

段落文字

2、<h>标签:字体大小从h1-h6逐渐变大。 标题标签。

1 级标题、2 级标题、3 级标题、4 级标题、5 级标题、6 级标题

3.<em>、<>强调标签。 用于加强段落中的特定单词。 需要强调的文字。 需要强调的文字。

4.标签,用于设置标签和文字的单独样式

5.标签,短文本引用标签。 引用文字

6.< >标签,用于长文本引用。

引用的文字

7.<br>标签,换行标签,用于分行显示文本。

8、控制字符不是标签,而是特殊字符。 无法删除以下块号。

9.<hr>标签,添加水平线。

10.< >标签,为网页添加地址信息。

联系地址信息

11.<code>标签,添加code时的管理标签。=[rmt:@"xx"];

12、<pre>标签,用于管理大代码块的标签。

-(无效):(块)块{

项目(自我,,块,);

-(块)块{(自我,);

13.<ul>标签,无序信息列表标签。

14.<ol>标签,有序信息标签。

信息信息

15. <div>容器标签,用于布局。

……

16. < > 标签向表格添加标题和摘要。

标题文字

17. <a>标签,链接到另一个页面。 链接中显示的文字

<a>标签重要属性的取值:

浏览器总是在新打开的未命名窗口中加载目标文档。

_自己

该目标的值是所有未指定目标的 <a> 标记的默认目标,这会导致目标文档加载并显示在与源文档相同的框架或窗口中。 除非与文档标题标记中的属性一起使用,否则此目标是多余且不必要的。

_

该目标导致文档加载到包含超链接引用的框架的父窗口或框架集中。 如果此引用位于窗口或顶级框架中,则它相当于 。

_ 顶部

此目标导致文档加载到包含超链接的窗口中。 使用 _top 目标将清除所有包含的框架并将文档加载到整个浏览器窗口中。

18. < >标签,用于链接网页中的电子邮件地址。 传一个电子邮件给我

注意:如果同时有多个参数,第一个参数必须以“?”开头,后续各参数必须用“&”分隔。

19. <img>标签,在网页中插入图片。

注:src:标识图像的位置;

alt:指定图像的描述性文本。 当图片不可见时(下载不成功时),可以看到该属性指定的文字;

title:提供图像可见时的描述(鼠标滑过图像时显示的文本);

该图像可以是GIF、PNG、JPEG格式的图像文件。

2.CSS

1.css样式内联的基础知识:

写在元素的开始标签中,css样式代码必须写在style=""双引号中。 如果有多个css样式代码设置,可以写在一起,并用分号分隔。

这里的文字是红色的。

嵌入式:

嵌入的css样式必须写在之间,一般嵌入的css样式都写在之间

之间。 如右侧编辑器中的代码。 外部公式:

css样式文件名以有意义的英文字母命名,如main.css。

rel="" type="text/css" 是固定的写法,不能修改。

标签位置一般写为

标签内。

注意:在使用过程中,遵循两种排列选择方法:内联>嵌入>外置和就近原则。

2.css选择器。 标签选择器:

标签选择器实际上是标签 p{font-size:12px;line-:1.6em; 在html代码中。

}类选择器:

类选择器在 CSS 样式代码中最常见。

.类选择器名称{css样式代码;}.{

红色;

}/*在类别前面添加一个英文点*/练习

笔记:

1. 以点开头的英语

2、类选择器的名称可以任意命名(但不要用中文命名)ID选择器

ID选择器与类选择器类似,但也有一些区别:

1. 为标签设置 id="ID name",而不是 class="class name"。

2. ID 选择器前面是井号 (#),而不是英文点 (.)。 #{

颜色:绿色;

}练习文本

注意:

1. ID选择器在文档中只能使用一次。 与类选择器不同,ID 选择器只能使用一次,而且只能在 HTML 文档中使用一次。 类选择器可以多次使用。

2. 可以使用类选择器词列表方法同时为一个元素设置多种样式。 我们可以同时为一个元素设置多种样式,但这只能使用类选择器来实现,而不能使用ID选择器(不能使用ID单词列表)。 子选择器:用于选择指定标签元素的第一代子元素。

."class">标签{:1px 纯红色;}.first>span{

:1 像素

;

三年级时,我是一个胆小的小女孩。 上课时我从来不敢回答老师的问题,生怕回答错了老师会批评我。 我一直没有勇气回答老师的问题。 我没有勇气参加学校举办的活动。

食物包含(后代选择器):

.“类”标签{颜色:红色;}

请注意此选择器和子选择器之间的区别。 子选择器(child)仅指其直接后代,也可以将其理解为作用于子元素的第一代后代。 后代选择器作用于所有子后代元素。 后代选择器使用空格进行选择,而子选择器使用“>”进行选择。

总结: > 作用于元素的第一代后代,空格作用于元素的所有后代。 通用选择器:通用选择器是一个功能强大的选择器。 它用 (*) 符号指定。 它的作用是匹配所有html标签元素。 *{颜色:红色;字体大小:18px;

伪类选择器:它允许为html中不存在的标签(标签的某些状态)设置样式。 例如,我们为html中的标签元素的鼠标悬停状态设置字体颜色:a:hover{

红色

百度

html中a标签字体颜色_html标签设置字体红色_html文字颜色标签

将标签鼠标悬停状态的字体颜色设置为红色。 “百度”文字添加了鼠标滑过时字体颜色变为红色的特效。

笔记:

关于伪类选择器,到目前为止,兼容所有浏览器的“伪类选择器”就是在a标签上使用:hover(其实伪类选择器有很多,特别是在css3中,但是因为它们不兼容所有浏览器)。 其实:hover可以放在任何标签上,比如p:hover,但是它们的兼容性也很差,所以现在更常用的是a:hover的组合。 分组选择器:当你想为html中的多个标签设置相同的样式时,可以使用分组选择器(,).h1,span{

红色;

}h1{

红色;

跨度{

红色;

练习文本段落

3、CSS的继承、级联和具体继承:CSS的某些样式是继承的,那么什么是继承呢? 继承是一种规则,允许样式不仅应用于特定的 html 标签元素,还应用于其后代元素。 例如下面的代码: 如果给p标签应用了某种颜色,那么这个颜色设置不仅适用于p标签,还适用于p标签中的所有子元素文本,其中子元素为span标签。 p{颜色:红色;}

三年级时,我还是一个胆小的小女孩。

p 中的文本和 span 中的文本都设置为红色。 但请注意,某些 CSS 样式是不能继承的。 例如:1px纯红色; 特殊性:有时我们会为同一个元素设置不同的CSS样式代码,那么该元素会启用哪种CSS样式呢? 我们看一下下面的代码:p{color:red;}

.first{颜色:绿色;}

三年级时,我还是一个胆小的小女孩。

p和.first都匹配p标签,那么会显示哪种颜色呢? 绿色是正确的颜色,为什么呢? 这是因为浏览器根据权重来决定使用哪种CSS样式,并且使用权重较高的CSS样式。

以下是权重规则:

标签的权重为1,类选择器的权重为10,ID选择器的权重最大为100。例如以下代码:p{color:red;}/*权重为1* /pspan{color:green;}/*权重为1+1=2*/.{color:white;}/*权重为10*/pspan.{color:;}/*权重为1+1 +10=12*/#.notep{color:;}/*权重为100+10+1=111*/

注意:还有一个特殊的权重——继承也有权重,但是很低。 有文献提出只有0.1,因此可以理解为继承权重最低。 级联:html 文件中的同一元素可以存在多种 css 样式。 当存在相同权重的样式时,会根据这些css样式的顺序来确定,并应用最后的css样式。 下面的代码“p{color:red;}

p{颜色:绿色;}

三年级时,我还是一个胆小的小女孩。

最后,p中的文本将被设置为绿色。 这种级联很容易理解。 据了解,后面的样式会覆盖前面的样式。 所以这就是前面提到的就近原则。

那么前面的CSS样式优先级就不难理解了:

内联样式表(内部标记)> 嵌入样式表(在当前文件中)> 外部样式表(在外部文件中)。 重要性:为某些样式设置最高权重。p{color:red!;}

p{颜色:绿色;}

三年级时,我还是一个胆小的小女孩。

这时,p段中的文字就会显示为红色。

笔记: ! 必须写在分号之前

这里需要注意的是,当网页创建者没有设置css样式时,浏览器会按照自己设置的样式来显示网页。 并且用户还可以在浏览器中设置自己的自定义样式。 例如,一些用户习惯将字体大小设置为较大的尺寸,以便可以更清晰地查看网页的文本。 这时候要注意样式优先级:浏览器默认样式<网页创建者样式<用户设置的样式,但是记住! 优先样式是一个例外,它比用户设置的样式具有更高的权重。

标签: 标签 样式 文本

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码