CSS知识点总结[部分]

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

注释为 /* 注释内容 */

CSS选择器

标签选择器

div{ background-color:red; }

<div > </div>

class选择器

.bd{ background-color:red; }

<div class='bd'> </div>

id选择器

#idselect{ background-color:red; }

<div id='idselect' > </div>

关联选择器(层级选择器)

#idselect p{ background-color:red; }

<div id='idselect' > <p> </p> </div>

组合选择器(逗号分隔)

input,div,p{ background-color:red; }

<div>hello world</div>

<input type="text"/>

<input type="password"/>

<p>hello world</p>

属性选择器

对选择到的标签再通过属性再进行一次筛选

input[type='text']{ width:100px; height:200px; }

<input type="text"/>

<input type="password"/>

CSS常用属性

height - 高度:像素、百分比
width - 宽度:像素、百分比
text-align:ceter - 水平方向居中
line-height - 垂直方向根据标签高度(等于当前所在的位于标签的高度，居中)
color -字体颜色
font-size - 字体大小
font-weight - 字体加粗

font-family:宋体; - 设置字体

border边框

边框线粗细

border-top-width: 15px;

border-right-width: 5px;

border-bottom-width: 15px;

border-left-width: 5px;

边框的样式和颜色

border-style： solid实线，dashed虚线，none无(默认)

border-style: solid;

border-color:red;

也可以写成这样：

border: 1px solid red;

改变边框棱角的样式：

border-radius: 50%;

border-radius: 50px;

dispaly

display: none;   - 让标签消失
display: inline;   - 转换成行内标签
display: block;       - 转换为块级标签
display: inline-block;   - 同时具备两种标签的属性
          具有inline,默认自己有多少占多少
          具有block，可以设置无法设置高度，宽度，padding margin

float

让标签浮动，块级标签也可以堆叠

<div style="height: 50px; width: 200px; background-color: green; float: right"></div>

<div style="height: 50px; width: 500px; background-color: red; float: right"></div>

让标签都向右漂浮，如果窗口的宽度不够，默认换行

当标签float之后就不收父级标签的约束了，解决此问题，可以在父级标签中添加：

<div style="clear: both;"></div>

内外边距

padding　　- 内边距

margin　　- 外边距

Positioning(定位)

position: fiexd 固定在页面的某个位置

将head导航栏固定到头部，不管滚动条如何滑动，他都会跟着页面走，始终在最顶部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-head {

            height: 30px;

            background-color: green;

            position: fixed;

            top: 0;

            right: 0;

            left: 0;

        }

        .pg-body {

            height: 5000px;

            background-color: #2a6496;

            margin-top: 40px;

        }

    </style>

</head>

<body>

    <div class="pg-head">头部</div>

    <div class="pg-body">内容</div>

</body>

</html>

relative(相对的) + absolute(绝对的)

相对于当前父级标签定位到某位置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 200px; width: 500px; border: 1px solid red; margin: 0 auto; position: relative;">

        <div style="height: 30px; width: 30px; background-color: black; position: absolute; bottom: 0"></div>

    </div>

</body>

</html>

用一个实例说明这个的用途：

实现像上图所示的效果，上图是点击按钮，出现了层级关系，下层无法被操作，我们在这里实现层级关系，不实现点击按钮出现的功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>title</title>

    <style>

        .i3 {

            z-index:10;

            position:fixed;

            margin-top: -150px;

            margin-left: -100px;

            left: 50%;

            top: 50%;

            height: 300px;

            width: 200px;

            background-color: white;

        }

        .i2 {

            z-index: 9;

            opacity:0.5;

            position: fixed;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            background-color: black;

        }

        .i1 {

            height: 5000px;

            background-color: green;

        }

    </style>

</head>

<body>

    <!--三层层叠-->

    <div class="i3">第三层</div>

    <div class="i2">第二层</div>

    <div class="i1">第一层</div>

</body>

</html>

属性 opcity: 0.5; 透明度　　数值越小，透明度越高
　　 z-index: 10; 层级顺序，数值越大优先级越高

background 背景

background-color: red;　　- 纯色背景

background-image:url('image/4.gif');　　- 图片背景，默认如果div的像素大于图片的像素，则图片进行x和y轴的重复

　　使用以下三个属性可以控制图片的重复方式　

　　　- background-repeat: repeat-y; 　
　　 - background-position-x:
　　 - background-position-y:　

例子：使一个图标可以的变化

原始图标是这样的：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 100px;"></div>

    <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red; background-position-x:0;background-position-y: 10px; "></div>

</body>

</html>

调整background-position-y的值可以使图标切换

overflow

<div style="height:300px; width: 300px;">

    <img src="a.jpeg">

</div>

如果是上面的代码，图片的尺寸大于了div的尺寸，那么div就会被撑开

可以使用overflow属性

　　overflow: auto;　　- 如果照片的大小大于div的大小，则自动折叠，形成下拉条（设置滚动条）

　　overflow: hidden;　　- 如果照片的大小大于div的大小，则进行剪切

hover

可以实现鼠标移动到指定标签可以进行变化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-head {

            height: 40px;

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            background: #2459a2;

            line-height: 40px;

        }

        .pg-body {

            margin-top: 50px;

        }

        .comm {

            width: 980px;

            margin: 0 auto;

        }

        .pg-head .pa {

            display: inline-block;

            padding: 0 30px;

            color: white;

        }

        .pg-head .pa:hover {

            display: inline-block;

            padding: 0 30px;

            /*background: red;*/

            color: red;

        }

    </style>

</head>

<body>

    <div class="pg-head">

        <div class="comm">

            <a class="log">LOG</a>

            <a class="pa">全部</a>

            <a class="pa">段子</a>

            <a class="pa">抖音</a>

        </div>

    </div>

    <div class="pg-body">hello</div>

</body>

</html>