CSS学习 - 技术栈

定义方式：

行内样式表：

定义在标签中的style属性中.

复制代码

例如：
<img src = "/image.png" alt = "无" width = "300" height = "100">
等价于：
<img src = "/img.png" alt = "无" 
     style = "width: 300px;  height: 100px;">

独立发挥作用，不影响其他部分。只能影响一个标签。

内部样式表：

**对于同一页面中的多个元素起作用。**定义在style标签中。

定义方式：

复制代码

<head>
...
<style type = "text/css">
  img {    //目标标签
     XXXXXX       //目标统一修改样式
   }
</style>
...
</head>

选择性修改部分标签：

对于目标标签增加新属性 class = "XXX"，在<head></head>部分命名时，单独命名 .XXX。

复制代码

<head>

 <style type = "text/css">
  p {
       width: 300px;
       height: 200px;
       background_color: lightred;
   }

  .blue-p{
        background-color:lightblue;
   }
</style>

</head>
<body>

<p class = "blue-p">1</p>
<p>2</p>
<p class = "blue-p">3</p>
<p>4</p>

</body>

目标标签会在继承原有style的基础上修改属性。

同时增添的标签也可以跨标签使用：只需在目标标签内，添加该style元素即可。

外部样式表：

可以对多个html页面样式起作用，以文件方式存储。

即:

1,将目标css代码存放进css文件中。（此时无需书写<style>部分）

2,在<head>中link进该文件：

复制代码

<link rel = "stylesheet" href = "路径">

css注释方式：

只有 /* */的注释方式。

选择器：

标签选择器：

用标签名称，直接选择所有标签。

复制代码

div {
   width : 100px;
   height:  20px;
   background-color: lightred;
   margin-bottom: 10px;    //表示每一个div后预留10字节的距离。
}

ID选择器：

通过自己设置的ID元素来选择，用#指代。

对于形如：

复制代码

<div id = "rect-1"> 111 </div>

选择方式：

复制代码

#rect-1{
   width: 100px;
   height:  200px;
}

类选择器：

类与id的区别：

1，一般来说：id是每一个标签独有的；类是可以在多个标签上使用的。

2，同一个标签可以同时具有多个class，用空格隔开。但只会具有一个id

3，类用 . 来表示。

复制代码

.red{
   background-color: lightred;
}

.big{
  width: 200px;
  height: 200px;
}

<p class = "red big"> 1 </p>
<p class = "red"> 2 </p>
<p>3</p>

伪类选择器：

应用于当某区域的状态发生变化：如鼠标悬停时。对应的样式也会发生变化。

伪类选择器链接形式：

复制代码

:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式

语法形式：

鼠标悬浮时，模块变大：

复制代码

div{
   width: 300px;
   height: 200px;
   background-color: lightred;
}

.effect:hover{
   transform: scale(1.2);   //变大1.2倍
   transition: 200ms;       //使用200ms变大
}

<div id = "effect"> 1 </div>

超链接点击后变色：

复制代码

a:link{
  color: red;
}

a:visited{
  color: green;
}


<a href = "www.baidu.som"> about </a>

按钮的点击变色：

复制代码

button:hover{
   color: orange;    //字体颜色
   background-color: blue;    //背景颜色
}

button: active{
   color: white;
}

输入框的聚焦状态（聚焦：光标所指的区域）：

复制代码

input: focus{
  background-color: lightblue;
}

位置伪类选择器：

选择某一类的第X个标签。

如选择第二个<p>标签。

复制代码

p: nth-child(2){
 background-color: blue;
}

也可以选择函数类的元素（选择第奇数个的元素）：

复制代码

p:nth-child(2n + 1) {
   bakcground-color: lightblue;
}

目标伪类选择器：

当跳转到目标元素位置或页面时，短暂地改变样式，起到提示的作用。

补充：<a>标签跳转至页面内部：加上#加上id;

复制代码

p: target{
   background-color: lightblue;
}


<a href = "#myp"> 我的标签 </a>

<p id = "myp">6 </p>

复合选择器：

一，指定标签的class类：

复制代码

//只变大div
div.big{
  transform: scale(1.5)
}

<div class = "big"> 1 </div>
<p class = "big"> 1 </p>

二，同时有多个class类的选择：

复制代码

div.big.real{    //相当于串联，只有同时具有big和class类时才会改变
  transform: scale(1.5);
}

<div class = "big"> 1 </div>
<div class = "real"> 2 </div>
<div class = "big real"> 3 </div>

三，ID+class类名：

复制代码

#myp.big{
   transform: scale(1.5);
}

