css 回顾

2024-03-08 20:16:22

css 回顾

css 回顾
css 回顾

样式表

样式表分类：外部、内部、行内（除了引用不一样，样式的本身是一样的）
外部：一个独立的文件，以.css为扩展名
内嵌：在当前文件里嵌套使用，写在中
行内：在当前标签这一行内使用
嵌入：
优先级：html由上往下执行，后执行的会将前面的覆盖掉！！（行内样式一定会最后执行而覆盖掉前面的，内部与外部看谁离标签近）
例子：

  • < link>放在< style>之前，内部>外部
  • < link>放在< style>之后，外部>内部

内嵌样式表：

<style type="text/css">                   <!--type="text/css"：在当前样式里是文本或者CSS（也可以吧“text/”去掉）-->
    p{         							<!--对所有的段落标签进行设计-->                                
        。。。。。。
    }
</style>

外部样式表：

css 回顾

  • < link>：用于定义文档与外部资源的关系，（写在中）
    • rel：rel是relation的缩写，也就是关系，指明样式表的类型
    • type：定义css样式文件的类型（可省略，因为大都默认为css）
    • href：指明外部样式表的位置

行内样式： 不建议使用

<p style="background-color: red; font-size: 40px;">
这是行内样式
</p>

内嵌样式： 很少使用

<style type="text/css">
    @import url("css/style.css");
</style>

长度单位

七个你可能不了解的CSS单位

  • em：当前字体大小；
    • 例如，如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。
  • vh：浏览器高度的1/100；例：浏览器高度900px，1vh=9px
  • vw：浏览器宽度的1/100；
  • vmin：取浏览器宽度和高度的最小值；例：浏览器高度900px，宽度1200px，1vmin=9px
  • vmin常适用于（需要一个总是在屏幕上可见的元素）这样不管是电脑、手机都能100%可见
  • vmax：取浏览器宽度和高度的最大值；
  • vmax常适用于（需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边)）
  • ch：字符单位：依赖于font-family；例：给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个字符
    -等等…

文本修饰

css 回顾
css 回顾

  • direction与text-align：
    • 针对非阿拉伯语时：两者效果一致；
      *针对阿拉伯数语时，direction则是改变字母的书写方式，text-align则只是改变对齐方式。
    • 注意：小数点 . 视为阿拉伯语。
  • opacity：设置透明效果； opacity: 0.5;（半透明）。
    css 回顾
    css 回顾
  • text-shadow：
    • 需要设置四个值（分别是：行偏倚量 列偏倚量 模糊度 颜色）
.p1{
    text-shadow: 3px 3px 2 red;
}
  • box-shadow：
    • 需要设置五个值（分别为： 水平位置，垂直位置，模糊距离（渐变），阴影尺寸，颜色）

字体

css 回顾
css 回顾

  • font-style：italic与oblique，两者都是设置斜体
    • italic：将字符设置为斜体（是一种字体），对大多数字符都有效，但有部分特殊字符不能设置斜体（是因为字库里边没有改字符的斜体）。
    • oblique：所有字符都为倾斜显示。
      font-family设置多个值：为了兼容不同机型，网页常常要 font-family设置多个值，来能满足页面需求。不同字体之间用逗号隔开，按优先级依次排开。

word-break：属性规定自动换行的处理方法。
css 回顾
white-space：属性设置如何处理元素内的空白。 css 回顾

背景

css 回顾
background-size：设置背景图片大小
background-color: transparent;(设置背景为透明)

可以对元素设置多个背景图像；设置背景图片时，值写在url()内的
css 回顾

background-image: url("../picture/Primary.jpg");
background-image: url("image/1.jpg"),url("image/2.jpg");

渐变背景：

  • background: linear-gradient(direction, color1 stop1, color2 stop2);

    • direction：方向值：常用的是to top，to bottom，to left，to right等等；角度值：常用的是0deg、180deg等等。
    • stop：是这个颜色块终止位置，换句话说就是这块颜色占的区域（渐变从哪开始，到哪结束）（第一个大于第二个就没有渐变效果，直接两种颜色）。

    background: linear-gradient(135deg,goldenrod 25%,blue 100%);

display：规定元素应该生成的框的类型。

w3schhol

  • none：此元素不会显示

  • block：此元素显示为块级元素

  • inline：默认。此元素会被显示未内联元素

  • inline-block：行内块元素

  • flex：弹性布局（flexble box）FlexBox

  • grid：网格布局
    兼容性似乎不是很好呀

    • Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
    • repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
    • repeat()重复某种模式也是可以的。
grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);
  • minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
    table：此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
  • 等等…

选择器

w3school
![在这里插入图片描述](https://www.icode9.com/i/ll/?i=2021022css 回顾
8163957229.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RyeU15QmVzdFRvRG9f,size_16,color_FFFFFF,t_70)

  • 标签指定式选择符：标签名选择器 （中间没有任何符号）
h1#content{         <!--选择id为content的h1标签-->
    ........
}
  • id：每个标签的id不能相同，在使用id选择器时，以#开头
  • *：选中所有内容
  • 逗号选择器：将多个选择器连接在一起，视为一个选择器
  • 空格选择器： 例：#div1 p{} ：选中div1中所有的p标签（包括div1中其他div中的p标签）
  • >选择器： 例：#div1>p{} ：选中所有属于div1的p标签（不包括div1中其他div中的p标签）
  • +选择器： 例：#div1+p{} ：选中所有与div1为同一级别的p标签（不选中div1本身）
  • []选择器： 例：p[class=“p1”]：选中所有p标签class属性为"p1"的p标签
input[type="button"]{}

css 回顾
:nth-of-type() ：该选择器选取父元素的第 N 个指定类型的子元素。

p:first-child{                        /*选中父元素（body）第一个子元素，(如果是p的话)，就将该子元素背景设为红色*/
    background-color: red;                                            
}

p:first-of-type{                       /*选中父元素（body）第一个同类子元素，(第一个p)，将该子元素背景设为蓝色*/
    background-color: blue;
}

td:nth-child(2){                                   /*选中父元素(tr)第二个子元素，(td），将该单元格背景设为红色*/
    background-color: red;
}

css 回顾
. . . . . .

浮动

css 回顾
脱标流，即脱离文档流（并没有脱离文本流），也称之为是浮动，或者是position的实现效果。（让块级元素能实现从左到右显示）

  • position：设置坐标位置（需要设置坐标位置才能实现div等块的移动等操作）
  • absolute：绝对定位，该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。
  • relative： 相对定位，该元素相对于自己原有位置，偏移一定距离。相对的是自己。
  • 脱标流会浮动在文档流的上面（掩盖住文档流）

css动画

@keyframes规则

  • @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
    格式：@-浏览器支持-keyframes 动画名称{…}
  • 注意：@keyframes只是定义一个物体的动画规律规则，需要用指定对象的animation属性去调用此规则
@keyframes myfirst{
    ....
}
  • 浏览器支持：
    Safari 和 Chrome ：需要加上-webkit-
    Firefox ：需要加上-moz-
    Opera：需要加上-o-
    css 回顾
    注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

动画animation

调用动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

  • 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
    • 规定动画的名称
    • 规定动画的时长
    • 格式： 浏览器支持-animation: 动画名称 动画时长
div{
    width: 300px;
    height: 300px;
    background-color: red;
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
}

w3school
css 回顾
例子：

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
    }
    
    @keyframes myfirst
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
    from {background:red;}
    to {background:yellow;}
    }
    </style>
</head>
<body>
    <div></div>
    <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

过渡transition

要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
格式：-webkit-transition: css属性 时间

.d1{
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
.d1:hover{
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg);
}

css 回顾
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

transition：不同简写属性之间空格分隔，相同属性之间逗号分隔

-webkit-transition: width 2s ,height 2s ,-webkit-transform 2s linear;

2D转换transform

translate(x,y) ：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

  • 值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。（类似于left/top）
  • translateX(n)/translateY(n)
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

以上代码能够起到水平垂直居中的效果

rotate(deg)：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 angle：角度

  • 值 rotate(30deg) 把元素顺时针旋转 30 度。

scale(x,y)：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

  • 值 scale(2,4) 把宽度转换为原始尺寸 2 倍，把高度的转换为原始高度的 4 倍。
  • scaleX(n)/scaleY(n)

skew(x-angle,y-angle)：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

  • 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
  • skewX(x-angle)/skewX(y-angle)

matrix()：matrix() 方法把所有 2D 转换方法组合在一起。

  • matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
  • transform-origin()：允许你改变被转换元素的位置。w3school

css 回顾
css 回顾

上一篇：HTML|CSS之HTML常用标签


下一篇：swift的一些知识点