前端学习笔记(一):css学习笔记

网友投稿 594 2022-05-29

一、概述

将前端结构化,html 是文档结构、css 是设置样式(美化页面)、js是逻辑结构

重点是 “选择器” 和 “盒子模型”

发展史

前端学习笔记(一):css学习笔记

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

二、快速入门

位置

行内关联 :就是在标签内部设置样式,在标签内 写style

内部关联

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

外部关联

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

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

使用improt

优先级

就近原则,谁离的近 谁的样式就生效 —行内样式离的最近

三、基本选择器

标签选择器 --标签名

类选择器 – “.类名”

Id 选择器 --“#id名”

优先级关系

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 右下角的弧度

CSS web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:IaaS, PaaS和SaaS
下一篇:jtag和swd区别,该用哪个?
相关文章