CSS(一) 邂逅

作者: 莘栀 | 来源:发表于2020-02-04 08:03 被阅读0次

邂逅 CSS

一，初识css

1.基本概念

1.1 CSS的全称是Cascading Style Sheets，层叠样式表

1.2 书写格式

样式名: 样式值；例如：color：red

1.3 引入css的三种方式

1 内联样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">p内容</p>
  <h2 style="color: green;">h2 element</h2>
  <img src="../img/12.png" style="width: 200px;" alt="">
</body>
</html>

2.文档样式，内嵌样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      color: red;
      font-size: 30px;
    }
    h2 {
      color: beige;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <p>我是段落</p>
  <h2>我是标签</h2>
</body>
</html>

引入外部样式

style.css文件
p {
  color: red;
  font-size: 30px;
}
h2 {
  color: beige;
  background-color: #fff;
  font-family: "宋体";
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <p>内容</p>
  <p>内容</p>
  <h2>标题</h2>
</body>
</html>

补充

引入方式可以使用 @import url();方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 这种引用，加载速度会稍微慢一点 */
    @import url(./css/style.css);
    /*
      @import url(./css/base.css);
      可以引入多个样式文件 
    */
  </style>
</head>
<body>
  <p>段落</p>
  <h2>标题</h2>
</body>
</html>

引入方式可以放在另外一个css文件中，且css文件可以设置编码方式

/* 指定css的编码方式，以防css中出现中文，比如下方的 宋体 */
@charset "utf-8";
/* 引入另外一个css */
@import url(./base.css);
p {
  color: red;
  font-size: 30px;
}
h2 {
  color: beige;
  background-color: #fff;
  font-family: "宋体";
}
/* 此时 引入该样式文件相当于引入了两个样式文件 */

二，细节

2.1 注释

css的注释方式 /* */

2.2 HTML CSS 编写准则

结构与样式分离

结构与样式分离：不要用自身属性去修改样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cgjoy {
      width: 100px;
    }
  </style>
</head>
<body>
  <img src="../img/timg.gif" width="100px" alt="">
  <img src="../img/timg.gif" class="cgjoy" alt="">
</body>
</html>

2.3 设置网页图标

案例：设置京东网页图标
- 使用 link 元素,（link可以用来引入样式，还可以设置网页图标）
- rel 属性指定文档与链接资源的关系
- 一般 rel 确定，type确定，所以可以省略type
- 网页图标支持的图片格式 ico png 常用大小：16x16 24x24 32x32

2.4 驼峰标识

小驼峰：形如：lastContent
- html
- css
- js 函数名字
大驼峰：所有单词首字母都大写
- js中定义类的名字

三，CSS简史

3.1 版本发展

CSS1 CSS2 CSS2.1 CSS2.2
CSS3：是CSS 2.x以后对某一些CSS模块进行升级更新后的称呼
CSS4：是CSS 2.x以后对某一些CSS模块进行升级更新后的称呼
CSS标准：草稿 -> 备选标准 -> 标准（所以会出现兼容性问题）

3.2 常用属性

文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
字体：font、font-family、font-style、font-size、font-variant、font-weight
背景：background、background-color、background-image、background-repeat、background-attachment、background-position
盒子模型：width、height、border、margin、padding
列表：list-style
表格：border-collapse
显示：display、visibility、overflow、opacity、filter
定位： vertical-align、position、left、top、right、bottom、float、clear

3.3 网址

https://www.w3.org/standards/techs/css
https://www.w3.org/TR/CSS22/
https://www.w3.org/TR/CSS22/propidx.html
到https://caniuse.com/查询CSS属性的可用性

四，CSS基础选择器

4.1 通配选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 通配选择器，可以选中所有元素 */
    * {
      color: chartreuse;
    }
    /*
      一般不会这么用，但也有应用场景 例如：京东网站，使用通配选择器来消除元素之间的间距
      * {
        margin：0；
        padding：0；
      }
    */
  </style>
</head>
<body>
  <h1>标题</h1>
  <p>段落</p>
  <span>块er</span>
</body>
</html>

4.2 元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 元素选择器 */
    div {
      background-color: green;
    }
    p {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>我是一个段落</p>
  <div>我是一个div</div>
  <p>我是一个段落</p>
  <div>我是一个div</div>
</body>
</html>

4.3 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 类选择器 -->
  <style>
    .p1 {
      font-size: 20px;
    }
    .div {
      background-color: #222222;
    }
    /* 
      类的名字规范：
        1.见名知意
        2.当多个单词时，以什么样式连接
          * color-green 使用 -
            fl_pg 使用 _
            fontSize 使用驼峰  （比较少）
    */
    .color-green {
      color: green;
    }
  </style>
</head>
<body>
  <p class="p1">我是一个段落</p>
  <div class="div">我是一个div</div>
  <p class="color-green">我是一个段落</p>
  <div>我是一个div</div>
</body>
</html>

4.4 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*
      应用场景：
        当需要选择某个id 或者 某个id 下的内容
        例如： #header .title{ xxxx  }
        这样就会先找到 header 然后再找 title
    */
    #header {
      background-color: red;
    }
    #main {
      background-color: green;
    }
    #footer {
      background-color: orange;
    }
    #title {
      background-color: #0ff;
    }
  </style>
