0
点赞
收藏
分享

微信扫一扫

CSS基本语法

624c95384278 2022-03-11 阅读 82

CSS基本语法


忆往昔,山川是不卷收的文章,日月为吾掌灯伴读。踏着10月的刀刃,走向成长,万劫不复也好,粉身碎骨也好,鲜血淋漓后又是一场涅槃重生。然后是结痂,负痛,长茧,受过的伤都成了勋章。我们都是沧海天穹的大鱼,为了抓住星光,幻化出了翼。记讨厌写笔记的自己,最终成了自己讨厌的人--新安sir


CSS概念


  • CSS:全称cascading style sheets,层叠式样式表,是一种用来表现HTML的文件样式的计算机语言

css规则


  • CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
  • css 的代码根据书写位置不同分为四种书写方式:内联式、内嵌式、外联式、导入式

  • 内联式​:也被习惯叫做行内式,在 HTML 标签之上的style属性中书写css样式​​<div style="width: 100px;height: 100px;font - size: 14px; ">1</div> ​

  • 内联式必须写在标签上,没有完全脱离 HTML 标签
  • css 样式代码让标签结构繁重,不利于 HTML 结构的解读
  • 一个内联式的css代码,只能给一个标签使用,如果多个标签有相同的样式,同样的 css 代码需要书写多次,增加代码量

  • 内嵌式​:在HTML文件中,<head>标签内部有一个<style>标签。<style>标签书写在<title>标签后面,所有css代码书写在<style>标签内部。<style> 标签有一个标签属性叫做type,属性值是 ”text/css”
    ​<style type="text/css"> div{ width: 100px; height: 100px; background-color: #fff; } </style> ​
  • 外联式​ :在一个单独的扩展名为 .css 的文件中,内部代码与内嵌式样式表中 <style> 标签内部的代码一样的。需要通过 选择器去选中标签,添加对应的样式,不需要再加 <style> 标签​​外联式引用:<link rel="stylesheet" href="01.css" type="text/css"> ​

  • 优点: 多个 HTML 文件可以共用一个 css 文件,便于提取公共 css,减少代码量,一个 HTML 文件可以引入多个 css 文件,可以实现同一个页面中 css 代码分层。

  • 导入式​:在内嵌式样式表<style>标签内部,或者在外联式样式表内部,导入其他的外部的.css文件,利用一条 @import url(路径) 语句进行引入
    ​<style> @import url(css/01.css); </style> ​

导入式问题:导入式样式表的作用与外联式样式表基本相同,但是由于导入式在浏览器中加载时,会在 HTML 结构加载完毕后再进行编译,如果网速比较慢时,会导致网页出现没有css样式的效果,给用户的体验不好,推荐使用外联样式表



  • 所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内
  • css 在给某个标签设置样式前,必须使用选择器先选中标签
  • css 样式的属性,属性名和属性值的键值对写法为 k:v;
  • 给每个选择器添加的样式属性都必须写在一对大括号 {} 之内
  • 给一个标签添加的所有需要的样式,都要在 {} 内部一一罗列出来 ​​<style> div{ width: 200px; height: 200px; background-color: #fff; margin-bottom: 10px; } </style> ​

CSS常用样式


  • 文字三属性:

  • 颜色color​: 给文字设置颜色
  • ​color: rgb(255,0,0); ​
  • color: #0000ff;

  • 十六进制模式:是rgb模式的一种简化写法,使用十六进制的数字字符去替换十进制的0--255的数字

  • 字体font-family​:定义元素内文字的字体

font-family 可以设置多个字体名称,在实际加载时只会选择一种加载,选择依据按书写顺序进行,如果浏览器不支持第一个字体,则会尝试下一个,直到找到第一个支持的字体

​font-family: "Arial", "宋体"; ​​​字号font-size​: 设置文字大小

  • 盒子实体化三属性:

  • width​: 定义元素占有的宽度
  • height​:定义元素占有的高度
  • background-color​:定义元素的背景颜色


CSS选择器


  • 标签选择器​: 通过标签名去选择标签元素 ​​p{ color: red; } ​


标签选择器可以选择所有同名标签,会忽视HTML元素的嵌套关系,不管嵌套多深,都能被选择



  • id选择器​: 通过标签上的id属性去选择标签
  • ​<style> #div{ color: red; } </style> <div id="div">id选择器</div> ​

id属性不可以与其他属性相同


类选择器​: 通过标签的class属性去选择标签​​<style> .div{ color: red; } </style> <div class="div">class选择器</div> ​

class属性可以与其他的class相同


通配符选择器​: 通过通配符选择器可以全选,简化书写

通配符选择效率低,设置的部分公共样式不是所有标签都需要添加的,会让不需要的标签也加载一次,导致浏览器多做无用功,不建议使用


后代选择器​:通过标签之间存在的嵌套关系去选择元素,基本组成就是基础选择器​​.box1 ul li p{color: red;} ​

减少class属性的定义使用,选择效率更高


交集选择器​:通过一个标签上满足所有基础选择器的需求去选择标签​​p.demo{color:red}; ​

交集选择器可以进行类名连续交集,IE6不支持类名连续交集写法


并集选择器​:可以将前面六种选择器合并使用,相当于一种简化的方法​​h2,.demo{ color: red; } ​

可以减少代码量,替换通配符功能



继承性


  • 如果一个标签没有设置过样式,它的某个祖先设置过,在浏览器也会加载这些样式,这种现象就是继承性
  • 能够被继承的样式是所有的文字相关样式属性,其他的属性都不能被继承
  • 继承性是一个很好的性质,可以将页面中出现最多的文字样式设置一个较大的祖先级标签<body>,后期所有的后代标签都可以从<body>继承

层叠性


  • 多个选择器在进行对比的过程中,最终只有一个属性会成功加载,它会层叠、覆盖掉其他属性
  • 基础选择器的权重: 根据选择范围,范围越大的权重越小,* < 标签选择器 < 类选择器 < id选择器
  • 高级选择器权重比较的方法:依次比较组成高级选择器的id个数,类的个数,标签个数,直到比较出大小
  • 如果选择器权重都相同,需要比较css代码中的书写顺序,后写的层叠优先

!important


  • 如果在比较选择器权重的过程中,遇见一个!important关键字,可以将某条css样式属性的权重提升到最大

在就近原则比较时无效



行内式权重


  • 行内式样式与内嵌式或外链式比较权重时,行内式权重最高
  • 但是与!important关键字相比权重要低


举报

相关推荐

0 条评论