CSS基础-day1

最新推荐文章于 2024-05-21 21:13:29 发布

是天呀

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量49

点赞数 1

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

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

版权

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

2 篇文章 0 订阅

订阅专栏

文章目录

id 选择器
class选择器
CSS 创建
外部样式表
内部样式表
内联样式
样式表的优先级顺序
下面是css的一些标签元素的属性值
伪类选择器

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属性选择一个开始值
案例如下：
在这里插入图片描述
后续有待补充…