CSS学习篇之——基础知识

最新推荐文章于 2022-12-10 10:30:40 发布

june-qn

最新推荐文章于 2022-12-10 10:30:40 发布

阅读量2.2k

点赞数 6

分类专栏： B/S学习

本文链接：https://blog.csdn.net/zwk626542417/article/details/16886263

版权

B/S学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

CSS概述

在上一篇文章中我们对CSS的知识有了初步的了解,CSS它是一种语言,既然是一种语言,自然就有它的语法,这篇文章我们对CSS的一些语法知识进行下学习.

CSS具体语法

CSS规则主要是由两个主要的部分构成的分别是选择器以及一条或者多条声明，下面就是一个完整的CSS语句。

选择器

选择器通常是我们所需要的改变样式的html元素，就是上图中的h1，关于CSS选择器一般有3种，我们依次来看。

标记选择器

一般又称为上下文选择器或派生选择器，我们可以使用标记更加简洁，它可以允许我们根据文档中的上下文关系来确定某个标签的样式，上面我们展示的图片代码就是一个标记选择器。

li {
    font-style: italic;
    font-weight: normal;
  }

li是一个html标签的标记。

类别选择器

在CSS中，类别选择器以一个点号显示，它允许以一种独立于文档元素的方式来指定样式，它即可以单独使用，也可以与其它元素结合使用。

.important{color:red;}

<h1 class="important">
This heading is veryimportant.
</h1>

为了将类别选择器样式与元素关联，所有必须为标签的class指定一个值。

ID选择器

id选择器可以为标有特点id的html元素指定特点的样式，id选择器以“#”号来定义，

#intro{font-weight:bold;}

<pid="intro">This is a paragraph of introduction.</p>

与类别选择器不同，在ID选择器使用时，一个ID在一个html文档中只能被使用一次，同时ID选择器不能结合使用，因为ID熟悉不允许有以空格分隔的词列表。

声明

每条声明从上面图上我们可以看出，每条声明是由一个属性和一个值组成，在我们一开始的图中，color和 font-size 就是属性，red 和 14px是值，我们使用大括号来包围声明；如果我们要声明的属性的值为若干单词，则要给值加上双引号；如果我们定义了多个声明，则用分号将每个声明分开，最后一个声明末尾则不需要分号。

CSS文字效果

包括CSS字体属性定义文本的字体系列、字体大小、加粗、风格（斜体）和变形；同时还包括文本属性，文本属性可以定义文本的外观，通过文本属性，我们可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

CSS背景效果图片像创建相当复杂的效果。关于背景纯色比较简单，就不多说，重点提下背景图片，将图片放入背景，用到的是background-image属性，关于图片背景的其它知识有，背景重复、背景定位、关键字、百分数值、长度值、背景关联这些知识。

链接

CSS链接的特殊性在于能够根据它们所处的状态来设置它们的样式，链接的四种状态：

a:link- 普通的、未被访问的链接

a:visited- 用户已访问的链接

a:hover- 鼠标指针位于链接的上方

a:active- 链接被点击的时刻

a:link{color:#FF0000;}                /*未被访问的链接 */
a:visited{color:#00FF00;}        /* 已被访问的链接 */
a:hover{color:#FF00FF;}        /* 鼠标指针移动到链接上*/
a:active{color:#0000FF;}        /* 正在被点击的链接 */