CSS基础
CSS基础
目录
- CSS基础
-
- 概述
- CSS基础语法
-
- 内嵌用法
- CSS选择器
-
- 元素选择器
- 类选择器
- ID选择器
- 包含选择器
- 组合选择器
- 父子选择器
- 毗邻选择器
- 属性选择器
- 通用选择器
- CSS基本属性
-
- 盒模型
- 字体
- 文本
- 背景
- 边框
- 伪类和伪元素
-
- 伪类（Pseudo-class）
- 伪元素（Pseudo-element）
概述
CSS（Cascading Style Sheets）是一种用于描述网页样式的样式表语言。它与 HTML 结合使用，用于控制网页的布局、外观和交互效果。
CSS与HTML结合使用，它赋予HTML更强大的样式控制以及动态性，并且CSS结构与格式分离，更有利于页面的重用与维护。
CSS基础语法
<head>
<style >
选择器{
属性1:属性值1;
属性2:属性值2;
……
}
style>
head>
例如
h1{ /*标记选择器h1选中网页的所有<h1>标记*/
color :red; /*设置文字的颜色属性为红色*/
font-size:14px; /*设置文字的大小属性为14像素*/
}
内嵌用法
内嵌样式是指直接将style属性值写入标签中，如下：
<a style="color:red; font-size: 28px;">你好a>
你好将被修改为红色28像素的字体
CSS选择器
元素选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style >
p {
color : red
}
h1{
color: aqua;
}
style>
head>
<body>
<p>
你好
p>
<h1>你好h1>
body>
html>
结果：
类选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style >
.c1 {
color : darkblue;
}
.c2{
color: darkgoldenrod;
}
style>
head>
<body>
<p class="c1">
你好
p>
<h1 class="c2">你好h1>
body>
html>
结果：
ID选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#a {
color: aqua;
}
#b {
color: darksalmon;
}
style>
head>
<body>
<p id="a">
你好
p>
<h1 id="b">你好h1>
body>
html>
结果：
包含选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1 span {
color: aqua;
}
style>
head>
<body>
<h1>
<span>你好span>
h1>
<h2>
<span>你好span>
h2>
<h3>
<span>你好span>
h3>
body>
html>
结果：
组合选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1,h2 {
color: aqua;
}
style>
head>
<body>
<h1>
你好
h1>
<h2>
你好
h2>
body>
html>
结果：
父子选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.a span {
color: aqua;
}
.b>span{
color: darksalmon;
}
style>
head>
<body>
<div class="a">
<h1>
你
<span>好span>
h1>
div>
<div class="b">
<h1>
你
<span>好span>
h1>
div>
body>
html>
结果：
毗邻选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.a+span {
color: aqua;
}
.b+span{
color: darksalmon;
}
style>
head>
<body>
<div class="a">
div>
<span>你好span>
<div class="b">
<span>你好span>
div>
body>
html>
结果：
属性选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
span[abc]{
color: aqua;
}
span[abc=bbb]{
color: blue;
}
style>
head>
<body>
<h1>
<span abc="aaa">
你好
span>
<span abc="bbb">
你好
span>
h1>
body>
html>
结果：
通用选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
color: red;
}
style>
head>
<body>
<h1>
<span>你好span>
h1>
<div>
<p>
你好
p>
div>
body>
html>
结果：
CSS基本属性
盒模型
| 属性 | 说明 |
|---|---|
| width | 设置元素的宽度，可以使用像素（px）、百分比（%）或其他长度单位来指定具体宽度 |
| height | 设置元素的高度，用法与宽度width相同 |
| padding | 内边距，元素内容与其边框之间的空白区域的大小，可以设置上下左右四个不同的边距值 |
| margin | 外边距，元素周围的空白区域的大小，用法与padding内边距相同 |
| border | 边框，设置元素的边框样式，分别使用 border-style、border-width 和 border-color来设置类型、宽度和颜色 |
| display | 用于控制元素的显示方式，block显示为块级元素，inline为内联元素，inline-block内联块级元素，none完全隐藏元素 |
示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 400px; /*设置div块宽度为400px*/
height: 230px; /*设置div块高度为230px*/
padding: 25px; /*设置div块内边距为25px*/
margin: 10px; /*设置上下左右外边距为10像素*/
border-style: solid; /*设置边框为实线*/
border-width: 2px; /*宽度为2像素*/
border-color: red; /*设置边框颜色为红色*/
/* border: 10px solid black; 设置div块边框为10px、实心线、黑色*/
display: block; /* 将元素显示为块级元素 */
}
style>
head>
<body>
<div>
<h1>你好h1>
div>
body>
html>
字体
| 属性 | 说明 |
|---|---|
| font-size | 字体大小，单位为像素(xp) |
| font-style | 字体样式，Normal 为正常; italic 为斜体; oblique 为倾斜 |
| font weight | 字体粗细，Normal 为正常; lighter 为细体; bold 为粗体; bolder 为特粗体 |
| font- family | 字体系列 |
示例：
<style>
#p1{
font-family: Times New Roman,serif;
/*设置字体类型*/
font-size: 28px;
/*设置字体大小*/
font-weight: bold;
/*设置字体粗细*/
}
#p2{
font-family:Arial,sans-serif;
font-size:20px;
font-style: italic;
/*设置字体风格*/
font-weight:lighter;
}
#p3{
/*设置字体倾斜、加粗、大小为24像素，行高为36像素，字体为arial,sans-serif*/
font:oblique bold 24px/36px arial,sans-serif;
}
style>
文本
| 属性 | 说明 |
|---|---|
| color | 文本颜色 |
| direction | 文本方向 |
| letter-spacing | 字符间距，允许使用负值，默认值为normal |
| line-height | 行高 |
| text-align | 对齐方式，left左对齐(默认)，center居中对齐，right右对齐 |
| text-decoration | 为文本添加修饰，none 为无修饰(默认值)，underline 为下划线，overline 为上划线，line-through为删除线 |
| text-overflow | 处理溢出文本，clip 为不显示溢出文本，ellipsis 为用省略标记"…"标示溢出文本 |
| text-indent | 设置首行文本的缩进 |
| text-transform | 控制文本转换。none为不转换(默认值)，capitalize 为首字母大写。uppercase为全部字符转换成大写，lowercase 为全部字符转换成小写 |
| text-shadow | 文本阴影 |
| unicode-bidi | 文本方向 |
| word-spacing | 字间距(只针对英文单词) |
| white-space | 设置对元素中空白的处理方式 |
示例：
<style>
#one{
text-align: center;
/*文字左对齐*/
word-spacing: 30px;
/*单词之间的间距为30像素*/
}
#two{
text-align: center;
/*文字居中对齐*/
word-spacing: -10px;
/*单词之间的间距为-15像素*/
}
#three{
text-align: center;
/*文字右对齐*/
letter-spacing: 5px;
/*字母之间距离为28个像素*/
text-decoration: underline;
/*文字修饰：加下划线*/
text-transform: uppercase;
/*文字全部大写*/
}
style>
/*阴影*/
<style>
h2 {
font-size: 50px;
font-family: 黑体;
text-shadow: red 6px -6px 6px, yellow 16px -16px 10px;
}
style>
背景
| 属性 | 说明 |
|---|---|
| background | 将背景的所有属性设置在一个声明中 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。scroll指背景图像随内容滚动; fixed 指背景图像不随内容滚动 |
| background-color | 背景颜色，默认值是transparent透明 |
| background-image | 把图像设置为背景 |
| background-position | 设置背景图像的起始位置。left 为水平居左，right 为水平居右，center 为水平居中或垂直居中，top 为垂直靠上，bottom为垂直靠下或精确的值 |
| background-repeat | 设置背景图像是否重复及如何重复。repeat-x 为横向平铺; repeat-y 为纵向平铺; norepeat 为不平铺; repeat 为平铺背景图片，该值为默认值 |
示例：
<style>
div{
background-color: #00ff00; /*设置div块背景颜色*/
background-clip: content-box; /*设置div块裁剪属性为从内容区域向外裁剪*/
border: 10px solid black; /* 设置div块边框为10px、实心线、黑色*/
}
style>
边框
| 属性 | 说明 |
|---|---|
| border | 边框属性 |
| none | 无边框，无论边框宽度设为多大 |
| double | 双线边框 |
| hidden | 隐藏边框 |
| groove | 3D凹槽边框 |
| dotted | 点线边框 |
| ridge | 菱形边框 |
| dashed | 虚线边框 |
| solid | 实线边框 |
| inset | 3D内嵌边框 |
| outset | 3D凸边框 |
示例：
<style>
p.dotted {border-style: dotted;}
p.dashed{border-style: dashed;}
p.solid {border-style:solid ;}
p.double {border-style:double ;}
p.groove{border-style: groove;}
p.ridge{border-style:ridge ;}
p.inset {border-style:inset ;}
p.outset {border-style: outset;}
style>
伪类和伪元素
伪类和伪元素是CSS中用于选择和样式化文档中特定部分的特殊选择器。它们允许开发者根据元素的状态、位置或其他特定条件来选择和操作元素。
伪类（Pseudo-class）
伪类用于选择处于特定状态的元素。它以冒号（:）开头，例如 :hover、:active、:first-child 等。常见的伪类包括 :hover（鼠标悬停）、:active（被点击时的状态）、:focus（获取焦点时的状态）等。通过使用伪类选择器，可以根据元素的交互状态为其应用不同的样式。
伪元素（Pseudo-element）
伪元素用于选择并样式化元素的某个特定部分。它以双冒号（::）开头，例如 ::before、::after。常见的伪元素包括 ::before（在元素前插入内容）、::after（在元素后插入内容）等。伪元素允许开发者在元素的指定位置创建或修改内容，并将其样式化。