![CSS基础知识筑基](http://img.zhejianglong.com/231019/0936091K4-0.png)
文章插图
01、CSS 简介CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理 , 给网页进行各种装饰,让她变得美观 , 是HTML的化妆师 。(Cascading :/k?s?ke?d??/(水)倾泻;连续传递;串联 。cascade 的现在分词)
主要优点:1.1、知识框架
- 美化页面:提供丰富的外观设计能力,大量的样式属性 。
- 可复用:可以统一管理HTML页面的样式,可复用 。
- CSS3可以实现网页样式、内容分离,并对网页元素实现像素级的样式管理 。
![CSS基础知识筑基](http://img.zhejianglong.com/231019/09360a024-1.png)
文章插图
详见前端技术路线图
1.2、CSS 是怎么工作的?下面的步骤是浏览加载网页的简化版本,而且不同的浏览器在处理文件的时候会有不同的方式,但是下面的步骤基本都会出现 。
![CSS基础知识筑基](http://img.zhejianglong.com/231019/09360955E-2.png)
文章插图
当浏览器遇到无法解析的 CSS 代码会发生什么?——什么也不会干,继续解析下一个CSS样式 。
02、CSS基础知识2.1、基础语法CSS样式由
选择器名 花括号 {n个申明(属性:值);}
组成 。![CSS基础知识筑基](http://img.zhejianglong.com/231019/09360aA3-3.png)
文章插图
- 选择器就是用来选择要改变样式的HTML元素 。
- 属性与值用半角冒号
:
分开,半角分号;
结尾,分割多组键值 。一般建议一行一个键值对 。 - 如果属性值有多个词组,需加上引号保护起来 。
- 不合法、错误的申明会被忽略(跳过),CSS总是怎么宽容!
- 小写:一般都采用小写 , 字母开头 , 字母、数字、下划线组成 。
- 短线分割:当选择器里是类名时,且类名由多个单词组成,则各个单词之间下划线
_
、或中划线-
分割 。多用中短线:background-image
- 当使用并集选择器时 , 各个元素竖着写 。
/*注释,可换行*/
注意空格:一定注意关键字(2.2、CSS 的简写属性简写属性就是将同一主题的属性的定义集中在一起 , 空格分割,如and
、or
)、符号(括号()
,加+
、减-
)之间的空格 , 不然有些时候会有些莫名其妙的问题 。其中加+
、减-
会首先当做正负数符号
background
、font
、border
、margin
、padding
。margin-top: 1px;margin-left: 2px;margin-bottom: 3px;margin-left: 4px;/* 上面四个属性的简写形式 , 同时也覆盖他们样式*/margin: 1px 2px 3px 4px;border-top-color: blue;border-color: red;/* 四个边颜色简写,覆盖上面的样式 */border-width: 2px;border-style: dotted;border: green solid 5px; /* 综合边框样式的简写,上面所有边框的样式 */
- 覆盖:没有指定的值会被设置为它的初始值 。这就意味着,?它将会覆盖之前设置的值 。
- 顺序:简写属性的值本身没有顺序要求,但值类型一样时 , 就需要注意对应简写属性的规则了 。
style
属性上写css样式 。?缺点:代码耦合度高,样式不复用,不利于维护,尽量不用 。<p style="color: blue;">p文字</p>
内部(内嵌)样式在样式<style>
标签中定义css样式,只在当前页面内有效 。?缺点:多个页面之间无法复用 。<style> p{color: blue;} </style>
外部样式(推荐)单独css文件定义样式,html的head中<link>
引入,所有引入了该css文件的页面都会生效,便于复用和统一管理 。<link rel="stylesheet" href="https://www.huyubaike.com/biancheng/css文件路径" />
<html><head><meta charset="utf-8"/><title>css练习HTML预览</title><!-- 引入外部css样式文件,type:css类型;ref:当前文件与引入的文件的关系;href:文件路径 --><link type ="text/css" rel="stylesheet" href="https://www.huyubaike.com/biancheng/css1.css" /><!-- 内部样式style标签定义css样式 --><style type="text/css">pre{color:red;}</style><style type="text/css">@import "mystyle.css" supports(display: flex);</style></head><body><div><!-- 行内样式style属性设置css样式 --><p style="color: blue;">一段p标签文字,使用行内样式style</p><pre>pre标签文本,使用内部样式</pre><font>font标签内容</font></div></body></html>
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CSS 动画一站式指南
- 怎么看电脑配置高低(100个电脑基础知识)
- 为什么CSS中的calc函数可能会不生效?
- day03-CSS
- CSS 渐变锯齿消失术
- 1 人人都懂的HTML基础知识-HTML教程
- Redis 02: redis基础知识 + 5种数据结构 + 基础操作命令
- Docker_基础知识
- 前端开发日常——CSS动画无限轮播
- Vue3 JS 与 SCSS 变量相互使用