🧠 STUDY

CSS 学习笔记

date
Apr 29, 2023
slug
css
author
status
Public
tags
🖋️ Note
👨🏻‍💻 Program
summary
层叠样式表
type
Post
thumbnail
matrix.png
category
🧠 STUDY
updatedAt
Jul 17, 2023 04:32 AM

CSS 语法

CSS 规则

选择器 {属性:值; 属性:值;}

增强可读性的方法

p
{
    color:red;
    text-align:center;
}

CSS 注释

  • 以 /* 开始, 以 */ 结束
/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

Id 和 Class 选择器

id 选择器

  • 可以为标有特定 id 的 HTML 元素指定特定的样式
  • HTML 元素以 id 属性来设置 id 选择器
  • CSS 中 id 选择器以「#」来定义
#para1
{
    text-align:center;
    color:red;
}

class 选择器

  • 有别于 id 选择器，class 可以在多个元素中使用
  • 在 HTML 中以 class 属性表示
  • 在 CSS 中，类选择器以一个 . 显示
.center {text-align:center;}
  • 你也可以指定特定的 HTML 元素使用 class
p.center {text-align:center;}
  • 在 HTML 中，多个 class 选择器可以使用空格分开
<p class="center color">段落居中，颜色为红色。</p>

CSS 创建

外部样式表（External style sheet）

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

内部样式表（Internal style sheet）

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式（Inline style）

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

  • Inline style > Internal style sheet > External style sheet > default
  • 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

CSS 背景

  • 用于定义 HTML 元素的背景
background-color
背景颜色
background-image
背景图像
background-repeat
值为 repeat-x、repeat-y、no-repeat
background-attachment
背景图像是否固定
background-position
改变图像在背景中的位置
body {background:#ffffff url('img_tree.png') no-repeat right top;}
简写属性

CSS Text

文本颜色

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对齐方式

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align: justify ;}

文本修饰

a {text-decoration:none;}
从设计的角度看 text-decoration 属性主要是用来删除链接的下划线
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration: underline ;}
也可以这样装饰文字

文本转换

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform: capitalize ;}
所有字句变成大写、小写字母或每个单词的首字母大写

文本缩进

p {text-indent:50px;}

CSS Fonts

字体系列（font family）

  • 如果浏览器不支持第一种字体，将尝试下一种字体
p{font-family:"Times New Roman", Times, serif;}

字体样式（font style）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小（font size）

用像素来设置大小

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用 em 来设置大小

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

用百分比和 em 组合来设置大小

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

CSS Link

链接状态

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

文本修饰

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS 列表

不同的列表项标记

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

作为列表项标记的图像

ul
{
    list-style-image: url('sqpurple.gif');
}

简写属性

ul
{
    list-style: square url("sqpurple.gif");
}

移除默认设置

ul {
  margin: 0;
  padding: 0;
}
移除内边距和外边距

CSS 表格

表格边框

table, th, td
{
    border: 1px solid black;
}

折叠边框

table
{
    border-collapse: collapse;
}

table,th, td
{
    border: 1px solid black;
}

表格宽度和高度

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐

水平对齐

td
{
    text-align:right;
}

垂直对齐

td
{
    height:50px;
    vertical-align:bottom;
}

表格填充

td
{
    padding :15px;
}
控制边框和表格内容之间的间距

表格颜色

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

CSS 盒子模型（Box Model）

组成部分

notion image
Margin（外边距）
清除边框外的区域，外边距是透明的
Border（边框）
围绕在内边距和内容外的边框
Padding（内边距）
清除内容周围的区域，内边距是透明的
Content（内容）
盒子的内容，显示文本和图像

元素的宽度和高度

  • 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度

CSS 边框

border-style 的值

none
无边框
hidden
隐藏边框
dotted
点线边框
dashed
虚线边框
solid
实线边框
double
双线边框
groove
3D沟槽边框（凸起效果）
ridge
3D脊边框（凸起效果）
inset
3D嵌入边框（凹陷效果）
outset
3D突出边框（凸起效果）

border-width 的值

  • 直接指定宽度
  • 关键词：thick, medium, thin

border-color 的值

  • name
  • RGB
  • Hex

单独设置各边

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

简写属性

border:5px solid red;

CSS 轮廓（Outline）

notion image
  • 位于边框边缘的外围，可起到突出元素的作用
  • 属性 outline, outline-color, outline-style, outline-width

CSS 外边距（Margin）

notion image
  • 定义元素周围的空间
  • 可单独改变元素的上、下、左、右边距（margin-top/bottom/right/left）
  • 也可一次改变所有的属性（上 右 下 左、上 左右 下、上下 左右、上下左右）
auto
这样做的结果会依赖于浏览器
length
定义一个固定的 margin
%
定义一个使用百分比的边距

CSS 填充（Padding）

  • 定义元素边框与元素内容之间的空间
  • 可单独改变元素的上、下、左、右边距（padding-top/bottom/right/left）
  • 也可一次改变所有的属性（上 右 下 左、上 左右 下、上下 左右、上下左右）
length
定义一个固定的 margin
%
定义一个使用百分比的边距

CSS 分组和嵌套选择器

分组选择器

  • 每个选择器用逗号分隔
h1,h2,p
{
    color:green;
}

嵌套选择器

