CSS简介

一、CSS概述

CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。

 

二、CSS基本语法

选择器 {

    属性：值；

    属性：值；

    属性：值；

}

选择器是将样式和页面元素关联起来的名称，

属性是希望设置的样式属性，每个属性有一个或多个值。

属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

 

三、css引入页面的三种方式

1、内联式：通过标签的style属性，把样式写在标签中

2、内嵌式：通过style标签，把样式写在head标签中

3、外链式：外部创建一个css文件，页面通过link标签引入

 

四、css选择器

1、标签选择器：写法和标签名相同，影响范围大，用来做通用设置，或者用于层级选择器中

2、类选择器：名称任意，名称前需要加“.”，标签通过class属性引用 （应用最多）

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类

3、层级选择器：通过层级关系匹配标签 （多用于标签嵌套结构中）

4、id选择器：通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

5、组选择器：多个选择器，如果有同样的样式设置，可以使用组选择器

6、伪类选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态

 

五、CSS常用属性

样式中的注释 /* 注释内容 */

布局样式属性

width：宽度

height：高度

background：背景色或背景图片

border：边框（同时设置4个边）

border-top：顶边边框

border-left：左边边框

border-right：右边边框

border-bottom：底边边框

边框线型：

solid 实线

dashed 虚线

dotted 点线

padding： 内边距（内容和元素边框的距离）

padding-top

padding-left

padding-right

padding-bottom

margin： 外边距（元素和外界的距离）

margin-top

margin-left

margin-right

margin-bottom

float：元素浮动（让块元素排列在一行）

 

文本样式属性一：

color：文字颜色

font-size: 文字大小

font-family：文字字体

font-weight：文字是否加粗

font-weight：bold 加粗

font-weight：normal 不加粗

line-weight：文字行高

text-decoration： 设置文字下划线

text-align：文字水平对齐

text-indent：文字首行缩进

 

 

六、CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1