CSS(一) 邂逅

2020-02-04  本文已影响0人  莘栀

邂逅 CSS

一，初识css

1.基本概念
1.1 CSS的全称是Cascading Style Sheets，层叠样式表
1.2 书写格式
1.3 引入css的三种方式

二，细节

2.1 注释
2.2 HTML CSS 编写准则
2.3 设置网页图标
2.4 驼峰标识

三，CSS简史

3.1 版本发展
3.2 常用属性
3.3 网址

四，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 颜色起源
6.2 颜色的表现形式
6.3 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
8.3 font-family
8.4 font-weight 设置文字的粗细

8.5 font-style

8.6 font-variant
8.7 行高

8.8 font 缩写

上一篇 下一篇

猜你喜欢

热点阅读