50、CSS基础 - 溪明轩

一、CSS介绍

css，Cascading Style Sheet，即层叠样式表，专门用于给HTML化妆！当浏览器读取到一个样式表，浏览器就会按照样式表对文档进行渲染！

1.1、注释

<!-- 我是注释 -->

1.2、CSS使用方式

1.2.1、行内样式

即直接而在行内标签设定CSS样式，不推荐此种用法！

<p style="color: brown;">hello!world!</p>

1.2.2、嵌入式样式

即将css样式全部写在HTML的head里的style标签中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: burlywood;
        }
    </style>
</head>

1.2.3、外部样式

将CSS样式写在外部文件中，通过HTML的head里面导入该文件

<link rel="stylesheet" href="Untitled-1.css">

二、基本选择器

快捷写法：

p#c1.c2，敲下tab后即可变成<p id="d1" class="c2"></p>

2.1、id选择器

id选择器，找到指定id的标签，对其进行渲染样式！

<style>
    #d1 {  
        color: greenyellow;
    }
</style>
<body>
	<div id="d1">haha</div>
</body>

2.2、类选择器

找到class值里面包含c1的标签，对其进行渲染样式！类型不要用数字开头，有些浏览器不支持！

<style>
    .c1 {
    	color: red;
    }
</style>
<body>
	<div class="c1">haha</div>
</body>

2.3、标签/元素选择器

找到所有指定的标签，并对其进行渲染样式！

<style>
    /* 元素/标签选择器 */
    span {
        color: blue;
    }
</style>
<body>
	<span>hah</span>
</body>

2.4、通用选择器

将HTML页面上所有标签全部找到，对其渲染样式！

<style>
    * {
        color: green;
	}
</style>

三、组合选择器

在前端，通常将标签的嵌套用亲戚关系来描述层级,如下所示：

<div>爷爷
    <p>大儿子</p>
    <p>二儿子
        <span>孙子</span>
    </p>
    <span>三儿子</span>
    <span>四儿子</span>
</div>

最外层div里面的p、span都是div的后代；其中p是div的儿子，p里面的span是p的儿子，是div的孙子，div是p的父亲！

3.1、后代选择器

找到div里面的所有的后代span，对其渲染！

div span {
    color: aqua;
}

3.2、儿子选择器

找到div里面所有是span标签的儿子，对其渲染样式！

div>span {
  color: green;
}

3.3、毗邻选择器

邻居嘛，即此例同级别紧挨着的下面的第一个

div+span {
  color: yellow;
}

3.4、弟弟选择器

弟弟嘛，就是大哥以下的都是弟弟；即此例同级别下面所有的span

div~span {
  color: violet;
}

四、属性选择器

属性选择器是以中括号[]作为起始

4.1、含有某个属性

将所有含有属性名name的标签背景色改为红色

[name] {
	background-color: red;
}

4.2、含有某个属性且有某个值

将所有属性名是name且属性值是sanxi的标签背景色改为

[name='sanxi'] {
	color: orange;
}

4.3、含有某个属性并且有某个值的某个标签

对所有属性名是name且属性值是sanxi的input标签进行渲染

input[name='sanxi'] {
background-color: palevioletred;
}

五、分组与嵌套

将多种标签合为一组，对其进行渲染！逗号表示并列关系，即分组,不同选择器也可以！

/*对所有div、p、span标签进行渲染*/
div,p,span {
    color: yellow;
}
/*对id为d1的标签、所有class为c1的标签、span标签进行渲染*/
#d1,.c1,span {
    color: orange;
}

六、伪类选择器

多用于a标签，比如我们经常看到某网站上面的超链接，未点击前是一种颜色，鼠标移过去悬浮又是一种颜色，点击不松开是一种颜色，点击后又是一种颜色，这边是伪类选择器的大用处了！

6.1、访问前状态

鼠标尚未点击过的状态

a:link {
  color: red;
}

6.2、悬浮态

此用法最常用，即鼠标停留在标签但不点击

