CSS 选择器

1. 概述

  • css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
  • 存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：

<div style = '属性名:属性值;属性名2:属性值2;' ></div>

行内式： 在标签中使用 style='xx:xxx;'单独加在某个标签上，style增加其他属性需要以分号分隔

<div style="background-color:darkgrey;height:100px;width:100px">我是div</div>

嵌入式： 在页面中嵌入 < style type="text/css"> </style >块

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      background-color:darkgrey;
      height: 100px;
      width:100px;
      }
  </style>
</head>

链接式： 将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中

<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>

导入式： 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中

<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import"mystyle.css"; # 此处要注意.css文件的路径
</style>
</head>

注意：import 会先解析页面所有信息，先不会渲染页面，等待所有信息加载后再渲染页面，如果加载慢会出现无渲染页面，导致用户体验不好，推荐使用嵌入式和链接式

2. 选择器

2.1 基本选择器

通用元素选择器： 通用元素选择器，匹配任何元素

/*通用选择器*/
*{
color: darkgrey;
}

标签选择器： 匹配所有使用XX标签的元素

  • 例如，需要选择所有标签为div的元素设置样式
/*标签选择器*/
div{
color: grey;
background-color: antiquewhite;
}

class选择器：

  • .info 或 .cs1 ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素
/*类选择器*/
.cs1{
color: grey;
background-color: antiquewhite;
}
<div class="cs1">我是div1标签</div>
<div class="cs1">我是div2标签</div>
<p class="cs1">我是p标签</p>

id选择器：

  • #info 或 #cs1：id属性选择器，匹配所有id属性等于info的元素
/*ID选择器*/
#cs1{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1标签</div>
<div class="cs1">我是div2标签</div>

2.2 组合选择器

多元素选择器：

  • div , p：多元素选择器，同时匹配所有div标签元素或p标签元素，div和p之间用逗号分隔
div,p{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1标签</div>
<p class="cs1">我是p标签</p>
<span>我是span</span>

与选择器：

        /* 与选择器，匹配div标签中有.c1选择器 */
       div.c1{
            color: grey;
            background-color: antiquewhite;
       }
    </style>
    <div class="c1">aa</div>
    <div class="c2">bb</div>

后代元素选择器：

  • div p：后代元素选择器，匹配所有属于div标签元素后代的p标签元素，即所有类似形式的所有后代，子子孙孙，div和p之间用空格分隔
div p{
color: grey;
background-color: antiquewhite;
}
<div id="#cs1">
　　<p class="cs1">我是p1标签</p>
　　<div class="cs3">
　　　　<p class="cs1">我是p2标签</p>
　　　　<div class="cs2">
　　　　　　<p id="cs1">我是p3标签</p>
　　　　</div>
　　</div>
</div>
  
<!-- 以上标签，p1、p2、p3均会变成设置的样式 -->
<!-- 扩展：可以结合基础选择器使用，例如div #cs1，div .cs1等 -->

分组选择器：

  • 当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
<style>
    .a ,.b{ color: red; }
</style>
<div class="a" >aa</div>
<div class="b" >bb</div>
<div class="c" >cc</div>
<!-- 只有class选择期 a和b生效 -->

子元素选择器：

  • #outer > .c1 ：子元素选择器，匹配所有#outer元素的子元素.c1，只匹配到子元素，子元素的子元素匹配不到
<style>
#outer>.c1{
color: aqua;
}
</style>
<div id="outer">
    <p class="c1">p1.....</p>
    <div class="c2">
        <p class="c1">p2....</p>
    </div>
</div>
  
<!-- 以上标签，p1会变成设置的样式，p2不会变，即儿子辈的会变，儿子辈的后代不会变-->

毗邻元素选择器：

  • #outer + .c1:毗邻元素选择器，匹配所有紧随#outer元素之后的同级元素.c1 ，即只匹配挨着的下一个F元素，如不相邻也不起作用
<style>
#outer+.c1{
color: aqua;
}
</style>
<p class="c1">p1....</p>
<div id="outer">
</div>
<p class="c1">p2.....</p>
<div class="c1">div1...</div>
  
<!-- 以上标签，p1不会变更样式，p2为挨着的下一个class=c1的元素，所以p2会变更样式，div1的class属性也满足但并未挨着id=outer的元素，故不起作用 -->

弟弟选择器：

  • 匹配i1后面所有的兄弟p标签
<style>
   #i1~p {
      border: 2px solid royalblue;
    }
</style>

<p>a1</p>
<p id="i1">a2</p>
<p >a3</p>
<p >a4</p>

