前端三件套之CSS（一）

前端 CSS

字数统计: 4.5k阅读时长: 17 min

 2022/10/28 

CSS简介

CSS指层叠样式表，样式定义如何显示HTML元素。

样式对网页中元素位置的排版进行像素级精确控制。

样式通常存储在样式表中，外部样式表通常存储在CSS文件中。

多个样式定义可以层叠为一个，即对一个元素多次设置同一个样式，将使用最后一次设置的属性值。

所有样式根据以下规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。即意味着它将优先于以下的样式声明：

浏览器缺省设置
外部样式表
内部样式表（位于<head>标签内部）
内联样式（在HTML元素内部）

CSS语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明，语法如下：

1
2
3

selector{
    property:value;    
}

选择器通常是需要改变样式的HTML元素，每条声明由一个属性和一个值组成。每个属性有一个值，属性和值被冒号分开，例如：

1
2
3

p{
    color:red;
}

CSS颜色值的写法

在描述颜色时，除了使用英文单词，还可以使用十六进制颜色值。

1
2
3

p{
    color:#FF0000;
}

为了节约字节，可以使用CSS的缩写形式：

1
2
3

p{
    color:#F00;
}

除此之外，还可以通过两种方法使用RGB值，当使用RGB百分比时，即使值为0也要写百分比符号。：

p{
    color:rgb(255,0,0);
}

p{
    color:rgb(100%,0%,0%);
}

CSS注释

CSS注释以"/*"开始，以"*/"结束。

Id和Class选择器

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以#号来显示：

1
2
3

#para1{
    text-align:center;
}

id属性不要以数字开头，数字开头的id在Mozilla/Firefox浏览器中不起作用。

id属性只能在每个HTML文档中出现一次。

class类选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。

class选择器在HTML中以class属性表示，在CSS中类选择器以一个点.号来显示：

.center{
    text-align:center;
}
/*也可以指定特定的HTML元素使用class,如指定所有p元素使用class="center"*/
p.center{
    text-align:center;
}

类名不要以数字开头，数字开头的id在Mozilla/Firefox浏览器中不起作用。

标签选择器

以HTML标签作为CSS修饰多用的选择器：

<style>
h3{
    color:red;
}
</style>
<h3>hello world!</h3>

内联选择器

直接在标签内部写CSS代码：

1
2
3

<h3 style="color red;">
    hello world!
</h3>

这四种CSS选择器有修饰上的优先级，即：

内联选择器>id选择器>类选择器>标签选择器。

样式优先级

多重样式优先级顺序

下列是一份优先级逐级减少的选择器列表，其中数字1拥有最高的优先权：

内联样式
id选择器
伪类
属性选择器
类选择器
元素（类型）选择器
通用选择器（*）

`!important`规则例外

当!important规则被应用在一个样式声明中时，无论它处在声明列表中的哪里，该样式声明会覆盖CSS中任何其他的声明。

注意：只在需要覆盖全站或外部CSS的特定页面中使用!important，不要在全站范围的CSS上使用!important，不要在插件中使用!important。

优先级法则

各CSS样式的权值：

内联样式的权值：1000

id选择器（#id）的权值：100

类选择器（.类）的权值：10

元素选择器（元素名）的权值：1

CSS优先级法则：

选择器都有一个权值，权值越大越优先
当权值相等时，后出现的样式表设置要优于先出现的样式表设置
网页编写者设置的CSS样式的优先权高于浏览器所设置的样式
继承的CSS样式不如后来指定的CSS样式
在同一组属性设置中标有“!important”规则的优先级最大

CSS设置背景

CSS背景用于定义HTML元素的背景。

CSS属性定义背景效果：

background-color:背景颜色
background-image：背景图像
background-repeat：背景是否重复、如何重复
background-attachment：背景图像是否固定或随着页面的其余部分滚动
background-position：背景图像的起始位置

background-color

background-color属性定义了元素的背景颜色。background-color属性不能继承，默认值是透明transparent。

1
2
3

body{
    background-color:#FF0000;
}

background-image

background-image属性描述了元素的背景图像。

