前端学习笔记（一）：css学习笔记

更新时间：2022-06-26 19:14:03

一、概述

将前端结构化，html 是文档结构、css 是设置样式（美化页面）、js是逻辑结构
重点是 "选择器" 和 "盒子模型"

发展史
CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、(动画…浏览器兼容性~)

二、快速入门

位置
行内关联：就是在标签内部设置样式，在标签内写style

<div id ="env" style ="color:red;"></div>

内部关联

和 html 在一个文件中，即写入head 里面

<html>
 <head>
<style> 样式内容 </style>
 </head>
 <body></body>
</html>

外部关联

就是将css 专门写成一个单独的文件

导入方式
主要是外部关联的方式，如何导入

使用 link 关键字，在href 加入地址

使用improt <style>@import url("css/style.css");</style>

优先级
就近原则，谁离的近谁的样式就生效 ---行内样式离的最近

三、基本选择器

标签选择器 --标签名

<style>
 body{
      //具体的样式
    }
 div{
  //具体的样式
}
</style>

类选择器 -- ".类名"

<style>
 .classname{
      //具体的样式
    }
</style>

Id 选择器 --“#id名”

<style>
 #env{
      //具体的样式
    }
</style>

优先级关系
id 选择器>类选择器>标签选择器

css 预处理器

CSS 预处理器技术已经非常的成熟了，为了提升css的能力、代码复用能力、以及开发效率，涌现出了越来越多的 CSS 的预处理器框架。

主要有：sass 、less 和 stylus，都是在现在的 vue 和 react 项目中经常用到的，用法也很简单，只要学会一种，其他两种都很容易上手，项目中用哪一种就要看自己的喜好了。

sass

Sass 是一种 CSS 的预编译语言，Sass 为 CSS 赋予了更强大的功能。

它提供了变量（variables）、嵌套（nested rules） [混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。

Sass 能够帮助复杂的样式表更有条理，并且易于在项目内部或跨项目共享设计。

层叠样式表

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS边框

边框属性：

border-radius：创建圆角边框

box-Shadow：附加一个或者多个下拉框的阴影

border-image（不支持IE）：使用图像创建一个边框

CSS圆角

指定border-radius的每个圆角，如果只指定一个值，则生成四个圆角；若在每个角上指定，则使用如下规则：

四个值：四个值分别指定左上角、右上角、右下角、左下角。

三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角。

两个值：第一个值为左上角和右下角，第二个值为右上角和左下角。

一个值：四个圆角值相同。

创建椭圆边角：
border-radius：50px/15px;

border-radius: 50%;

圆角属性：

border-radius 所有四个边角属性的缩写

border-top-left-radius 左上角的弧度

border-top-right-radius 右上角的弧度

border-bottom-left-radius 左下角的弧度

border-bottom-right-radius 右下角的弧度

上一篇 : ：JS基本语法学习下一篇 : Vue框架学习笔记【day二】