属性选择器：

  • 根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[name="James"]{width: 20px;height: 20px;}
    </style>
</head>
<body>
    <input type="text" name="James">
    <input type="text">
    <input type="password">
</body>

伪类选择器：

<style>
/* 未访问的链接 */
a:link {
  color: #FF0000
}
 
/* 已访问的链接 */
a:visited {
  color: #00FF00
}
 
/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
}
 
/* 选定的链接 */
a:active {
  color: #0000FF
}
 
/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}
</style>
 
<a href="https://www.baidu.com">百度</a>
<input type="text" />

伪类元素选择器：

/*first-letter*/
常用的给首字母设置特殊样式：
 
p:first-letter {
  font-size: 48px;
  color: red;
}
 
/*before*/
/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}
 
/*after*/
/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}
before和after多用于清除浮动。
<p>内容</p>

不怎么常用的选择器：

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}
 
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}
 
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}
 
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

3. 选择器的优先级

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

选择器范围越小，优先级越高

  • 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器

其实是按照不同选择器的权重来决定的，权重值越高，优先级越大，具体的选择器权重如下图：

6
除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

4. 常用属性

4.1 颜色属性

  • 英文单词形式，例如：red，yellow
  • 编码形式十六进制值，例如：#cc3399，如双重可简写#c39
  • 基调颜色透明度设置，例如：rgb（255,255,255,0.5），red、green、blue三色透明度设置,最后一个值设置透明度值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
<div style="color:red">Hello World</div>
<div style="color:#cc3399">Hello World</div>
<div style="color:rgb(255,255,255,0.5)">Hello World</div>

4.2 font字体属性

font:style weight size 字体; 在一个声明中设置所有字体属性
  例子：<div style="font:italic 700 20px 楷体">在一个声明中设置所有字体属性</div>

font-size: 20px/50%/larger ；设置字体大小
  例子：<div style="font-size: 20px">字体大小</div>
 
font-family:'楷体' ；文本的字体系列
  例子：<div style="font-family:'楷体'">文本的字体系列</div>
 
font-weight:字体的粗细
  参数: normal    默认值，标准粗细
        bold      粗体
        bolder    更粗
        lighter   更细
        100~900   设置具体粗细，400等同于normal，而700等同于bold
        inherit   继承父元素字体的粗细值  
  例子：<div style="font-weight: 500">字体的粗细</div>
 
font-style:normal/oblique/italic ；文本的字体样式
  例子：<div style="font-style: italic">文本的字体样式</div>
 
font-variant:; 规定是否以小型大写字母的字体显示文本
font-stretch:; 收缩或拉伸当前的字体系列
font-size-adjust:;为元素规定 aspect 值

4.3 background背景属性

background:color image repeat positior ;在一个声明中设置所有的背景属性。
            background:red url(a.jpg) no-repeat center center;

background-color: rgb(238, 238, 238); 设置背景颜色

background-image: ；设置背景图片
            background-image: url(img/630.jpg)

background-repeat:no-repeat  平铺方式，设置是否及如何重复背景图像
            no-repeat 不平铺，repeat 平铺满,   repeat-x 平铺x轴,   repeat-y 平铺y轴

background-size: 图片大小设置，auto；设置背景图片的尺寸

background-position:center center  设置图像的开始位置
            center 居中；left center左侧上下居中；top，bottom，right类似；
            background-position:-76px -60px;

background-attachment: ;设置背景图像是否固定或者随着页面的其余部分滚动
background-clip: ; 规定背景的绘制区域
background-origin: ; 规定背景图片的定位区域

例子：

