CSS样式与选择器详解-CSDN博客

本文链接：https://blog.csdn.net/qyj19920704/article/details/128032694

一.总体设置

1.内联样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS外联样式一</title>
    <style>
      /* 对body中的所有p元素起作用 */
      p {
        color: blue;
        font: bolder;
      }
    </style>
  </head>
  <body>
    <p>这是一个段落。</p>
    <p>另一个段落。</p>
  </body>
</html>

2.外联样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS外联样式二</title>
    <!-- 与单独的.css文件关联起来 -->
    <link rel="stylesheet" href="04.css" />
  </head>
  <body>
    <p>这是一个段落。</p>
  </body>
</html>

3.注释

CSS 只有一种注释，不管是多行注释还是单行注释

在 css 中注释的方法是使用符号如下,在 css 中所有被放在分隔符之间的文本信息都被称为注释。

/**/

4.快速生成 html

!+table键

5.footer 底部显示

.root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;
}

6.网页变灰

6.1.腾讯

 <style type="text/css">
    html{
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%); /* webkit */
      -moz-filter: grayscale(100%); /*firefox*/
      -ms-filter: grayscale(100%); /*ie9*/
      -o-filter: grayscale(100%); /*opera*/
      filter: url("data:image/svg+xml;utf8,#grayscale");
      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -webkit-filter: grayscale(1);
    }
  </style>

6.2.小米

<html lang="zh-CN" xml:lang="zh-CN" style="filter: grayscale(100%);"></html>

6.3.京东

<script>
    // 直出代码
    window.reqFulfilled = function (config) {
      if (config.name && config.name.indexOf('jsonpMorePromotePrice') !== -1) {
        config.retryTimes = 0
        config.timeout = 500
      }
      return Promise.resolve(config)
    }
    var waitForEl = function(selector, callback) {
      if ($(selector).length) {
        callback()
      } else {
        setTimeout(function() {
          waitForEl(selector, callback);
        }, 100)
      }
    }

    waitForEl('#settleup .dropdown-layer', function() {
      $('#settleup .dropdown-layer').remove()
      // work the magic
    })

    var isDuringDate = function (beginDateStr, endDateStr) {
      var curDate = new Date()
      var beginDate = new Date(beginDateStr)
      var endDate = new Date(endDateStr)

      if (curDate >= beginDate && curDate <= endDate) {
          return true
      }
      return false
    }

    $html = $('html')
    $html.toggleClass('o2_gray', isDuringDate('2020/04/04 00:00:00', '2020/04/04 23:59:59'))
