css 整理

2020-03-08 本文已影响0人 jasmine_6aa1

link 与 import 引入有什么区别

@import的引入方式在一些老版本的浏览器中可能不支持。
link是浏览器在加载html文档时就开始加载的，而@import是在浏览器对html文件加载完成后才对css文件进行加载的；
link引入支持除了css格式的其他文件的引入，而@import只支持css格式的文件的加载
link引入的css文件样式，将来能够支持JS的DOM操作，而@import引入方式不支持相关的DOM操作，通常使用link的引入方式就能够解决所有的css引入问题

css整理

css的用法

内联样式：在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

优先级：递增顺序

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 优先

注：内联样式>内联样式表>外部引用，
各个样式中，如果出现同样的属性设置，靠后替换靠前的

css 类型
1，背景

background-color
background-image
background-repeat
background-attachment
background-position

渐变：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
        background-image: linear-gradient(#e66465, #9198e5);从上到下渐变
        background-image: linear-gradient(to right, red , yellow);从右到左渐变
        background-image: linear-gradient(to bottom right, red, yellow)
        从左上角到右下角的线性渐变
        background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
        从左到右的线性渐变，带有透明度
        background-image: radial-gradient(red, yellow, green);圆形渐变

2，文本样式

text-align:center; 中间对齐
text-align:right; 右对齐
text-align:left; 左对齐
text-transform:uppercase; 输出的英文 大写
text-transform:lowercase; 输出的英文 小写
text-transform:capitalize; 输出的英文 首字母大写
text-indent:50px; 文本首行缩进50px
letter-spacing:2px；设置文本的字母间距
text-shadow:2px 2px #FF0000; 设置文本的阴影
vertical-align:text-top；设置元素的对齐方式，垂直靠上对齐

文本效果：
text-shadow: 5px 5px 5px #FF0000;   文本阴影
box-shadow
text-overflow：clip；// 修剪文本。
               ellipsis；//显示省略符号来代表被修剪的文本。
               string；//使用给定的字符串来代表被修剪的文本。
word-wrap : break-word;  //允许长单词换行到下一行
word-break : break-all; //在恰当的断字点进行换行
white-space: nowrap; //规定段落中的文本不进行换行

文本溢出，出现自动裁切：
{
    overflow: hidden;
    text-overflow:ellipsis;//裁切下去的部分，用...代表
    white-space: nowrap; //强制文字不换行
}

input::-webkit-input-placeholder {
padding-left:30px;

ul li input[type="button"]:hover{ 
    background: #d13a35;
    cursor: pointer; //手指按钮设置
}

3，a 链接：去掉a链接删除属性

a {text-decoration:none;}
a:link {color:#000000;} /* 未访问链接*/ 
a:visited {color:#00FF00;} /* 已访问链接 */ 
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

4，盒子模型

content
padding
border ：
    border-radius：
            border-top-left-radius：定义了左上角的弧度
            border-top-right-radius：定义了右上角的弧度
            border-bottom-right-radius：定义了右下角的弧度
            border-bottom-left-radius：定义了左下角的弧度
    box-shadow: 10px 10px 5px #888888;
    border-image
margin

5，边框样式

dotted：点线边框
dashed：虚线边框
solid：实线边框
double：两个边框

outline：轮廓（button/input：一边设置边框为 none）

6，隐藏元素：隐藏

display:none；// 元素不仅被隐藏了，还不会影响布局
visibility:hidden；//元素虽然被隐藏了，但仍然会影响布局

注：把块元素变为内联元素：display:block;

7，定位：

position：static; //没有定位，遵循正常的文档流对象
          fixed; // 元素的位置相对于浏览器窗口是固定位置
         relative; // 移动相对定位元素，但它原本所占的空间不会改变
         absolute; //相对于最近的已定位父元素，没有已定位的父元素，它的位置相<html>
         sticky; //基于用户的滚动位置来定位
z-index：;//定位时候，判断元素定位的堆叠顺序
cursor：pointer；//光标移到到指定的手型
display:inline；//把块元素变为行内元素
display：block；//把行内元素变为块元素

8，文本溢出：

overflow：auto 自动
              hidden  隐藏
              scroll 滚动条
overflow-x： hidden；x轴隐藏      
overflow-y： scroll；y轴出滚动条
float：left / right；浮动要清除浮动样式，否则会影响下面的布局
clear:both /left / right;清除两边浮动/左侧/右侧浮动

9，布局—水平 & 垂直

//水平居中：
margin：0 auto；

// flex 布局
display：flex；布局
justify-content: center;// 水平居中
align-items: center;;//垂直居中

// 用定位设置水平垂直居中
position:absolute;
top:0;
bottom:0;
right:0;
left:0;

10， CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)：div p
子元素选择器(以大于号分隔）: div > p
相邻兄弟选择器（以加号分隔）: div+p
普通兄弟选择器（以破折号分隔）: div~p

11,css伪类

a:link {color:#FF0000;}  //未访问的链接 
a:visited {color:#00FF00;}  // 已访问的链接 
a:hover {color:#FF00FF;} //  鼠标划过链接 
a:active {color:#0000FF;}  // 已选中的链接 

伪类
a:first-child 匹配第一个a链接的元素
div > a : first-child 匹配div下面的第一个a链接
p:first-child i 匹配第一个p标签下面所有的 i
p:empty 选择所有没有子元素的p元素
input:checked 选择所有选中的表单元素
p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
p:last-child 选择所有p元素的最后一个子元素
p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(p) 选择所有p以外的元素
p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
p:only-child选择所有仅有一个子元素的p元素
input:read-only选择只读属性的元素属性
p:first-letter 选择每个<p> 元素的第一个字母
:first-line选择每个<p> 元素的第一行
：before / ：after ---伪元素可以在元素的内容之钱/后插入新内容。

12，Tooltip：提示工具

<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    
    // 左右选择一个
    left: 100%; 提示工具右侧 
    right: 100%; 提示工具右侧 
    
    // 淡入淡出
    opacity: 0;
    transition: opacity 1s;
  }

.tooltip:hover .tooltiptext {//经过时候，显示出来
    visibility: visible;
    opacity: 1;//淡入淡出
}

13，@media 响应式

@media screen and (max-width: 600px){//当屏幕尺寸小于600px时，应用下面的CSS样式  
    .class {    background: #ccc;  }
}
@media (min-width: 768px){ //>=768的设备 
}

14，属性选择器

//属性选择器
[title] { color:blue; }
<h1 title="Hello world">Hello world</h1>

属性和值选择器
[title=runoob] { border:5px solid green; }
<a title="runoob" href="//www.runoob.com/">runoob</a>

属性和值的选择器 - 多值
input[type="text"]{}
input[type="button"]

15，网页布局

display: table;
//table 中 td 下面的属性rowspan与colspan
//rowspan 属性规定单元格可横跨的行数
//colspan 属性规定单元格可横跨的列数。
display: flex;

16，动画可以对元素进行移动、缩放、转动、拉长或拉伸。

2D转换
translate(dx, dy)  为画布的变换矩阵添加水平的和垂直的偏移
rotate( angle )  旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。
transform：scale()  放大/缩小
skew() 
    transform：skewX(<angle>);表示只在X轴(水平方向)倾斜。
    transform：skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
matrix() ；六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D 动画
@keyframes myfirst { 
    from {background: red;left:0px; top:0px;}
    to {background: yellow;left:100px; top:90px;} 
}

注：//鼠标经过是时，放大
.solve__item {
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
.solve__item:hover {
  transform: scale(1.2);
}

17， @font-face 规则
注：引用"自己的"的字体是在 CSS3 @font-face 规则中定义的
18，Window.getComputedStyle();测试版本，获取测试段的样式

window.getComputedStyle(
document.querySelector('.search-btn'),null).getPropertyValue("line-height"
)

19，鼠标经过时候，放大倍数

transition: property duration timing-function delay;
/*property：执行过渡的属性
duration：执行过渡的持续时间
timing-function：执行过渡的速率模式
delay：延时多久执行*/

.solve__item {
    cursor: pointer;
    transition: all 0.4s ease-in-out; 
  }
.solve__item:hover {
    transform: scale(1.2);//放大1.2倍
  }

ease-in-out--- 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，(开始和结束都慢)两头慢)

linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）;(匀速)

ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）

ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。

ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。

ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。* cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

20，页眉固定在头部，并且随着窗口左右大小做自适应调整

<a-layout-header  style="height:64px;">
  <app-layout-header style="padding: 0;width:100vw;position:fixed;left:0;top:0;"/>
</a-layout-header>

21，清除浮动的几种方法：

// 方法一：
clear：both；

// 方法二：此方法 IE6 不支持用，追加一条 _zoom:1;
overflow: hidden;
_zoom:1;

// 方法三：格局法，在浮动元素的下方加上
 <div style="clear:both;"></div>

// 方法四：父级元素加一个 clearfix 属性
.clearfix{ zoom:1 }

// 方法五：用伪元素  :after 与 :before 消除元素浮动
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

22， [媒体查询特性] prefers-reduced-motion

no-preference：用户未修改系统动画相关特性。
reduce：意味着用户修改了系统设置，动画最小化，移除所有不必要的动画。

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

注：例如：360度旋转

如果有出错的，请大家指教，谢谢！

css 整理

css整理

猜你喜欢

热点阅读