CSS基础知识

最新推荐文章于 2024-04-02 14:24:22 发布

贾明恣

最新推荐文章于 2024-04-02 14:24:22 发布

阅读量145

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43342290/article/details/114631138

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

css

前序
预编译
CSSStyleSheet类型：js

前序

HTML是结构化语言，CSS是其补充、是一种样式语言。HTML还有可能会被XML可扩展标记语言所取代。
不同浏览器内核对网页编写语法的解释也有所不同，前端开发需要在代码中通过内核前缀为相应浏览器增加某些功能。
添加前缀的CSS代码只有相应内核浏览器才能解读。注意并不是所有样式都支持内核前缀

属性前缀	浏览器内核	浏览器
webkit	WebKit	Safair、google chrome、Android Browser
moz	Gecko	Firefox
ms	Trident	IE、Edge
o	Presto	Opera

概念

替换元素：替换元素内容的部分来呈现，并非文档内容直接表示。e.g：img是文档之外的图像文件、input
非替换元素

web安全颜色，在256色计算机系统上总能避免抖动的颜色。RGB值20%和51的倍数

浮动和定位元素不在正常流中

匿名文本：未包含在行内元素的字符串

像素

PPI:每英寸长度的像素点数
物理分辨率=PPI*长度（单位英寸）
分辨率：单位英寸中包含的像素点数
物理分辨率：硬件支持px，描述的是物理大小包含的像素点
为了同一款软件在不同屏幕大小的兼容，引入针对各屏幕大小设备的逻辑分辨率
逻辑分辨率：软件支持pt，描述的是固定内容的像素点
屏幕密度=物理/逻辑（越大越清晰，相同面积像素点更多）
相对单位尺寸：rem、vw、vh
绝对单位尺寸: px

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

在这里插入图片描述

字体

字体库有
Typekit 不能在本地使用，会有一点开销
fonts.com
Google也有
此外，可以在自己的服务器上托管字体
字体下载后font-face 开放字体格式

@font-face {
  font-family: "开放字体名字";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("svg"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  /*可选*/
  font-wieght:bold;
  font-style:italic;
}

format
字体会有不同格式文件
ttf文件、otf文件（TureType)、eot文件（TureType)、svg文件(svg)
对应需要注意浏览器是否支持该格式。

关联CSS

外部样式表：
不能包含标记语言，只能有样式规则。文档开头可以用@import引入其他

<head>
<link rel="stylesheet" type="text/css" href="xx.css" media="all" />
</head>

候选样式表:
引入title属性生成列表

<head>
<link rel="alternate stylesheet" type="text/css" href="xx.css" media="all" title="Big Text" />
</head>

style元素

<style type="text/css">
文档样式表
@import url(xx.css) all;/*可多个，但是无法候选*/
</style>

内联样式表
HTML的style属性

<p style="color:gray; background:yellow;"></p>

BEM约定创建CSS 类名

BEM 使用非常简洁的约定来创建 CSS 类名。元素名加在双下划线后（例如 toggle__details），修饰符加在双横杠后（如 toggle__details–active）。这个元素的名称是 details，位置在 toggle 组件里，状态为激活。
块名：所属组件的名称。
元素：元素在块里面的名称。
修饰符：任何与块或元素相关联的修饰符。

 <div class="toggle toggle--simple"> 
 <div class="toggle__control toggle__control--active"> 
 <h2 class="toggle__title">Title 1</h2> 
 </div> 
 <div class="toggle__details toggle__details--active"> 
 ... 
 </div> 
 ... 
 </dl>

预编译

单纯的CSS缺少变量、运算、循环、函数作用域，这里就出现了预处理器。

Sass 与~~less~~
Sass 是一款强化 CSS 的辅助工具，在 CSS 语法的基础上增加了
变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，
使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
开发所写的源文件转译成输出文件即常规CSS样式表。处理可计算表达式、组合多个局部文件、随机插入拼接等

在命令行中执行 sass input.scss output.css 命令，将会把 Sass 文件 input.scss 编译输出为 output.css。
sass --watch app/sass:public/stylesheets 将会监听 app/sass 目录下所有文件的变动，并编译 CSS 到 public/stylesheets 目录下。

颜色处理函数：调整饱和度、透明度、色环上取色
涉及大小属性，可以用calc关键字计算 property：calc(20em-10px)
需要用命令行安装Sass编译器，才能在Web服务器上启用它。

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
libSass速度更快的c++移植版。、

Compass模块
http://compass-style.org/
Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。
e.g: 对“缺乏必要的CSS3属性前缀的”代码错误做出修正。（浏览器现状导致）

Compass提供animation、transform、transition混合宏来创建CSS3动画效果

阮老师这篇写得相当不错了
http://www.ruanyifeng.com/blog/2012/11/compass.html