a:hover {
  color: aqua;
}

6.3、激活态

即鼠标点击不松开

a:active {
  color: black;
}

6.4、点击后状态

即访问后的状态

a:visited {
  color: darkblue;
}

6.5、input获取焦点

input框获取焦点，即鼠标点击input后的状态

input:focus {
  background-color: red;
}

七、伪元素选择器

before和after通常用来清除浮动带来的影响，用来解决父标签塌陷的问题！

7.1、首字样式

修改指定的块级标签的第一个字的样式

p::first-letter {
  font-size: 48px;
  color: rosybrown;
}

7.2、文本开头用css添加内容

在文本的开头用css来添加内容，此内容鼠标无法选中！

p::before {
  content: '你说的对';
  color: blue;
}

7.3、末尾处用CSS添加内容

在文本的末尾用css来添加内容，此内容鼠标无法选中！

p::after {
  content: '哈哈哈';
  color: green;
}

八、选择器优先级

!important强制让标签采用这个样式，最高优先级，但是强烈不推荐！

图片来源：博客园JsonJi，原博客地址：https://www.cnblogs.com/Dominic-Ji/p/10474769.html

CSS选择器优先级

九、css属性相关

即操作标签样式

9.1、设置长宽

注意：再次强调，只有块级标签可以调节长宽，行内标签是不可以的，写了也没用！

p {
  background-color: khaki;
  height: 200px;
  width: 400px;
}

9.2、设置字体

p {
     <!-- 设置字体，如首个子图不生效，就后续顺序配置 -->
     font-family: sans-serif,XXXX;
     <!-- 字体大小 -->
     font-size: 24px;
	font-weight: bold;
     <!-- 字体颜色，颜色编号版本 -->
     color: #eeeeee;
     <!-- 字体颜色，三基色版本 -->
     color: rgb(122, 77, 88);
    <!-- 字体颜色，三基色+透明度版本 -->
     color: rgba(122, 77, 66,0.8);
}

字重（粗细）

font-weight用来设置字体的字重（粗细）。

normal，标准粗细。
bold，加粗
bolder，更粗
lighter，更细
100-900，设置具体粗细，normal是400，bold是700！
inherit，继承父标签字体的粗细值

取色器

1、pycharm取色器

2、截图软件

文字属性

文本对齐

对齐方式	代码演示
居中对齐	`text-align: center;`
左对齐	`text-align: left;`
右对齐	`text-align: right;`
两端对齐	`text-align: justify;`

p {
  text-align: center;
  text-align: right;
  text-align: left;
  text-align: justify;
}

文字装饰

HTML中，很多标签渲染出来的效果是一样的，但语义不一样！文字装饰的重头戏是text-decoration: none;，它能去除a标签自带的下划线！

p {
  /* 下划线 */
  text-decoration: underline;
  /* 上划线 */
  text-decoration: orange;
  /* 删除线 */
  text-decoration: line-through;
  /* 无特效，比如去掉a标签的下划线，重点 */
  text-decoration: none;
  /* 首行缩进，要根据字体大小来定 */
  font-size: 16px;
  text-indent: 32;
}

十、背景属性

<style>
    div {
        height: 400px;
        width: 400px;
        /* 默认背景图片全部铺满页面，不够则补 */
        background-image: url();
        /* 不铺满 */
        background-repeat: no-repeat;
        /* 浏览器不是平面，是一个三维立体结构 */
        background-repeat: repeat-x;
        background-repeat: repeat-y;
        /* 第一个左，第二个上 */
        background-position: center center;
        /* 如果出现了多个属性名前缀是一样的，都可以简写,不分位置 */
        background: red url() no-repeat center center;
        /* 固定图片位置 */
        background-attachment: fixed;
    }
</style>
    <body>
    <div></div>
</body>

10.1、边框

p {
  /* 边框宽度 */  
  border-width: 5px;
  /* 边框风格 */
  border-style: solid;
  border-color: red;
}

以上可简写为：

