Web-CSS基础

发表于 更新于 分类于 ， Waline： 阅读次数： 本文字数： 12k 阅读时长 ≈ 10 分钟

基础语法

层叠样式表，极大提高工作效率。

1
2
3
4
5
6
7
selector{   // 选择器
  property:value   // 属性:值
}


示例：
h1{color:red;font-size:14px;}

当属性大于 1 后，用分号隔开。
当值大于 1 后，用引号。

在 head 中引入：

1
2
<!-- stylesheet:引入的外部文件 -->
<link href="MyCss.css" type="text/css" rel="stylesheet">

选择器分组：（不同标签可以使用相同选择器）
h1,h2,h3{color:red;}
选择器继承：（内部标签如没有属于自己的样式，则继承使用外部标签样式）
body{color:green;}
样式表优先级高于属性，小于行内样式表。

块级元素：
（div，p，h1~h6等），可设置元素宽高和四个方向的 padding 和 margin 值。（display:block）
行内元素：
（a，em，strong），不可设置宽和高，元素内尽量不要包含块元素，高度一般由字体大小决定，宽度由内容长度控制，只能设置左右方向的 padding 和 margin，上下无法设置。（display:inline）

align 元素就只针对块级元素。
img：图片是特例，虽是内联，但可设置宽高。

选择器

  • 派生选择器
    1
    2
    // li：外部标签。p：内部标签。中间用空格隔开。
    li p{color:red;}
  • id 选择器
    1
    2
    3
    #id{color:red;}
    <!-- id 选择器和派生选择器同时使用 -->
    #div p{color:red;}
  • 类选择器
    1
    2
    .aclass{color:red;}
    .aclass p{color"red;}
  • 属性选择器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <style type="text/css">
      [title]{
        color:red;
      }
      [title="te"]{
        color:blue;
      }
      <!-- option 中带有 disabled属性的 -->
      option[disabled]{}
      <!-- 选中所有 class="p1" -->
      p[class~="p1"]{}
      <!-- 选中所有以 class="p1" 开头的-->
      p[class^="p1"]{}
      <!-- 选中所有以 class="p1" 结尾的 -->
      p[class$="p1"]{}
      <!-- 选中所有包含 class="p1"的 -->
      p[class*="p1"]{}
    </style>

    <p title="t">属性选择器</p>
    <p title="te">属性和值选择器</p>
    如果 title 给相应的值，则有相应效果。
    若果 title 的值随便写，则为 title 的效果。
  • 关系选择器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    包含：（E F）
    ul li{}

    子选择器：对直接子元素作用（E>F）
    div > a{}

    相邻：选择相邻的第一个兄弟元素（E+F）

    兄弟：对它后面的元素起作用，用于选中 E 之后的所有 F 元素（E~F）
  • 伪类选择器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    E:link（特指 a 标签，未被点击之前的样式。）
    E:visited（已被访问的 a 标签）
    E:hover（鼠标悬浮在元素上时，不局限于 a 标签）
    E:active（鼠标按下时，不局限于 a 标签）
    E:not(s)（匹配不含有 s 选择器的元素 E）
    示例：div:not(.my){}
    E:first-child（是否有一个父容器，是否相对父元素是第一个子元素）
    E:last-child
    E:only-child（相对父元素，是否是唯一子元素）
    E:empty
    E:checked
    E:nth-child(n)
    <!-- 避免了 span 的重复 class，直接选中第几个。 -->
    span:nth-child(2)
    span:nth-child(3)
  • 伪对象选择器（伪元素）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    E:before/E::before
    E:after/E::after


    示例：
    ul::before{content="内容之前";color="red";}
    ul::after{content="内容之后";color="blue";}
    不在 html 文档中，通过 css 来实现。
    input:checked+span::after{content="111"}

绘制简单图形

三角形：先有一个 span 容器，然后通过 border 绘制。

1
2
3
4
5
6
7
8
9
10
span{
  <!-- 行内块元素 -->
  display: inline-block;
  width: 0px;
  height: 0px;
  <!-- solid：实心 -->
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid blue;
}

梯形：在三角形的基础上给定 width 值，然后通过旋转来转换角度。
仿微信聊天界面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- 绘制聊天框 -->
<div class="send">
  <!-- 三角形 -->
  <div class="arrow"></div>
  <!-- 矩形 -->
  <div class="text">欢迎</div>
</div>


  .send{
    position: relative;
    width: 300px;
    height: 50px;
  }
  .arrow{
    width: 0rem;
    height: 0rem;
    /* 边框边为10px */
    border: 0.625rem solid #000;
    /* 只有一边有颜色 */
    border-color: transparent rgb(172,218,71) transparent transparent; 
    position: absolute;
    z-index: 99;
    top: 0.625rem;
  }
  .text{
    width: 18.75rem;
    height: 3.125rem;
    background: rgb(172,218,71);
    border-radius: 0.3125rem;
    position: absolute;
    left: 1.25rem;
    color: #fff;
    padding: 0.625rem;
    /* 已经写好了宽高，但是文字是贴边的，*/
    /* 相加 padding 控制，又不想改变宽高，*/
    /* 把元素变为怪异模式即解决问题。  */
    box-sizing: border-box;
  }

隐藏元素的区别：
display: none;不占空间
visibility: hidden;空间依然存在

背景

css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
bakcground-attachment：背景图片是否固定或随页面的其余部分滚动。
bakcground-color：设置元素背景颜色。
bakcground-image：把图片设为背景（url(“img.jpg”);）。
bakcground-position：设置背景图片起始位置。
bakcground-repeat：设置背景图片是否及如何重复。
background-size：两个值，前宽后高。如只设置宽，高会自适应。如只设置高，宽也要设置（如变形，找美工）。默认auto，真实大小。
背景图片的优先级高于颜色的优先级

文本属性

color：设置文本颜色
direction：文本方向
line-height：行高
letter-spacing：字符间距
text-align：对其元素中的文本（center：剧中。left：左对齐。justify：两端对齐。）
text-decoration：向文本添加修饰
text-indent：缩进元素中文本的首行
text-shadow：文本阴影，css2包含该属性，css2.1没有。
text-transform：文本转换。元素中字母（uppercase：大写。lowercase：小写。capitalize：首字母大写。）
unicode-bidi：文本方向
white-space：元素中空白的处理方式
word-spacing：字间距
font-weight：字体加粗（100-900，blod）

实现文字溢出省略号显示：

1
2
3
4
5
6
7
8
p{
  <!-- 文本禁止换行 -->
  white-space:nowrap;
  <!-- 超出部分隐藏 -->
  overflow:hidden;
  <!-- 超出部分以省略号显示 -->
  text-overflow:ellipsis;
}

动画

动画是使元素从一种样式变化为另一种样式的效果，可以改变任意多的次数和任意多的样式。用百分比来规定变化发生的时间，或关键”form”和”to”。但百分比兼容性更好。
示例：百分比

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
  width: 6.25rem;
  height: 6.25rem;
  background: red;
}
div:hover{
  animation: myanimation 5s;
}
@keyframes myanimation{
  0%{width: 12.5rem;}
  50%{width: 31.25rem;}
  100%{width: 37.5rem;}
}