选择器
作用
示例
p{ }
为所有 p 元素指定一个样式
p { color: blue; }
.marked{ }
为所有 class="marked" 的元素指定一个样式
.marked { background-color: yellow; }
.marked p{ }
为所有 class="marked" 元素内的 p 元素指定一个样式
.marked p { font-weight: bold; }
p.marked{ }
为所有 class="marked" 的 p 元素指定一个样式
p.marked { color: red; }

CSS 尺寸（Dimension）

属性
描述
height
设置元素的高度
line-height
设置行高
max-height
设置元素的最大高度
max-width
设置元素的最大宽度
min-height
设置元素的最小高度
min-width
设置元素的最小宽度
width
设置元素的宽度

CSS 显示（Display）和可见性（Visibility）

隐藏元素

属性
是否占据空间
display
否
visibility
是
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

块元素和内联元素

  • 块元素是一个元素，占用了全部宽度，在前后都是换行符
  • 内联元素只需要必要的宽度，不强制换行

块和内联间的转换

li {display:inline;}
span {display:block;}

CSS 定位（Position）

position 的值

定位值
作用
static
默认值，元素在文档流中正常排列。
fixed
固定定位，元素相对于浏览器窗口进行定位，不会随滚动条滚动而改变位置，可以通过 top、right、bottom、left 属性调整定位。
relative
相对定位，元素相对于其正常位置进行定位，可以通过 top、right、bottom、left 属性调整定位。
absolute
绝对定位，元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于 <html> 元素进行定位，可以通过 top、right、bottom、left 属性调整定位。
sticky
粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位，可以通过 top、right、bottom、left 属性调整定位。

重叠的元素

  • z-index 属性指定了元素的堆叠顺序
img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

CSS 溢出（Overflow）

值
描述
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit
规定应该从父元素继承 overflow 属性的值。

CSS 浮动（Float）

属性
描述
值
clear
指定不允许元素周围有浮动元素
left, right, both, none, inherit
float
指定一个盒子是否可以浮动
left, right, none, inherit

CSS 水平&垂直对齐

元素居中对齐

  • 可以使用 margin: auto
  • 如果没有设置 width 属性，居中对齐将不起作用
.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

文本居中对齐

  • 可以使用 text-align: center
.center {
    text-align: center;
    border: 3px solid green;
}

图片居中对齐

  • 可以使用 margin: auto
  • 要将图片放到 块 元素中
img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐

position: absolute

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

float

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

垂直居中

.center {
    padding: 70px 0;
    border: 3px solid green;
}

CSS 组合选择符

组合选择符
描述
示例
后代选择器
选择所有符合条件的后代元素
div p 选中所有 <p> 元素，其父元素是 <div> 的元素
子选择器
选择所有符合条件的直接子元素
div > p 选中所有直接子元素是 <p> 的 <div> 元素
相邻兄弟选择器
选择所有符合条件的相邻兄弟元素
h1 + p 选中紧接在 <h1> 元素后的第一个 <p> 元素
后续兄弟选择器
选择所有符合条件的兄弟元素（不一定是相邻的）
h1 ~ p 选中所有在 <h1> 元素后的 <p> 元素（不包括紧接在 <h1> 后面的第一个 <p> 元素）

CSS 伪类（Pseudo-classes）

语法

  • 伪类用来添加一些选择器的特殊效果
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}

anchor 伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover  {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪类和 CSS 类

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>
伪类可以与 CSS 类配合使用

CSS 伪元素

语法

  • 伪元素用来添加一些选择器的特殊效果
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

伪元素和 CSS 类

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>
伪元素
描述
::after
在元素内容的最后面插入一个伪元素
::before
在元素内容的最前面插入一个伪元素
::first-line
选择元素的第一行
::first-letter
选择元素的第一个字母
::selection
选择用户选择的文本部分，例如在使用鼠标拖拽选择文本时的效果
::placeholder
选择输入框中的占位符文本
::marker
选择列表项的标记部分
::backdrop
在一个弹出式元素（例如对话框）的后面添加一个半透明的背景
💡
伪元素以两个冒号开始，但为了最佳实践，推荐使用两个冒号的写法

CSS 导航栏

导航栏 = 链接列表

导航条基本上是一个链接列表，所以使用 <ul> 和 <li> 元素非常有意义：
<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
再删除边距和填充：
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
上面的例子中的代码是垂直和水平导航栏使用的标准代码。

垂直导航栏

在以上代码的基础上，加入垂直导航栏的样式：
a
{
    display:block;
    width:60px;
}

全屏高度的固定导航条

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

水平导航栏

方法一：内联列表项

li
{
    display:inline;
}

方法二：浮动列表项

li
{
    float:left;
}
a
{
    display:block;
    width:60px;
}

固定导航条

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

CSS 下拉菜单

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>鼠标移动到我这</span>
  <div class="dropdown-content">
    <p>marlin</p>
    <p>www.marlin.red</p>
  </div>
</div>

CSS 提示工具（Tooltip）

基础提示框

<style>
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
 
<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

定位提示框

显示在右侧

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

显示在左侧

.tooltip .tooltiptext {
    top: -5px;
    right: 105%; 
}

显示在头部

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

显示在底部

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

CSS 画廊

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
      <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
      <img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
      <img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
      <img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

</body>
</html>

CSS 图像透明

img
{
  opacity:0.4;
}