p {
    border: 5px red solid;
}

border style

solid，实线边框。
dotted，圆点虚线边框
dashed，矩形虚线边框
none，无边框

还可以为上下左右边框单独设置

  border-left-width: 10px;
  border-left-color: red;
  border-left-style: solid;

简写,同样位置随意

border-left: 5px red solid;

圆角边框

将border-radius设置为长或高的一半即可得到一个圆形，前提是长宽一样！

border-radius: 50%;

10.2、display属性

展示属性，用于控制HTML标签的显示效果

<style>
    #d1 {
        /* 隐藏标签不展示到前端页面，还活着，但不再占位 */
        display: none;
        /* 将标签设置为行内标签的特点，可将两个块级标签弄到一行 */
        display: inline;
    }
    #d2 {
        /* 标签设置成块级标签的特点 */
        display: block
        /* 让行内标签既可以一行显示又可以设置长宽 */
        display: inline-block;
    }
</style>

<body>
    <div style="visibility: hidden">也是隐藏但占位</div>
</body>

十一、盒子模型

11.1、什么是盒子模型？

图片来源：博客园JsonJi，原博客地址：https://www.cnblogs.com/Dominic-Ji/p/10474769.html

盒子模型
以快递盒为例：

1、快递盒与快递盒之间的距离，即标签与标签之间的距离，也就是外边距margin。

2、盒子的厚度，即标签的边框，也就是边框border。

3、盒子里面的物体到盒子之间的距离，即内容到边框的距离，也就是内边距padding。

4、物体的大小，即标签的内容，也就是content。

11.2、margin

调整标签与标签之间的距离，即调整margin外边距！一般来说，浏览器自带8px的margin，所以在写页面的时候，会先将body的margin清零！

body {
    /*上下左右的外边距单独设置
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    */
    /* body的所有外边距全为0 */
    margin: 0;
    /* 第一个为上下，二为左右 */
    margin: 10px 20px;
    /* 一上，二左右，三下 */
    margin: 10px 20px 30px;
    /* 上 右 下 左 */
    margin: 10px 20px 30px 40px;
    /*底部外边距,两个标签之间距离不叠加*/
    margin-bottom: 20px;
    /* 只能水平居中标签，垂直不行，最常用 */
    margin: 0 auto;
}

11.3、padding

padding用法跟margin一样

十二、浮动(重点)

在CSS中，任何标签都可以浮动！浮动的标签，没有块级标签、行内标签一说，本身多大浮起来就多大；浮动在页面布局上作用非常大！可以毫不夸张地说：必不可少！

12.1、浮动基本用法

/* 浮到空中的左边 */
#d1 {
    float: left;
}
/* 浮到空中的右边 */
#d2 {
    float: right;
}
/* 默认值，不浮动 */
#d3 {
    float: none;
}

12.2、浮动带来的问题

子标签浮动会给父标签带来塌陷的问题，如下代码所示：

<style>
    body {
        margin: 0;
    }
    #d1 {
        border: 3px solid black;
    }
    #d2 {
        height: 100px;
        width: 100px;
        background-color: red;
        float: left;
    }
    #d3 {
        height: 100px;
        width: 100px;
        background-color: rosybrown;
        float: left;
    }
</style>
<body>
    <div id="d1">我是父标签
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
</body>

可以看到，父标签塌方了，被两个不孝子占了位置，内容都被挤乱了！

浮动塌陷

12.3、塌陷解决方法

父标签固定长宽

即手动给父标签设置标签的长宽，这显然非常麻烦！

伪元素清除法

利用clear属性，该标签的左边（地面和空中）不能有浮动的元素

left，左侧不允许浮动。
right，左侧不允许浮动。
both，左右均不允许浮动。
none，默认值，即允许左右可以有浮动元素。
inherit，继承父类的clear属性值。

<div id="clear" style="clear: left;">clear</div>

通用解决方法

在写HTML页面之前，先提前写好处理浮动带来的影响的css代码，之后只要标签出现了塌陷问题就给它加一个clearfix类即可！