默认情况下背景图像进行平铺重复显示，以覆盖整个元素实体，默认在页面的水平或垂直方向平铺。

1
2
3

body{
    background-image:url('图片名字');
}

background-repeat

background-repeat属性可以取消图像平铺，或指定只在某个方向上平铺：

body{
    background-image:url('图片名字');
    background-repeat:no-repeat;/*取消平铺*/
    /*background-repeat:repeat-x; 只在水平方向平铺*/
}

background-position

background-position属性可以改变图像在背景中的位置，其属性值可以使用一些关键字top、bottom、left、right和center等，也可以使用如100px或5cm的长度值，还可以只有百分比数值：

body{
    background-image:url('图片名字');
     background-image:no-repeat;
    background-position:right top;
}

背景属性简写

以上代码的属性都可以合并在一个属性background中：

1
2
3

body{
    background:#FF0000 url('图片名字') no-repeat right top
}

使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

Text（文本）

文本颜色

颜色属性可用来设置文字的颜色，如：

1
2
3

h1{
    color:#00ff00;
}

对于W3C标准的CSS，若定义了颜色属性，还必须定义背景色属性。

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式，文本可居中或对齐到左或右或两端对齐。

当text-align设置为justify时，每一行被展开为宽度相等，左右外边距对齐：

h1{
    text-align:center;
}
p.date{
    text-align:right;
}
p.main{
    text-align:justify;
}

若想把一个行内元素的第一行“缩进”，可用左内边距或外边距创造这种效果。

文本修饰

text-decoration属性用来设置或删除文本的装饰，主要用来删除链接的下划线：

a{
    text-decoration:none;
}
h1{
    text-decoration:overline;/*横线在文字上方*/
}
h2{
    text-decoration:line-through;/*横线贯穿文字*/
}
h3{
    text-decoration:underline;/*横线在文字下方*/
}

文本转换

text-transform属性是用来指定在一个文本中的大写和小写字母，可用于所有字句变成大写或小写字母，或每个单词的首字母大写：

p.uppercase{
    text-transform:uppercase;/*文字全大写*/
}
p.lowercase{
    text-transform:lowercase;/*文字全小写*/
}
p.capitalize{
    text-transform:capitalize;/*文字首字母大写*/
}

文本缩进

text-indent属性用来指定文本的第一行缩进：

1
2
3

p{
    text-indent:50px;
}

文字间隔

word-spacing属性可以改变字或单词之间的标准间隔（不是每个字之间，以回车键为分隔符），其默认值normal与设置值为0是一样的：

1
2
3

p{
    word-spacing:30px;
}

字体

字体系列有两种类型：

通用字体系列：拥有相似外观的字体系统组合（如"Serif"或"Monospace"）
特定字体系列：一个特定的字体系列（如“Times”或“Courier”）

除了各种特定的字体系列外，CSS定义了5种通用字体系列：

Serif字体
Sans-serif字体
Monospace字体
Cursive字体
Fantasy字体

Generic family	字体系列	说明
Serif	Times New Roman Georgia	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial Verdana	"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace	Courier New Lucida Console	所有的等宽字符具有相同的宽度

字体系列

font-family属性设置文本的字体系列。

font-family属性应该设置几个字体名称作为备用，若浏览器不支持第一种字体会尝试下一种字体。若字体系列的名称超过一种，第一个字体必须用引号：

1
2
3

p{
    font-family:"Times New Roman",Times,serif;
}

字体样式

font-style属性主要用于指定斜体文字的字体样式。

该属性有三个值：

正常normal：正常显示文本
斜体italic：以斜体字显示的文字
倾斜的文字oblique：文字向一边倾斜

通常情况下italic与oblique在web浏览器种看上去完全一样。

italic与oblique的区别：

italic是一种简单的文字风格，对每个字母的结果有一些小改动，来反映变化的外观
oblique文本是正常竖直文本的一个倾斜版本

p.normal{
    font-style:normal;
}
p.italic{
    font-style:italic;
}
p.oblique{
    font-style:oblique;
}

用像素设置字体大小

