css3

为实现内容与样式分离；用 CSS 调整页面的布局，元素的颜色和尺寸，添加背景图像和边框，创建动画效果等

selector {
    property: value;
}

/*标签选择器:这个CSS规则将应用到HTML文档中所有的h1元素上，使得这些h1元素的文字颜色为蓝色，字体大小为24像素*/
h1 {
    color: blue;
    font-size: 24px;
}

/*类选择器*/
/*<div class="block1"> 变红色 </div>*/
.block1 {
    color: red;
}

/*id选择器*/
/*<p id="id1"> 变红色 </p>*/
#id1 {
    color: red;
}

/*通配符选择器:清除所有的元素标签的内外边距*/
* {
   margin: 0;
   padding: 0;
}

/*属性选择器*/
/*css2起*/
[attribute] { property: value; }/*匹配所有有 attribute属性的元素*/
[attribute="value"] { property: value; }/**/
[attribute^="value"] { property: value; }/*匹配所有 attribute属性值以 "value" 开头的元素*/
[attribute|="value"] { property: value; }/*匹配 attribute属性值为 "value" 或以 "value-" 开头的元素*/
/*css3*/
[attribute$="value"] { property: value; }/*匹配所有 attribute属性值以 "value" 结尾的元素*/
[attribute*="value"] { property: value; }/*匹配所有 attribute属性值中包含 "value" 字符串的元素*/
[attribute~="value"] { property: value; }/*匹配 attribute属性值包含单词 "value" 的元素*/

1）selector 指定 CSS 规则应用到哪些元素；selector 包括：标签选择器、类选择器、id 选择器和通配符选择器
2）property: value;：一组 CSS 声明

复合 selector#

并集 selector#

将多个基础选择器通过逗号分开

p, b, i, span {/*选择所有的 <p>、<b>、<i>、<span> 元素，并为它们设置 color: red;*/
    color: red;
}

交集 selector#

div.class {/*既是Div标签又是class类*/
    color: red;
}

后代selector#

后代选择器选择的是某个元素内的所有后代元素，而不管这些后代元素的层级深度

p b {/*选择的是所有 <p> 元素内的 <b> 元素，无论 <b> 在 <p> 中的嵌套层次有多深*/
    color: red;
}

子selector#

选择某个元素的直接子元素

ul > li {
    border: 1px solid red;
}

相邻兄弟selector#

选择紧接在另一个元素之后的兄弟元素

p + b {/*选择紧跟在 <p> 元素后的第一个 <b> 元素*/
    color: red;
}

普通兄弟selector#

选择所有位于某元素后面的兄弟元素

p ~ b {/*选择所有位于 <p> 元素后面的 <b> 元素，不一定是紧跟在 <p> 后面的，只要它们在同一级别的 DOM 树中*/
    color: red;
}

伪类 selector#

伪类 selector	说明
	匹配父元素的第一个子元素
	匹配父元素的最后一个子元素
(n)	匹配父元素中的第 n 个子元素；n 是递增的自然数，也可以写常数或者 odd，even
(n)	匹配父元素的第 n 个同类型子元素
	匹配父元素中的第一个同类型子元素
	匹配父元素的最后一个同类型子元素
	匹配所有未访问链接
	匹配所有已访问链接
	匹配鼠标悬停其上的元素
	匹配被点击的链接（eg：鼠标按住时的状态）
	匹配处于选中状态的元素
	匹配每个被禁用的元素
	匹配任何没有子元素的元素
	匹配每个已启用的元素
	匹配获得焦点的元素
	匹配具有指定取值范围的元素
	匹配所有具有无效值的元素
(language)	匹配每个 lang 属性值以 "it" 开头的元素
(selector)	匹配每个非元素的元素
(n)	匹配父元素的倒数第二个子元素
(n)	匹配父元素的倒数第二个子元素
	匹配父元素中唯一的元素
	匹配父元素中唯一的子元素
	匹配不带 "required" 属性的元素
	匹配值在指定范围之外的元素
	匹配指定了 "readonly" 属性的元素
	匹配不带 "readonly" 属性的元素
	匹配指定了 "required" 属性的元素
	匹配元素的根元素，在 HTML 中，根元素永远是 HTML
	匹配当前活动的 #news 元素（单击包含该锚名称的 URL）
	匹配所有具有有效值的元素

伪元素 selector#

匹配元素的部分（如首字母、首行文本等）

伪元素	例子描述	css
::after	在元素后插入内容	2
::before	在元素前插入内容	2
::first-letter	匹配块级元素内容首字符	1
::first-line	匹配块级元素内容首行	1
::selection	匹配用户选中的元素
::placeholder	匹配表单控件占位文本（如）；用于自定义文本样式

<p>strick</p>
<input type="text" placeholder="请输入"/>
p::first-letter {
  font-size: 200%;
}
p::first-line {
  font-weight: bold;
}
input::placeholder {
  color: red;
}
p::selection {
  color: red;
}

p::before {
  content: "I "<!--可以是图片url('./smiley.gif');-->
}
p::after {
  content: " Strick"
}

css 引入#

多个样式表影响同一元素时，浏览器根据冲突样式的层叠优先级规则决定应用的样式：!important标记 > 元素内嵌 > 文档内嵌 > 外部链接样式 > 浏览器默认指定样式；

选择器优先级：选定范围越小越优先

元素内嵌#

在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式；每个声明键值对用;隔开

<p style="color:red;font-size:50px;">hello world</p>

文档内嵌#

在中创建

<style type="text/css">
  p {
    color: blue;
    font-size: 40px;
  }
