CSS 从零开始(一)初识CSS

版权声明:转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 https://blog.csdn.net/powertoolsteam/article/details/89334612

什么是CSS

CSS又称层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

通俗点来说HTML决定了一个网页有哪些元素,CSS决定了这些元素应该以什么样子来展现,之所以我们访问的网页长得不是千篇一律而是各有各的不同,就是因为CSS。

CSS基础语法

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

selector {declaration1; declaration2; ... declarationN }

选择器(上文的selector)用于识别定位需要改变的元素。

选择器的分类有很多:元素选择器,类选择器,ID选择器,属性选择器,后代选择器,子元素选择器,相邻兄弟选择器,伪类等。其中以前三种最为常见。

元素选择器

用于选择某个HTML元素,该条CSS仅对于选中的元素生效,例如:

h1 {color:blue;}

上面例子中,会将该页面的所有h1标签的文本颜色设置为蓝色

类选择器

用于选择某个类所包含的元素,为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。 例如:

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

之后我们可以在CSS中使用类选择器控制该标签的样式,以"."开头加上class名称代表类选择器

.important {color:red;}

类选择器可以结合元素选择器同时使用,例如下面的HTML中

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

<p class="important">
This paragraph is very important.
</p>

设置如下的CSS

p.important {color:red;}

效果仅对<P>标签生效

类选择器可以多个结合进行使用,例如

<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>

<p class="warning">This is a warning.</p>

<p class="important warning">This paragraph is a very important warning.</p>

<p>This is a paragraph.</p>

<p>...</p>
</body>
</html>

银灰色背景的CSS只对<p class=“important warning”>这个标签生效

ID选择器

ID 选择器类似于类选择器,同样是选择符合对应属性的元素,不同的时,类中是根据class属性进行选择,ID是根据id属性进行选择,并且使用方式也与类选择器有区别,"#"开头加上id名称,例如下面的HTML中:

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

设置如下的CSS

#intro {font-weight:bold;}

类似类选择器ID选择器可以结合元素选择器同时使用,但ID选择器不可以多个结合进行使用。因为id属性中不可以按照空格进行分词

展开阅读全文

没有更多推荐了,返回首页