css基础使用

一、书写规则

选择器{属性名：属性值}

 二、引入方式

2.1内部样式

css代码写在style标签里，style标签写在head部分的title标签下

 2.2外部样式

css代码单独写在css文件中（.css）

在html代码中的head部分title标签下使用link标签引入

例如：<link rel="stylesheet" href="css文件路径">

2.3行内样式

配合js使用

例如：

<div style="color:red;font-size=20px">这里是div标签</div>  

三、选择器

3.1标签选择器

使用标签名进行设置样式，例如p、h1、div等标签

缺点：无法差异化同名的标签样式 

3.2类选择器

1.定义

1.1类名用英文，多个英文单词使用-连接

1.2定义类名：.类名

2.使用 

class=“类名”

2.1一个类选择器可以有多个标签使用

2.2一个标签可以使用多个类选择器，用空格分开

 3.3id选择器

1.定义

1.1定义类名：#id名

2.使用

id=“id名”

3.4通配符选择器

*

不需要调用，一般用来清楚标签的默认样式 

四、文字控制属性

4.1字体大小

font-size

1.网页默认16px

2.不写单位不生效

4.2字体粗细

font-weight

1.数字（开发使用）

正常：400

加粗：700

2.关键字

正常：normal

加粗：bold

4.3字体样式

 font-style

正常：normal

倾斜：italic

4.4行高

line-height

1.文字垂直居中，设置行高与盒子高度一致，只对单行文字有效

2.属性值可带单位px，也可不带单位，123表示字体大小的倍数

3.行高：字体高度+字体下间距

4.5font属性

必须写字号和字体，否则不生效 

4.6文本缩进

font-indent

数字+px

数字+em（1em表示当前字号的大小） 

4.7文本对齐方式

text-align

左对齐（left）默认   居中的是文字不是标签

居中：center

右对齐：light 

图片对齐

需要给img标签建立父级标签，把父级标签的text-align设置成center

4.8文本修饰线

text-decoration

无：none

下划线：underline

删除线：line-through

上划线：overline

4.9文字颜色

1.颜色英文单词

2.rgb表示法（取值0-255）

3.rgba表示法（取值0-1，最后一个代表透明度） 

4.十六进制法

五、调试工具

样式部分

1.黄色警告：样式未生效

2.勾选和取消勾选：查看样式 

六、复合选择器

由多个基础选择器组合而成 

 6.1后代选择器

作用：选择某元素的后代元素

写法：父选择器 子选择器{css属性}   父子选择器之间用空格隔开

6.2子代选择器

父选择器>子选择器{css属性}   父子选择器用>隔开 

6.3并集选择器

选中多组标签设置相同的样式

写法:选择器1，2,3，n{css属性}   选择器之间用,隔开

6.4交集选择器

选择同时满足多个条件的选择器

写法：选择1选择器2{css属性}   选择器之间连写 

七、 伪类选择器

表示元素的状态，选择元素的某个状态设置样式

鼠标悬停状态：选择器：hover{css属性}

任何标签都可以设置鼠标悬停状态

 7.1超链接的四个状态

:link:访问前

:visites：访问后

:hover：悬停时

:active：点击时（激活）

八、css特性

8.1继承性

继承父级的样式，如果标签有自己的样式，则不继承 

8.2层叠性

相同的属性会覆盖，后面的css属性覆盖前面的

不同的属性会叠加，不同的css属性会叠加生效 

8.3优先级

当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器权重高的样式生效

公式：通配符<标签<类<id<行内<!important

选中标签的范围越大，优先级越低 

8.4优先级叠加计算规则

如果是复合选择器，则需要叠加计算

行内、id、类、标签

规则：

从左往右依次比较个数，同一级个数较多的优先级高，如果个数相同。则向后比较

！important权重最高

继承权重最低 

九、Emmet写法

类选择器：标签名.类名

id选择器：标签名#id名

同级标签：标签名+标签名

父子级标签：父+子

多个相同标签：标签名*n

有内容的标签：标签名{内容} 

css大多数简写方式都是属性名的首字母

十、背景属性

10.1背景色

 background-color

bgc

10.2背景图

background-image(url)

bgi

属性值：

不平铺：no-repeat

平铺：repeat

水平方向平铺：repeat-x

垂直方向平铺：repeat-y

 10.3背景图位置

background-position(bgp)

属性值：水平方向位置  垂直方向位置

1.关键字

左：left

右：right

居中：center

顶部：top

底部：bottom

2.坐标

2.1数字+px 正负都可

2.2水平左右 垂直上下

关键字写法可颠倒顺序

关键字和数字都可只写一个，另外的居中

10.4背景图缩放

background-size（bgz）

关键字

cover：等比例缩放背景图以完全覆盖背景区，会导致图片部分看不见

contain：等比例缩放背景图以完全装入背景区，会导致背景区部分留白

百分比：根据盒子尺寸计算图片的大小

数字+单位 

10.5背景图固定

背景不会随元素的内容移动

background-attachment（bga)

属性值：fixed 

10.6背景复合属性

background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开，不区分先后顺序）

十一、显示模式

11.1块元素

独占一行、宽高可设置（默认宽度是父级的宽度） 

11.2行内元素

一行共存多个、尺寸由内容撑开、宽高不可设置 

11.3行内款元素

一行共存多个、默认尺寸由内容撑开，可设置宽高 

11.4转换显示模式

display

块级：block

行内：inline

行内块:inline-block