当前位置：首页 > news >正文

制作企业网站首页优化优化

news 2025/8/25 21:46:21

制作企业网站首页,优化优化,深圳网站设计公司,网站建设背景和目标目录一、CSS简介二、HTML页面中常用的元素三、CSS语法规则四、常用的选择器五、CSS的三种使用方法六、选择器参考一、CSS简介 CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应…

一、CSS简介

二、HTML页面中常用的元素

三、CSS语法规则

四、常用的选择器

五、CSS的三种使用方法

六、选择器参考

一、CSS简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

在CSS中选择器的作用是用css为html页面中的元素添加样式，就需要用到css选择器。选择器可以根据不同的条件和位置来选择目标元素，从而实现对页面元素的精确控制。

二、HTML页面中常用的元素

那么HTML页面中常用的元素有哪些呢，如下所示：

<html> - 表示HTML文档的根元素。
<head> - 包含关于文档的元数据和其他头部信息。
<title> - 定义文档的标题，显示在浏览器的标题栏或选项卡上。
<body> - 包含文档的主要内容。
<h1>-<h6> - 表示标题，由大到小分为六级标题。
<p> - 表示一个段落。
<a> - 创建一个超链接。
<img> - 插入图片。
<ul> - 无序列表，表示项目之间没有特定顺序。
<ol> - 有序列表，表示项目按特定顺序排列。
<li> - 列表中的一个项目。
<div> - 用于组合其他元素或将其分组。
<span> - 内联元素容器，用于对文本的部分进行样式设置。
<input> - 表单输入元素，用于接收用户输入。
<button> - 表单按钮。
<form> - 创建一个表单。
<table> - 表格，用于展示二维数据。
<tr> - 表格中的一行。
<td> - 表格中的一个单元格。
<iframe> - 内嵌一个网页。
<audio> - 插入音频内容。
<video> - 插入视频内容。

这只是一小部分HTML元素的示例，还有许多其他元素可用于创建丰富的网页内容和交互。每个元素都有不同的属性和用法，可以根据需要选择适合的元素来组织和呈现网页内容。

三、CSS语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

四、常用的选择器

① 元素选择器（Element Selector）：通过元素名称选择 HTML 元素。

如下代码，p 选择器将选择所有 <p> 元素:

p {...color: blue;...
}

② 类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头，后面跟着类别名称。

如下代码，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

.highlight {...background-color: yellow;...
}

CSS（层叠样式表）中的类选择器是一种选择元素的方法，通过给HTML元素添加类名，可以为该元素定义特定的样式。

类选择器的作用：

样式复用：通过给多个元素添加同一个类名，可以为它们同时定义相同的样式，从而实现样式的复用。
选择特定元素：通过类选择器，可以选择具有特定类名的元素，从而为这些元素定义不同的样式。

类选择器的用法：

在CSS中，类选择器以点 . 开头，后面跟着类名。例如，要选择具有类名为"example"的元素，可以使用.example。
类名可以由数字、字母、连字符和下划线组成，不能以数字开头，并且区分大小写。
在HTML中，通过在元素的class属性中添加类名可以将该类应用到该元素。例如，<div class="example">...</div>。
可以通过组合类选择器和标签选择器来选择特定类型的元素。例如，要选择具有类名为"example"且为<a>标签的元素，可以使用a.example。

示例：
HTML:

<div class="example">Example 1</div>
<div class="example">Example 2</div>
<div class="other">Other</div>

CSS:

.example {color: blue;
}.other {color: red;
}

在上面的示例中，具有类名为"example"的两个元素将被设置为蓝色，而具有类名为"other"的元素将被设置为红色。通过类选择器，可以根据不同的需求为元素定义不同的样式。

③ ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

如下代码，#runoob 选择器将选择具有 ID 为 "runoob" 的元素。

#runoob {...width: 200px;...
}

④ 属性选择器（Attribute Selector）：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

input[type="text"] {...border: 1px solid gray;...
}

⑤ 后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

如下代码，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

div p {...font-weight: bold;...
}

⑥ 通用选择器（Universal Selector）：选择所有 HTML 元素。通用选择器使用 * 符号。例如，* 选择器将选择页面上的所有元素。

五、CSS的三种使用方法

外部 CSS
内部 CSS
行内 CSS

① 外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

② 内部CSS

若是HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

③ 行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

④ 多个样式表

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

⑤ 层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

六、选择器参考

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和 <p> 元素	1
element.class	p.hometown	选择所有 class="hometown" 的 <p> 元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<p>元素的第一个字母	1
:first-line	p:first-line	选择每一个<p>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3