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>

View Code

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>

View Code

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

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

<!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>

View Code

属性 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>

View Code

调整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>

View Code