CSS基础-day1

最新推荐文章于 2024-11-15 19:51:40 发布

是天呀

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量87

点赞数 1

分类专栏： css基础学习文章标签： css 前端

本文链接：https://blog.csdn.net/LTFLTFLTFLTFLTFL/article/details/131749461

版权

css基础学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS是一种用于定义HTML或XML文档样式的语言，包括id选择器、class选择器等。样式表可以通过外部、内部和内联方式插入，优先级顺序为内联样式>id选择器>类选择器。此外，文章还介绍了伪类选择器的应用。

摘要由CSDN通过智能技术生成

css概要

CSS (Cascading Style Sheets，层叠样式表

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

通过使用 CSS 我们可以大大提升网页开发的工作效率！

在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。

CSS 实例

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

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

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

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

CSS 注释

`注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

CSS的 `id` 和 `class`

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
在这里插入图片描述

CSS 创建

如何插入样式表
插入样式表的方法有三种:

 - 外部样式表(External style sheet) 
 - 内部样式表(Internal style sheet) 
 - 内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。

每个页面使用<link> 标签链接到样式表。<link>标签在（文档的）头部：

<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

样式表的优先级顺序

大致等级划分：

内联样式>内部样式表>外部样式表

详细等级划分：

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里.

下面是css的一些标签元素的属性值

例如 a标签：

<a href="http://www.runoob.com">这是一个链接</a>

<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
a标签中的target共有这个跳转方式
target规定在何处打开目标 URL。仅在 href 属性存在时使用。
_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
framename:在指定的框架中打开被链接文档,把frame看做内置浏览器。

伪类选择器

选择器示例示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个 元素的第一个字母
:first-line p:first-line 选择每个

元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的  元素
:before p:before 在每个元素之前插入内容
:after p:after 在每个元素之后插入内容
:lang(language) p:lang(it) 为元素的lang属性选择一个开始值
案例如下：
在这里插入图片描述
后续有待补充…