css简介
CSS（层叠样式表）是一种用于描述网页展示样式的语言。它可以与html结合使用，通过定义样式规则来控制网页的外观和布局。CSS的核心理念是分离样式和内容，使得开发者可以更加灵活和高效地管理网页的外观和布局。
在HTML中使用CSS
在HTML中使用CSS样式的方法有多种，以下是其中常见的方法：
- 内部样式表
内部样式表是指将CSS样式写在HTML文件的<head>标签内的<style>标签中，这样写的样式只对当前HTML文件生效。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* 内部样式表 */
body {
background-color: pink;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some text.</p>
</body>
</html>
- 外部样式表
外部样式表是指将CSS样式写在一个单独的CSS文件中，然后在HTML文件中通过<link>标签引入该CSS文件，这样写的样式可以被多个HTML文件共享。
在CSS文件中，可以定义多个样式，每个样式可以应用到HTML文件中的一个或多个元素。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some text.</p>
</body>
</html>
styles.css
/* 外部样式表 */
body {
background-color: pink;
}
h1 {
color: blue;
}
以上两种方法都可以实现CSS样式在HTML中的应用，使用哪种方法取决于具体的需求和场景。通常情况下，外部样式表更适合大型项目，内部样式表更适合小型项目或单独的页面。
- 在HTML标签中直接使用CSS样式
在HTML标签中直接使用CSS样式的方法是通过元素的style属性来实现的。style属性允许将CSS样式直接应用于元素，具体语法如下：
<标签名 style="属性1: 值1; 属性2: 值2; 属性3: 值3; ...">内容</标签名>
其中，属性和值的格式与CSS语法相同，多个属性和值之间使用分号（;）分隔。
例如，下面的代码将应用一个蓝色的背景和白色的文字颜色到<h1>标签：
<h1 style="background-color: blue; color: white;">Hello World!</h1>
需要注意的是，通过style属性应用的样式只对当前元素生效，不会影响其他元素。此外，使用style属性将样式直接写在HTML标签中可能会使HTML代码变得复杂和难以维护，因此不推荐在大型项目中频繁使用该方法。
CSS选择器
CSS选择器用于选择要应用样式的HTML元素。
元素选择器
元素选择器用于选择特定类型的HTML元素，如<p>、<div>、<h1>等。
/* 选择所有的<p>元素 */
p {
color: red;
}
ID选择器
ID选择器用于选择具有特定ID的HTML元素，ID在HTML文档中应该是唯一的。
/* 选择具有ID为"myDiv"的元素 */
#myDiv {
color: blue;
}
类选择器
类选择器用于选择具有特定类的HTML元素，一个元素可以有多个类。
/* 选择具有class为"myClass"的元素 */
.myClass {
font-size: 16px;
}
属性选择器
属性选择器用于选择具有特定属性的HTML元素。
/* 选择具有title属性的元素 */
[title] {
color: green;
}
/* 选择title属性值为"hello"的元素 */
[title="hello"] {
color: purple;
}
后代选择器
后代选择器用于选择某个元素的后代元素，两个元素之间使用空格分隔。
/* 选择所有<div>元素内部的<p>元素 */
div p {
font-weight: bold;
}
子元素选择器
子元素选择器用于选择某个元素的直接子元素，两个元素之间使用大于号>分隔。
/* 选择<div>元素的直接子元素<p> */
div > p {
text-align: center;
}
相邻兄弟选择器
相邻兄弟选择器用于选择某个元素之后紧跟着的兄弟元素，两个元素之间使用加号+分隔。
/* 选择class为"first"的元素之后紧跟着的class为"second"的元素 */
.first + .second {
color: orange;
}
通用兄弟选择器
通用兄弟选择器用于选择某个元素之后的所有兄弟元素，两个元素之间使用波浪号~分隔。
/* 选择class为"first"的元素之后的所有class为"second"的元素 */
.first ~ .second {
background-color: yellow;
}
伪类选择器
伪类选择器用于选择具有特定状态的元素，如悬停、访问过等。
/* 鼠标悬停时改变链接的颜色 */
a:hover {
color: red;
}
/* 已访问过的链接改变颜色 */
a:visited {
color: purple;
}
/* 当前活动的链接改变颜色 */
a:active {
color: green;
}
伪元素选择器
伪元素选择器用于选择元素的某个部分，如元素的第一行、第一个字母等。
/* 选择元素的第一行 */
p::first-line {
font-weight: bold;
}
/* 选择元素的第一个字母 */
p::first-letter {
font-size: 24px;
}
CSS盒模型
CSS盒模型是一个用于描述HTML元素的布局模型。每个HTML元素都被视为一个矩形盒子，包含了内容区域、内边距、边框和外边距四个部分。以下是CSS盒模型的四个部分：
- 内容区域（Content）：元素的实际内容。
- 内边距（Padding）：内容区域与边框之间的空白区域。
- 边框（Border）：内边距和外边距之间的边框线。
- 外边距（Margin）：边框与相邻元素之间的空白区域。
下面是一个CSS盒模型的示意图：
+----------------------------------------------------+
| Margin |
| +--------------------------------------------+ |
| | Border | |
| | +------------------------------------+ | |
| | | Padding | | |
| | | +----------------------------+ | | |
| | | | Content | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | +----------------------------+ | | |
| | +------------------------------------+ | |
| +--------------------------------------------+ |
| |
+----------------------------------------------------+
- 相关属性
width和height
width和height属性分别用于设置元素的宽度和高度。
/* 设置元素的宽度为200像素，高度为100像素 */
div {
width: 200px;
height: 100px;
}
padding
padding属性用于设置元素的内边距，取值可以是像素值、百分比等。
/* 设置元素的上下内边距为10像素，左右内边距为20像素 */
div {
padding: 10px 20px;
}
border
border属性用于设置元素的边框，取值可以分别指定边框的样式、宽度和颜色。
/* 设置元素的边框样式为实线，宽度为2像素，颜色为红色 */
div {
border: solid 2px red;
}
margin
margin属性用于设置元素的外边距，取值可以是像素值、百分比等。
/* 设置元素的上下外边距为10像素，左右外边距为20像素 */
div {
margin: 10px 20px;
}
- 盒子模型的计算方式
CSS盒子模型的计算方式有两种，分别是标准盒子模型和IE盒子模型。
标准盒子模型
标准盒子模型的宽度和高度只包括内容区域，不包括内边距、边框和外边距。
IE盒子模型
IE盒子模型的宽度和高度包括内容区域、内边距和边框，但不包括外边距。
可以使用box-sizing属性来指定使用哪种盒子模型，默认值为content-box，表示使用标准盒子模型。如果将box-sizing设置为border-box，则使用IE盒子模型。
/* 使用标准盒子模型 */
div {
box-sizing: content-box;
}
/* 使用IE盒子模型 */
div {
box-sizing: border-box;
}
CSS样式属性
- 文本属性
color
设置文本颜色，取值可以是预定义的颜色名称、RGB值、十六进制颜色值等。
/* 使用预定义的颜色名称 */
p {
color: red;
}
/* 使用RGB值 */
p {
color: rgb(255, 0, 0);
}
/* 使用十六进制颜色值 */
p {
color: #ff0000;
}
font-family
设置字体族，取值可以是字体名称、字体族名称、通用字体系列等。
/* 使用字体名称 */
p {
font-family: Arial, sans-serif;
}
/* 使用字体族名称 */
p {
font-family: "Times New Roman", serif;
}
/* 使用通用字体系列 */
p {
font-family: serif;
}
font-size
设置字体大小，取值可以是像素值、百分比、em单位等。
/* 使用像素值 */
p {
font-size: 16px;
}
/* 使用百分比 */
p {
font-size: 120%;
}
/* 使用em单位 */
p {
font-size: 1.2em;
}
font-weight
设置字体粗细，取值可以是normal、bold、bolder、lighter或数字值。
/* 使用预定义的字体粗细 */
p {
font-weight: bold;
}
/* 使用数字值 */
p {
font-weight: 700;
}
text-align
设置文本对齐方式，取值可以是left、right、center、justify或inherit。
/* 左对齐 */
p {
text-align: left;
}
/* 右对齐 */
p {
text-align: right;
}
/* 居中对齐 */
p {
text-align: center;
}
/* 两端对齐 */
p {
text-align: justify;
}
text-decoration
设置文本装饰，取值可以是none、underline、overline、line-through或inherit。
/* 下划线 */
a {
text-decoration: underline;
}
/* 删除线 */
del {
text-decoration: line-through;
}
- 背景属性
background-color
设置背景颜色，取值可以是预定义的颜色名称、RGB值、十六进制颜色值等。
/* 使用预定义的颜色名称 */
body {
background-color: white;
}
/* 使用RGB值 */
body {
background-color: rgb(255, 255, 255);
}
/* 使用十六进制颜色值 */
body {
background-color: #ffffff;
}
background-image
设置背景图片，取值可以是图片URL或none。
/* 使用图片URL */
body {
background-image: url("background.png");
}
/* 不使用背景图片 */
body {
background-image: none;
}
background-repeat
设置背景图片的重复方式，取值可以是repeat、repeat-x、repeat-y或no-repeat。
/* 水平和垂直方向都重复 */
body {
background-repeat: repeat;
}
/* 仅水平方向重复 */
body {
background-repeat: repeat-x;
}
/* 仅垂直方向重复 */
body {
background-repeat: repeat-y;
}
/* 不重复 */
body {
background-repeat: no-repeat;
}
background-position
设置背景图片的位置，取值可以是关键词或像素值。
/* 居中 */
body {
background-position: center;
}
/* 左上角 */
body {
background-position: 0 0;
}
/* 右下角 */
body {
background-position: right bottom;
}
/* 指定像素值 */
body {
background-position: 10px 20px;
}
- 盒模型属性
width
设置元素的宽度，取值可以是像素值、百分比等。
/* 使用像素值 */
div {
width: 100px;
}
/* 使用百分比 */
div {
width: 50%;
}
height
设置元素的高度，取值可以是像素值、百分比等。
/* 使用像素值 */
div {
height: 50px;
}
/* 使用百分比 */
div {
height: 50%;
}
margin
设置元素的外边距，取值可以是像素值、百分比等。
/* 设置上、下、左、右外边距均为10像素 */
div {
margin: 10px;
}
/* 设置上下外边距为10像素，左右外边距为20像素 */
div {
margin: 10px 20px;
}
/* 设置上外边距为10像素，左右外边距为20像素，下外边距为30像素 */
div {
margin: 10px 20px 30px;
}
/* 设置上外边距为10像素，右外边距为20像素，下外边距为30像素，左外边距为40像素 */
div {
margin: 10px 20px 30px 40px;
}
padding
设置元素的内边距，取值可以是像素值、百分比等。
/* 设置上、下、左、右内边距均为10像素 */
div {
padding: 10px;
}
/* 设置上下内边距为10像素，左右内边距为20像素 */
div {
padding: 10px 20px;
}
/* 设置上内边距为10像素，左右内边距为20像素，下内边距为30像素 */
div {
padding: 10px 20px 30px;
}
/* 设置上内边距为10像素，右内边距为20像素，下内边距为30像素，左内边距为40像素 */
div {
padding: 10px 20px 30px 40px;
}
border
设置元素的边框，取值可以是边框样式、边框宽度、边框颜色等。
/* 设置1像素粗的实线边框，颜色为黑色 */
div {
border: 1px solid black;
}
/* 设置5像素粗的虚线边框，颜色为红色 */
div {
border: 5px dashed red;
}
/* 设置上边框为1像素实线，颜色为黑色；右边框为2像素实线，颜色为红色；下边框为3像素实线，颜色为绿色；左边框为4像素实线，颜色为蓝色 */
div {
border-top: 1px solid black;
border-right: 2px solid red;
border-bottom: 3px solid green;
border-left: 4px solid blue;
}
box-sizing
设置元素的盒模型的计算方式，取值可以是content-box或border-box。
/* 使用content-box计算盒模型 */
div {
box-sizing: content-box;
}
/* 使用border-box计算盒模型 */
div {
box-sizing: border-box;
}
- 定位属性
position
设置元素的定位方式，取值可以是static、relative、absolute或fixed。
/* 使用默认的静态定位 */
div {
position: static;
}
/* 相对定位 */
div {
position: relative;
}
/* 绝对定位 */
div {
position: absolute;
}
/* 固定定位 */
div {
position: fixed;
}
top
设置元素的顶部边缘相对于其包含元素的顶部边缘的偏移量，取值可以是像素值、百分比等。
/* 偏移量为10像素 */
div {
top: 10px;
}
/* 偏移量为50% */
div {
top: 50%;
}
bottom
设置元素的底部边缘相对于其包含元素的底部边缘的偏移量，取值可以是像素值、百分比等。
/* 偏移量为10像素 */
div {
bottom: 10px;
}
/* 偏移量为50% */
div {
bottom: 50%;
}
left
设置元素的左侧边缘相对于其包含元素的左侧边缘的偏移量，取值可以是像素值、百分比等。
/* 偏移量为10像素 */
div {
left: 10px;
}
/* 偏移量为50% */
div {
left: 50%;
}
right
设置元素的右侧边缘相对于其包含元素的右侧边缘的偏移量，取值可以是像素值、百分比等。
/* 偏移量为10像素 */
div {
right: 10px;
}
/* 偏移量为50% */
div {
right: 50%;
}
- 浮动属性
float
设置元素的浮动方式，取值可以是left、right或none。
/* 左浮动 */
div {
float: left;
}
/* 右浮动 */
div {
float: right;
}
/* 不浮动 */
div {
float: none;
}
clear
设置元素的清除方式，取值可以是left、right、both或none。
/* 清除左侧浮动元素 */
div {
clear: left;
}
/* 清除右侧浮动元素 */
div {
clear: right;
}
/* 清除两侧浮动元素 */
div {
clear: both;
}
/* 不清除浮动元素 */
div {
clear: none;
}
- 显示属性
display
设置元素的显示方式，取值可以是block、inline、inline-block、none等。
/* 块级元素 */
div {
display: block;
}
/* 行内元素 */
span {
display: inline;
}
/* 行内块级元素 */
img {
display: inline-block;
}
/* 不显示 */
div {
display: none;
}
- 其他属性
opacity
设置元素的透明度，取值可以是0~1之间的数字。
/* 完全透明 */
div {
opacity: 0;
}
/* 半透明 */
div {
opacity: 0.5;
}
/* 不透明 */
div {
opacity: 1;
}
z-index
设置元素的堆叠顺序，取值可以是数字。
/* 堆叠顺序为1 */
div {
z-index: 1;
}
/* 堆叠顺序为2 */
div {
z-index: 2;
}
cursor
设置鼠标悬停时的光标形状，取值可以是pointer、default、text等。
/* 悬停时的光标形状为手型 */
a {
cursor: pointer;
}
/* 悬停时的光标形状为默认形状 */
div {
cursor: default;
}
/* 悬停时的光标形状为文本输入形状 */
input {
cursor: text;
}
visibility
设置元素的可见性，取值可以是visible、hidden或collapse。
/* 可见 */
div {
visibility: visible;
}
/* 不可见 */
div {
visibility: hidden;
}
/* 折叠，对于表格元素有效 */
table {
visibility: collapse;
}
overflow
设置元素溢出内容的处理方式，取值可以是visible、hidden、scroll或auto。
/* 可见，溢出内容不会被裁剪 */
div {
overflow: visible;
}
/* 不可见，溢出内容会被裁剪 */
div {
overflow: hidden;
}
/* 可滚动，出现滚动条 */
div {
overflow: scroll;
}
/* 自动，根据需要自动出现滚动条 */
div {
overflow: auto;
}
京公网安备 11010802035086号