</head>
<body>
  <!-- id名称，一个页面中不要冲突 -->
  <div id="header">头部</div>
  <div id="main">中间</div>
  <h1 id="title">标题</h1>
  <div id="footer">尾部</div>
</body>
</html>

五，常用的CSS属性（案例）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 1.color，设置前景色 */
    .container {
      color: green;
      text-decoration: line-through;
      border-style: solid;
    }
    /* font-size，设置字体大小 */
    /* em  rem 百分比 pt(不常用) */
    .content {
      font-size: 30px;
    }
    /* backageground-color */
    .box1 {
      background-color: red;
    }
    .title1 {
      background-color: yellow;
    }
    /* height width */
    .box2 {
      background-color: red;
      width: 100px;
      height: 100px;
    }
    .title2 {
      background-color: yellow;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <!-- color 前景色 -->
  <div class="container">我是一个内容</div>

  <!-- font-size 字体大小 -->
  <p class="content">我是一个段落</p>

  <!-- backageground-color 背景色 -->
  <div class="box1">我是div</div>
  <span class="title1">我是span</span>
  <span >我是span</span>
  
  <!-- height width -->
  <div class="box2">哈哈哈</div>
  <!-- 无效：不适用于非替换行内元素 -->
  <span class="title2">我是span</span>

六，颜色

6.1 颜色起源

RGB颜色：通过R（Red）、G（Green）、B（Blue）三种颜色通道的变化、叠加产生各式各样的颜色
每种颜色使用一个字节进行存储，也就是 8 个bit位，也就是 0 ~ 255

6.2 颜色的表现形式

单词：red green
rgb：rgb（255，255，255）
rgba(red, green, blue, alpha)：相比rgb，增加了透明度，1表示不透明，取值在0~1
十六进制表示形式：#00ffff，简写：#0ff（比较建议，因为可以减缩css代码体积，从而减小文件大小，加快页面响应速度）

6.3 rgb 表现规律

RGB颜色值越大，越靠近白色，越浅色
RGB颜色值越小，越靠近黑色，越深色
RGB颜色值一样的，一般是灰色

6.4 案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 使用单词 */
    .content {
      width: 200px;
      height: 300px;
      background-color: orange;
    }
    /* 使用rgb */
    .content1 {
      width: 200px;
      height: 300px;
      background-color: rgb(0, 255, 255);
    }
    /* 带透明度rgba */
    .content2 {
      width: 200px;
      height: 300px;
      background-color: rgba(0, 255, 255,0.5);
    }
    /* 使用十六进制 */
    .content3 {
      width: 200px;
      height: 300px;
      background-color: #00ffff;
    }
  </style>
</head>
<body>
  <div class="content">使用英文单词</div>
  <div class="content1">使用rgb</div>
  <div class="content2">使用rgba</div>
  <div class="content3">我是使用十六进制的</div>
</body>
</html>

七，CSS属性-文本

7.1 text-decoration 文本装饰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* a链接去除下划线 */
    a {
      text-decoration: none;/* 无任何装饰线 */
      color: #222;
    }
    .taobao {
      font-size: 20px;
    }
    p {
      text-decoration: overline;
    }
    span {
      text-decoration: line-through;
    }
    div {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <a href="http://www.baidu.com">百度一下</a>
  <div>
    <a class="taobao" href="http://www.taobao.com">淘宝一下</a>
  </div>

  <!-- 演示text-decoration -->
  <p>我是p元素</p>
  <span>我是span元素</span>
  <div>我是div元素</div>

  <u>我是u元素，我自带下划线</u>
</body>
</html>

7.2 letter-spacing word-spacing 字母单词之间添加间距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* letter 字母 */
    .p1 {
      letter-spacing: 10px;/* 可以设置成负数 */
    }
    .p2 {
      word-spacing: 30px;/* 同负数 */
    }
  </style>
</head>
<body>
  <p class="p1">Hello World</p>
  <p>Hello World</p>
  <p class="p2">Hello World</p>
</body>
</html>

img13

7.3 text-transform 设置文字的大小写转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .text1 {
      text-transform: capitalize;
    }
    .text2 {
      text-transform: uppercase;
    }
    .text3 {
      text-transform: lowercase;
    }
  </style>
</head>
<body>
  <div class="text1">MY Name is wangshuaibing</div>
  <div class="text2">MY Name is wangshuaibing</div>
  <div class="text3">MY Name is wangshuaibing</div>
</body>
</html>

img14

7.4 text-indent 设置第一行内容缩进

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
     p {
       /* em ,相对于该标签的字体大小 */
       /* text-indent: 16px; */
       /* 1em 相当于 1 * font-size */
       /* text-indent: 1em; */
       text-indent: 2em;
       font-size: 16px;
     }
  </style>
</head>
<body>
  <P>
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
  </P>
</body>
</html>

7.5 text-align

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1 {
      background-color: #ff0;
      text-align: center;
    }
    .box2 {
      background-color: #f0f;
      text-align: center;
    }
    /* 演示错觉 */
    .box3 {
      background-color: #00f;
      text-align: center;
    }
    .inline {
      /* 以下两行可以突破这种错觉 */
      background-color: #0ff;
      width: 300px;
      /* 如果真的想让这个div据中，可以使用display属性 */
      display: inline-block;/* 使用 inline-block 设置成行列元素 */
    }
    .box4 {
      background-color: #0ff;
      color: #fff;
      /* 将一行的剩余空间进行等分，且默认不设置最后一行， */
      text-align: justify;
      /* 最后一行的设置可以使用text-align-lase 设置 */
      text-align-last: justify;
    }
  </style>
</head>
<body>
  <div class="box1">我是div</div>
  <div class="box2">
    <img src="../img/12.png" alt="">
  </div>
  <div class="box3">
    <!-- <div>我是嵌套在一个div中的div</div> -->
    <!-- 以为我是居中了? 实际上我继承了父容器div box3的属性值而已，不信你给我加一个class -->
    <!-- div是块级元素，块级元素默认自己占一行 -->
    <div class="inline">我是嵌套在一个div中的div</div>
  </div>
  <div class="box4">
    Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
    Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
    Hello WorldHello WorldHello WorldHello WorldHello WorldHello 
  </div>
</body>
</html>

img15

八，CSS属性-字体

8.1 字体先知

字体来自于操作系统，想让浏览器上应用某种字体，其操作系统中若不存在，也不会生效，而是会使用操作系统默认的字体

8.2 font-size

设置时需要数值 + 单位（单位有很多，暂时只需要知道 px（像素） em即可）

当然还可以使用百分比（基于父元素，比如50%是父元素font-size的一半）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 谷歌浏览器默认字体最小号为12号 */
    p {
      /* 使用 像素 px */
      /* font-size: 20px; */
      
      /* 使用em，此时相对 */
      font-size: 2em; /* 2em = 2 * 15px = 30px*/
      
      /* 使用百分比 */
      font-size: 150%;
    }
    .box1 {
      font-size: 15px;
    }
  </style>
</head>
<body>
  <div class="box1">
    <span>
      <!-- 当span里面没有设置字体大小时，会继承父元素的大小，即box1 -->
      我是span元素
    </span>
    <!-- p元素自身设置了大小，故使用自身的设置 -->
    <p>
      我是p元素
    </p>
  </div>
</body>
</html>

8.3 font-family

设置文字字体名称
可以设置一个或多个，从左到右选择，直到找到操作系统支持的字体为止

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      /* 首先，字体可以写多个，可以写一个，但大部分都是要写多个的
        因为：用于的浏览器所在的操作系统可能不支持这种字体。这会导致设置的字体不可用 但不可用会使用用户操作系统的默认字体  */
      font-family: serif;

      /* 小米公司的字体设置例子 */
      font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
      /* 字体有的加了 引号 有的没加，是因为 加引号的字体内容都不是一个整体，需要引号来给他说明是一个整体
        另外。如果要求中英文字体不一样，建议：
          -- 英文字体在前，中文字体在后
          -- 若中文字体在前（中文字体会将中英文字体都做显示，英文字体就不会起作用了） */
    }
  </style>
</head>
<body>
  <p>sssssssssssssssssssssss中文中文中文中文中文中文中文中文中文中文中文</p>
</body>
</html>

8.4 font-weight 设置文字的粗细

100|200|300...|900 每个数字表示一个重量
正常：normal 400
加粗：bold 700
strong、b、h1~h6等标签的font-weight默认就是bold

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .price {
      /* 100|200...|900 */
      /* 400是普通 700相当于加粗 */
      font-weight: 600;
    }
  </style>
</head>
<body>
  <p class="price">￥21.99</p>
    
  <!-- 默认有加粗的 -->
  <h1>标题，默认加粗</h1>
</body>
</html>

8.5 font-style

noramal 常规显示
italic 用字体的斜体显示（前提是这种字体本身支持斜体）
oblique 文本倾斜显示
em、i、cite、address、var、dfn等元素的font-style默认就是italic
n设置font-style为italic的span元素，使用效果等价于em元素

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p1 {
      /* 
        前提: 设置的这种字体本身是支持斜体的
       */
      font-style: italic;
    }
    p2 {
      /* 
        让文字倾斜
       */
      font-style: oblique;
    }
  </style>
</head>
<body>
  <!-- 1.元素本身就是斜体 -->
  <!-- 很少使用 i 做斜体，但 i 有种用法就是用来做小图标 比如一个京东商品上的小箭头 -->
  <i>哈哈哈哈哈哈哈</i>
  <em>呵呵呵呵呵呵呵呵呵呵呵呵</em>

  <!-- 2.使用样式做斜体 -->
  <p class="p1">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻1</p>
  <p class="p2">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻2</p>
</body>
</html>

8.6 font-variant

影响小写字母的显示形式

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h1 {
      font-variant: small-caps;
    }
    .title {
      font-variant: normal;
    }
  </style>
</head>
<body>
  <!-- 大写字母不变，小写字母变大写但大小不变 -->
  <h1>Hello World！</h1>
  <h1 class="title">Hello World！</h1>
</body>
</html>

img

8.7 行高

line-height 设置文本的行高（一行文字所占的高度）
官方：两行文字基线（baseline）之间的间距
区分height 与 line-height
- height：元素的整体高度
- line-height：元素每一行文字所占据的高度

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      height: 200px;
      /* 
        官方：行高是两条基线（baseline）之间的距离，基线（与小写字母x最底部对齐的线）
        行高 = 行距 + 字体内容本身高度
        当设置文本行高等于 div高度时，文本本身高度不变，行距会进行平分
        所以会正好居中
       */
      line-height: 200px;
      background-color: #ffff00;
    }
  </style>
</head>
<body>
  <div>中文Englishxxxx</div>
</body>
</html>

8.8 font 缩写

当需要对文本设置很多样式时使用

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      /* font-size: 30px;
      font-family: "微软雅黑";
      font-weight: 700;
      font-style: italic;
      line-height: 50px;
      font-variant: small-caps; */

      /* weight style varient font-size/line-height font-family */
      font: bold italic small-caps 30px/50px "宋体";

      /* style varient weight 可以省略不写，但不写肯定没有样式 */
      /* font: 30px/50px "宋体"; */

      /* /line-height 可以省略 */
      /* font: 30px "宋体"; */
      
      /* 错误的写法 */
      /* font: "宋体" 30px; */
      /* font: "宋体" 30px/50px; */
      
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div>我是div内容</div>
</body>
</html>