示例：旋转 CD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<img src="img/cd.png" alt="" />


img{
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
}
img:hover{
  /* linear：匀速。infinite：无限（或为具体数值） */
  animation: 3s linear infinite CDturn;
}
@keyframes CDturn{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
img{
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
}
      
@keyframes CDturn{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}


<img id="cdpic"></div>
  
<script>
  var img=document.getElementById("cdpic");
  var myau=document.getElementsByTagName("audio")[0];
  var index = 0;
  img.addEventListener('click',function(){
    if (index == 0) {
      index = 1;
      listen();
    } else{
      index = 0;
      stop();
    }
  })
  function listen(){
    img.style.animation="3s linear infinite CDturn";
    myau.onplay;
  }
  function stop(){
    img.style.animation="";
    myau.onpause;
  }
</script>

过渡 Transition：transtion:width 2s ease-in 2s（属性名 时间(2s执行完) 速度曲线 何时开始(等待2s)）

1
2
3
4
5
6
7
8
9
div{
  width: 200px;
  height: 100px;
  background: orange;
  transition: width 2s ease-in .5s;
}
div:hover{
  width: 600px;
}

动画效果：
linear：匀速（0，0，1，1）
ease：慢，快，慢（0.25，0.1，0.25，0.1）
ease-in：慢开始（0.42，0，1，1）
ease-out：慢结束（0，0，0.58，1）
esae-in-out：慢开始，慢结束（0.42，0，0.58，1）
cubic-bezier(n,n,n,n):0 ~ 1 之间，自定义值。

变换 Transform（2D）

1
2
3
4
5
6
7
8
9
10
11
div{
  width: 50px;
  height: 50px;
  background: url("img/stop.png") no-repeat;
  background-size: 50px;
  transition: 1s;
}
div:hover{
  /* 顺时针旋转 360° */
  transform: rotate(360deg);
}

Transform（3D）
常用函数：rotateX()，rotateY()，translate3d(x,y,z)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- 整体 -->
  <div>
   <!-- 鼠标悬停时，上移显示 -->
   <p></p> 
  </div>
  
  
  *{
    padding: 0px;
    margin: 0px;
  }
  div{
    width: 235px;
    height: 300px;
    margin:100px auto;
    transition: .5s;
    position: relative;
    background: red;
    overflow: hidden;
  }
  p{
    position: absolute;
    height: 75px;
    bottom: -75px;
    width: 235px;
    transition: .2s;
    background: orange;
  }
  div:hover{
    transform: translate(0px,-5px,0px);
    box-shadow: 0px 15px 30px rgba(0,0,0,.5);
  }
  div:hover p{
    bottom: 0px;
  }

Animate.css 动画效果类库
引入 .min.css 文件。效果名在 demo 中。
示例：

1
<div class="animated 效果名"></div>

滑动门 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul>
  <li>
    <!-- 左侧列表项 -->
    <div>
      <!-- 图标 -->
      <div class="icon">
        <i></i>
      </div>
      <div class="text">
        <!-- a 标签选项 -->
        <p><a href="#"></a></p>
      </div>
    </div>
    <!-- 右侧滑动门 -->
    <div class="text-cont">
      <!-- 测试滑动门 index -->
      <!-- 基于 ul 标签绝对定位 -->
    </div>
  </li>
</ul>

定位

position：定位（static，relative，absolute，fixed）
absolute：相对父容器（relative）来绝对定位，通过 top，left，right，bottom 定位。
left：相对于离自己最近的父容器，且已经 position：relative/absolute/fixed。
margin-left：作用于它在文档流的位置。

CSS3 属性

圆角
border-radius 的值如果等于高的一半，将会形成正的圆角（或大于高的一半）。
radius 指半径，它求出的圆，在矩形的切面。
radius 一般用固定宽度，如果指定百分比，形成的是椭圆。border-radius: 10% 10% 10% 10%;(顺时针，坐上角开始)。

阴影
box-shadow: 10px 20px 5px blue（水平阴影距离 垂直阴影距离 模糊距离 颜色）
text-shadow: 文字阴影，使用同上。阴影不占空间。

字体

1
2
3
4
5
6
@font-face{
  <!-- 自定义的字体名，供后续引用。 -->
  font-family:myFont;
  <!-- 字体存放的路径（字体大宝库，资源网） -->
  src:url('res/lxsf.ttf');
}

iconfont 阿里字体图标
1.选择需要的图标加入购物车
2.下载到桌面
3.除去 demo 的两个文件，将剩下的拷贝到项目 iconfont 文件夹。
4.正常引用 css 样式，添加 class=”iconfont”，引用 demo 中的命名。

媒体查询 MediaQuery
达到响应式布局的效果
示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body{
  background: green;
}
/* and 后一定要加个空格 */
@media screen and (max-width: 960px) {
  body{
    background: red;
  }
}
/* screen:屏幕 */
/* 768，550，320 */
@media screen and (max-width: 768px) {
  body{
    background: yellow;
  }
}

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 主页背景图
//body{
//    background: url("/images/bg_body_default_pc.jpg");
      // 可选项还有：cover（可能会超出屏幕），contain（可能会留白）。   
      // 两个值代表宽高，如果只写了一个，另一个代表 auto。
//    background-size: 100% 100%;
//    background-repeat: no-repeat;
      // 图片固定，但是对绘制影响比较大。
//    background-attachment: fixed;
//    background-position: center;
//}

// 超小屏幕（手机，小于 768px） 
// 适配苹果系统（background-attachment: fixed; 会失效）
body:before {
   content: ' ';
   position: fixed;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: url("/images/bg_body_default_mobile.jpg") center 0 no-repeat;
   // 看起来，大屏幕可以用 100%，小屏幕会超出屏幕。 
   background-size: cover;
}

// 要按一定的顺序，是移动端优先，还是 PC 优先。 
// 小屏幕（平板，大于等于 768px） 
@media screen and (min-width: 768px) { 
  body:before {
   background: url("/images/bg_body_default_pid_v.jpg") center 0 no-repeat;
   background-size: 100% 100%;
  }
}
 
// 中等屏幕（桌面显示器，大于等于 992px） 
@media screen and (min-width: 992px) {
  body:before {
   background: url("/images/bg_body_default_pid_h.jpg") center 0 no-repeat;
   background-size: 100% 100%;
  }
 }
 
// 大屏幕（大桌面显示器，大于等于 1200px） 
@media screen and (min-width: 1200px) { 
  body:before {
   background: url("/images/bg_body_default_pc.jpg") center 0 no-repeat;
   background-size: 100% 100%;
  }
}

CSS2 中的媒体查询
示例：

1
2
3
4
5
<!-- screen：电脑显示屏。print：打印。handheld：手机 -->
<link rel="stylesheet" href="css/print.css" media="print" />
<style type="text/css">
  p{color: blue;}
</style>

雪碧图

雪碧图（精灵图，sprites 图片整合技术）
1.用 ps 切图
2.打开 CSSSprite.exe 文件
3.点击左上角按钮打开图片
4.排列图片（点击按钮排列或手动拖动排列）
5.是否勾选手机端（勾选后大小会缩小两倍）
6.代码生成（有 sass 和 css 两个选项，选择后者。前者是一种 css 预处理语言，能清晰，结构化描述文件样式。）
7.大图类型要选择 png，图片背景要为 Transparent 透明。

常见问题

img 标签边距解决办法：
1.把 img 标签转换为块元素。
2.父容器指定高度。
3.父容器的字号变为 font-size:0px; 注意，里面的字号要特别设置。

解决 chrome 字体小于 12 号都显示为 12 号的方法：
把 chrome 设置为英文语言环境，设置-语言和输入设置-添加英文语言。将英文拖到最上面，选择”以这种语言显示 google chrome”，重启浏览器。（chrome 只对中文环境设置）

px，em 和 rem 的区别：
px：基于电脑的分辨率，并不会随浏览器的字体大小修改而修改，相对单位。
em：会随浏览器的字号大小进行调整，浏览器默认 16px，所以 1em=16px，会继承父。
rem：相对 root 单位，也就是 html 结点，不会基于父容器，是基于浏览器。
如何将 px 单位转换为 em 单位：
1.body 设置为 font-size：62.5%，然后需要修改的值除以 10，加 em 单位。
2.现有 px 字号除以浏览器字号（默认 16 ），加 em 值。

清除浮动方式总结：三种方式
1.使用伪元素：
2.使用 overflow：hidden；
3.使用空的 div：
示例1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="clear">
  <div class="d1"></div>
  <div class="d2"></div>
</div>
<div class="d3"></div>


.d1{
  width: 300px;
  height: 300px;
  background: red;
  float: left;
}
.d2{
  width: 300px;
  height: 300px;
  background: green;
  float: left;
}
.d3{
  width: 300px;
  height: 300px;
  background: blue;
}
.clear::after{
  content: "";
  /* 行内元素是无法清除浮动的 */
  display: block;
  clear: both;
}

示例2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="box">
  <div class="d1"></div>
  <div class="d2"></div>
</div>
<div class="d3"></div>


.box{
  overflow: hidden;
}
.d1{
  width: 300px;
  height: 300px;
  background: red;
  float: left;
}
.d2{
  width: 300px;
  height: 300px;
  background: green;
  float: left;
}
.d3{
  width: 300px;
  height: 300px;
  background: blue;
}

示例3：

1
2
3
4
5
6
<div class="clear"></div>


.clear{
  clear: both;
}

CSS 中的继承
继承的局限性：border，padding，margin 不能继承。
能被继承的属性：color，cursor（鼠标变为小手），font-family（字体样式），font-size，font-style（正斜），font-weight（粗细），font，letter-spacing（间距），line-height，list-style，text-align，text-indent。