CSS基础1 | 青训营笔记

简介: 本期作为复习CSS的笔记,比较基础。当然即便最基础的东西也欢迎各路高手指点,以防地基不稳大厦崩塌hhh

一、CSS基础概念


全程是 cascading style sheet 层叠式样式表,主要用于配合HTML结构,添加页面样式、辅助布局。其有两个重要的概念,分别是样式和布局。

1、样式

分为两种,一是文字的样式,二是盒模型的样式

2、布局

一般html的布局都是上下结构,如div标签,就是从上到下排过来。如果需要不同的模块并排显示或是精确定位显示,则需要使用CSS进行辅助。


二、CSS常见样式属性


首先强调,和html不同,css的属性值是如K:V;这样表示的,而非K="V"

1、常用文字属性有三个:color、font-size,foot-family

1.1、color

image.png

style="color:bule;">看我是什么颜色</p>

就是我们描述了CSS样式的代码。

当然我们也可以采用十六进制表示法或者RGB表示法:

<p style="color:#0000FF;">
<p style="color:rgb(0,0,255);">

实际效果是一样的

我们发现css设置的其实就是标签的属性值。比如上面的color,color:bule其实就是设置给p标签的属性值。blue呢?其实就是color的属性值了。悄悄对自己说了一句不要搞混

1.2、font-size

每个浏览器有其默认字号大小。如chrome浏览器默认就是16px,也就是16像素。也有最小承受像素,chrome是8px,小于等于8像素就不会再有区别了。

image.png


图,该属性的实际用法和color相同

<p style="font-size:16px;">

此处不赘述了

1.3、font-famliy

同理,每个浏览器都有默认字体。例如chrome的默认字体就是微软雅黑。

但是知乎上一些大佬似乎发现chrome在不同的默认语言和不同操作系统下会有不同的默认字体设置。只能说在windows+简体中文语言下是如上的默认情况


image.png


字体的属性值可以设置多个,要注意的是,属性值要用‘’括起来,并且不同属性值之间要用,隔开。例如:


image.png


此时会根据从左往右的顺序顺序加载,若加载或识别不不出来该字体则加载下一个字体。

那么问题来了——咱么这可选的字体是保存在哪儿的呢?是浏览器中的还是系统中的?

估计问这么傻的问题的人就只有我了……我找了半天都没用一个一模一样的问答。但是我翻看了许多与之相关的技术博客,有些提到了MAC和windows系统的字体区别,有些也提到了装了office会多出一些字体,我推测应该是浏览器按照系统的字体来渲染的吧。或许我之后可以看看浏览器渲染原理。


相关文章
|
2月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
46 2
|
2月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
37 1
|
2月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
77 1
|
2月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
34 1
|
2月前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
48 1
|
2月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
43 1
|
2月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
20 0
|
2月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
52 0
|
2月前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
42 0
|
2月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句