一、CSS简介
层叠样式表(CSS)是一种用来表现HTML或XML文档样式的计算机语言,可以对网页中元素位置进行像素级精确控制。CSS的中文名称为层叠样式表,外文全称为Cascading Style Sheets,是计算机科学领域的一种技术。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、CSS的使用方式
CSS的使用方式主要包括内联样式、内部样式表和外部引用三种方法。内联样式是在HTML元素中直接使用style
属性定义的,这种方法简单直接,但无法重用,通常仅用于快速测试或小规模的样式修改。内部样式表则是在HTML文档的<head>
区域内使用<style>
标签定义的。这种方式使得样式局限于当前文档,适用于单个页面需要独特样式的情况。而外部引用是将CSS代码单独写在一个文件中,然后在HTML中使用<link>
标签引入这个外部样式表文件,这是最推荐的方式,因为它可以实现样式的重用,同时便于维护和管理多个页面的样式。
1、在元素中指定 style 属性
<td style="border: solid 2px red; background-color: white; font-size: 20px">\</td>;
2、在页面中嵌入style样式块
1.<style>
2.td {
3.background-color: #7fffd4; /*颜色的RGB编码*/
4.width: 25%;
5.text-align: center;
6.font-size: 30px;
7.}
8.</style>
3、在页面中引入外部CSS文件
<link rel="stylesheet" type="text/css" href="/page/css/bootstrap.css" />
1、标签选择器
/* 为当前页面中所有的单元格设计统一的样式 */
td{
background-color:#7fffd4;
width:25%;
text-align:center;
font-size:30px;
}
2、类选择器
/* 类选择器,以.开头,对元素中指定class="title"的元素设计样式*/
.title {
color: white; /文字的颜色/
font-size: 22px; /文字的大小/
float: right; /设置容器为向右浮动/
margin-right: 10px; /设置容器距离右边10px/
}
3、ID选择器
/* ID选择器,以#开头,对元素中指定id="title"的元素设计样式*/
#title {}
color: white;
font-size: 22px;
float: right;
margin-right: 10px;
}
4、组合选择器
可以将标签选择器、ID选择器、类选择器和属性选择器等,组合成不同的选择器类型来构成更复杂的选择器。
/* 组合使用 ID 和 标签 选择器,并实现了层次关系 */
#button {td}
font-size: 32px;
font-family: 微软雅黑;
text-align: center;
}
5、属性选择器
/*为DIV元素下拥有type="button"属性的元素设计样式*/
div [type="button"] {
color: white;
font-size: 22px;
}
6、伪类选择器
设计伪类和伪元素可以实现其中的一些效果。使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。
/* 使用 hover 伪类设置鼠标划过时的变换效果 *//
#button td:hover {
background-color: red; /* 当鼠标滑动时,变换背景颜色 *//
}
/*后代选择器*/
div>div>div{
color:red
}
三、DIV盒模型
盒模型(Box Model)
盒模型(也可称之为盒子模型)是CSS中一个重要的概念,理解了盒模型才能更好的排版。我们先来相像一下一个盒子,它有:外边距(margin, 与其他盒子之间的距离)、边框(border)、内间距(padding,盒子边框与内容之间的填充距离)、内容(content)四个属性;让我们俯视这个盒子,它有上下左右四条边,所以每个属性都包括四个部分:上下左右;这四部分可同时设置,也可分别设置;内间距可以理解为盒子里装的东西和边框的距离,而边框有厚薄和颜色之分,内容就是盒子中间装的东西,外边距就是边框外面自动留出的一段空白。
我们换种方式来理解这个盒模型:
- 内容区域(content):这是实际显示的内容,可以是文本、图片或其他HTML元素。
- 内边距(padding):围绕内容区域的空白区域,用于控制内容与边框之间的间距。
- 边框(border):包围内边距和内容的区域,可以设置宽度、样式和颜色。
- 外边距(margin):围绕整个div元素的空白区域,用于控制与其他元素之间的距离。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒模型基础</title>
<style>
body {
padding: 0;
margin: 0;
background-image: url("image/black-star.jpg");
}
div {
width: 450px; /* DIV必须明确设置高度与宽度 */
height: 200px;
margin: 40px auto; /* 上下外边距50px,左右水平居中*/
padding: 30px; /* 边框距离内容上下间距为40px */
border: solid 5px #ff7448;
color: #ffffff; /* 内容字体颜色为白色 */
font-size: 30px;
text-align: center; /* 让内容水平居中 */
line-height: 200px; /* 设置行高与高度相同,模拟垂直居中*/
}
</style>
</head>
<body>
<div>hell,world</div>
</body>
</html>
每篇一言:唯有前进,才能享受这被诅咒的疯狂。