<!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(http://qqpublic.qpic.cn/qq_public/0/0-394541553-24D7586CB457A594DCEA9D1D5D9888F1/0);background-repeat:no-repeat;height: 800px;width:1400px;border: 1px solid red;"></div>
</body>
</html>

例子2：只显示第一个图标，可以调 background-position的x轴和y轴换不同的图标。-76x轴 ，60y轴

7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-body{
            background-image: url(img/630.jpg);
            height: 110px;
            width:110px;
            border: 1px solid red;
            background-repeat: no-repeat;
            background-position: -76px -60px;
        }
    </style>
</head>
<body>
    <div style="height: 100px"></div>
    <div class="pg-body"></div>
</body>
</html>

8

<style>
        .inp{
            height: 40px;width: 246px;padding-right: 54px;
        }
        .span{
            background-image: url(img/a.jpg);
            display: inline-block;
            height: 40px;
            width: 40px;
            background-repeat: no-repeat;
            background-position: -944px -38px;
            position:absolute;
            top: 3px;
            right: 0;
        }
    </style>


    <div style="position: relative;height: 40px;width: 300px;">
        <input type="text" class="inp">
        <span class="span"></span>
    </div>

4.4 文本属性

text-indent:32px 首行缩进，基于父元素
  例子：<div style="text-indent:50px">首行缩进，基于父元素</div>

text-align：center 文本居中
  参数：left：左边对齐 默认值
        right：右对齐
        center：居中对齐
        justify：两端对齐
  例子：<div style="text-align:center ">文本居中</div>

vertical-align:50px;垂直居中
  例子：<div style="vertical-align:50px">垂直居中</div>

text-transform:capitalize；将单词首字母大写
  例子：<div style="text-transform:capitalize">abc</div>

text-decoration:none;　　去掉a标签的下划线
  参数：underline：下划线
       line-through：删除线
       overline：上划线
       none：无装饰线
       inherit：继承父元素的text-decoration属性的值。
  例子：<a href="https://www.baidu.com" style="text-decoration:none">去掉a标签的下划线</a>
    <a href="https://www.baidu.com" >a标签</a>
    <br/>

line-height：50px；行高 ，处理两行文字之间的高度。
  例子：<div style="line-height:50px">行高 ，针对文本处理</div>

width:50px；宽 %50
height:50px；高 %50
  例子：<div style="width:50px;height:50px;color: red">宽和高</div>

min-height:;设置默认最小高度
  例子：<div style="min-height:50px">设置默认最小高度</div>

min-width:;设置最小宽度
  例子：<div style="min-width:50px">设置最小宽度</div>

max-height:;设置最大高度
  例子：<div style="max-height:50px">设置最大高度</div>

max-width:;设置最大宽度
  例子：<div style="max-width:50px">设置最大宽度</div>

letter-spacing:50px；字母与字母之间距离
  例子：<div style="letter-spacing:50px">字母与字母之间距离</div>

word-spacing:50px ；单词之间距离
  例子：<div style="word-spacing:150px">单词 之间 距离</div>
 
opacity：0.3 透明度
  例子：<div style="opacity: 0.3">垂直居中</div>
 
text-indent：将段落的第一行缩进
  例子：<div style="text-indent: 32px;">aa</div>

height：auto！important 以此样式为准

4.5 border 边框

border-style：solid；边框样式 
border-color：red；边框颜色
border-width：1px；边框宽度
border-radius：20%；边框变成圆角
border:1px solid red;
border-left:1px solid red; bottom , right ,top  

border：在一个声明中设置所有的边框属性。
border-bottom：在一个声明中设置所有的下边框属性。
border-bottom-color：设置下边框的颜色。
border-bottom-style：设置下边框的样式。
border-bottom-width：设置下边框的宽度。
border-color：设置四条边框的颜色。
border-left：在一个声明中设置所有的左边框属性。
border-left-color：设置左边框的颜色。
border-left-style：设置左边框的样式。
border-left-width：设置左边框的宽度。
border-right：在一个声明中设置所有的右边框属性。
border-right-color：设置右边框的颜色。
border-right-style：设置右边框的样式。
border-right-width：设置右边框的宽度。
border-style：设置四条边框的样式。
border-top：在一个声明中设置所有的上边框属性。
border-top-color：设置上边框的颜色。
border-top-style：设置上边框的样式。
border-top-width：设置上边框的宽度。
border-width：设置四条边框的宽度。
outline：在一个声明中设置所有的轮廓属性。
outline-color：设置轮廓的颜色。
outline-style：设置轮廓的样式。
outline-width：设置轮廓的宽度。
border-bottom-left-radius：定义边框左下角的形状。
border-bottom-right-radius：定义边框右下角的形状。
border-image：简写属性，设置所有 border-image-* 属性。
border-image-outset：规定边框图像区域超出边框的量。
border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-slice：规定图像边框的向内偏移。
border-image-source：规定用作边框的图片。
border-image-width：规定图片边框的宽度。
border-radius：简写属性，设置所有四个 border-*-radius属性。
border-top-left-radius：定义边框左上角的形状。
border-top-right-radius：定义边框右下角的形状。
box-decoration-break：定义当元素跨多行、多列或多页时，元素的片段应如何呈现
box-shadow：向方框添加一个或多个阴影。

4.5.1 外边距margin

margin	    在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        margin-top: 25px;"></div>
    </div>
</body>

4.5.2 内边距padding

padding	    在一个声明中设置所有内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        padding-top: 25px;"></div>
    </div>
</body>

4.6 css3 动漫属性

1

4.7 float 浮动

正常文档流： 将元素（标签）在进行排版布局时按照从上到下、从左到右的顺序分布排版的流；

脱离文档流： 将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局；

float 浮动标签属性（非完全脱离）：

  • 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。

float：left，right，both
清除浮动： clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

<style>
    #div4{
        border:solid 1px lavender;
        background-color: rebeccapurple;
        height: 100px;
    }
    #div1{
        background-color: darkolivegreen;
        height: 100px;
        width: 980px;
        margin: auto;
    }
    #div2{
        border-left: solid 1px lavender;
        height: 100px;
        width: 100px;
        background-color: darkgray;
        float: left;
    }
    #div3{
        border-left: solid 1px lavender;
        height: 100px;
        width: 100px;
        background-color: darkgray;
        float: left;
    }
    #clear{
        clear:both;
    }
