CSS 基础


2019-01-09 CSS

摘要

CSS:cascading style sheet 层叠样式表

# 选择器的分类

  • 元素选择器
    • a{}
  • 伪元素选择器
    • ::before{}
  • 类选择器
    • .link{}
  • 属性选择器
    • [type=radio]{}
  • 伪类选择器
    • :hover{}
  • id 选择器
    • #id{}
  • 组合选择器
    • [type=checkbox]+label{}
  • 否定选择器
    • :not(.link){}
  • 通用选择器
    • *{},一般很少会使用通用选择器,会有性能问题

# 选择器的权重

!important > 内联样式 > id 选择器 > 类选择器 > 元素选择器 > 其它选择器

  • 所谓的权重,也就是优先级,比如同时使用id选择器类选择器,两者又有着相同的属性的话,id选择器设置的属性值会优先使用
  • 注意避免使用 !important,使用后会产生一些性能问题。
  • 相同权重,后写的生效

计算权重偏方

  • id 选择器 +100
  • 类、伪类、属性选择器 +10
  • 元素、伪元素选择器 +1
  • 其他 +0

注意,这里的“权重相加”是不能进位的。

# 非布局样式

这里来总结一些跟布局无关的 CSS 属性,关于 CSS 布局的内容则会另外准备一篇文章。

# 字体

  • 字体族(font-family)
    • sans-serif(无衬线)
    • serif(衬线)
    • monospace(等宽)
    • fantasy(梦幻)
  • 多字体 fallback 机制
    • 顾名思义,font-family的值会根据我们的书写顺序,会匹配系统所拥有的字体进行选择
  • iconfont 字体转图标
    • 可以将一些特殊的字体转成小图标,在通过 <i> 标签嵌入到网页中
  • @font-face
    • 为了某些特殊需求,开发者可以自己下载字体,放在服务器上来进行访问,这样浏览器会使用服务器资源中的字体,而不是使用本机的字体。
    • 新的 @font-face 规则中,必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

为了适应移动端和 PC 端,一般推荐使用以下的字体族设置

body {
  font-family: Tahoma, Arial, Roboto, ”Droid Sans”, ”Helvetica Neue”,
    ”Droid Sans Fallback”, ”Heiti SC”, ”Hiragino Sans GB”, Simsun, sans-self;
}

windows 系统一般使用衬线字体,而 MAC 系统则是使用等宽字体。关于字体族更多的介绍可以点击 这里

另外关于字体大小的设置问题,我会在“移动端适配”的专题再来进行总结。

# 行高

  • line-height 可以撑起 display:block 的高度,并不能改变字体 display:inline 的高度
  • vertical-align 可以改变文字对齐的基准,默认是根据基线对齐,可以根据需要进行垂直对齐

# 颜色

网页上表示颜色的写法有以下三种:

  • 单词式,比如:red
  • 十六进制(rgba),比如:#ff0000,rgb(255,0,0)
  • hsla,比如:hsla(0, 100%, 50%, 100%);
  • 关于颜色,可以再 chrome 开发者工具上进行调试
  • rgba(r,g,b,a)函数表示其中 a 表示的是改颜色的透明度,取值范围是 0~1,其中 0 代表完全透明。
  • hsla(Hue,Saturation,Lightness,alpha)函数表示色调、饱和度、亮度、透明度

# 背景

CSS 在设置背景中有很多属性,但是在开发中,一般只使用 background 来进行简写。

/*
*1.设置背景颜色
*2.设置背景图片链接
*3.设置背景图片不重复显示
*4.设置背景图片是否滚动
*5.设置背景图片位置,靠右,并距离上方 50 px
**/
body {
  background: #ffffff url("img.png") no-repeat fixed right top 50px;
}

以上是常用的写法,还可以进行 CSS3 中背景图片的扩展

  • 规定区域