<div id = "myp" class = "big"> 1 </div>

四，元素1 + 元素2：

如：div + p,针对的对象是紧跟在div后面的那一个p标签。

p + p，改变的是除了第一个p的其余p标签。

#myp + p，改变接在id = "myp"后的p标签。

五，元素1 元素2：

针对某种元素2的祖先标签是元素1.

其形式同样支持串联。

六，元素1 > 元素2：

针对所有父标签是元素1的所有元素2。

此形式还支持串联，更细节规定：

如元素1 > 元素2 > 元素3.

通配符选择器：

（1）*：选择全部标签；

（2）【attribute】选择具有某个属性的标签；

复制代码

/* 选择具有required属性的标签 */
input[required]{
   backgroung-color: lightblue;
}

<input required name = "a" id = "a"> 
<input name = "b" id = "b">

//选择type = number的标签；

input[type = number]{
      XXXXXX
}

<input type = "text" name = "a" id = "A">

<input type = "number" name = "b" id = "b">

伪元素选择器：

复制代码

::first-letter   选择第一个字母
::first-line     选择第一行
::selection      选择已被选中的内容。
:: after         可在元素后插入内容
:: before        可在元素前插入内容

样式渲染选择器：

渲染的先后顺序：

（1）先来后到；

（2）继承自父类的优先级最低；

（3）越具体，优先级越大。

!important （临时特许，直接调为最高级）> 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器

颜色：

预定义的颜色：

black、white、red、green、blue、lightblue等。

十六进制表示法：

使用6位16进制数表示颜色，例如：#ADD8E6。

其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。

RGB表示法：

如：rgb(173, 216, 230)。

第一个数表示红色，第二个表示绿色，第三个表示蓝色。

RGBA表示法：

如：rgba（173，216, 230，0.5）

前三同上，第四个表示透明度。

取色方式：

（1）直接查看页面源代码，查看目标颜色的写法。

（2）使用QQ截图查看，本设备设置为ctrl + shift + A。

文本：

text-align（文本的对齐方式）：

设置在style中，有三种属性：

（1）text-align : center------文本居中。

（2）ext-align ：right -------右对齐。

（3）text-align ： justify --------- 左右对齐。

子标签会默认继承父标签文本的对齐方式。

line-height：

长度单位：

|------------|---------------|
| 单位 | 描述 |
| px（绝对单位） | 设备上的像素点 |
| % | 相当于父元素的百分比 |
| em | 相对于当前元素的字体大小 |
| rem | 相对于根元素的字体大小 |
| vm（最适配屏幕的） | 相对于视窗宽度的百分比大小 |
| vh（最适配屏幕的） | 相对于视窗高度的百分比大小 |

示例：

复制代码

<div style = "2em">
   第一层
   <div style = "2em">
       第二层
       <div style = "2em">
           第三层
       </div>
   </div>
</div>

第一层默认比例为16px，第二层为（16 * 2）32px，.......。

【同样更改为2rem，则字体均为32px。（相对于<html>标签的大小）】

行高：

即-----单行文本所占的高度。

line-height与height的区别：

line-height：单行文本所占高度；

hright：该标签区域所占的高度。

复制代码

line-height: 1em;

若设置line-height = height，即可实现单行文本的垂直居中。

letter-space：

设置字符之间的距离。

text-indent：

字符之间的缩进。

复制代码

text-indent：1em。  就是1个字符的大小。

text-decoration：

文本修饰，如下划线，删除，闪烁........

具体样式查看MDN官网。

也可用于删除链接的下划线，保持美观。

text-shadow：

为文字添加阴影。

需要参数：

x轴偏移量，y轴偏移量，模糊半径，颜色。

方向轴的设置基轴：

示例：

复制代码

text-shadow：5px 5px 2px grey

字体：

font-size：

字体大小；

font-style：

设置斜体：

复制代码

font-style：italic

正常：

复制代码

font-style：normal

font-weight：

设置字体粗细。（填写1~1000的数值）

font-family：

设置字的样式。同样在MDN上查询。

背景：

（1）设置背景颜色：

background-color。

（2）设置图片背景：

background-image：url（地址）

也可以设置为渐变色来替换：

background-image：linear-gradient（rgba(0, 0, 255, 0.5)，rgba(255, 255, 0, 0.5)）;

采用线性渐变函数，从颜色A过渡到颜色B。

（3）设置背景图片大小：

background-size。

· 设置具体的数值维度：如background-size：50px；

设置为完全覆盖背景的大小：background-size：cover；

【注意cover的原则：是等比例扩大图片，直至某一维能够完全覆盖背景】

