Skip to content

CSS

级联样式表 (Cascading Style Sheet)

  • 外观格式设计,解决网页内容和表现分离
  • 由选择器和声明构成

样式表

内联样式表

行内样式表

  • 内联样式是在单行内使用的样式
  • 直接作用于单行

内部样式表

  • 内部样式是在文件内生效的,对于选择器所选择的进行样式更改
  • 复用性低

外部样式表

  • 外部样式通过link的方式,从另外的、非html文件而是css文件来表现样式
html

  <link rel="stylesheet" src="source_path">
  • 一个css文件可以作用于多个html

选择器

标记选择器(元素选择器)

  • 包含html中的标记类型,如h1/h2/... , p , div , ...

类选择器

  • .class_name 命名,通过class="class_name" 使用

  • 可重复使用,对多个作用,可以联合使用

html

  <!DOCTYPE html>
  <html>
  <head>
      ...
      <style>
          p {
              text-align: center;
          }
          .box {
              width: 200px;
              height: 200px;
          }
          .red {
              background-color: red;
          }
          .gre {
              background-color: green;
          }
      </style>
  </head>
  <body>
      <div class="box red">
          <p> <img src="../imags/1.jpeg" width="100px" height="100px" hspace="50" vspace="50"> </p>
      </div>
      <div class="box gre">
          <p> <img src="../imags/2.jpeg" width="100px" height="100px" hspace="50" vspace="50"> </p>
      </div>
      <div class="box red">
          <p> <img src="../imags/1.jpeg" width="100px" height="100px" hspace="50" vspace="50"> </p>
      </div>
  </body>
  </html>

id选择器

  • #id_name 命名,通过id= "id_name"使用
  • 和类选择器类似,但id选择器只能使用一次

通配符选择器

  • *命名,意为全选

后代选择器

  • 在层级关系中逐层选择
html

  <!DOCTYPE html>
  <html>

  <head>
      <style>
          ol li {
              color: red;
          }
      </style>
  </head>

  <body>
      <ol>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
      </ol>
      <ul>
          <li>1u</li>
          <li>2u</li>
          <li>3u</li>
          <li>4u</li>
      </ul>
  </body>

  </html>

子元素选择器

  • 在层级关系中只选择最近的一层 使用 elem1 > elem2 {}
html

  <!DOCTYPE html>
  <html>

  <head>
      <style>
          div>a {
              color: blue;
          }
      </style>
  </head>

  <body>
      <div>
          <a href="#son"></a>
          <p>
              <a href="grand son"></a>
          </p>
      </div>
  </body>

  </html>

并集选择器

  • 即类似于类选择器的复用,通过, 分隔
html

  <!DOCTYPE html>
  <html>

  <head>
      <style>
          div,
          p {
              color: green;
          }
      </style>
  </head>

  <body>

      <div> </div>
      <p> </p>

  </body>

  </html>

伪类选择器

  • 使用:来表示常用的有链接伪类、结构伪类等
NameExplaination
link设置a标记在未被访问前的样式
hover设置a标记在鼠标悬停时的样式
active设置a标记在被点击和释放之间时的样式
visited设置a标记在被访问后的样式
first-letter作用于块,设置第一个字符的样式
first-line作用于块,设置第一行的样式
first-child设置第一个子标记的样式
lang设置具有lang属性的标记的样式

html

  <!DOCTYPE html>
  <html>

  <head>
    <style>
      a:link {
        color:gray ; text-decoration:none;
      }
      a:visited{
        color:red; text-decoration:none;
      }
      a:hover{
        color:deeppink; text-decoration:none;
      }
      a:active{
        color:yellow; text-decoration:none;
      }
      p:first-letter{
        font-weight:bold;font-family:"黑体";
      }
      p:first-line{
        font-size:32px;
      }
    </style>
  </head>

  <body>
    <p>
          qwertyuiopasdfghjklzxcvbnm
          qwertyuiopasdfghjklzxcvbnm
          qwertyuiopasdfghjklzxcvbnm
          qwertyuiopasdfghjklzxcvbnm
          qwertyuiopasdfghjklzxcvbnm
          qwertyuiopasdfghjklzxcvbnm

    </p>
    <a href="https://zachary.world"> my blog </a>

  </body>

  </html>
  • 值的注意的是:关于链接伪类的使用是有先后次序的,一般按照LVHA的次序即link->visited->hover->active

  • 另外还有focus伪类用于获取表单的光标焦点

属性选择器

  • 对于低版本的浏览器可能不支持
  • 可以使用[Attribute]的方式来进行选择

CSS盒模型

Intro

网页中的每一个元素都可以看作一个矩形盒子,通常使用DIV+ CSS的方式来定义一个盒子的元素和样式

CSS盒模型,将特定的元素描述为盒子,并实现对这个盒子包装进行美化,其中重要的概念MBPC

  • Margin:外边界,多个盒子、或盒子与其他物体堆放其之间的间隔
  • Border:边界,盒子的实在的边界,如纸盒子的纸皮(纸皮厚度可以是0,假想皮)
  • Padding:填充,承载玻璃时,盒子里常用泡沫或减压泡泡减震,这些泡沫减压层就是填充物
  • Content:内容,每一个盒子,都是为了包装存在,没有了被包装物,盒子也就不存在了
  • 四周:每个盒子都是完整的包围content的,即MBPC有四个基本边界属性(top、right、bottom、left),他们都可以使用长度单位、百分比单位、auto这样的样式值调整边界宽度

Margin

一般是盒子外面的那一层空气,只有厚度没有颜色

Border

可以使用不同颜色、不同材质的材料的盒子将内容包装起来

