浙江龙网

  1. 首页 > 生活百科 > >

CSS基础知识筑基

生活百科


CSS基础知识筑基

文章插图
01、CSS 简介CSS 指层叠样式表 (Cascading Style Sheets)，对HTML网页内容进行统一外观样式设计和管理 ， 给网页进行各种装饰，让她变得美观 ， 是HTML的化妆师 。（Cascading ：/k?s?ke?d??/（水）倾泻；连续传递；串联 。cascade 的现在分词）
主要优点：
  • 美化页面：提供丰富的外观设计能力，大量的样式属性 。
  • 可复用：可以统一管理HTML页面的样式，可复用 。
  • CSS3可以实现网页样式、内容分离，并对网页元素实现像素级的样式管理 。
1.1、知识框架
CSS基础知识筑基

文章插图
详见前端技术路线图
1.2、CSS 是怎么工作的？下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现 。
CSS基础知识筑基

文章插图
当浏览器遇到无法解析的 CSS 代码会发生什么？——什么也不会干，继续解析下一个CSS样式 。
02、CSS基础知识2.1、基础语法CSS样式由 选择器名 花括号 {n个申明(属性:值);} 组成 。
CSS基础知识筑基

文章插图
  • 选择器就是用来选择要改变样式的HTML元素 。
  • 属性与值用半角冒号:分开，半角分号;结尾，分割多组键值 。一般建议一行一个键值对 。
  • 如果属性值有多个词组，需加上引号保护起来 。
  • 不合法、错误的申明会被忽略（跳过），CSS总是怎么宽容！
代码风格：
  • 小写：一般都采用小写 ， 字母开头 ， 字母、数字、下划线组成 。
  • 短线分割：当选择器里是类名时，且类名由多个单词组成，则各个单词之间下划线_、或中划线-分割 。多用中短线：background-image
  • 当使用并集选择器时 ， 各个元素竖着写 。
注释：/*注释，可换行*/
注意空格：一定注意关键字（and、or）、符号（括号()，加+、减-）之间的空格 ， 不然有些时候会有些莫名其妙的问题 。其中加+、减-会首先当做正负数符号
2.2、CSS 的简写属性简写属性就是将同一主题的属性的定义集中在一起 ， 空格分割，如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; /* 综合边框样式的简写，上面所有边框的样式 */
  • 覆盖：没有指定的值会被设置为它的初始值 。这就意味着，?它将会覆盖之前设置的值 。
  • 顺序：简写属性的值本身没有顺序要求，但值类型一样时 ， 就需要注意对应简写属性的规则了 。
2.3、CSS的使用描述示例行内样式在元素的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>

推荐阅读


上一篇：Python处理刚刚，分钟，小时，天前等时间

下一篇：实例解读丨关于GaussDB ETCD服务异常