（4）设置图片是否重复：

background-repeat：no-repeat

background-repeat：repeat-x只重复行。

backgroung-repeat：repeat-y只重复列。

（5）设置图片左上角的偏移量。

bakcground-position。

如：background-position：50px 10px；、、

若只写一维的话，另一维默认居中。

background-position：50px；等价于 background-position：50px center；

也可以设置为粗略方位：

如right bottom； right top；

（6）background-attachment：

决定背景图片是在页面内固定，还是随着包含它的区块一起滚动。

background-attachment：fixed（图片固定在页面的某一处，位置有position决定）

边框：

border-style

设置所有边框的样式。

· 边框样式设置可以有多个元素，按照上，右，下，左的顺序进行填充。

例如：

复制代码

border-style：inset solid inset solid

· 若没有四个元素，则默认某边取其对边样式。

例如：

复制代码

border-style：dot inset solid

//表示上边框为dot，左右边框为inset，下边框为solid

border-width：

设置边框的宽度。

设置的上下左右顺序，与上述一致。

border-color：

设置边框颜色。

border-radius：

设置边框四个角的半径圆度。

若要将原图片（正方形）设置为圆形，即设置半径为边长的一半：

复制代码

border-radius：50%

border-collapse：

设置相邻单元是否共用同一边框。

复制代码

border-collapse：collapse；  //设置边框重合

border-collapse：seperate  //不重叠

元素展示格式：

display的类型：

block类型：

block类型独占一行，width，height均可控制。

代表：<div>

inline类型：

可以共用一行。

width与height无效。

内外边距只有水平有用，上下无效。

代表元素：<span>

inline-block类型：

行内块元素。

支持将<div>或<span>手动修改为inline-block类型。【同理适用在将span转换为div.........】

理解为以上两种的折中类型。

可以共占一行；

width，height，padding，margin，均可控制。

white-space:

回忆<p>与<pre>的区别：

<p>标签忽略空格与换行符，而<pre>相反。

这其中的区别就是由white-space控制。

white-space：normal 使文字内容自动换行，控制在元素框内部。

white-space：nowrap 取消自动换行，一行结束。

如何使<div>实现与<pre>相同的功能：

设置

复制代码

white-sapce: pre;

text-overflow & overflow :

text-overflow 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

对于溢出内容overflow的处理：

（1）overflow：auto 自动设置一滚轮，来展示内容。

（2）overflow-x（overflow-y）：scroll 指定方向滚动。

（3）overflow：hidden 隐藏超出内容。

text-overflow的参数：

ellipsise：超出部分用省略号代替。

内外边距：

分布情况（内外边距本身也是该元素的组成部分）：

margin（外边距）：

设置边框四个边界到页面的距离：

· 接受参数的顺序与对应关系与上述一致；

· 可以指明四个方向：maigin-top， margin-left......

