HTML标签属性

最新推荐文章于 2024-03-30 09:18:11 发布

我以为自己很帅

最新推荐文章于 2024-03-30 09:18:11 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/unlockmyname/article/details/117446414

版权

web前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

html5

25 篇文章 0 订阅

订阅专栏

css

22 篇文章 0 订阅

订阅专栏

HTML基础标签

1. 注释标签

<!--  -->        html中注释标签,快捷键ctrl+/
/* */    css中注释标签

2.div标签

<div>     </div>

用来分割分区的标签,给页面划分不同的区域,呈现不同内容.

3.span 标签

<span>  </span>

对小的文本进行修饰,没有固定的格式表现.其实没有多大作用.!

4.css层叠样式

行内式:是通过标签的style属性来设置元素的样式,实际上任何HTML标签都有style属性.
结构如下:

<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"> 内容 </标签名>

示列:
<body>
  <p style="font-size:12px;">
  </p>
  <div>大家好我是div内部的文本</div>
  <ul>
    <li>大家好我是li内部的文本</li>
  </ul>

</body>

内嵌式:将css代码集中写在HTML文档的head头部标签中,并且用style标签定义.
结构如下:

<head>
  <style type="text/css">
    标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3:}
  </style>
</head>

示列:
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-      scale=1.0">
  <title>css层叠样式表 </title>
  <style>
    p {
      font-size: 18px;
      color: green;
      /* 属性名称: 属性值(单位); key:value*/
    }
  </style>
</head>

语法中,style标签一般在head标签中title标签之后,也可以放在HTMLde的任何地方. type=“text/css” 在html5中可以省略.

外链式将所有的样式以 .css为扩展名放在表文件中,通过link标签将其链接到HTML中.

<head>
  <link href="css文件的路径" rel="stylesheet"/>
</head>

注意Link是单标签.

href:定义链接外部样式文件的地址

type:定义链接文档的类型,在这里需要指定为"text/css"表示链接的万起步文件为css.

rel:定义当前文档与被连接件文档之间的关系,"stylesheet"表示被链接的文档是一个样式文件.

选择器 { 属性名称: 属性值(单位);}

一个完整的外部样式示列.

以上用得最多的是外链.注意:

style的用法不一样,在内嵌式里面作为的是属性,属性值需要用=号并且加上引号
在css里面作为的是标签.,就直接用冒号,不需要引号,
有单位的都需要带单位.

5.css里面的属性样式

选择器 { 属性名称: 属性值(单位);}

选择器: 标签的名称

注意冒号与属性值之间有个空格.分号不能省

6.CSS基础选择器

标签选择器:HTML的标签名称作为选择器

标签名{ 属性1:属性值1;属性2:属性值2;属性3:属性值3; }
元素名{ 属性1:属性值1;属性2:属性值2;属性3:属性值3; }

类选择器:可以为元素对象定义单独或者相同的样式.可以选择一个或者多个

使用方法如下

.类名{ 属性1:属性值1;属性2:属性值3:属性3; }
标签调用的时候用 class="类名" 即可.

#id名{ 属性1:属性值1;属性2:属性值3:属性3; }
元素调用的时候用 id="元素名" 即可.

多类名选择器

可以给标签指定多个类名

注意:样式显示效果受css样式书写的上下顺序有关.

各个类名中间用空格隔开.
```
<div class="melon green fz20">西瓜</div>
<div class="melon cyan">冬瓜</div>
<div class="melon yellow">南瓜</div>
```

7.类选择器的命名规范

1.使用具备语义性的单词,不能用数字拼音符号
2.书写风格推荐使用 - 横线,而不是下划线,或者不能两个同时出现.

8.id选择器和类选择器的区别

在同一页面,不允许有相同名字的id对象出现,但允许相同名字的class

id选择器具有唯一性,只能使用一次id.

通俗点:class 类可以用同一个名去作为很多标签的的属性值

id类就只能用同一个名去作为一个标签的属性值

9.几个常用的属性名

font-size: 数值px; 设置字体大小

font-weight :字体粗细

font-style:字体风格

color: 颜色; 设置颜色

text-indent 字体

font-family 字体类型

* {    }          表示所有标签都被选中,优先级最小    class选择器优先于它,id优先级最大.

10.font的综合设置字体样式

选择器{font: font-style font-weight font-size/line-height font-family;}

顺序不能换,每个属性之间空格隔开,font-size和font-family属性必须有.

我以为自己很帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML标签属性

HTML基础标签1. 注释标签 html中注释标签,快捷键ctrl+//* */ css中注释标签2.div标签<div> </div>用来分割分区的标签,给页面划分不同的区域,呈现不同内容.3.span 标签<span> </span>对小的文本进行修饰,没有固定的格式表现.其实没有多大作用.!4.css层叠样式行内式:是通过标签的style属性来设置元素的样式,实际上
复制链接

扫一扫