</style>
<div id="div4">
    <div id="div1">
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </div>
    <div id="clear"></div>
</div>

注： div2和div3使用float浮动起来，如想将div4的样式显示出来，需增加一个clear标签将架子撑起来，清除浮动

清除浮动第二种方法，overflow：hidden 将溢出的信息隐藏

overflow：auto;不光隐藏并出现滚动条
例子：after 清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        .c1{
            height: 30px;
            width: 30px;
            background-color: darkgray;
            border:1px dotted red;
            float: right;
        }
        .c2{
            background-color: red;
            height: 400px;
        }
        .d1:after{
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body style="margin: auto;">
    <div class="d1">
        <div class="c1"></div>
        <div class="c1"></div>
    </div>
    <div class="c2">内容</div>
    <div class="d1">
        <div class="c1"></div>
        <div class="c1"></div>
    </div>
    <div class="c2">内容2</div>
</body>
</html>

4.8 display 属性

display属性： 用于控制HTML元素的显示效果。

none       此元素不会被显示。
block      此元素将显示为块级元素，此元素前后会带有换行符。
inline     默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block    行内块元素。

块级标签和行内标签相互转换：

<body>
    <div style="background-color: red;display: inline">块级</div>
    <span style="background-color: #2459a2;display: block">行内</span>
</body>

行内标签： 无法设置高度，宽度，padding margin
块级标签： 设置高度，宽度，padding margin

<body>
    <span style="background-color: #2459a2;display: inline-block;height: 50px;width: 70px">行内</span>
    <div style="background-color: red;display: inline">块级</div>
</body>　

注： display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

display:"none" 与 visibility:hidden 的区别：

  • visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

5. position

Position 属性： 规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。

1、主要的值：

absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
static ：默认值；默认布局。

2、辅助属性：

  • position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)：
left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。
right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。
top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。
bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。
上面属性的值可以为负，单位：px 。

5.1 定位方式

  • position:absolute

    • 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于；

    • Absolutely定位使元素的位置与文档流无关，因此不占据空间。

    • Absolutely定位的元素和其他元素重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 80px;
            width: 80px;
            background-color: darkgray;
            position: absolute;
            bottom:60px;
            right:60px;
        }
        .c2{
            height: 80px;
            width: 80px;
            background-color: red;
        }
        .c3{
            height: 80px;
            width: 80px;
            background-color: blue;
        }
        .c4{
            height: 800px;
            background-color: whitesmoke;
        }
    </style>
</head>
<body style="margin: auto;">
    <div class="c1">返回顶部</div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</body>
</html>
  • positon:relative
    • 相对定位元素的定位是相对其正常位置。
    • 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
    • 一般与absolute配合使用；
    • 写法：relative + absolut
    • position: absolute 相对于父标签 position: relative 的绝对定位
<div style="position: relative">
        <div style="position: absolute;top:0;left: 0;"></div>
</div>

例子：relative + absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        .c1{
            height: 400px;
            width: 600px;
            border: 4px solid #dddddd;
            position: relative;
            top: 40px;
            left: 200px;
        }
        .c2{
            height: 40px;
            width: 40px;
            position: absolute;
            top: 0;
            left: 0;
            border: 4px solid red;
        }
        .c3{
            height: 40px;
            width: 40px;
            position: absolute;
            bottom: 0;
            right: 0;
            border: 4px solid red;
        }
        .c4{
            background-color: darkgray;
            height: 600px;
            margin-top: 40px;
        }
    </style>
</head>
<body style="margin: auto;">
    <div class="c1">
        <div class="c2">左上</div>
        <div class="c3">右下</div>
    </div>
    <div class="c4"></div>
