【前端知识点总结】CSS 基础五

最新推荐文章于 2024-08-31 22:15:20 发布

疆子

最新推荐文章于 2024-08-31 22:15:20 发布

阅读量231

点赞数 1

分类专栏：前端知识点总结文章标签： css 前端 css3 搜索引擎优化 html5

本文链接：https://blog.csdn.net/jiang_ziy/article/details/122924493

版权

前端知识点总结专栏收录该内容

31 篇文章 11 订阅

订阅专栏

业务中常用属性2

1、实现单行文字省略号

white-space: nowrap; : 文字强制一行显示
overflow: hidden; : 文字溢出隐藏
text-overflow: ellipsis; 文字溢出省略号

 .box {
     width: 150px;
     height: 200px;
     border: 1px solid #000;
     /* 文字强制一行显示,不换行 */
     white-space: nowrap;
     /* 溢出隐藏 */
     overflow: hidden;
     /* 文字溢出省略号 */
     text-overflow: ellipsis;
 }

2、控制背景图片大小 `background-size:值;`

background-size: contain; 背景图片等比例缩放,显示完整,有可能铺铺不满盒子
background-size: cover; 背景图片等比例缩放,铺满盒子,背景图片有可能显示不完整
background-size: 400px 200px; 写2个数值,第1个代表宽,第2个代表高
background-size: 400px auto; 写1个数值,代表宽,另外一个值高默认auto,等比例缩放
background-size: 50% 50%; 写百分比的值,参考是盒子的宽高

 .box {
     width: 1000px;
     height: 300px;
     border: 1px solid #000;
     background: url(图片路径) repeat;
     /* 控制背景图片大小 */
     background-size: 50% 50%;
 }

3、背景渐变属性

background-image:linear-gradient( to 方位名词 ,颜色 ,颜色);

写一个方位名词代表水平或垂直方向,写两个方位名词代表对角线,颜色为两种或两种以上

.box {
    width: 600px;
    height: 500px;
    border: 1px solid #000;
    /* 背景渐变 是背景图片的一种特殊情况
    括号里边逗号隔开, 
    控制渐变方向 可以写1个或者2个方位名词, left right top bottom */
    /* background-image: linear-gradient(to bottom, green, red);
    background-image: linear-gradient(to top, green, red);
    background-image: linear-gradient(to right, green, red, blue);*/
    background-image: linear-gradient(to right top, rgba(50, 205, 84, 0.514), skyblue);
}

背景颜色渐变写百分比 background-image:linear-gradient(45deg,颜色5%,颜色95%)

度数如坐标轴+上面为0度顺时针依次90度,180度,270度 45度在0度和90度之间
第一个颜色后面的百分之比是渐变起始的位置 ,最后一个百分比是渐变结束的位置

 /* 渐变写百分比，是渐变起始位置到渐变的结束位置 */
  background-image: linear-gradient(90deg, red 90%, green 96%);

4、盒子阴影属性 `box-shadow: -20px 20px 20px 2px #333;`

第1个值是阴影水平偏移量,正值向右,负值向左
第2个值是阴影垂直偏移量,正值向下,负值向上
第3个值是阴影模糊范围
第4个值是阴影大小
第5个值是阴影颜色

5、盒子内阴影属性 `inset`

 .box {
     width: 300px;
     height: 300px;
     background-color: green;
     margin: 100px auto;
     /* 内阴影 inset */
     box-shadow: inset 0px 0px 100px 0px yellow;
 }

6、文字阴影属性 `text-shadow: -20px -30px 10px red;`

第1个值是阴影水平偏移量,正值向右,负值向左
第2个值是阴影垂直偏移量,正值向下,负值向上
第3个值是阴影模糊范围
第4个值阴影颜色

 .box {
     font-size: 100px;
     font-weight: 700;
     /* 文字阴影*/
     text-shadow: -20px -30px 10px red;
 }

7、属性过渡 `transition: all 2s;`