</style>
<p>这是一段文本</p>

外部链接样式#

<link rel="stylesheet" type="text/css" href="style.css">

style.css：

@charset "utf-8";
p {
    color: green;
    font-size: 30px;
}

强行设置最高优先级#

color: green !important;

样式继承#

1）如果元素没有设置父元素相关的样式，则继承父元素样式（只适用于 text-，font-，line - 开头的及 color 属性样式可继承，不适用于布局样式）
2）强制继承布局样式

<p style="color:red;">这是<b>HTML5</b></p> <!--<b>元素继承了<p>元素的样式-->

<p>这是<b>HTML5</b></p>
<style type="text/css">
  p {
    border: 1px solid red;<!--border非继承样式-->
  }
  b {
    border: inherit;
  }
</style>

Box Model#

网页布局流程：
1）设置一个个网页元素 box 的样式；摆到合适位置
2）往 box 装内容

content 与 border 的距离就是内边距；box 间的距离就是外边距

元素 box 类型#

块级元素#

1) 块级元素独占一行；
2) 高度，宽度、外边距以及内边距都可以控制。
3) 宽度默认是容器（父级宽度）的 100%。
4) 文字类元素内不能放块级元素；比如

~#

常见块：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内元素#

1) 一行可以显示多个行内元素；
2) 高、宽直接设置是无效的。只能自适应内容的宽度
3) 行内元素只能容纳文本或其他行内元素。
4) 链接里面不能再放链接；特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

常见行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

行内块元素#

1) 一行可以显示多个行内块元素，但是他们之间会有空白缝隙；
2) 默认宽度是自适应内容的宽度；高度，行高、外边距以及内边距都可以控制

常见行内块元素：

<img />、<input />、<td>

类型转换#

span { /*转化成块元素*/
  display: block;
}

div { /*转化成行内元素*/
  display: inline;
}

div { /*转化成行内-块元素*/
  display: inline-block;
}

div { display: none;/*将元素隐藏且不占位*/
}

设置元素 box 尺寸#

属性	值	说明	CSS 版本
width	auto、长度值或百分比	设置元素的宽度	1
height	auto、长度值或百分比	设置元素的高度	1
min-width	auto、长度值或百分比	设置元素最小宽度	2
min-height	auto、长度值或百分比	设置元素最小高度	2
max-width	auto、长度值或百分比	设置元素最大宽度	2
max-height	auto、长度值或百分比	设置元素最大高度	2
box-sizing	content-box border-box	默认值，元素的宽度和高度只计算`content`尺寸，不含`padding`和`border` 元素的宽度和高度计算包括内边距`padding`和边框`border`	3，在各内核早期作为实验功能，要带浏览器前缀，后面就不用了
resize	none both horizontal vertical	普通元素默认值，不允许客户端用户调整元素大小表单类的 textarea 元素默认值，客户端用户可以调节元素的宽度和高度客户端用户可以调节元素的宽度客户端用户可以调节元素的高度

div {
  background-color: purple;

  width: 200px; height: 200px;
  min-width: 100px;
  min-height: 100px;
  max-width: 300px;
  max-height: 300px;

  resize: both;
  overflow: auto;/*搭配这个出现可拖拽大小的图形*/

/*  -webkit-box-sizing: border-box;*/  /* Safari 和 Chrome */
/*  -moz-box-sizing: border-box;  */   /* Firefox */
/*  -ms-box-sizing: border-box;   */   /* IE */
  box-sizing: border-box;         /* 标准 */
  padding: 10px; border: 5px solid red;
}

设置内边距 padding#

设置元素内部边缘填充空白的大小

属性	值	说明	CSS 版本
padding-top	长度值或百分比	设置顶部内边距	1
padding-right	长度值或百分比	设置右边内边距	1
padding-bottom	长度值或百分比	设置底部内边距	1
padding-left	长度值或百分比	设置左边内边距	1
padding	1 ~ 4 个长度值或百分比	简写属性	1

div {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

div {
  padding: 10px 10px 10px 10px;
}

div {
  padding: 10px 20px;/*上下，左右*/
}

div {
  padding: 10px;
}

设置外边距 margin#

设置元素外部边缘填充空白的大小

属性	值	说明
margin-top
margin-right
margin-bottom
margin-left
margin	长度值百分比 auto：外边距自动占满浏览器宽度	设置顶部内边距
设置右边内边距
设置底部内边距
设置左边内边距
简写属性	1

div {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

div {
  margin: 10px 10px 10px 10px;
}

div {
  margin: 10px 20px;
}

div {
  margin: 10px;
}

/*box版心居中*/
div {
  margin: 0 auto;
}

/*box水平居中*/
div {
  margin-right: auto;
  margin-left: auto;
}

box 垂直对齐时 margin 重合#

垂直排列的相邻 box；实际间距是两个 box 上下 margin 的最大值；而非其他情况的 margin 和

box 内元素垂直对齐时 margin-top 塌陷#

父子标签中，子标签添加 margin-top 导致父子标签一起向下移动；

解决方法：子标签添加 margin-top 的动机一般是调节子标签在父元素中的垂直对齐，调节这个垂直对齐更好的方法：
1）取消子级 margin, 父级设置 padding-top
2）父级设置 overflow
3）父级设置 border-top

处理溢出#

属性	值	说明	CSS 版本
overflow - x	溢出值	设置水平方向的溢出	3
overflow - y	溢出值	设置垂直方向的溢出	3
overflow	取值上同：
auto ：浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否则就不显示滚动条
hidden ：如果有溢出的内容，直接剪掉。
scroll：不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同.
visible ：默认值，不管是否溢出，都显示内容。	简写属性	2

div {
  overflow: auto;
}

设置元素可见性#

属性	值
display
visibility	visible：默认值，元素在页面上可见。 hidden：元素不可见，但占位 collapse：元素不可见，隐藏表格的行与列，如不是表格，则和 hidden 一样；可能 Chrome 和 Opera 不支持

div { visibility: hidden;
}

而 box 在调试时的可见性，通过设置边框和背景色实现

设置元素浮动#

属性	值	说明
float	left right none	浮动元素靠左浮动元素靠右禁用浮动
clear	none left right both	浮动元素可紧贴左右边界浮动元素不得紧贴左边界浮动元素不得紧贴右边界浮动元素不得紧贴左右边界

#a { /*浮动元素靠左*/
  background: gray;
  float: left;
  clear: none;
}

#c { /*浮动元素靠右*/
  background: navy;
  float: right;
  clear: both;
}

