CSS笔记

什么是CSS

CSS选择器（重点+难点）
美化网页(文字，阴影，超链接)
盒子模型
浮动
定位
网页动画（特效效果）

发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画……浏览器兼容

快速入门

引用方式

1，内部样式

 <style>
     h1{
     color: red;
 }
 </style>

2,推荐这样（外部样式）

3，行内样式

1 <h1 style="color: red">XXX</h1>

CSS的优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利于SEO，容易被搜索引擎收录！

选择器

1，标签选择器

 <style>
     h1{color:red}
 </style>

2，类选择器，给标签加class属性可复用

 <style>
     .qin{color:red}
 </style>
 <h1 class="qin">内容一</h1>

3，id选择器(id必须全局唯一)

 <style>
     #qin{color:red}
 </style>
 <h1 id="qin">内容一</h1>

优先级：id选择器>类选择器>标签选择器

层次选择器

1、后代选择器：在某个元素的后面祖爷爷爷爷，爸爸儿子都选择

/*后代选择器，*/
 body p{background: red;}

2、子选择器，一代，儿子

/*子选择器*/
 body>p{background: yellow;}

3、相邻兄弟选择器同辈的下一个

 /*相邻兄弟选择器：只有一个，相邻的下一个同级元素*/
 .active + p{background: aqua;}

4、通用选择器下面的所有同级

 /*通用选择器*/
 .active~p{background: antiquewhite;}

结构伪类选择器

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <style>
 7          /*选择li的第一个元素*/
 8          li:first-child{
 9              background: red;
10          }
11          /*选择li的第一个元素*/
12          li:last-child{
13              background: yellow;
14          }
15          /*第一个p元素 
16          只是第一个元素，不能保证是p元素  顺序里选择
17          */
18          p:nth-child(1){
19              background: bisque;
20          }
21          /*第二个p元素 ，能保证  类型里选择*/
22          p:nth-of-type(2){
23              background: green;
24          }
25      </style>
26  </head>
27  <body>
28  <p>p1</p>
29  <p>p2</p>
30  <p>p3</p>
31  <p>p4</p>
32  <ul>
33     <li>li1</li>
34     <li>li2</li>
35     <li>li3</li>
36  </ul>
37  </body>
38  </html>

属性选择器（常用）

id+class结合

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <style>
 7          .demo a{
 8              float: left;
 9              display: block;
10              width: 50px;
11              height: 50px;
12              background: chartreuse;
13              border-radius: 25px;
14              text-decoration: none;
15              text-align: center;
16              line-height: 50px;
17              color: rosybrown;
18          }
19          /*属性名， 属性名=属性值（正则）
20          = 绝对等于
21          *=包含这个元素
22          ^=以这个开头
23          &=以这个结尾
24          */
25  
26          /*存在id属性的元素*/
27          /*a[id]{*/
28          /*    background: yellow;*/
29          /*}*/
30  
31          /*id=first的元素*/
32          /*a[id=first]{*/
33          /*    background: yellow;*/
34          /*}*/
35  
36          /*class中有links的元素*/
37          /*a[class *= links]{*/
38          /*    background: yellow;*/
39          /*}*/
40  
41          /*选中href中以http开头的元素*/
42          /*a[href ^= http]{*/
43          /*    background: yellow;*/
44          /*}*/
45  
46          /*选中以pdf结尾的元素*/
47          a[href $= pdf]{
48              background: yellow;
49          }
50      </style>
51  </head>
52  <body>
53  <p class="demo">
54      <a href="https://www.baidu.com" class="links item active" id="first">1</a>
55      <a href="" class="links item" target="_blank">2</a>
56      <a href="../../resources/image/123.html" class="links item">3</a>
57      <a href="../../resources/image/123.png">4</a>
58      <a href="../../resources/image/123.jpg">5</a>
59      <a href="abc">6</a>
60      <a href="a.pdf">7</a>
61      <a href="bb.pdf">8</a>
62  
63  </p>
64  </body>
65  </html>

美化网页元素

字体样式

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <!--
 7      font-family:字体
 8      font-size:字体大小
 9      font-weight:字体粗细
10      color:字体颜色
11      -->
12      <style>
13          body {
14              font-family: 楷体;
15              color: green;
16          }
17          h1{
18              font-size: 50px;
19          }
20          p{
21              font-weight: bolder;
22          }
23          /*通常这样使用*/
24          .active{
25              font: oblique bolder 12px "华康瘦金体W3";
26          }
27      </style>
28  </head>
29  <body>
30  <h1>故事介绍</h1>
31  <p>这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
32  </p>
33  <p>
34      在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
35  </p>
36  
37  <p class="active">我吹过你吹过的晚风</p>
38  </body>
39  </html>

文本样式

颜色 color rgb rgba
文本对齐方式 tetx-align = center
首行缩进 tetx-indent:2em
行高 line-height:
装饰 tetx-decoration:
文本与图片水平对齐 vertical-align:middle

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <!--颜色
 7      单词
 8      RGB 0~F
 9      rgba A:0~1 透明度