</script>
<style>
    .o2_ie8 .more2_international {
        filter: progid:dximagetransform.microsoft.alphaimageloader(src='//storage.360buyimg.com/mtd/home/more_international1575014601797.png',sizingMethod='scale');
        background: none;
    }
    .mod_help_cover {
        background-image: none;
    }
    .dropdown:hover .cw-icon {
        border-bottom: 1px solid #e3e4e5;
    }
    html.o2_gray {
      -webkit-filter: grayscale(100%);
      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
</style>

二.div 设置

1.标签样式

p {
  color: brown;
  font: bolder;
}

2.加圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个圆角值相同

border-radius: 10px 10px 10px 10px;

border-top-left-radius     定义了左上角的弧度

border-top-right-radius     定义了右上角的弧度

border-bottom-right-radius     定义了右下角的弧度

border-bottom-left-radius     定义了左下角的弧度

3.设置宽度

width属性设置元素的宽度。（注意： width属性不包括填充，边框和页边距！）
min-width属性设置元素的最小宽度。
max-width属性设置元素的最大宽度

4.设置高度

max-height
min-height
height

5.在页面底部

position:fixed;
bottom:0px;

6.在 div 的底部

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        height: 300px;
        width: 300px;
        border: 1px solid #333333;
        text-align: center;
        position: relative;
      }

      div p {
        position: absolute;
        bottom: 0px;
        padding: 0px;
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>你好呀</p>
    </div>
  </body>
</html>

7.设置字体大小

 font-size: 10px;

8.div 在 div 的底部

<html>
  <head>
    <title>Test</title>
    <style>
      .div1 {
        border: 1px solid red;
        width: 500px;
        position: relative;
        height: 500px;
      }

      .div2 {
        border: 1px solid green;
        width: 300px;
        height: 200px;
        position: absolute;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      1111111
      <div class="div2">2222222222</div>
    </div>
  </body>
</html>

9.div 在 div 底部

并且文字在内部 div 底部

<html>
  <head>
    <title>Test</title>
    <style>
      .div1 {
        border: 1px solid red;
        width: 500px;
        position: relative;
        height: 500px;
      }

      .div2 {
        border: 1px solid green;
        width: 300px;
        height: 200px;
        position: absolute;
        bottom: 0;
      }

      .div2 p {
        position: absolute;
        bottom: 0px;
        padding: 0px;
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      1111111
      <div class="div2">
        <p>2222222222</p>
      </div>
    </div>
  </body>
</html>

10.如何设置 div 背景图像

body {
  background-image: url("paper.gif");
  background-color: #cccccc;
}

11.三角形

#triangle {
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid blue;
}

12.display 几种常用的属性值

第一个：display:none;

设置元素隐藏，具体可见：display:none

第二个：display:block;

设置元素为块级元素，块级元素可以独占一行，可设宽高。

第三个：display:inline;

设置元素为行内元素，一行可有多个行内块元素，可设宽高。

第四个：display:inline-block

设置元素为行内块元素，既有行内元素的（一行可有多个）特性，又有块元素的（可设宽高）特性

第五个：display:inline-table

inline-table 得到的是，外面是“内联盒子”，里面是“table 盒子”。

第六个：display:table

元素会作为块级表格来显示，类似 table，表格前后带有换行符;配合 table-cell 使用可实现水平垂直居中，具体可见：水平垂直居中

第七个：table-row

元素会作为一个表格行显示，类似 tr;

第八个：table-cell

元素会作为一个表格单元格显示，类似 td 和 th。

第九个：display:list-item

为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。会把元素作为列表显示，要完全模仿列表的话还需要加上 list-style-position，list-style-type

13.省略文字

如果只显示一行，则可以使用以下方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

如果需要显示多行，在需要设置的元素 style 中添加以下代码：

word-break: break-all;
text-overflow: ellipsis;
display: -[webkit](https://so.csdn.net/so/search?q=webkit&spm=1001.2101.3001.7020)-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

只显示两行：

overflow: hidden; //超出隐藏
text-overflow: ellipsis; //超出使用省略号
display: -webkit-box;
-webkit-line-clamp: 2; //第几行
-webkit-box-orient: vertical;
width: 192px; //根据需要自定义设置
height: 60px; //根据文字高度自定义设置为两行行高

（注意：有时添加在嵌入样式中不生效，需要添加在行内样式中）

三.问题

1.link 和@import 的区别？

1、从属关系区别：
link 属于 html 标签，而@import 是 css 提供的。
2、加载顺序区别：
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面被加载完再加载。
3、兼容性区别：
import 只在 IE5 以上才能识别，而 link 是 html 标签，无兼容问题。
4、dom 可操作性区别：
可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式
5、权重区别：
如果已经存在相同样式，@import 引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出 link 方式的样式权重高于@import 的权重这样的直观效果。

2.src 与 href 的区别？

1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部

3.CSS 基础选择器总结

选择器	作用	缺点	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	p { color：red;}
类选择器	可以选出 1 个或者多个标签	可以根据需求选择	.nav { color: red; }
id 选择器	一次只能选择器 1 个标签	只能使用一次(不推荐使用)	#nav {color: red;}
通配符选择器	选择所有的标签	会匹配页面所有的元素，降低页面响应速度(不推荐使用)	*** {color: red;}