CSS基本语法

2020-10-19 本文已影响0人安掌门dear

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: 给文字设置颜色
  - rgb模式：每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成 1677多万种颜色
```
color: rgb(255,0,0);
```
  - 十六进制模式：是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进制的0--255的数字
```
color: #0000ff;
```
- 字体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关键字相比权重要低

CSS基本语法

CSS基本语法

CSS概念

css规则

CSS常用样式

CSS选择器

继承性

层叠性

!important

行内式权重

猜你喜欢

热点阅读