用像素可以在IE9、Firefox、Chrome、Opera和Safa里调整文本大小，不能在IE9以前的版本运行。通过浏览器缩放工具调整文本大小时，整个页面也随之变化。

1
2
3

p{
    font-size:40px;
}

用em设置字体大小

默认1em=16px，当font-size为30px时，1em=30px。使用em单位可以在所有浏览器中调整文本大小。通过浏览器缩放工具调整文本大小时，会比正常的尺寸更大或更小。

1
2
3

p{
    font-size:2.5em;/*40px/16=2.5em*/
}

使用百分比和em组合

在所有浏览器的解决方案中，先设置<body>元素的默认大小是百分比，再用em设置其他元素的字体大小。这样可以在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放文本的大小：

body{
    font-size:100%;
}
p{
    font-size:2.5em;
}

链接样式

链接的样式可以用任何CSS属性，链接a具有四个链接状态：

a:link：正常，未访问过的链接
a:visited：用户已访问过的链接
a:hover：当用户鼠标放在链接上时
a:active：链接被点解的哪一刻

当设置为若干链路状态的样式时，要注意：

a:hover必须跟在a.link和a.visited后面
a:active必须跟在a:hover后面

背景颜色

背景颜色属性指定链接背景色：

a.link{
    background-color:#FF704D;
    text-decoration:none;/*删除链接中的下划线*/
}

鼠标形状

使用cursor属性可以设置鼠标形状。

常用鼠标形状如下所示：

属性值	描述
default	默认光标，箭头
pointer	超链接的指针，手型
wait	指示程序正在忙
help	指示可用的帮忙
text	指示文本
crosshair	鼠标呈现十字状

a:hover{
    color:green;
    cursor:crosshair;
}

列表样式

CSS列表可以设置不同的列表项标记为有序列表或无序列表，设置列表项标记为图像。

不同的列表项标记

list-style-type属性指定列表项标记的类型：

ul.a{
    list-style-type:circle;/*空心圆标记*/
}
ul.b{
    list-style-type:square;/*实心方块标记*/
}
ol.c{
    list-style-type:upper-roman;/*大写罗马数字标记*/
}
ol.d{
    list-style-type:lower-alpha;/*小写英文字母标记*/
}

list-style-type属性的常见属性值有：

none：不使用项目符号

disc：实心圆

circle：空心圆

square：实心方块

decimal：阿拉伯数字

lower-alpha：小写英文字母

upper-alpha：大写英文字母

lower-roman：小写罗马数字

upper-roman：大写罗马数字

作为列表项标记的图像

使用列表样式list-style-image属性可以指定列表项标记的图像：

1
2
3

ul{
    list-style-image:url('图像名称');
}

各大主流浏览器对图像标记的显示各有差异，IE和Opera显示标记比Firefox、Chrome和Safari更高一点。

标记出现位置

list-style-position属性可以指定标志出现在列表项内容外（outside）还是内容内部（inside）：

1
2
3

ul{
    list-style-position:outside;
}

简写属性

与背景属性类似，列表属性也可以在单个属性list-style中指定所有的列表属性：

1
2
3

ul{
    list-style:square url("图片名称");
}

使用简写属性值的顺序是：

list-style-type
list-style-position
list-style-image

浏览器兼容性解决方案

若想要在所有浏览器放置同样的标志，应解决浏览器的兼容性问题。

ul{
    list-style-type: none;/*设置列表样式类型为无列表项标记*/
    padding: 0px;/*设置填充和边距0px，确保能在浏览器之间兼容*/
    margin: 0px;
}
ul li{
    background-image: url(图像名称);/*设置图像并设置它只显示一次*/
    background-repeat: no-repeat;
    background-position: 0px 5px;/*定位图像位置*/
    padding-left: 14px;/*把文本置于列表中*/
}

即解决浏览器兼容性问题可以从四个方面着手：浏览器CSS样式初始化、浏览器私有属性、CSS hack语法和自动化插件。

浏览器CSS样式初始化

在所有CSS开始前，先把margin和padding都设为0：

*{
    margin:0;
    padding:0;
}

若不知道浏览器CSS样式要初始化哪些内容，建议直接引用Normalize.css库。

