首页 > 其他分享> 文章详细

CSS

2021-04-16 23:35:52 阅读：136 来源： 互联网

标签：color 元素魁拔 background border 选择器 CSS

CSS

1、什么是CSS

如何学习：

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变）
盒子模型
浮动
定位
网页动画（特效）

1.1、什么是CSS

层叠级联样式表，用于表现（美化）网页，包括字体、颜色、边距，高度，宽度，背景图片，网页定位，网页浮动等等

1.2、发展史

CSS1.0
CSS2.0 DIV(块)+CSS HTML与CSS结构分离的思想，网页变得简单
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 需要考虑浏览器的兼容性

1.3、快速入门

练习文件夹规范：

第一种方式：直接在head部分的style标签内写css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写css的代码，每一个什么声明，最好使用分号结尾
    语法：
        选择器 {
            声明1；
            声明2；
            声明3；
        }
    -->
    <style>
        h1{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

第二种方式: HTML与CSS分离(建议使用的规范方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/slyte.css">
</head>
<body>

<h1>我是标题</h1>
</body>
</html>

h1{
    color: red;
}

CSS的优势：

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

1.4、CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可，如果有多个用分号结尾-->
<h1 style="color: aquamarine">我是标题</h1>
</body>
</html>

2 选择器

作用:选择页面上的某一个或某一类元素

2.1、基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #1c63a7;
            background: beige;
            /*border-radius用于控制圆角边框*/
            border-radius: 15px;
        }
        p{
            font-size: 20px;
        }
    </style>
</head>
<body>
<h1>学css</h1>
<h1>学js</h1>
<h1>学vue</h1>
<p>听狂神说</p>
</body>
</html>

类选择器 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class,可以复用*/
        .noname1{
            color: blue;
        }
        .noname2{
            color:red;
        }
        .noname4{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 class="noname1">学html</h1>
<h1 class="noname2">学css</h1>
<h1 class="noname1">学js</h1>
<h1 class="noname4">学vue</h1>
<p class="noname4">段落内容</p>
</body>
</html>

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器： id必须保证全局唯一，格式为：
        #id名称{}
        不遵循就近原则，固定的
        id选择器 > class选择器 > 标签选择器
        */
        #oluoluo{
            color: #998a32;
        }
        .style1{
            color: #1c63a7;
        }
        h1{
            color: #991ca7;
        }
    </style>
</head>
<body>
<h1 id="oluoluo" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

2.2、层次选择器

后代选择器: 在某个元素的后面
```
body p{
    background: red;
}
```
子选择器：一代，儿子
```
body>p{
    background: #998a32;
}
```

相邻兄弟选择器：同辈

/*相邻兄弟选择器, 只有一个，相邻向下*/
.active + p{
    background: #991ca7;
}

通用选择器

/*通用选择器，当前选中元素的向下所有兄弟元素*/
.active~p{
    background: #998a32;
}

2.3、结构伪类选择器

伪类：条件

/*伪类选择器, 鼠标移动到该位置就会自动显示css属性，如颜色*/
a:hover{
    background: #1c63a7;
}

/*ul的第一个子元素*/
ul li:first-child{
    background: #991ca7;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: red;
}
/*选中p1：定位到父元素，选择当前的第一个元素 p:nth-child(1)
选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素才生效
也就是说，如果父级元素的第一个子元素不是p标签则无效
*/
p:nth-child(1){
    background: aquamarine;
}
/*选中当前p元素的父元素的第二个类型为p的子元素*/
p:nth-of-type(2){
    background: yellow;
}

2.4属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            /*margin向右偏移*/
            margin-right: 5px;
            font: bold 20px/50px Arial
        }
        /*存在id属性的元素 a[]{}, 下面例子是选中a标签中带有id属性的元素，即为属性选择器*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
        /*选中a标签中带有id属性并且值为first的元素*/
        /*两种方式 属性名，属性名=属性值（属性值可以使用正则表达式）
        = 绝对等于
        *= 包含
        ^= 以这个开头
        $= 以这个结尾
        */
        /*a[id=first]{*/
        /*    background: green;*/
        /*}*/
        /*class中包含links的元素*/
        /*a[class*="links"]{*/
        /*    background: blue;*/
        /*}*/
        /*选中href中以http开头的元素*/
        /*a[href^=http]{*/
        /*    background: #998a32;*/
        /*}*/
        a[href$="doc"]{
            background: yellow;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

= 绝对等于； *= 包含； ^= 以其开头； $= 以其结尾

3、美化网页元素

3、1为什么要美化网页

有效传递页面信息
梅花网页。，页面漂亮，才能吸引用户
凸显页面主题
提高用户的体验

span标签：重点要突出的子，要span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习 <span id="title1">JAVA</span>
</body>
</html>

3.2字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    font-family: 字体
    font-size: 字体大小
    font-weight: 字体粗细
    color: 字体颜色
-->
    <style>
        body{
            /*分别设置英文字体和中文字体*/
            font-family: "Times New Roman", 微软雅黑;
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
</body>
</html>

3.3、文本样式

颜色 color rgb rgba
文本对齐的方式 font-align=center
首行缩进 font-indent=2em
行高 line-height 当行文字上下居中 line-height=height
装饰 text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--颜色：
    单词
    RGB 00~FF
    RGBA: 最后一个值表示透明度
    text-align： 排版，居中、靠左
    text-indent: 2em; 段落首行缩进
    行高和块的高度一致时就可以上下居中
    height: 300px;
    line-height: 300px;
    下划线
    text-decoration: underline;
    中划线：line-through
    上划线：overline
-->
    <style>
        h1{
            color: rgb(0,255,255);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
            text-decoration: underline;
        }
        .p2{
            background: aquamarine;
            height: 200px;
            line-height: 50px;
        }
        /*a标签去下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度搜索一下</a>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p2">
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
</body>
</html>

3.4超链接伪类

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态（只需要记住:hover)*/
a:hover{
    color: orange;
    font-size: 50px;
}

3.5列表样式

/*
list-style:
    none: 去掉原点
    circle: 空心圆
    decimal: 数字
    square: 正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.6背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;  /*边框粗细，solid实现，red颜色*/
            background-image: url("images/1.bmp");
            /*默认是全部平铺的 repeat*/
        }
        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        .div2{
            /*竖直平铺*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

4、盒子模型

4.1、什么是盒子模型

margin: 外边距; padding: 内边距; border: 边框

4.2、边框

边框的样式
边框的粗细
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      margin: 0;
    }
    h2{
      font-size: 16px;
       background-color: crimson;
      margin: 0;
    }
    #box{
      width: 300px;
      border: 1px solid red;
    }
    form{
      background: cyan;
    }
    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed #0738e3;
    }
  </style>
</head>
<body>

<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
          <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>

  </form>

</div>
</body>
</html>

4.3内外边距

自动让显示的区域居中的方法：margin: 0 auto; 表示上下外边距为0，左右外边距为自动，默认为相同的值；

或者用这种方式：margin: top right down left的方式或者使用margin-top等分别指定

内边距padding同理。

4.4、圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      height: 100px;
      width: 100px;
      border: 10px solid red;
      border-radius : 100px;
    }
  </style>
</head>
<body>

<div></div>

</body>
</html>

4.5、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px auto;
        }
        img{
            border-radius: 25px;    /*通过border-radius将图片的形状设置为原型，效果就是上传头像*/
            /*在元素框架上添加阴影效果，依次是：x偏移量 y偏移量 阴影模糊半径 阴影颜色*/
            box-shadow: 5px 5px 10px yellow;
        }
    </style>
</head>
<body>
    <div align="center">
        <img src="images/1.jpg" alt="我的头像">
    </div>
</body>
</html>

5、浮动

5.1、display 和float

块元素：div p h1-h6 form ul ol 等等每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素

block元素特点：

总是在新行上开始
高度、行高以及外边距和内边距都可以控制
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

行内元素：a span img 也叫内联单元、内嵌元素等，只能容纳文本或其他内联元素

行内元素特点

和其他元素都在同一行
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

属性 display: block 设置成块级元素; display: inline 设置成行内元素 display: inline-block 同时具有块元素和行内元素的属性

display: none 不显示

浮动：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

示例：使用float写一行元素排列的菜单栏

<html>
<head>
    <style type="text/css">
        ul
        {
            float:left;
            width:100%;
            padding:0;
            margin:0;
            list-style-type:none;
        }
        a
        {
            float:left;
            width:7em;
            text-decoration:none;
            color:white;
            background-color:purple;
            padding:0.2em 0.6em;
            border-right:1px solid white;
        }
        a:hover {background-color:#ff3300}
        li {display:inline}
    </style>
</head>
<body>
<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>
</body>
</html>

5.2父级边框塌陷

clear: right 右侧不允许有浮动元素

clear: left 左侧不允许有浮动元素

clear: both 左右两侧都不允许有浮动元素

clear: none

1.增加父级元素高度，使父级元素能够容纳浮动元素

<div class="clear"></div>
.clear{
    clear:both
        margin:0;
    padding:0;
}

2.使用overflow属性，当内容超过了父级元素的高度时，使用overflow:scroll属性可以添加滚动条，解决父级边框塌陷
可以在父级元素中添加一个overflow:hidden属性

3.添加一个伪类：

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：

1.浮动元素后面增加空div

简单，代码尽量避免空div

2.设置父元素高度

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

3.overflow

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

4.父类添加一个伪类：after（推荐）、

写法稍微复杂，但是没有副作用，推荐使用!

6、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 40px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #090000;
            padding: 0;
            position: relative;
            top: -20px;
        }
        #first{
            background: crimson;
            border: 1px solid red;
        }
        #second{
            background: #0d6372;
            border: 1px solid #0d3272;
            position: relative;
            left: 20px;
        }
        #third{
            background: #10954c;
            border: 1px solid #10954c;
            position: relative;
            right: 20px;
        }

    </style>
</head>
<body>
 <div id="father">
<div id="first">第一个盒子</div>
<div id="second">第一个盒子</div>
<div id="third">第一个盒子</div>
 </div>
</body>
</html>

相对定位： position: relative;

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

6.2、绝对定位

定位:基于xxx定位，上下左右~

1、没有父级元素定位的前提下，相对于浏览器定位

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

3、在父级元素范围内移动

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

#father{
    border: 1px solid #090000;
    padding: 0;
    position: relative;
}
#first{
    background: crimson;
    border: 1px solid red;
    position: absolute;
    top:-10px;
}

6.3固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: chocolate;
            position: absolute;
            right: 0;
            bottom: 0;

        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: chocolate;
            position: fixed;
            right: 0;
            bottom: 0;

        }

    </style>
</head>
<body>

<div >第一个盒子</div>
<div >第一个盒子</div>

</body>
</html>

6.4、z-index

#content{
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    padding: 0px;
    margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 319px;
    height: 25px;
    top: 315px;
}
.tipText{
 color: cornsilk;
}
.tipBg{
    background: #000000;
    opacity: 0.5;
}

标签：color,元素,魁拔,background,border,选择器,CSS
来源： https://www.cnblogs.com/sikaha/p/14669157.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS

CSS