css学习总结

CSS选择器

1. 元素选择器：使用HTML元素名称来选择元素，例如p、div、ul等。
2. 类选择器：使用点号（.）后面跟类名来选择元素，例如.class。
3. ID选择器：使用#符号后面跟ID名称来选择元素，例如#id。
4. 属性选择器：使用方括号（[]）来选择具有特定属性的元素，例如[title]。

1. [title="xxx"]

2. [title^="xxx"]
3. [title$="xxx"]
4. [title*="xxx"]

5. 伪类选择器：使用冒号（:）来选择元素的特定状态，例如:hover、:active、:visited等。

6. 伪元素选择器：使用双冒号（::）来为元素的特定部分添加样式，例如::before、::after、::placeholder等。

7. 组合选择器：将多个选择器组合起来，以便更精确地选择元素，例如元素选择器和类选择器的组合（p.class）。

CSS样式

1. 盒子尺寸

width: 200px;
height: 150px;
padding: 10px;
margin: 20px;
box-sizing: border-box;

2. 盒子背景和边框属性

background-color: #f7f7f7;
background-image: url('bg-image.jpg');
background-repeat: no-repeat;
border: 1px solid #ccc;
border-radius: 4px;

3. 盒子位置

position: relative;
top: 20px;
left: 50px;
display: flex;
flex-direction: row;
float: right;

4. 文本样式

font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
text-align: center;
line-height: 1.5;

5. 过渡和动画

transition: all 0.5s ease-in-out;
animation: myanimation 2s ease-in-out infinite;

过渡连写属性

/*
    transition-property: 指定要过渡的 CSS 属性名称。
    transition-duration: 指定过渡持续时间，单位为秒（s）或毫秒（ms）。
    transition-timing-function: 指定过渡效果的时间曲线，常用的值有 ease、linear、ease-in、ease-out 和 ease-in-out。
    transition-delay: 指定过渡延迟时间，单位为秒（s）或毫秒（ms）。
*/
​
.element {
  transition: background-color 1s ease-in-out 0.5s;
}
​

动画连写属性

/* 
animation-name: example  动画名字
animation-duration: 4s   持续时间 
animation-timing-function: ease | linear | ease-in  | ease-out | ease-in-out | step-start 时间曲线
animation-delay: 2s  延迟
animation-iteration-count: infinite;
animation-direction: alternate  动画方向    
*/
​
.element {
  animation: example 4s ease-in-out 2s infinite alternate;
}

6. 列表、表格、表单样式

list-style: none;
table-layout: fixed;
border-collapse: collapse;
outline: none

7. 变换和视觉效果属性

transform: rotate(45deg);
box-shadow: 2px 2px 5px #ccc;
text-shadow: 2px 2px 5px #ccc
opacity: 0.8;

特殊的

1. 媒体查询

   @media [media type and] (media feature) [and (media feature)] {
     /* 样式规则 */
   }
   ​
   /* media type：设备类型 */
   all:    适用于所有设备 /* default值 */ 
   print： 适用于打印设备
   sreen： 适用于计算机和移动设备屏幕
   speech：适用于屏幕阅读器
   ​
   ​
   /* media feature： 设备属性 */
   width：视口宽度。
   min-width | max-width: 最小最大宽度
   height：视口高度。
   device-width：设备屏幕宽度。
   device-height：设备屏幕高度。
   orientation：设备方向（横向或纵向）。    /* 设置屏幕纵向时运用样式规则 */
   aspect-ratio：设备屏幕宽高比。
   device-aspect-ratio：设备屏幕宽高比。
   color：设备颜色位数。
   color-index：设备颜色数量。
   monochrome：设备单色位数。
   resolution：设备分辨率。
   

2. 定义字体

   @font-face {
     font-family: 'My Custom Font';
     src: url('mycustomfont.woff2') format('woff2'),
          url('mycustomfont.woff') format('woff');
   }
   

   需要注意的是，不同的浏览器和操作系统支持的字体格式可能不同，因此最好同时提供多个格式的字体文件。常见的字体格式包括 WOFF、WOFF2、TTF、OTF 等。

3. 定义动画

   @keyframes my-animation {
     from { opacity: 0; }
     to { opacity: 1; }
   }
   ​
   @keyframes example {
     0%   { background-color: red; }
     50%  { background-color: yellow; }
     100% { background-color: green; }
   }
   ​
   /* 应用动画 */
   .element {
     animation-name: example;
     animation-duration: 4s;
   }
   

less/sass语法

1. 变量

@primary-color: #007bff;
/*  sass
    $primary-color: #007bff;
*/
​
.element {
  color: @primary-color;
}

2. 混入

/* 不带参数 */
.mixin-name {
  property1: value1;
  property2: value2;
}
​
.selector {
  .mixin-name;
}
​
​
​
/* 带参数的*/
.mixin-name(@param1: value1, @param2: value2) {
  property1: @param1;
  property2: @param2;
}
​
.selector {
  .mixin-name(value3, value4);
}
​
​
/* sass */
@mixin box-sizing($value) {
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  box-sizing: $value;
}
​
nav {
  @include box-sizing(border-box);
​
  ul {
    margin: 0;
    padding: 0;
​
    li {
      display: inline-block;
      margin: 0 10px;
    }
  }
}
​
​

3. 嵌套

nav {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
}

4. less函数

.percentage(@a, @b) {
  @result: (@a / @b) * 100%;
  return @result;
}
​
.box {
  width: 200px;
  height: 150px;
  margin: 0 auto;
  background-color: #f00;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  left: percentage(100px, 800px);
}

CSS技巧

居中效果

/* 行内元素居中 */
height: 50px;
text-align: center;
line-height: 50px
​
/* 行内块元素居中 */
postion: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
​
/* 块盒子水平居中 */
margin: 0 auto
​

自适应两列布局

<div class="container">
  <div class="left">Left Column</div>
  <div class="right">Right Column</div>
  <div class="clear"></div>
</div>
​

1. flex布局

.container {
    display: flex;
}
​
.left {
    width: 300px
}
​
.right {
    flex: 1
}

2. 浮动

.container {
    display: flex;
}
.left {
    float: left;
    width: 300px;
}
.right {
    margin-left: 300px;
}
​
.clear {
    clear: both
}

css三角形

<div class="triangle"></div>
​
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid red;
  border-right: 50px solid transparent;
  /*   只有一遍有颜色是三角形，相邻两边有也是三角形 
    border-bottom: 50px solid red;
  */
}
​