CSS 从零开始（一）初识CSS

收藏

本帖最后由 ClarkPan 于 2019-4-16 15:01 编辑

什么是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属性中不可以按照空格进行分词

		自动登录	找回密码
密码			立即注册

CSS 从零开始（一）初识CSS

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