10      text-decoration: underline; 下划线
11      text-decoration: line-through; 中划线
12      text-decoration: overline; 上划线
13      -->
14      <style>
15          h1{
16              color:rgba(0,255,255,0.9);
17              text-align: center;
18          }
19          .p1{
20              text-indent: 2em;
21          }
22          .p2{
23              background: #45ab45;
24              height: 300px;
25              line-height: 300px;
26          }
27          img,p3{
28              vertical-align: middle;
29          }
30      </style>
31  </head>
32  <body>
33  <h1>故事介绍</h1>
34  <p class="p1">这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
35  </p>
36  <p class="p3">
37      <img src="../../resources/image/1.jpg" alt="照片" width="100px" height="100px">
38      <span>sfawgrehrthtrrstsr</span>
39  </p>
40  
41  <p class="p2">
42      在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
43  </p>
44  </body>
45  </html>

阴影与超链接伪类

 1 /*tetx-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
 2 #price{
 3 text-shadow: #45ab45 10px 10px 2px;
 4 }
 5 /*鼠标悬浮的状态*/
 6 a:hover{
 7 color: bisque;
 8 }
 9 /*鼠标按住为释放的状态*/
10 a:active{
11 color: red;
12 }

列表样式

 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 #nav{
 6     width: 300px;
 7 }
 8 .title{
 9     height: 100px;
10     font-size: 30px;
11     background: red;
12     text-indent: 1em;
13     line-height: 100px;
14 }
15 /*list-style
16 none去掉圆点
17 circle 空心园
18 decimal 数字
19 square 正方形
20 */
21 ul li{
22     height: 30px;
23     text-indent: 2em;
24     list-style: none;
25     font-size: 20px;
26     background: grey;
27 
28 }
29 a{
30     margin-right: 10px;
31     text-decoration: none;
32     color: black;
33 }
34 a:hover{
35     color: orange;
36     text-decoration: underline;
37 }

渐变

background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

盒子模型

什么是盒子模型

margin:外边距顺时针（上右下左）

padding:内边距同margin

border:边框（粗细样式(s实线d虚线) 颜色）

圆角边框

<style>
    div{
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 50px 50px 0px 0px;
    }
</style>

盒子阴影

<style>
    div{
        width: 100px;
        height: 100px;
        background: red;
        /*border-radius: 50px 50px 0px 0px;*/
        box-shadow: yellow 10px 10px 100px;
    }
</style>

浮动

标准文档流

块级元素：独占一行

h1~h6  p  div 列表……

行内元素：不独占一行

span a img strong……

行内元素可以被包含在块级元素中，反之，不可以

但是可以使用display改变

display

块元素：独占一行
行内元素：自己占不了一行

<!--display
block 块元素
inline行内元素
inline-block是块元素，但是可以内联，在一行！
none 消失
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline-block;
    }
    span{
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline-block;
    }

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

float

左右浮动

 1 div{
 2     margin: 10px;
 3     padding: 5px;
 4 }
 5 .father{
 6     border: 1px black solid ;
 7 }
 8 
 9 .layer01{
10     border:1px red dashed;
11     display: inline-block;
12     float: right;
13 }
14 .layer02{
15     border:1px green dashed;
16     display: inline-block;
17     float: right;
18 }
19 .layer03{
20     border:1px salmon dashed;
21     display: inline-block;
22     float: left;
23 }
24 .layer04{
25     border:1px saddlebrown dashed;
26     font-size: 13px;
27     line-height: 30px;
28     display: inline-block;
29     float: left;
30 }

父级塌陷问题

/*clear:
left 左侧不允许有浮动元素
right 右侧不允许有浮动元素
both 两侧都不允许有浮动元素
none
*/

1，设置父级高度

.father{
    border: 1px black solid ;
    height:800px;
}

2，添加一个空的div

<div class="father">
    <div class="layer01"><img src="images/1.png" alt="照片"></div>
    <div class="layer02"><img src="images/2.png" alt="照片"></div>
    <div class="layer03"><img src="images/3.png" alt="照片"></div>
    <div class="layer04">随便输入一句话：就这样吧，黄河之水递上来</div>
    <div style="clear: both"></div>
</div>

3，父级设置overflow:hidden

.father{
    border: 1px black solid ;
    overflow: hidden;
}

4，给父级添加一个伪类

.father:after{
    content: '';
    display: block;
    clear: both;

}

小结

1，设置父元素的高度

简单，元素假设有了固定的高度，就会被限制

2，浮动元素后面增加空div

简单，代码中尽量避免空div

3，overflow

简单，下来的一些场景避免使用

4，父类添加一个伪类：after(推荐)

下发稍微复杂，但没有副作用，推荐使用

对比

display

方向不可以控制
float

浮动起来的话就会脱离标准文档流，所以要解决父级边框塌陷问题。

定位

相对定位

相对定位：position:relative;

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

绝对定位

绝对定位；position:absolute；基于XXX定位，上下左右

1、没有父级元素定位的前提下，相对于浏览器定位（随着窗口变化而变化）

2，假设父级元素存在定位，通常相对于父级元素进行偏移~

3，在父级元素范围内移动，不会超出

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

固定定位

position:fixed;

固定在屏幕的指定地方，即使改变浏览器的大小，仍然在那个方位

例如

position:fixed;
right:0px;
bottom:0px;
/*就会始终在窗口的右下角*/

Z-index定位

图层的形式， 0~最高级（例如999），0在最下层

z-index: 0;

opacity:0.5;设置透明度。

posted @ 2022-04-08 16:08 冰山醉酒阅读(113) 评论(0) 收藏举报

刷新页面返回顶部

冰山醉酒