css3行内标签与块标签有哪些

html-css09

css3行内标签与块标签有哪些,第1张

内联元素(行内元素)内联元素(inline element)

* a - 锚点

* abbr - 缩写

* acronym - 首字

* b - 粗体(不推荐)

* bdo - bidi override

* big - 大字体

* br - 换行

* cite - 引用

* code - 计算机代码(在引用源码的时候需要)

* dfn - 定义字段

* em - 强调

* font - 字体设定(不推荐)

* i - 斜体

* img - 图片

* input - 输入框

* kbd - 定义键盘文本

* label - 表格标签

* q - 短引用

* s - 中划线(不推荐)

* samp - 定义范例计算机代码

* select - 项目选择

* small - 小字体文本

* span - 常用内联容器,定义文本内区块

* strike - 中划线

* strong - 粗体强调

* sub - 下标

* sup - 上标

* textarea - 多行文本输入框

* tt - 电传文本

* u - 下划线

* var - 定义变量

块元素(block element)

* address - 地址

* blockquote - 块引用

* center - 举中对齐块

* dir - 目录列表

* div - 常用块级容易,也是css layout的主要标签

* dl - 定义列表

* fieldset - form控制组

* form - 交互表单

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* isindex - input prompt

* menu - 菜单列表

* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容

* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet

* button - 按钮

* del - 删除文本

* iframe - inline frame

* ins - 插入的文本

* map - 图片区块(map)

* object - object对象

* script - 客户端脚本

You’ve written some HTML and now need to style it with CSS. One way is to use inline styles, which is what this article is about.

您已经编写了一些HTML,现在需要使用CSS对其进行样式设置。 一种方法是使用内联样式,这就是本文的目的。

<p style="color: redfont-size: 20px">This is my first paragraph.</p>

Before we jump into the nuances of inline styles—when, why, and how to use them—it’s important to be aware of the other ways to style your HTML. That way, you choose the best option for your code.

在深入介绍内联样式的细微差别(何时,为什么以及如何使用它们)之前,重要的是要知道其他样式化HTML的方式。 这样,您可以为代码选择最佳选项。∵Here’s a summary of your options.

这是您的选择的摘要。

外部样式表 (External Stylesheet)

Developers typically keep all of their CSS in an external stylesheet. In your HTML file, use the <link>element to link to your external stylesheet, which contains your CSS.

开发人员通常将所有CSS保留在外部样式表中。 在HTML文件中,使用<link>元素链接到包含CSS的外部样式表。

css3中,追加了三个属性选择器分别为:

结构性伪类选择器由两部分构成,一是伪类选择器,一是伪元素选择器。

伪类选择器 ,要注意命名不要与系统定义好的选择器重名,例如link、hover

伪元素选择器 中包含 first-line、first-letter、before、after。

当root和body起冲突时,body就对内容区域生效,在内容区外则是root生效。

格式:not(selector)

1. first-child 对一个父元素中的 第一个 子元素进行样式的指定

2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定

3. nth-child(positon) 对一个父元素中的 指定序号 的子元素进行样式的指定

4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定

2)使用nth-of-type(odd)和nth-of-type(even)

1)使用nth-child

2)使用nth-child(an+b),a表示每次循环中,包括几种样式,b表示指定的样式在循环中所处的位置。

only-child选择器,在元素只有一个子元素时,可以代替使用 nth-child(1)/nth-last-child(1) 。

在css3选择器中,除了结构性伪类选择器外,还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用,在默认状态下不起作用。

通过js改变输入框的可输入和不可输入状态,通过css样式改变输入框可输入和不可输入状态时的背景颜色。

用来位于同一个父元素之下的,给与一个子元素平级的另一个子元素设定样式