.clearfix {
            content: '';
            display: block;
            clear: both;
        }

十三、溢出属性

即内容溢出标签后的那一部分，会被如何处理；溢出后被隐藏这个属性很适合做头像！

13.1、溢出演示

<style>
    p {
        height: 100px;
        width: 100px;
        border: 3px solid red;
    }
</style>
<body>
    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p>
</body>

简直是奇葩了，太丑了，必须预防出现这种情况！

溢出展示

13.2、overflow属性

hidden，溢出部分会被隐藏。
scroll，溢出部分设置成上下滚动条样式查看。
auto，如果溢出被隐藏，则浏览器自动显示滚动条用于查阅剩余内容。
inherit，从父标签继承overflow属性。
visible，默认值，即不隐藏溢出部分。

overflow: hidden;

十四、定位

浏览器优先展示文本内容，且默认所有的标签都是静态(static)的，无法改变位置，只能调节长宽(浮动除外)。如果要移动标签位置，需要使用以下几种方法：

14.1、相对定位

相对于标签原来的位置移动relative，其移动后依然占据原有位置，真是死而不僵，迷恋权位！

#d1 {
  height: 100px;
  width: 100px;
  background-color: red;

  /* 相对定位，从static变为relative后，哪怕没移动但性质已经变为已定位过的标签 */
  position: relative;

  /* 从左往右移动，负数则相反 */
  left: 50px;

  /* 从上往下 */
  top: 50px;

}

14.2、绝对定位(常用)

absolute，相对于已经定位过的父标签做移动，如无父标签，则以body为参照！其移动后，不再占有原来的位置，还地于民！

例子：小米官网购物车，当你不知道其它标签位置和参数，只知道父标签的参数，让你基于该标签定位

<style>
    #d2 {
        height: 100px;
        width: 200px;
        background-color: red;
        position: relative;
    }
    #d3 {
        height: 200px;
        width: 400px;
        background-color: green;
        position: absolute;
        left: 200px;
        top: 100px;
    }
</style>
<body>
    <div id="d1">我是大哥
        <div id="d2">我是小弟</div>
    </div>
</body>

14.3、固定定位(常用)

相对于浏览器窗口固定在某个位置，比如：小米官网右侧栏

#d4 {
  /* fixed后，定位就是依据浏览器窗口 */
  position: fixed;
  bottom: 10px;
  right: 20px;
  height: 50px;
  width: 100px;
  background-color: blue;
  border: 3px solid burlywood;
}

十五、验证浮动和定位是否脱离文档流

参考对象

浮动、相对定位、绝对定位、固定定位

不脱离文档流

相对定位

脱离文档流

浮动、绝对定位、固定定位

十六、z-index模态框

比如说百度点击登录，其实是三层结构

1、最底下是正常网页

2、中间的灰色透明区

3、最上层的白色的登录，离用户最近

<style>
    body {
        margin: 0%;
    }
    .cover {
        position: fixed;
        left: 0%;
        right: 0%;
        top: 0%;
        bottom: 0%;
        background-color: rgba(red, green, blue, 0.5);
        z-index: 99;
    }
    .modal {
        background-color: white;
        height: 200px;
        width: 400px;
        position: fixed;
        /* 这个居中是以顶点为居中 */
        left: 50%;
        top: 50%;
        z-index: 100;
        /* 是这标签的一般 */
        margin-left: -200;
        margin-top: -100;
    }
</style>
<body>
    <div >底层页面</div>
    <div class="cover">中间层</div>
    <div >最上层</div>
    <div class="modal">
        <h1>登录页面</h1>
        <p>username: <input type="text"></p>
        <p>password: <input type="text"></p>
        <button>点我登录</button>
    </div>
</body>

十七、透明度opacity

它不单单可以修改颜色的透明度，还能修改字体的透明度！因为rgba只能影响颜色，opacity可以修改颜色和字体！

其取值范围是：0-1

opacity: 0.5;