Web|后端同学也要知道的CSS基础知识扫盲总结

原创已于 2022-02-08 22:42:22 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css 盒子模型 #css 选择器 #前端 #web

于 2017-04-30 23:48:13 首次发布

Web&JavaWeb 专栏收录该内容

23 篇文章

订阅专栏

1 CSS 是什么？

CSS(Cascading Style Sheets)，它是一种用来表现 HTML（标准通用标记语言的一个应用）
或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS 是能够做到网页表现与内容分离的一种样式设计语言。
相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，
支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

2 CSS 规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector{ declaration1; ... declarationN; }
每条声明由一个属性和一个值组成：h1 { color : red; }

3 CSS 使用方式

4 CSS选择器

（1）标签名选择器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>标签名选择器</title>
    <style>
        /*标签名选择器。*/
        h1 {
            color:red;font-size:12px;
        }
    </style>
</head>
<body>
    <h1>一级标题。</h1>
</body>
</html>

（2）Id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
	HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
	以下的样式规则应用于元素属性 id="para1":
	实例:
	#para1
	{
	text-align:center;
	color:red;
	}
	注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

（3）class选择器

class选择器，以一个点号显示：
	.center {text-align: center}
	在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
	注：类名的第一个字符同样不能使用数字！
	
id 选择器与 class 选择器有很大的不同
	一个页面内不能出现相同的ID；再就是ID也是后台开发人员会经常用的，
所以前端开发人员应该尽量少的使用。