同样的,可以使用诸如样式、颜色、宽度等来设置border边界

border

可以使用一个复合定义粗细、样式、颜色

css
#default{
  border: /* border-width */ 2px /* border-style */ thin  /* border-color */ red;
}
border-style
KeyExplaination
none定义无边框
hidden与none相同,用于表时例外,用于解决边界冲突
dotted定义点状边框
dashed定义虚线
solid定义实线
double定义双线。宽度等于border-width
groove定义3D凹槽边框。效果取决于border-color
ridge定义山脊状边框。效果取决于border-color
inset定义使页面沉入感边框。效果取决于border-color
outset定义使页面浮出感边框。效果取决于border-color
border-color

颜色

可以指定单独一边的颜色

css
#default{
  border-color:pink;
}
#side-color-set{
  border-top-color:red;
  border-left-color:rgb(254,20,35);
  .
  .
  .
}
border-width

设置边框宽度

默认medium,thin小于默认、thick大于默认、length可见单位

Padding

盒子的填充物样式同样

css
#default{
  padding:0;
  background-color:green;
  ...
}

页面布局

规整的页面布局看上去十分赏心悦目

  • 经典的布局方式是三行模式(header、main、footer)、三列模式(sidebar、main、info)

  • 两者可以相结合(header、main{main_leftside、main_content、main_rightside}、footer),即三行三列

  • 三行两列模式是三行三列去除leftside或rightside列的结果

在一些网站,会有多行多列的样式

这里是三行三列的基本元素定义

html
<!doctype html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width initial-scale=1'>
    <title>cache</title>
</head>

<body>
    <div id="container">
        <div id="header">
            <div id="logo"></div>
            <div id="nav"></div> /* 导航栏 */
        </div>
        <div id="main">
            <div id="left"></div>
            <div id="content"></div>
            <div id="right"></div>
        </div>

        <div class="clearfloat"></div> /*清除浮动*/

        <div id="footer">

        </div>
    </div>
</body>

</html>

单位

绝对单位

绝对单位在网页中很少使用,一般应用于平面印刷

  • 英寸(in):使用最广泛的长度单位(1 in = 2.54cm)
  • 厘米(cm):生活中最常用的单位
  • 毫米(mm):在研究领域使用较为广泛
  • 磅(pt):在印刷领域使用广泛,也称点。CSS也常用pt设置字体大小(1 pt = 1/72 in)
  • pica(pc):印刷领域使用较多(1 pc = 12 pt)

相对单位

相对单位的大小是不固定的

  • em:表示元素的字体高度
  • ex:表示以所使用的字体中小写字母x的高度作为参考。在实际使用中,浏览器通过em/2来取得ex
  • px:表示根据屏幕的像素点来确定的
  • 百分比%:相对单位值,通过另一个值来计算

文字文本样式

文字

NameExplaination
link设置a标记在未被访问前的样式
hover设置a标记在鼠标悬停时的样式
active设置a标记在被点击和释放之间时的样式
visited设置a标记在被访问后的样式
first-letter作用于块,设置第一个字符的样式
first-line作用于块,设置第一行的样式
first-child设置第一个子标记的样式
lang设置具有lang属性的标记的样式

文本

NameExplaination
link设置a标记在未被访问前的样式
hover设置a标记在鼠标悬停时的样式
active设置a标记在被点击和释放之间时的样式
visited设置a标记在被访问后的样式
first-letter作用于块,设置第一个字符的样式
first-line作用于块,设置第一行的样式
first-child设置第一个子标记的样式
lang设置具有lang属性的标记的样式

颜色

关于颜色的渲染千篇一律

常用颜色编码如下

NameExplaination
link设置a标记在未被访问前的样式
hover设置a标记在鼠标悬停时的样式
active设置a标记在被点击和释放之间时的样式
visited设置a标记在被访问后的样式
first-letter作用于块,设置第一个字符的样式
first-line作用于块,设置第一行的样式
first-child设置第一个子标记的样式
lang设置具有lang属性的标记的样式

背景

指定背景色彩、图案等,可以直接使用复合属性background

NameExplaination
link设置a标记在未被访问前的样式
hover设置a标记在鼠标悬停时的样式
active设置a标记在被点击和释放之间时的样式
visited设置a标记在被访问后的样式
first-letter作用于块,设置第一个字符的样式
first-line作用于块,设置第一行的样式
first-child设置第一个子标记的样式
lang设置具有lang属性的标记的样式
###### background-image

设置背景图片

css
#default{
  background-image:url("Path");
}
background-repeat

背景重复

KeyExplaination
repeat使用背景图完全覆盖
repeat-x背景水平方向从左到右重叠覆盖
repeat-y背景垂直方向从上到下重叠覆盖
no-repeat不使用重复方式
background-attachment

背景附件,是否随着图像一起滚动

css
#default{
  background-attachment:scroll /* 文字页面滚动时,跟随滚动 */ ;
}
#static{
  background-attachment:fixed /* 固定 */;
}
background-position

定位方式可以是百分比、px、两者混用等方式

css
#default{
  background: 50%px/* 横向 */ 50%-100px /* 纵向 */
}


css
  .ball{
      position:absolute;
      top:0;
      left:0;
      width:10px;
      height:10px;
      border-radius:50%;
      background-color:skyblue;
      animation:
          hor 3.6s infinite linear alternate;
          ver 2.4s infinite linear alternate
  }
  @keyframes hor{
      to{
          left:calc(100vw-10px);
      }
  }
  @keyframes ver{
      to{
          top:calc(100vh-10px);
      }
  }