body {
  background: #ffffff url("img.png") no-repeat right top;
  background-size: 63px 100px; /*规定背景图片的大小*/
  /* background-size:cover/contain   也可以是使用提供的值,来使背景图片自适应 */
  background-origin: content-box; /* 规定背景图片的定位区域。*/
  background-clip: content-box; /* 用来表示背景的绘制区域*/
}
  • 渐变色
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      /*线性渐变 - 从上到下(默认情况下)*/
      #grad1 {
        width: 200px;
        height: 200px;
        margin: 100px 0 0 100px;
        background: linear-gradient(red, blue);
      }
      /*线性渐变 - 从左到右*/
      #grad2 {
        width: 200px;
        height: 200px;
        margin: 100px 0 0 100px;
        background: linear-gradient(to right, red, blue);
      }
      /*线性渐变 - 对角*/
      #grad3 {
        width: 200px;
        height: 200px;
        margin: 100px 0 0 100px;
        background: linear-gradient(to bottom right, red, blue);
      }
      /*线性渐变 - 从下到上*/
      #grad4 {
        width: 200px;
        height: 200px;
        margin: 100px 0 0 100px;
        background: linear-gradient(0deg, red, blue);
      }
      /*彩虹颜色的线性渐变*/
      #grad5 {
        height: 200px;
        margin: 100px 0 0 100px;
        background: linear-gradient(
          to right,
          red,
          orange,
          yellow,
          green,
          blue,
          indigo,
          violet
        );
      }
      /*带有多个颜色结点的从上到下的线性渐变:*/
      #grad6 {
        width: 200px;
        height: 200px;
        background: linear-gradient(red 10%, green 20%, blue 70%);
      }
      /*径向渐变 - 颜色结点均匀分布(默认情况下)
    *在颜色后面加百分比则不均匀
    * circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
    */
      #grad7 {
        width: 200px;
        height: 100px;
        margin: 100px 0 0 100px;
        background: radial-gradient(ellipse, red, green, blue);
      }
      /*重复的径向渐变*/
      #grad8 {
        width: 200px;
        height: 100px;
        margin: 100px 0 0 100px;
        /* 标准的语法 */
        background: repeating-radial-gradient(red, yellow 10%, green 15%);
      }
    </style>
  </head>
  <body>
    <!--注意: Internet Explorer 9 及之前的版本不支持渐变。-->
    <div id="grad1"></div>
    <div id="grad2"></div>
    <div id="grad3"></div>
    <div id="grad4"></div>
    <div id="grad5"></div>
    <div id="grad6"></div>
    <div id="grad7"></div>
    <div id="grad8"></div>
  </body>
</html>
  • 多背景
body {
  background: url("img1.png") no-repeat, url("img2.png") no-repeat;
}

# 图片

关于图片的介绍可以我之前总结过的其他两篇文章

另外,CSS3 有一个新的属性可以用来给图片加滤镜 filter,但是需要考虑兼容性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      img {
        width: 33%;
        height: auto;
        float: left;
        max-width: 235px;
      }
      .blur {
        filter: blur(4px);
      }
      .brightness {
        filter: brightness(250%);
      }
      .contrast {
        filter: contrast(180%);
      }
      .grayscale {
        filter: grayscale(100%);
      }
      .huerotate {
        filter: hue-rotate(180deg);
      }
      .invert {
        filter: invert(100%);
      }
      .opacity {
        filter: opacity(50%);
      }
      .saturate {
        filter: saturate(7);
      }
      .sepia {
        filter: sepia(100%);
      }
      .shadow {
        filter: drop-shadow(8px 8px 10px green);
      }
    </style>
  </head>
  <body>
    <p>
      <strong>注意:</strong> Internet Explorer
      <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。
    </p>
    <img src="pineapple.jpg" alt="Pineapple" width="300" height="300" />
    <img
      class="blur"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="brightness"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="contrast"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="grayscale"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="huerotate"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="invert"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="opacity"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="saturate"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="sepia"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
    <img
      class="shadow"
      src="pineapple.jpg"
      alt="Pineapple"
      width="300"
      height="300"
    />
  </body>