</body>
</html>
  • position:fixed
    • 元素的位置相对于浏览器窗口是固定位置。
    • 即使窗口是滚动的它也不会移动：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 80px;
            width: 80px;
            background-color: darkgray;
            position: fixed;
            bottom:60px;
            right:60px;
        }
        .c2{
            height: 80px;
            width: 80px;
            background-color: red;
        }
        .c4{
            height: 800px;
            background-color: whitesmoke;
        }
    </style>
</head>
<body style="margin: auto;">
    <div class="c1">返回顶部</div>
    <div class="c2"></div>
    <div class="c4"></div>
</body>
</html>

position层级例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dc{
            height: 5000px;
            background-color: dodgerblue;
            z-index: 6;
        }
        .pos{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .zz{
            height: 5000px;
            background-color: black;
            opacity: 0.6;
            z-index: 8;
        }
        .one{
            position: fixed;
            background-color:beige;
            height: 200px;
            width: 300px;
            z-index: 10;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
        }
        .flo{
            float: right;
            margin: 10px 120px 0 0;
        }

    </style>
</head>
<body style="margin: auto;">
<!--    提交页面-->
    <div class="dc pos">
        <input type="text" name="" id="">
        <input type="submit" name="" id="">
    </div>
<!--    遮罩层-->
    <div class="zz pos "></div>
<!--    登陆页面-->
    <div class="one ">
        <p class="flo">用户名<input type="text"></p>
        <p class="flo">密码<input type="password"></p>
        <div style="clear: both"></div>
        <p><input type="submit"></p>
    </div>
</body>
</html>

5.2 hover

适用于光标（鼠标指针）指向一个元素，但此元素未被激活时的样式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-head{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            background-color: #499ef3;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-head .menu{
            display: inline-block;
            padding: 0 10px;
            color: white;

        }
        .pg-head .menu:hover{
            background-color: #4dabff;
        }
    </style>
</head>
<body>
    <div class="pg-head">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">aa</a>
            <a class="menu">bb</a>
            <a class="menu">cc</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">内容</div>
    </div>
</body>
</html>

例子：鼠标移上去，a，b变红色字体， b换背景颜色

<style>
    .items{
        background-color: #dddddd;
    }
    .items:hover{
        color:red;
    }
    .items:hover .b{
        background-color: #499ef3;
    }
</style>


<div class="items">
    <div class="a">a</div>
    <div class="b">b</div>
</div>

5.3 overflow

overflow属性指定如果内容溢出一个元素的框，会发生什么。

  • visible：默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden：内容会被修剪，并且其余内容是不可见的。
  • scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

5.4 z-index

  • z-index:10; 属性指定一个元素的堆叠顺序。
  • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。
  • z-index:10;第一层 z-index:8;第二层 z-index:6;第三层

5.5 opacity

设置一个div元素的透明度级别：0-1

5.6 CSS 定位属性（Positioning）

bottom	  设置定位元素下外边距边界与其包含块下边界之间的偏移。
clear	  规定元素的哪一侧不允许其他浮动元素。
clip	  剪裁绝对定位元素。
cursor	  规定要显示的光标的类型（形状）。
display	  规定元素应该生成的框的类型。
float	  规定框是否应该浮动。
left	  设置定位元素左外边距边界与其包含块左边界之间的偏移。
overflow  规定当内容溢出元素框时发生的事情。
position  规定元素的定位类型。
right	  设置定位元素右外边距边界与其包含块右边界之间的偏移。
top	  设置定位元素的上外边距边界与其包含块上边界之间的偏移。
vertical-align	设置元素的垂直对齐方式。
visibility	规定元素是否可见。
z-index	  设置元素的堆叠顺序。

5.7 CSS 文本属性

color	设置文本的颜色。
direction	规定文本的方向 / 书写方向。
letter-spacing	设置字符间距。
line-height	设置行高。
text-align	规定文本的水平对齐方式。
text-decoration	规定添加到文本的装饰效果。
text-indent	规定文本块首行的缩进。
text-shadow	规定添加到文本的阴影效果。
text-transform	控制文本的大小写。
unicode-bidi	设置文本方向。
white-space	规定如何处理元素中的空白。
word-spacing	设置单词间距。
hanging-punctuation	规定标点字符是否位于线框之外。
punctuation-trim	规定是否对标点字符进行修剪。
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline	规定文本的轮廓。
text-overflow	规定当文本溢出包含元素时发生的事情。
text-shadow	向文本添加阴影。
text-wrap	规定文本的换行规则。
word-break	规定非中日韩文本的换行规则。
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

6. !important

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。

语法：{ sRule!important }

div{color:green !important;}

最好不要使用

posted @ 2025-11-18 12:11  Amoヽ柠檬  阅读(5)  评论(0)    收藏  举报