#c { /*禁用浮动*/
  background: navy;
  float: none;
}

设置元素定位属性#

可理解设置定位属性后，元素上升到一个 position 层进行 layout

属性	value	说明
position	static absolute relative fixed	默认值，无定位。绝对定位，脱离文档流，以窗口文档左上角 0,0 为起点；使用 top、right、bottom、left 进行相对距离描述相对定位，使用 top、right、bottom、left 进行相对距离描述。相对于自己原来的位置来移动以窗口参考定位，使用 top、right、bottom、left 进行相对距离描述。

header { /*绝对定位：以窗口文档左上角 0,0 为起点*/
  position: absolute; top: 100px; left: 100px;
}

header { /*以窗口参考定位：会随着滚动条滚动而滚动，达到相对窗口静止的效果*/
  position: fixed; top: 100px; left: 100px;
}

/*相对某元素定位：不脱离文档流层*/
body { /*设置参考点的父元素设置为相对，且不设置坐标*/
  position: relative;
}
header { /*如果父元素设置了参考点，子元素的绝对定位将以它为基准*/
  position: absolute; top: 0px; left: 0px;
}

设置层叠优先级#

属性	value	说明
z-index	auto 数字	默认层次设置层次，数字越大，层次越高

header {
  z-index: 100;
}

布局#

文档标准布局#

只用 box 类型本身的布局特性 + 类型转换；现在一般是网页整体结构是标准流布局，一行里面的多个子块是特殊布局

如果父 box 没有高度，子 box 会撑开父 box

表格布局#

早期用表格来描述网页结构，通过设置块样式宽度 table { width: 100% } 始终是浏览器窗口的 100%。再设置子块（单元格）宽度为父块的百分比使页面自适应使用窗口大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局表格</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table border="0">
        <tr>
            <td colspan="2" class="header">Header</td>
        </tr>
        <tr>
            <td class="aside">Aside</td>
            <td class="section">Section</td>
        </tr>
        <tr>
            <td colspan="2" class="footer">Footer</td>
        </tr>
    </table>
</body>
</html>

styles.css：

/* 页面基本样式 */
body {
    margin: 0;
}

/* 流体布局的表格样式 */
table {
    margin: 0 auto;
    width: 100%;  /* 设置表格宽度为100%，使其适应窗口宽度 */
    border-spacing: 0;
}

/* 表头样式 */
.header {
    height: 120px;
    background-color: #2714d1;
    text-align: center;
    font-size: 24px;
}

/* 侧边栏样式 */
.aside {
    width: 20%; /* 使其宽度为20% */
    height: 500px;
    background-color: #2e53d0;
    padding: 10px;
    box-sizing: border-box;
}

/* 主要内容区样式 */
.section {
    width: 80%;  /* 使其宽度为80% */
    height: 500px;
    background-color: #4eb776;
    padding: 10px;
    box-sizing: border-box;
}

/* 页脚样式 */
.footer {
    height: 120px;
    background-color: #f2f2f2;
    text-align: center;
    font-size: 18px;
}

Float~~~~ 布局#

1）元素添加浮动属性后，元素飘在文档标准布局的块上面，可理解为在 float 层上进行的 layout；也意味着如果父 box 没有高度，子 box 不再会撑开父 box
2）且元素具备了行内块特性
3）元素是顶对齐的

浮动易于实现图文环绕：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动布局 - 流体布局</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="clearfix">
  <header>header</header>
  <aside>aside</aside>
  <section>section</section>
  <footer>footer</footer>
</body>
</html>

styles.css：

/* body 设置宽度为 auto，使得页面宽度根据视口自动调整 */
body {
    width: 100%;
    margin: 0;
    color: white;
    background-color: #333;
  }

  /* header 设置固定高度 */
  header {
    height: 120px;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 24px;
  }

  /* aside 设置浮动并指定宽度为 20% */
  aside {
    width: 20%;
    height: 500px;
    float: left;
    background-color: #555;
    padding: 10px;
    box-sizing: border-box;
  }

  /* section 设置浮动并指定宽度为 80% */
  section {
    width: 80%;
    height: 500px;
    float: left;
    background-color: #666;
    padding: 10px;
    box-sizing: border-box;
  }

  /* footer 设置底部并清除浮动 */
  footer {
    height: 120px;
    clear: both;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 20px;
  }

.clearfix::before,/*要自适应高度的父box都加到clearfix类中*/
.clearfix::after{
  content: "";
  display: table;
}
.clearfix::after{/*在父box内部加个子box,清楚浮动的目的是撑开没指定高度的父box*/
  clear: both;
}

