CSS基础知识

CSS基础知识

基础概念

层叠样式表(英文全称：Cascading Style Sheets），为了实现内容和表现形式的分离。

Html:负责内容，css:负责表现形式

使用CSS有3种方式

（1）内联

       使用style属性，只是对当前标签有效，页面内容和样式高度耦合的。

（2）内部样式

       在head中使用style标签，当前页面有效，内容和样式一定程度分离，但是不彻底

（3）外部样式

将样式写到一个单独CSS文件中，需要用到HTML文件，引用它即可。

         实现了内容与样式的完全分离

颜色

         自然界颜色数据是无穷的，但是计算机只能表示有限的信息

         需要将连续的量（无穷）转换为离散（有限）的量

         颜色可以3中基本颜色调和而成，既红色red,绿色green，蓝色blue

         每种颜色用8位表示，可以表示256种颜色，那么每个颜色有24位来表示，可以标有256 * 256 * 256 种颜色（真彩色）

         CSS中颜色的表示方法

                   （1）16进制表示：#ff0000

                   （2）RGB: rgb(128,0,0)  === #800000

                   （4）RGBA:是在原有RGB上添加了透明底，alpha

                  （5）HSL：用色调、饱和度和明度3个分量表示颜色

                   （6）HSLA：在HSL上添加了透明度

         图片格式：

                   Jpg,png

基础属性

字体属性

font-style：字体（斜体）

font-variant ：字体的变化（大小写）

font-weight ：字体粗细

font-size：字体大小

font –family：字体名称

文本相关属性

主要包含颜色color、对齐方式text-algin、修饰效果text-decoration，行高line-height

背景相关

尺寸属性

显示相关属性

隐藏元素的方法：

（1）Display:none,可以隐藏，并且不占位置

（2）  visibility: hidden; 可以隐藏，但是位置还在

 

Display可以设置元素的显示模式

Display: inline-block

         变成行内块标签：可以设置width和height，不会占满一行

Display: inline

          变成行内标签，width和height设置无效，其空间取决于内容

Display: block

盒子模型

边框

内边距padding

Padding-top、Padding-right、Padding-bottom、Padding-left

Padding 50px 40px 30px 10px  上 右 下 左

Padding 50px 40px ;上下  左右

外边距margin

和内边距类似的

定位

定位方式：static、fixed、relative、absolute

static：静态定位（默认）

         无定位，元素正常出现在流中，不受left、right、top、bottom属性的影响

Fixed:

         位置相对于窗口，脱离流，不占原有的位置，并且不会跟着浏览器窗口 而滚动

Relative:

         相对定位，相对于一个东西，这个东西是他本身

absolute：绝对定位

         找一个东西来 绝对定位，需要一个参照物。

选择器

所谓选择器，指的就是选择施加样式到目标地的方式，找元素的方式

元素选择器

 通过标签名作为选择器

Id选择器

一个页面上的标签，id是唯一的，不能重复

类选择器

需要在便签上使用class, class里头的名字可以重复

Css样式使用多次

属性选择器

根据某个属性的特性（比如有无、值等）来选择

（1）根据有无属性来选择

（2）根据属性的值来选择

值相等

以什么开头：^=

包含：*=

以什么结尾$

结构选择器

后代选择器：

可以选择一个元素的后代元素，这个元素的儿子，孙子，孙子的儿子。。。

子类选择：

某一元素，选中直接后代（儿子，孙子不要）

并选择器：

将相同的颜色放在一起，类名直接用逗号分隔

通配符选择器：

选中所有的标签，不建议使用。

兄弟选择器

（1）E + F

选中最近的一个“弟弟”元素，不选中自己

（2）E~F

选中所有的“弟弟”元素，不选中自己

伪类、伪元素选择器

伪类选择器

根据不同的状态，自动选择不同的样式

伪元素选择器

CSS三大特性

继承

Div2,div3的颜色和字体和div1是一样的，但是div2,div3没有边框，

并不是所有的属性都可以继承

         哪些可以继承：自己总结，

层叠性

         多个样式可以使用在同一个标签上，

         标签的效果是各个样式的累加

优先级

在现实生活中，多条互相冲突的规则施加到同一个事务上，需要一个规则，那就是优先级。

内联 > id选择器 >类选择器 >元素选择器

内部样式 >外部样式

!important：可以改变优先级