浏览器私有属性

-webkit-、-moz-、-ms-等是经常在CSS属性前加的一些前缀，这些就是浏览器的私有属性。

常用的前缀有：

-moz：代表Firefox浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit：代表Chrome、Safari私有属性
-o：代表opera私有属性

要注意书写顺序，兼容性写法放到前面，标准写法放到最后：

-webkit-transform:rotate(-3deg);/*Chrome、Safari*/
-moz-transform:rotate(-3deg);/*Firefox*/
-ms-transform:rotate(-3deg);/*IE*/
-o-transform:rotate(-3deg):/*opera*/
transform:rotate(-3deg);

CSS hack

除了以上的默认样式覆盖及私有属性添加，有时还需要针对不同浏览器甚至不同版本来编写特定的CSS样式，这一过程称之为CSS hack。在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。

CSS hack的写法可归纳为以下几种：条件hack、属性级hack、选择符级hack。

条件hack

主要针对IE浏览器进行一些特殊的设置：

1
2
3

<!--[if <keywords>? IE <version>?]>
	代码块，可以是html、css、js
<![endif]-->

if后面跟的条件共包括6种选择方式：

是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte
小于：选择小于指定版本的IE版本。关键字：lt
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte
非指定版本：选择除指定版本外的所有IE版本。关键字：!

这里的版本是指IE浏览器版本，如6、7、8。注意IE10及以上版本已将条件注释特性移除：

<!--[if IE]>
	<p>在非IE中看不到这条文字</p>
<![endif]-->

<!--[if IE]>
<style>
	.test{
		color:red;
	}
</style>
<![endif]-->

<!--[if IE 9]>
	<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

属性hack

在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。

1
2
3

selector{
    <hack>?property:value<hack>?;
}

属性取值及浏览器支持情况如下：

	IE6	IE7	IE8	IE9	IE10	现代浏览器
`*`	支持	支持
`+`		支持
`_`	支持
`!important`		支持	支持	支持	支持	支持
`\9`	支持	支持	支持	支持	支持
`\0`			支持	支持	支持
`\9\0`				支持	支持

注意书写顺序，低版本的兼容性写法放到最后：

.test{
    color:#090\9;/*IE6-IE10*/
    *color:#f00;/*IE6-IE7*/
    _color:#ff0;/*IE6及更早版本*/
}

选择符级hack

针对一些页面表现不一致或需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack：

1
2
3

<hack> selector{
    sRules
}

常见的选择符级hack有：

*html /**前缀只对IE6生效*/
*+html /**+前缀只对IE7生效*/
@media screen\9{...}/*只对IE6/7生效*/
@media \0screen\,screen\9{body { background: blue; }}/*只对IE6/7/8有效*/

@media \0screen {body { background: red; }}/*只对IE8有效*/
@media screen\0 {body { background: green; }} /*只对IE8/9/10有效*/
@media screen and (min-width:0\0) {body { background: gray; }} /*只对IE9/10有效*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} /*只对IE10有效*/

例如：

*html .test{
    color:#090;/*IE6及更早版本*/
}
*+html .test{
    color:#ff0;/*IE7*/
}

自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并添加浏览器前缀到CSS内容里。该插件的安装和使用可在webpack指南中学习。

原文作者：唐抉

原文链接：http://tangmenjue.top/2022/10/28/%E5%89%8D%E7%AB%AF%E4%B8%89%E4%BB%B6%E5%A5%97%E4%B9%8BCSS%EF%BC%88%E4%B8%80%EF%BC%89/

发表日期：October 28th 2022, 10:15:29 am

更新日期：October 28th 2022, 10:15:29 am

Next Post

前端三件套之CSS（二）
Previous Post

前端三件套之HTML（二）

CATALOG

1. CSS简介
2. CSS语法
1. 2.1. CSS颜色值的写法
2. 2.2. CSS注释
3. Id和Class选择器
4. 样式优先级
5. CSS设置背景
6. Text（文本）
7. 字体
8. 链接样式
1. 8.1. 背景颜色
2. 8.2. 鼠标形状
9. 列表样式