CSS

---恢复内容开始---

选择器语法

有三个问题需要自己学习

  • 组合选择，父子

              个人认为使用组合选择器是要注意加英文的逗号；父子选择其注意加空格

  • 颜色

     16进制颜色：#ffffff每两位代表一种颜色用三种颜色进行组合（red、green、blue)三种表示

  • 单位

字体样式

  • font-family - 类型
  • font-size - 大小
  • font-style - 风格 （normal italic）
  • font-weight - 粗细 (200-700)

文本样式

  • color
  • text-indent - 首行缩进 (em)
  • text-align - 水平对齐 （center left right）
  • vertical-align - 垂直对齐 （top middle bottom） 通常放在img
  • text-decoration - 装饰 （underline overline line-through）
  • line-height - 行高

伪类选择器

  • hover的用法(鼠标放上去就会显示的链接样式)
  • <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /* .box{ color:#f00; font-style:italic; font-size:20px; text-indent:40px; background:#0f0; height:100px; 100px; transition:all 1s ease; }*/ /*.box:hover{ background:#f00; 100%; transition:all 1s ease; text-decoration:underline; }*/ .box{ font-size:20px; font-family:"行书"; font-style:italic; color:#fff; background:#ff0; transition:all ls ease; } .box:hover { color:#00ff78; background:#a18d36; transition:all 1s ease; } </style> </head> <body> <span class="box">盒子1234586</span> </body> </html>
  •  #a:link{color:#124578}(单击的链接样式)
  • #a:viseted{color:#124578 }(已经访问后的链接样式)
  • #a:active{color:#000078}(单击释放的链接样式)

背景样式

  • background-color
  • background-image(当用背景图片时，背景颜色会填充以外的东西)
  • background-position（北京元素的位置）
  • background-repeat:repeat;(:no-repeat;)
  • background-attachment:scroll;(背景图片随滚动)（fixed（背景图片固定））

列表样式

去除默认的小圆点

  • li {list-style:none;}(去掉无序（ul）或者有序(ol)中的标号)
  • li{list-style-type:circle;}(空圆类型)
  • li{list-style-image:url(路径)}（换成小图片）

盒模型

  • 主体 width , height------------------------------------------- (蛋黄)
  • 内边距padding:10px 20px 30px 40px;-----------------(蛋清)(top right bottom left)
  • border:10px(大小)  solid(dashed,dotted) #002145;---(蛋壳)
  • padding:10px 52px 32px 56px;----------------------------（鸡蛋与鸡蛋的距离）
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         *{
 7             margin:0;
 8             padding:0;
 9         }
10         div{
11             background:#00f;
12         }
13         p{
14             background:#ff0;
15         }
16         .box1{
17               background:#0f0;
18               
19               height:54px;
20               width:100px;
21               /*蛋黄*/
22              
23              padding:20px 30px 10px 21px;
24              /*蛋清*/
25              border:10px dotted #f00;
26              /*蛋壳：粗细；类型：solid dashed bdotted*/
27              margin:10px 30px 40px 30px ;
28          }
29         .box2{
30             height:50px;
31             width:100px;
32             padding:25px 50px;
33             margin:25px 25px;
34         }
35     </style>
36 </head>
37 <body>
38      <div><p class="box1">325</p></div>
39       <p class="box2">325</p>
40 </body>
41 </html>

浮动

  • float

浮动和排队一样固定前一个其余的向他看其便可，但是要先分析好整个网页的结构，再用<div></div>进行嵌套包裹这养就可以安全的使用float:left(right none)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         *{
 7             padding:0;
 8             margin:0;
 9         }
10         .a11 {
11             float:left;
12         }
13         .a11 img{
14             width:350px;
15             height:350px;
16             margin-right:10px;
17             /*第一部分*/
18             
19         }
20         .a2{
21             float:left;
22             margin-right:10px;
23         }
24        .a21 img{
25             width:210px;
26         }
27         .a21 p{
28             margin-bottom:10px;
29         }
30         .a22 img{
31             width:210px;
32         }
33         /*第二部分*/
34     </style>
35 </head>
36 <body>
37      <div class="a1">
38         <div class="a11"> 
39          <img src="http://img-cdn2.luoo.net/pics/vol/596fad994e96d.jpg!/fwfh/640x452"/>
40          <p>微视频托书关12</p>
41          </div>
42         <div class="a2">
43             <div class="a21">
44                <img src="http://img-cdn2.luoo.net/pics/vol/596bbdcd2e33f.jpg!/fwfh/640x452"/>
45                <p>微视频托书关12</p>
46               </div>
47               <div class="a22">
48                   <img src="http://img-cdn2.luoo.net/pics/vol/596682b4b5769.jpg!/fwfh/640x452">
49                 <p>vol.932 微小相见</p>
50               </div>
51         </div>
52         <div>
53             <img src="img/01.jpg"/>
54         </div>
55      </div>
56 </body>
57 </html>

 清出浮动（clear）

img{
       clear:both
}

清出左右两侧的浮动，其中包括left，right等

浮动破坏了文档流 (父级盒子的高度没有) 怎么恢复

  1. 只要浮动了，结尾一定要加一堵墙 清除浮动
  2. overflow: hidden

display

知道行内元素和块级元素的表现及特征

  1. 行内元素：a、img、span、b(strong)、i(em)
  2. 块级元素：div、h1~h6、p、ul,li

块级元素中可以包含行内元素

行内元素中间不能包含块级元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>定位案例</title>
 5     <link href="css/position案例.css" type="text/css" rel="stylesheet" />
 6 </head>
 7 <body>
 8       <div class="top-box1">
 9           <p class="p-box1">我是路标大啊啊</p>
10           <img src="http://img-cdn2.luoo.net/pics/vol/5977990c12d18.jpg!/fwfh/640x452"/>
11       </div>
12       <div class="top-box2">
13           <img src="http://img-cdn2.luoo.net/pics/vol/5977990c12d18.jpg!/fwfh/640x452"/>
14           <p class="p-box2">欢迎来到广州，请跟着路标行走</p>
15       </div>
16     
17 </body>
18 </html>

overflow属性

使用方法：用在父元素

应用场景：当子元素的宽高超出父元素的大小

overflow:hidden   （隐藏）

overflow:auto      （超出会出现滚动条）

 1 .top-box2{
 2     height: 452px;
 3      640px;
 4     /*图片大小*/
 5     margin: 0 auto;
 6     position:relative;
 7     overflow: hidden;
 8 
 9 }
10 .top-box2 .p-box2{
11     100%;
12     height:50px;
13     position: absolute;
14     left: 0;
15     bottom: -80px;
16     opacity: 0;
17     transition: all 2s ease;
18     background: rgba(221,88,98,.6);
19     font-family: "黑体";
20     font-size: 20px;
21     }

position定位

  • static 默认值 没有定位

  • fixed 固定定位

  • relative 相对定位

  • absolute 绝对定位

  • sticky 浮动定位 一定要注意兼容性，很多浏览器版本不支持

样式控制里面，文件的引入先后顺序对样式也有影响，顶级的优先级就是在属性后面加 !important

1.固定定位： 相对于浏览器窗口body,html

在使用了position:fixed以后，不给位置就在原地不动

动画中，transition只能够过渡同一个属性。

2.相对定位relative 相对于自身

有些元素需要在自身周围发生一些偏移，并且不影响其他元素的位置，使用relative定位。

3.绝对定位absolute

/* 参照物的标志

​ position属性产生了定位，这个盒子就相当于参照物

​ relative absolute fixed

找参照物时，首先从父级开始，看有没有position这个属性，有就以这个父级盒子定位，没有就继续往上级找，最终都没找到，就以body定位。

定位就会涉及到层叠，我们需要指明特定的元素 它的层叠的次序（相当于书的第几页）

前提条件，一定要定位了才能用 

z-index:1;

transform变换

scale 缩放、translate 移动、rotate 旋转、skew 扭曲

 1 .transform1{
 2             100px;
 3              background:#f00;
 4         }
 5 .transform1:hover{
 6             transform: scale(2);
 7         }
 8 .transform2{
 9             100px;
10              background:#0f0;
11         }
12         .transform2:hover{
13             transform: translateX(50PX);
14         }
15 .transform3{
16             100px;
17              background:#00f;
18         }
19         .transform3:hover{
20             transform: rotate(50deg);
21         }
22 .transform4{
23             100px;
24              background:#ff0;
25         }
26         .transform4:hover{
27             transform: skew(50deg);
28         }

透明度（opacity）

用法：opacity:0.2;

其中内部的值为（0~1）值越小越透明

---恢复内容结束---

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/alsely/p/7220062.html