一、CSS 简介
CSS(Cascading Style Sheets)是一种用于描述 HTML 页面样式的语言。在 Web 开发中,CSS 通常用于控制网页的布局、字体、颜色和大小等方面。
CSS 分为内部样式表、外部样式表和行内样式表。内部样式表是将样式写在 HTML 页面的 head 标签中,外部样式表是单独创建一个 CSS 文件,而行内样式表直接写在 HTML 元素内
CSS 是层叠的,就是说一个属性可以有多个定义,最终生效的是处于优先级最高的定义。CSS 的优先级是:!important > 行内样式 > ID 选择器 > 类选择器和伪类选择器 > 元素选择器 > 通配符选择器和组合选择器。
二、基础语法
CSS 语法由选择器和声明块组成。选择器用于选择要应用样式的 HTML 元素,而声明块则包含一些属性和值,用分号分隔。
例如:
h1 {
color: red;
font-size: 36px;
}
上面的例子中,h1 是选择器,color 和 font-size 是属性,red 和 36px 是属性的取值。
三、选择器
CSS 选择器用于选择要应用样式的 HTML 元素。常见的选择器有:
- 元素选择器:针对 HTML 元素的类型进行选择,如 div、p、a 等。
- ID 选择器:选取具有特定 ID 属性值的元素,如 #header。
- 类选择器:选取具有特定类名的元素,如 .intro。
- 后代选择器:选取某个元素内部的另一个元素,如 ul li。
- 伪类选择器:选取特定状态下的元素,如 :hover、:visited、:first-child。
四、常用属性
CSS 有很多属性可供使用,这里介绍几个常用的属性。
1. color
color 属性用于设置文本颜色。可以使用颜色名称、RGB 值、十六进制值等来表示颜色。
h1 {
color: red; /*使用颜色名称*/
color: rgb(255, 0, 0); /*使用 RGB 值*/
color: #ff0000; /*使用十六进制值*/
}
2. font-size
font-size 属性用于设置字体大小。
p {
font-size: 18px;
}
3. background
background 属性用于设置背景颜色或背景图片。可以同时设置多个属性值,以逗号分隔。
body {
background-color: #f0f0f0; /*设置背景颜色*/
background-image: url(bg.jpg); /*设置背景图片*/
}
4. margin 和 padding
margin 和 padding 属性用于设置元素的外边框和内边框。它们可以设置四个方向的值(上、右、下、左),也可以分开设置。
p {
margin: 20px; /*四个方向都设置为 20px*/
padding-top: 10px; /*上边距为 10px,其他方向为默认值(0)*/
padding: 10px 20px; /*上下边距为 10px,左右边距为 20px*/
padding: 10px 20px 30px 40px; /*分别设置上右下左边距*/
}
五、响应式布局
响应式布局是指网页可以根据不同的设备和屏幕尺寸自适应地显示。在 CSS 中,可以使用 @media 查询来实现响应式布局。
例如:
@media screen and (max-width: 768px) {
/*当屏幕宽度小于 768px 时*/
body {
font-size: 16px; /*设置字体大小为 16px*/
}
.wrapper {
width: 90%; /*设置宽度为 90%*/
}
}
六、CSS 预处理器
CSS 预处理器是指将类似于编程语言的语法,如变量、函数、条件语句等,引入到 CSS 中。常见的 CSS 预处理器有 Sass、Less 和 Stylus 等。
例如,使用 Sass 来定义变量:
$primary-color: #337ab7;
$secondary-color: #5cb85c;
h1 {
color: $primary-color;
}
p {
color: $secondary-color;
}
七、CSS 框架
CSS 框架是指封装好的 CSS 样式库,可以快速搭建网页布局和样式。常见的 CSS 框架有 Bootstrap、Foundation 和 Bulma 等。
例如,使用 Bootstrap 创建导航栏:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
八、总结
本篇文章介绍了 CSS 的基础语法、选择器、常用属性、响应式布局、CSS 预处理器和 CSS 框架。掌握了这些知识,可以快速地创建优美、响应式的网页。