过渡是样式慢慢变化的过程, 过渡需要2个状态, 通常过渡属性添加到默认状态, 谁动给谁加。

 .box {
     width: 200px;
     height: 200px;
     background-color: #ccc;
     /* all 全部属性过渡, 2s过渡时间 */
     transition: all 2s;
 }
 .box:hover {
     background-color: #f00;
     border-radius: 50%;
 }

字体图标(矢量图,线条组成,放大后不虚,SVG格式)

链入字体图标样式文件 iconfont.css
标签调用 iconfont类和打开demo-index fontclass 找到对应类名

平面 (2d) 转换 `transtorm : 值 ;` 不脱标

位移 `translate()` 括号里面用逗号隔开

写两个值。第一个值x轴 , 正值向右，负值向左。第二个值Y轴，正值向下，负值向上。
```
transform: translate(-100px, -100px);
```
写一个值。 x轴正值向右，负值向左。
```
transform: translate(100px);
```
写百分比。参考自身宽高
```
transform: translate(10%, 20%);
```
设置单个方向位移。 translateX() translateY()
```
transform: translateX(100px) translateY(100px);
```

位移实现绝对定位居中 (不能设置宽高的盒子)

  position: absolute;
  /* 向右走父元素宽度的一半 */
  left: 50%;
  /* 向下走父元素高度的一半 */
  top: 50%;
  /* 向左走子元素自身宽的一半,向上走子元素自身高的一半 */
  transform: translate(-50%, -50%);

旋转 `rotate (值 deg)` deg 度数正值顺时针负值逆时针

transform: rotate(360deg);

圆点 `transform-origin:值;` 设置转换圆点

写两个方位名词 left right top bottom center
```
transform-origin: left center;
```
写数值第一个值x轴第二个值 y轴
```
transform-origin: 50px 100px;
```
写百分比参考自身宽高第一个值x轴第二个值y轴
```
transform-origin: 10% 50%;
```

转换复合属性写法 `transform: translate() rotate() ;`

 /* 转换复合属性写法,注意位移写在前边 */
 transform: translate(500px) rotate(360deg);

注意： 位移写在前边

缩放 `transform:scale;`

写一个值：代表宽度, 高度等比例缩放, 大于一放大, 小于一缩小
写两个值：第一个值代表宽度的缩放比例, 第二个值代表高度的缩放比例

 /* 2d转换之缩放 值 >1 放大  <1缩小*/
 transform: scale(.5);
 transform: scale(2, 3);

SEO 搜索引擎优化

作用： 提高网站自然排名。

三大标签文本

title： 标题 <title> 标题内容 </title>
description： 网页描述 <meta name="description" content=" 描述内容 ">
keywords： 关键词 <meta name="keywords" content=" 关键字内容 ">
注 : meta 标签元信息给搜索引擎和浏览器渲染用的

HTML 补充：语义化标签

<body>
    <!-- 网站头部 -->
    <header></header>
    <!-- 导航 -->
    <nav></nav>
    <!-- 侧边栏 -->
    <aside></aside>
    <!-- 区块 -->
    <section></section>
    <!-- 文章 -->
    <article></article>
    <!-- 底部 -->
    <footer></footer>
</body>

本章注意点：

行内元素只能设置左右的内外边距,不要设置上下的内外边距

logo优化先放h1,提权,提高重要性,搜索引擎优先推荐, a标签里边设置背景图片

<style>
   .logo a {
    display: block;
    width: 207px;
    height: 70px;
    background: url(../images/logo.png) no-repeat;
    /* 控制背景图片尺寸 */
    background-size: cover;
    }
</style>
<body>
    <div class="logo">
     <h1>
         <a href="index.html"></a>
     </h1>
    </div>
</body>

位移和定位的区别: 写百分比时相对定位参考父元素，位移参考自身
行内元素不能直接使用转换(transform)属性，要先转换模式 display: block;

疆子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端知识点总结】CSS 基础五

本章内容包含： 1、背景大小， 2、背景渐变， 3、盒子阴影，4、文字阴影， 5、属性过渡，6、字体图标7、平面转换（位移、旋转、圆点切换、缩放）， 8、SEO引擎优化， 9、html5 语义化标签，10、实现单行文字省略号，11、网页LOGO优化
复制链接

扫一扫