</html>

# 边框

边框的属性为 border,可以简写三个属性值:大小、线型、颜色,可以看以下的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style>
      div {
        width: 300px;
        height: 100px;
        border: 2px solid blue;
      }
      #div1 {
        margin-top: 70px;
        background-color: aquamarine;
        border-radius: 10px 50px; /*对折分布*/
        box-shadow: yellow 100px 50px 30px; /*向右移动距离,向下移动距离,模糊程度*/
      }
      #div2 {
        margin-top: 70px;
        border-radius: 10px 50px 30px 5px; /*顺时针分布*/
        box-shadow: red 100px 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div id="div1"></div>
    <div id="div2"></div>
  </body>
</html>

在以上的例子中,#div1#div2使 CSS3 的新特性,使用boder-radius来使用圆角,使用box-shadow来为块级元素制造阴影效果。

# 滚动和文字拆行

  • overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条,默认是 visible
    • visible,内容不会被修剪,会呈现在元素框之外。
    • scroll,内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    • hidden,内容会被修剪,并且其余内容是不可见的。

注意

overflow 属性只工作于指定高度的块元素上。

可以使用overflow-x,overflow-y来进行内容的裁剪

  • overflow-wrap(word-wrap) 通用换行控制,允许长单词换行到下一行

    • normal 只在允许的断字点换行(浏览器保持默认处理)。
    • break-word 在长单词或 URL 地址内部进行换行。
  • word-break 针对多字节文字

    • normal 使用浏览器默认的换行规则。
    • break-all 允许在单词内换行。
    • keep-all 只能在半角空格或连字符处换行。
  • white-space 空白处是否断行

    • normal 默认。空白会被浏览器忽略。
    • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    • pre-wrap 保留空白符序列,但是正常地进行换行。
    • pre-line 合并空白符序列,但是保留换行符。
    • inherit 规定应该从父元素继承 white-space 属性的值。
  • text-overflow 规定当文本溢出包含元素时发生的事情

    • clip 修剪文本。
    • ellipsis 显示省略符号来代表被修剪的文本。
    • string 使用给定的字符串来代表被修剪的文本。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      div {
        width: 200px;
        height: 100px;
        margin: 100px 0 0 100px;
        border: 1px dashed black;
      }
      .p1 {
        /*单词拆分换行*/
        word-break: keep-all;
      }
      .p2 {
        /*文本溢出属性指定应向用户如何显示溢出内容*/
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="p1">
        This paragraph contains some text. This line
        will-break-at-hyphenates不是吧,测试下
      </p>
    </div>
    <div>
      <p class="p2">
        This paragraph contains some text. This line
        will-break-at-hyphenates不是吧,测试下
      </p>
    </div>
  </body>
</html>

# 装饰性属性及其他

  • 字重/粗体(font-weight)
    • bold
    • bolder
  • 字体样式(font-style)
    • normal (正常)
    • italic (斜体)
    • oblique (直接让文字右倾斜)
  • 下划线(text-decoration)
    • solid
    • dashed
    • none
  • 指针(cursor)
    • move
    • pointer
    • help
    • wait
    • zoom-in
    • zoom-out

# CSS hack

  • 为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的 CSS 样式,把这个针对不同的浏览器/不同版本写相应的 CSS code 的过程,叫做 CSS hack!
  • 主要是 IE6-IE11,和 Firefox/Safari/Opera/Chrome 的上古版本
  • 关于 “css Hack”具体内容可以看这篇 文章,就不再过多介绍

# CSS 定制化

  • 浏览器本身带有的默认样式,但这些样式已经不再满足人们的需求,所以需要自己定制
  • 以前是使用 CSS reset 来重制默认样式,但是现在可以使用更好的方式—— Normalize.css
  • 接下来就可以开始自定义自己想要的 CSS 样式,一般可以使用 UI 框架,如:Bootstrap,Semantic UI
最近更新: 12/22/2021, 3:23:15 PM