定位布局#

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .container {
            position: relative;
            height: 100%;
            background-color: #f0f0f0;
        }

        .box {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /* 定位第一个盒子：距离容器左上角 50px */
        .box1 {
            top: 50px;
            left: 50px;
        }

        /* 定位第二个盒子：距离容器右下角 50px */
        .box2 {
            bottom: 50px;
            right: 50px;
        }

        /* 定位第三个盒子：容器中心 */
        .box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

</body>
</html>

Multi-column Layout#

多列布局的用武之地，如横向滚动的页面 (小说)

属性	val	说明
column-width	auto：默认值，自适应长度值：设置列宽	定义每列列宽度
column-count	auto ：默认值；表示就 1 列数值：设置列数	定义分分列列数
columns		集成 column-width 和 column-count 两个属性
column-gap		定义列间距
column-rule column-rule-width column-rule-style column-rule-color		定义列边线 column-rule-width ：单独设置边框宽度 column-rule-style ：单独设置边框的样式 column-rule-color：单独设置边框的颜色 column-rule ：简写
column-span	none ：默认值；表示不跨列 all ：表示跨列	设置跨列大标题
column-fill

div{
  column-width: 200px;
  column-count: 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

div{
  columns: auto 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

Flex 布局#

属性	值	说明
display	flex：将容器盒模型作为块级弹性伸缩盒显示 inline-flex：将容器盒模型作为内联级弹性伸缩盒显示
flex-direction	row ：从左到右排列 row-reverse ：从右到左排列 column ：从上到下排列 column-reverse：从下到上排列	子元素的排列方方向，就是主轴方向设置
flex-wrap	nowrap ：默认值；都在一行或一列显示，会自动挤压 wrap ：伸缩项目无法容纳时・自动换行，不挤压 wrap-reverse：伸缩项目无法容纳时・自动换行・方向和 wrap 相反
flex-flow		上两个简写
justify-content	flex-start ：子元素左对齐，元素间没缝隙 flex-end ：子元素右对齐，元素间没缝隙 center ：子元素以中心点靠齐，元素间没缝隙 space-between：均匀对齐，剩余空白宽度作为子元素间距，两侧没缝隙 space-around：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙 space-evenly：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙，且边距一样大	主轴对齐方式 (默认 x 轴)
align-items	flex-start ：顶部对齐 flex-end ：底部对齐 center：居中对齐 baseline ：伸缩项目以基线为基准・清理额外的空间 stretch：默认，拉伸子元素填充整个垂直父 box 空间，当然前提是子元素没写高度	交叉轴对齐方式，只有一行和父 box 有高度时生效
align-content	flex-start ：子元素顶部对齐，元素间没缝隙 flex-end ：子元素底部对齐，元素间没缝隙 center ：子元素以中心点靠齐，元素间没缝隙 space-between：均匀对齐，剩余空白宽度作为子元素间距，两侧没缝隙 space-around：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙 space-evenly：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙，且边距一样大	多行情况下的交叉轴对齐方式
align-self	flex-start ：顶部对齐 flex-end ：底部对齐 center：居中对齐 baseline ：伸缩项目以基线为基准・清理额外的空间 stretch：默认，拉伸子元素填充整个水平父 box 空间，当然前提是子元素没写高度	单独控制子 box 布局
flex	整数	子元素在主轴上的宽度比例；实现了在主轴上的控件宽度自适应
order		控制伸缩项目出现的顺序

<div class="flex-container">
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  /*align-content: ;*/
  align-itmes: center;
}

/*.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-itmes: center;
  /*align-content: ;*/
}*/

/*共占用5份,出现顺序231*/
p:nth-child(1) {/*占用容器空间的 1 份*/
    flex: 1;/*主轴宽度比1:3:1*/
    order: 2;
    align-self: center;/*第一个子盒子居中*/
}

p:nth-child(2) {
    flex: 3;
    order: 3;
}

p:nth-child(3) {
    flex: 1;
    order: 1;
}

!https://secure2.wostatic.cn/static/sHJpw9ixqsocGYebDGSnX9/image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>欢迎来到我的个人主页</h1>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我</a></li>
                <li><a href="#">我的项目</a></li>
                <li><a href="#">联系我</a></li>
            </ul>
        </nav>
        <section class="main-content">
            <article class="bio">
                <h2>个人简介</h2>
                <p>我是一个Web开发者，热爱编程和技术创新。</p>
            </article>
            <article class="projects">
                <h2>我的项目</h2>
                <ul>
                    <li>项目1</li>
                    <li>项目2</li>
                    <li>项目3</li>
                </ul>
            </article>
            <article class="contact">
                <h2>联系方式</h2>
                <p>邮箱: [email protected]</p>
            </article>
        </section>
        <footer class="footer">
            <p>© 2024 我的个人主页</p>
        </footer>
    </div>
</body>
</html>

style.css：

/* 设置页面的基本样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 核心容器，使用 flexbox 排版 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 页眉 */
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 导航栏，水平排列，换行 */
.navigation {
    display: flex;
    flex-flow: row wrap; /* 允许换行 */
    justify-content: center; /* 居中对齐 */
    background-color: #333;
}

.navigation ul {
    list-style: none;
    display: flex;
    padding: 10px;
}

.navigation li {
    margin: 0 15px;
}

.navigation a {
    color: white;
    text-decoration: none;
}

/* 主内容区，使用flexbox布局 */
.main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 子元素之间均匀分布 */
    padding: 20px;
    gap: 20px;
}

