【CSS】基本用法-CSDN博客

本文链接：https://blog.csdn.net/weixin_54799594/article/details/140550780

一、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>

每篇一言：唯有前进，才能享受这被诅咒的疯狂。