` 可接受的参数：

（1）50px；....... 具体数值；

（2）百分比；

（3）auto 浏览器自主选择。默认下倾向于居中。

特殊情况--------父子元素同时有margin-top时，出现塌陷现象。

外边距重叠：

问题，当代码如：

复制代码

.div-outer{
    width: 300px;
    height: 300px;
    background-color: lightblue;
}

.div-inner{
    width:100px;
    height:100px;
    background-color: black;
    margin: 20px;
}

在尚未设置outer<div>的margin情况下，inner<div>自动带着outer<div>向下移动。

产生原因：

当父元素没有设置padding或border-top时，设置了子元素的maigin-top，会导致子元素的margin-top溢出。溢出会导致父元素的margin-top取与子元素之间的最大值。

solution：

（1）对父元素设置padding或border；

（2）设置overflow：hidden；隐藏溢出的margin-top；

（3）在父元素前添加一个元素

复制代码

.div-outer::before{
   content: "" ;
   display: table;
}

对于margin-bottom的情况，solution同样适用。

规律：对于上下的外边距：若两个边距重叠，则取两者的最大值。（水平方向不存在该情况）

要避免此情况发生：

尽量要么都定义为margin-top或都定义为margin-bottom。

padding（内边距）：

设置同上。

盒子模型：

元素的box-sizing规定了应该如何计算元素的宽度与高度。

（1）设置box-sizing ：content-box：

元素的宽 width = content + border + padding

（2）设置box-sizing：border-box：

padding与border不会改变元素的大小，只会挤压content。

元素的width被固定。

位置：

取值类型：

· static：

流式渲染方式：从上到下，从左到右，依次渲染。

此时 top, right, bottom, left 和 z-index 属性无效。

· relative：

元素先放在初始位置，可以通过top，left，right，bottom使元素相对于起始位置进行偏移。

例如：

top：50px；相对于起始位置上边界向下偏移50px；

right：50px；相对于起始位置右边界向左偏移50px；

.........

注意，即使元素移动，其原有的初始位置仍会留上空白。

补充：

若出现此种因平移而造成的重叠情况：

若要实现模块1再次浮现，可以设置模块1的 z-index: XX (>2) 即抬高模块1在z轴上的位置。

（注意只适用于position：relative）

· absolute：

绝对定位方式。

将该元素移出正常文件流，并不会为其预留空白区域。

通过top，right，left，bottom来确定位置。

基准的选取：往上找到的第一个不是static的父元素。

· fixed：

大体与absolute一致。

区别在于：

选取的基准是屏幕视图，元素的位置在屏幕滚动时不会发生改变。

· sticky：

例如：

复制代码

.div-inner-2{
   weight: 100px;
   height: 100px;
   position: sticky;
   background-color: black;
   top: 0;
}

当<div> 2的设置为sticky时，若top = 0，当页面滑动超出原有位置时，元素会保持在设定好的与页面相对位置上不变，在页面上固定。

简而言之就是实现粘滞效果。

【注意：sticky效果应实现在父容器内，故父容器的面积要足够大。】

浮动：

float指定元素沿着容器的左侧或右侧围绕放置（类似于inline-block的效果）。

float意味着使用块布局，即有时会修改display的属性：

display为inline或inline-block时，使用float后会统一变成block。

取值：

float：right inline-block效果右对齐；

float：left inline-block效果左对齐；

由于float会将元素移出文件流，不会为其进行占位，若想将new元素移动到float元素的下方：

· clear：

清除浮动效果：

clear：left 清除左侧的

clear：right 清除右侧的

clear: both 均清除。

查看网页各个位置的css属性：

采用ctrl + shift + C

flex布局：

元素的排列是按照主轴与交叉轴的方向决定的。

display：flex 具有将超过父元素范围的元素自动压缩进范围内的特点。

flex-direction:

定义主轴的方向。

取值：

（1）row 从左到右排列；

（2）row-reverse 从右到左排列；

（3）column 从上到下排列；

（4）column-reverse 从下到上排列；

flex-wrap：

规定元素排列是否允许换行，以及换行的堆积方向。

取值：

nowrap：不换行；

wrap：换行，从上往下摆；

wrap-reverse：换行，从下往上摆；

flex-flow：

是 flex-direction 与 flex-wrap 的缩写：

默认值为：row nowrap；

justify-content：

（元素的水平对齐方式）

取值：

（1）flex-start：左对齐；

（2）flex-end：右对齐；

（3）flex-center：水平居中；

（4）space-between：左右两端对齐：不管是否够一行，都是先均匀间隔分布；

（5）space-around：相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半

（6）space-evenly：头尾距离与元素间距离相同的space-around。

align-items：

（元素垂直对齐方式）

取值：

flex-start：从上到下；

flex-end：从下到上；

stretch：侧轴方向拉伸每一个元素，直至与height或width等高。（子元素的height未被定义的前提下）

center：在侧轴方向居中；

align-cotent：

与align-items主要有两个区别：

（1）items的元素与元素之间会有均匀的间隔。align-content会使元素挤在一起。

（2）当只有一行元素时，align-content的center的竖直居中效果会消失。

【以上的元素都是定义在父标签之中】

order：

自定义子元素的展示顺序，值越小越靠前。

flex-grow：

flex元素的放大系数。（一定取非负值，取0时不放大）

在容器长度大于块的总长度时：

flex-grow：1时块随着容器的放大，等比例放大。

flex-grow的值越大，放大的速度越快。

flex-shrink：

flex元素的缩小速度。

其他一致。

flex-basis：

设置元素的初始宽度。

flex：

以上三值的简写：

自动取值：

auto：flex：1 1 auto 【等比例缩放】

none：flex： 0 0 auto 【不进行缩放】

响应式布局：

满足网站的跨设备设置。

media查询：

检测到不同设备的media后，切换为不同的css设置。

例如：

复制代码

.card{
    width: 80%;
    height: 100vh;
    background-color: lightblue;
    margin: 0 auto;
}

@media(min-width:768px){
     .card{
        background-color: lightyellow;
     }
}

card模块，当页面widht小于768px时，背景颜色会切换为lightblue。

通常在根据视窗大小改变布局时，常采用的思想是将width分为12份，预设好每一份的width比例，通过@media响应是否启用对应的class名。

bootstrap-----快速搭建自身网站。