/* 个人简介区 */
.bio {
    flex: 1 1 300px; /* 设置可以伸缩的盒子 */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

.projects {
    flex: 2 1 400px; /* 设置灵活的比例 */
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

.contact {
    flex: 1 1 300px; /* 设置可以伸缩的盒子 */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

/* 页脚 */
.footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

/* 调整布局的顺序 */
.projects {
    order: -1; /* 使“我的项目”在“个人简介”前面 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .navigation {
        flex-direction: column;
    }
    .main-content {
        flex-direction: column;
    }
}

Grid 布局#

继承的样式属性#

可以在父元素 box 里 (div) 指定属性；子元素会继承，就不需要写个子元素选择器指定了；且大多数元素都是有缺省样式的，可能需先清除样式

属性	value	说明	css
color	颜色值	设置元素前景色	1
opacity	0 ~ 1	设置元素的透明度	3
text-align	设置元素在 box 中的水平对齐方式	start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 可能尚未支持 left ：靠左对齐・默认 right：靠右对齐 center ：居中对齐 justify ：内容两端对齐 start ：让文本处于结束的边界 end：让文本处于结束的边界	1,3

//清除默认样式
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box 样式#

属性	value	说明	css
vertical-align	相对基线的距离长度值 / 百分比	box 垂直对齐
box-shadow	hoffset ：阴影的 X 轴偏移 voffset : 阴影的 Y 偏移 blur :(可选) 模糊半径；是一个长度值，值越大盒子的边界越模糊。默认值 0, 边界清晰 spread :(可选) 扩散半径；, 是个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小 color :(可选) 设置阴影的颜色，如果省略，浏览器会自行选择一个颜色 inset:(可选)：默认外阴影，要内阴影这个值是 inset 多值，空格区分	box 阴影，一般拿来做交互响应样式，这个难调，建议直接复制抄小米，京东	3
outline-color		外围轮廓颜色	3
outline-offset		轮廓距离元素边框边缘的偏移量	3
outline-style		轮廓样式，和 border-style 一致	3
ontline-witdh		轮廓宽度	3
outline		简写	3
cursor	auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll	box 上的光标样式，左边一个个试	1

div span {
  vertical-align: -200px;
  box-shadow: 5px 4px 10px 2px gray;/*阴影*/
  /*box-shadow: 5px 4px 10px 2px gray inset;*/ /*内部阴影*/
  outline: 10px double red;/*给box再加个轮廓*/
  cursor: move;
}

字体样式#

无标题

body{ font-size: 50px;}/*设置父元素字体大小*/
@font-face { font-family: abc; src: url('BrushScriptStd.otf');} /*服务端提供abc字体文件*/
body{
  font-style:;
  font-weight:;
  font-variant:;
  font-size: smaller;/*设置相对父元素字体大小*/
  font-family:楷体,微软雅黑,宋体;/*有时为兼容很多浏览者系统的字体，可以做几个后备字体*/
  /*font: italic bold normal smaller 楷体;/*以以上顺序给值*/
  color: red;
  opacity: 0.5;
}

文本样式#

属性名	说明	值	CSS 版本
text-decoration	文本划线	none：无划线 underline：文本下划线 overline：文本上划线 line-through：删除线 blink：让文本进行闪烁・基本不支持了	1
text-transform	英文文本大小写	none ：将已被转换大小写的值恢复到默认状态 capitalize ：英文首字母大写 uppercase ：英文转为大写 lowercase ：英文转为小写	1
text-shadow	给文本添加阴影	四个值描述，eg：`5px 5px 3px black` 第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）	3
text-align	设置文本对齐方式	start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 可能尚未支持 left ：靠左对齐・默认 right：靠右对齐 center ：居中对齐 justify ：内容两端对齐 start ：让文本处于结束的边界 end：让文本处于结束的边界	1,3
white-space	空白处理方式	normal ：默认值，空白符被压缩，文本自动换行 nowrap ：空白符被压缩，文本不换行 pre ：空白符被保留・遇到换行符则换行 pre-line ：空白符被压缩・文本会在排满或遇换行符换行 pre-wrap：空白符被保留・文本会在排满或遇换行符换行	1
letter-spacing	字母间距	normal：设置默认间距长度值：比如:"数字"+"px"	1
word-spacing	单词间距	normal ：设置默认间距长度值：比如:"数字"+"px"	1
line-height	设置行高（行间距）	normal ：设置默认间距长度值：比如:"数字"+"px" 数值：比如：1,2.3 %：比如：200%	1
word-wrap	让过长的英文单词断开	normal ：单词不断开 break-word：断开单词	3
text-indent	文本首行缩进	normal ：设置默认间距长度值：比如:"数字"+"px"	1
vertical-align	sub : 垂直对齐文本的下标 super: 垂直对齐文本的上标	文本垂直对齐

p {
  text-decoration: underline;
  text-transform: uppercase;
  text-shadow: 5px 5px 3px black;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 4px;
  word-spacing: 14px;
  line-height: 200%;
  word-wrap: break-word;
  text-indent: 2rem;
  vertical-align: super;
}

行高垂直居中#

行高 = box 高度

!https://secure2.wostatic.cn/static/xzYi7gmYsYLSrhRywU1mfQ/image.png

<div>中国人</div>
div {
  height: 40px;
  line-height: 40px;
}

边框样式#

边框样式 border-style，必需声明；其他两个属性可选，，因为本身有默认值

属性	值	说明	css
border-style border-top-style border-middle-style border-left-style border-right-style	none dashed dotted double groove inset outset ridge solid	没有边框破折线边框圆点线边框双线边框槽线边框使元素内容具有内嵌效果的边框使元素内容具有外凸效果的边框脊线边框实线边框
border-width border-top-width border-middle-width border-left-width border-right-width	长度值 / 百分数 thin medium thick	设置边框的宽度，可选，因为本身有默认值
border-color border-top-color border-middle-color border-left-color border-right-color	颜色值	设置边框的颜色，可选，因为本身有默认值
border-radius border-top-left-radius border-top-right-radius border-middle-left-radius border-middle-right-radius	长度值或百分数	设置四条边角的圆角半径，用于制作圆角控件；`border-radius=50%`制造纯圆形控件左上边角右上边角左下边角右下边角	3
border-image-source		引入背景图片地址	3
border-image-slice		切割引入背景图片	3
border-image-width		边框图片宽度，可设置上右下左 4 值，上下 / 左右 2 值	3
border-image-outset		边框背景向外扩张	3
border-image-repeat	stretch : 拉伸填充。默认值 repeat：平铺填充・当图片碰到边界时，如果超过见刺被截断 round ：平铺填充・根据边框尺寸动态调整图片大小，直至铺满边框 space：平铺填充・根据边框尺寸动态调整图片间距，直至铺满边框	边框背景图片的排列方式	3
border-image		上面五个属性的简写方式	3

div { /*单独设置某边加前缀即可*/
  border-width: 2px;
  border-style: solid;
  border-color: red;

  border-radius: 10px 20px 30px 40px;

  border-image-source: url(border.png);
  border-image-slice: 27;/*刚好4个图像*/
  /*border-image-slice: 0 fill;*/
  border-image-width: 81px;
  border-image-outset: 20px;
  border-image-repeat: round;
}

div {
  border: 2px solid red;
  border-radius: 10px;
  /*border-top:*/
  /*border-middle:*/
  /*border-left:*/
  /*border-right:*/
  border-image: url(border.png) 27/27px round;
}

背景样式#

属性	value	说明	CSS 版本
background-color	颜色 transparent	设置背景颜色为指定色默认值，设置背景颜色为透明色	1
background-image	none url	批量设置了块背景，而其中一个不需要背景，可单独设置 none 取消背景通过 URL 设置背景图片	1/3
background-repeat	repeat-x repeat-y repeat no-repeat	水平方向平铺图像垂直方向平铺图像水平和垂直方向同时平铺图像让背景图片只显示一个，不平铺	1/3
background-attachment	scroll fixed	默认值，背景固定在元素上，不会随着内容一起滚动背景固定在视窗上，内容滚动时背景不动，可用于水印效果	1/3
background-position	长度值 / 百分数 top left right bottom center	使用长度值偏移图片的位置将背景图片定位到元素顶部	3
background-size	长度值 / 百分数 auto cover contain	CSS 长度值，比如 px、em 默认值，图像以本尺寸显示等比例缩放图像，使图像至少覆盖容器，但有可能超出容器等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合	3
background-origin	border-box padding-box content-box	在元素盒子内部绘制背景在内边距盒子内部绘制背景在内容盒子内部绘制背景	3
background-clip	border-box padding-box content-box	在元素盒子内部裁剪背景在内边距盒子内部裁剪背景在内容黑子内部裁剪背景	3
background		背景图片简写方式	1

div {
  background-color: silver;
  background-image: url(loading.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top left;/*20px 20px;*/
  background-size: auto;
  background-origin: content-box;
  background-clip: padding-box;
}

div {
  width: 400px;
  height: 300px;
  border: 10px dashed red;
  padding: 50px;
  background: silver url(img.png) no-repeat scroll left top/100% border-box content-box
}

表格样式#

属性值说明版本

border - collapse separate : 默认值，单元格边框独立 collapse : 单元格相邻边框被合并 2

border - spacing 长度值相邻单元格边框间距；border-collapse: separate时有效。边框独立是设置间距前提 2

caption - side top：默认值，标题在上方 bottom：标题在下方表格标题的位置 2

empty - cells show ：默认值，显示边框 hide ：不显示边框空单元格是否显示边框 2

table - layout auto ：默认值，内容过长时・拉伸整个单元格 fixed：内容过长时不拉伸整个单元格指定表格的布局样式 2

vertical-align

baseline : 内容对象与基线对齐 top : middle : bottom:

中的

单元格，可用 html 文本标签的 text-align 属性实现水平对齐；而垂直对齐可用 CSS 样式属性 vertical-align 实现

table {
  border-collapse: separate;
  border-spacing: 10px;
  caption-side: top;
  empty-cells: hide;
  table-layout: fixed;
  vertical-align: bottom;
}

列表样式#

属性	值	说明	CSS 版本
list - style - type	none : 没有标记 disc : 实心圆 circle : 空心圆 square : 实心方块 decimal : 阿拉伯数字 lower-roman : 小写罗马数字 upper-roman : 大写罗马数字 lower-alpha : 小写英文字母 upper-roman: 大写英文字母	列表项前缀样式	1/2
list - style - position	outside ：默认值，标记位于内容框外部 inside ：标记位于内容框内部	排列的相对位置	1
list - style - image	none : 不使用图像 url: 通过 url 使用图像	图像作为列表前缀	1
list - style	简写属性	列表的简写形式	1

ul {
  list-style-type: square;
  list-style-position: inside;
  /*list-style-image: url(bullet.png);*/
}

ul {
  list-style: lower-alpha inside url(bullet.png);
}

变形效果#

可用于制作元素交互动画，比如鼠标放上去，元素有个变形反馈

2 维变换#

属性值	value	说明
transform	translate (x,y)：平移，其中 y 可以省略，表示垂直方向没有位移 translateX (x)：元素水平方向平移 x translateY (y)：元素垂直方向移平移 y rotate (angle)：顺时针旋转 angle 角度 scale (x,y)：元素水平方向缩放比 x ，垂直方向缩放比 y ， y 省略时表示 y 和 x 有相同缩放比 scaleX (x)：元素水平方向缩放比为 x scaleY (y)：元素垂直方向缩放比为 y skew (angleX angleY)：元素沿 x 轴方向倾斜 angleX 度，沿 y 轴方向倾 angleY 度， angleY 可省略，表示 y 轴方向不倾斜 skewX (angleX)：元素沿 x 轴方向倾斜 angleX 度 skewY (angleY)：元素沿 y 轴方向倾斜 angleY 度 matrix (a,b,c,d,e,f)：2D 变换简写	x y 值可以是长度单位或百分比； angle 单位通常是 deg ，1 deg = 1 度 x y 取值是数字，默认值是 1; 大于 1，放大；小于 1，缩小

div{
  transform: translate(20px,30px);/*设置元素水平和垂直方向的偏移*/
}

div{
  transform:rotate(45deg);/*设置元素顺时针旋转45度*/
}

div{
  transform: scale(2,1);/*设置元素水平方向缩放比为2，垂直方向缩放比为1*/
}

div{
  transform: skewX(30deg);/*设置元素沿着x轴倾斜*/
}

div{
  transform: matrix(a,b,c,d,e,f);
}

3 维变换#

属性	属性值	说明
transform	translate3d (x,y,z)：3D 方式平移元素，设置 x、y 和 z 轴 translateZ (z)：设置 3D 方式平移元素的 z 轴 scale3d (x,y,z)：3D 方式缩放一个元素 scaleZ (z)：设置 3D 方式缩放元素的 z 轴 rotate3d (x,y,z,a)：3D 旋转，a 表示角度，xyz 是 0 或 1 之间的数值 rotateX (a)：分别设置 3D 方式的旋转元素的 x、y 和 z 轴 rotateY (a)： rotateZ (a)： perspective (长度值)：设置一个透视投影矩阵 matrix3d (多个值)：定义一个矩阵	在元素中设置透视的值 perspective (长度值)，但它还是和在父元素设置有一定不同。因为父元素整个作为透视，而元素自己作为透视，导致不同
transform-style	flat : 默认值；表示所有子元素在 2D 平面呈现 preserve-3d: 表示子元素在 3D 空间中呈现
perspective	none ：默认值；表示无限的角度来看 3D 物体・但看上去是平的长度值：接受一个长度单位大于 0 的值，其单位不能为百分比。值越大・角度出现的越远，就好比你人离远一点看物体。值越小・正相反。	设置查看者的位置，并将可视内容映射到一个视锥上，继而投放到一个 2D 平面上；不太懂透视
perspective-origin	百分数值：指定元素 x 轴或 y 轴的起点长度值：指定距离 left：指定 x 轴的位置 center right top：指定 y 轴的位置 center bottom	参考点

<div id="fathe">
    <img id="son" src="img.png" alt="" />
</div>

#father {
  transform-style: preserve-3d; /*设置到3d变换元素的父元素*/
  perspective: 1000px;/*设置查看者的距离位置，一般设置在元素的父元素上;再配合后面的功能属性和变形配置，才能看到效果*/
}

#son {
  transform: translate3d(300px,100px,240px);
  transform: scale3d(1,1,1.5) rotateX(45deg);
  transform: rotate3d(1,0,0,45deg);
  /*transform: perspective(1000px) rotateY(45deg);*/
  perspective-origin: top right;/*设置为右上角*/
}

过渡效果#

过渡样式属性	样式类型
background-color	color (颜色)
background-image	only gradients (渐变)
background-position	percentage, length (百分比，长度值)
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

属性	val	说明
transition-property	none：不支持过渡样式属性设置 all：默认值；元素可设置所有过渡样式属性指定可设置的过渡样式属性	指定过渡或动态模拟的 CSS 属性
transition-duration		指定完成过渡所需的时间
transition-timing-function	ease ：默认值，元素样式从初始由快到慢过渡到终止态。等同贝塞尔曲线 (0.25,0.1,0.25, 1.0) linear : 元素样式从初始态恒速过渡到终止态。等同贝塞尔曲线 (0.0,0.0,1.0,1.0) ease-in ：元素样式从初始态加速过渡到终止态。等同于贝塞尔曲线 (0.42,0,1.0,1.0) ease-out ：元素样式从初始态减速过渡到终止态。等同于贝塞尔曲线 (0,0,0.58,1.0) ease-in-out ：样式从初始态过渡到终止态时，先加速，再减速。等同贝塞尔曲线 (0.42,0,0.58,1.0) cubic-bezier (0.25, 0.67, 0.11, 0.55)：自定义贝塞尔 steps (n,type)：跳跃式过渡；n 表示跳跃几次。type 为 start 或 end (可选)。表示开始 / 结束时跳跃	指定过渡函数；决定效果变化的速度
transition-delay		触发事件后，在设置的延迟时间后再执行过渡延迟效果。如果有多个样式效果，可设置多个延迟时间，以空格隔开
transition		简写

div {/*原始样式*/
  width: 200px; height: 200px; border: 1px solid green;
}

div:hover{/*CSS 动作:hover、:focus、:active、:checked 等*/
  background-color: black; color: white; margin-left: 50px;

  transition-property: background-color, color, margin-left;/*背景和颜色作为过渡样式*/
  /*transition-property: all*/
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 0s, 1s, 0s;
}

/*div:hover{
  transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
}*/

/*div:hover{
  transition: all 1s ease 0s;
}*/

动画效果#

属性	val	说明
animation-name	none 动画名称	指定动画名，动画名对应一个 @keyframes 规则。CSS 加载时执行 animation-name 指定的动画
animation-duration		动画播放所需时间；s 或 ms 为单位
animation-timing-function	ease ：默认值，元素样式从初始由快到慢过渡到终止态。等同贝塞尔曲线 (0.25,0.1,0.25, 1.0) linear : 元素样式从初始态恒速过渡到终止态。等同贝塞尔曲线 (0.0,0.0,1.0,1.0) ease-in ：元素样式从初始态加速过渡到终止态。等同于贝塞尔曲线 (0.42,0,1.0,1.0) ease-out ：元素样式从初始态减速过渡到终止态。等同于贝塞尔曲线 (0,0,0.58,1.0) ease-in-out ：样式从初始态过渡到终止态时，先加速，再减速。等同贝塞尔曲线 (0.42,0,0.58,1.0) cubic-bezier (0.25, 0.67, 0.11, 0.55)：自定义贝塞尔	动画播放函数
animation-delay		事件触发后开始播放的延迟时间
animation-iteration-count	次数：默认值为 1 infinite ：表示无限次循环	动画循环播放次数
animation-direction	normal : 默认值，每次播放向前 alternate : 一次向前，一次向后，一次向前・一次向后这样交替	动画播放方向
animation-play-state		控制动画的播放状态
animation-fill-mode	none ：默认值；表示按预期进行和结束 forwards ：动画结束后继续应用最后尖键帧位置，即不返回 backforwards：动画结束后迅速应用起始关键帧位置，即返回 both ：根据情况产生 forwards 或 backforwards 的效果	both 需要结合，次数和播放方向 animation-iteration-count: 4; animation-direction: alternate;
animation		以上简写
@keyframes		声明一个动画，然后在 animation 调用关键帧声明的动画

<div>我是 HTML5</div>
div { /*原始样式*/
  width: 200px; height: 200px; border: 1px solid green;
  animation-name: myani;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /*animation-play-state: paused;*/
  animation-fill-mode: forwards;
}

/*
div{
  animation: myani 1s ease 2 alternate 0s both;
}*/

@keyframes myani {/*定义动画的关键帧*/
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: 100px;
        background-color: black;
    }
    100% {
        margin-left: 0px;
        background-color: white;
    }
}
/*@keyframes myani {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: 100px;
    }
}*/

css 距离度量#

1）px：早期
2）百分比：网页默认的字号大小为 16px，然后通过设置 62.5%，将网页基准设置为 10px
3）em：父元素基准的倍数
4）rem：基准的倍数；现代浏览器推荐的度量

<h1>标题<em>小标题</em></h1>
<p> 我是一个段落，<code>我是一段代码</code></p>

/*em*/
html {
  font-size: 62.5%;
}
  h1 {
    font-size: 3em;
  }
    p {
      font-size: 1.4em;
    }

/*em*/
html {
  font-size: 62.5%;
}
code {
  font-size: 1.1 rem;
}

实验性属性前缀#

新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法

浏览器	厂商前缀
Chrome、Safari	-webkit-
Opera	-o-
Firefox	-moz-
Internet Explorer	-ms-

Emmet 规则#

Emmet 语法缩写提高 html/css 编写速度，Vscode 内部已经集成该语法

元素: 直接输入元素名称，例如 div 会生成 <div></div>。

子元素: 使用 > 表示父子关系，例如 div>p 会生成 <div><p></p></div>。

兄弟元素: 使用 + 表示兄弟关系，例如 div+p 会生成 <div></div><p></p>。

上级元素: 使用 ^ 表示上级元素，例如 div>p^h2 会生成 <div><p></p></div><h2></h2>。连续使用 ^ 可以向上级多层元素。

重复: 使用 * 表示重复，例如 ul>li*5 会生成一个包含 5 个列表项的无序列表。

分组: 使用 () 进行分组，例如 div>(header>ul>li*2)+footer 会生成一个 div，包含一个 header（内含 2 个列表项的无序列表）和一个 footer。

类名: 使用 . 表示类名，例如 div.container 会生成 <div class="container"></div>。

ID: 使用 # 表示 ID，例如 div#main 会生成 <div id="main"></div>。

属性: 使用 [] 添加属性，例如 a[href="https://www.google.com"] 会生成 <a href="https://www.google.com"></a>。多个属性可以用空格分隔。

文本内容: 使用 {} 添加文本内容，例如 p{Hello world} 会生成 <p>Hello world</p>。

编号: 使用 $ 表示编号，例如 ul>li.item$*3 会生成 <ul><li class="item1"></li><li class="item2"></li><li class="item3"></li></ul>。可以在 $ 后面添加 @- 来倒序编号。

隐式标签: 一些标签可以省略，例如 ul>li*3 等同于 ul>(li*3)。.container 会生成 <div class="container"></div>，省略了 div。

CSS 基本采取首字母简写：
比如 w200 按 tab 可以生成 width: 200px;
比如 lh26px 按 tab 可以生成 line-height: 26px;

base.css#

/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

a {
  color: #333;
  text-decoration: none;
}