CSS基础

一.CSS基础

CSS:重叠样式表(Cascading style sheets)

1.1.CSS介绍

 1.2.CSS语法规则

 

 2.1.CSS引入方式

外联式的css后缀文件中不需要任何结构语和辅助代码

link标签放在head里面，但不在style里面，其中rel="stylesheet"默认生成，href里面是链接地址

 

 行内式写法

 

三种引用方式的场景

使用场景

 二:基础选择器

1.2标签选择器 

 1.2类选择器

 类选择器主要用于解决标签选择器中范围过大的问题，可以达到使想要的地方进行css修改，通过添加类选择器便能完成效果的作用

 

 

如果定义类选择器是红色且有下划波浪线，说明语法错误。

 一个类可以同时有多个类名，雷明之间以空格隔开

 

 1.3.id选择器

id选择器出生并不是用来写css的，是为了配合未来js用的，暂时用不着

 

 注:id选择器在css使用上只能对一个标签起作用，而且一个标签也只能搭载一个id选择器,id即唯一，由此看出id选择器并不是用于写css的，是为后面js使用起铺点 

1.4.通配符选择器

 使用通配符选择器，会使所有的标签变成选择器里的格式，实用很少

 

 

 在实际应用中，通配符选择器主要用于margin: 0; padding: 0; 作用是清除默认样式

 三：字体和文本样式

其一:字体

 

 1.1.字体大小

1.2.字体粗细

在工作当中，数字更加的常用

 

1.3文字倾斜

em是默认倾斜文字的标签

         

1.4.文字系列 font-family

1.5.常见字体系列（了解）

 如下图所示，第一个字体后逗号了多个字体，其意思代表：电脑中并不是所有字体都有，为了使用户能够清晰展示，就设置备用字体，当第一个YaHei字体出现不了时，就使用Heiti字体，以此类推，如果前面所有具体字体在用户电脑中都没有，就用兜底的sans-serif表示无衬线字体。在实际应用开发中会经常用到

1.6.样式的层叠问题

如果前面一个  color: red; 后面一个  color: blue;  那么最终结果是blue颜色

1.7.字体font相关属性的连写

/* font: style weight size  字体; */  必须按照顺序写；但是前两个可以省略，省略相当于设置了默认值，即 /* font: size  字体; */ 也可以

 注意点：如果要写单独的样式，可以写在样式连写的下面

其二：文本样式

 2.1.文本缩进

 

 应用如图

2.2.水平对齐方式

文本默认左对齐

注意，文本对齐有适用范围，且若要对齐，是让其父元素设置，比如img就是图片，位于body位置里，那么要让图片居中，就要对body进行设置居中

 

 也可以通过div标签进行对齐，再用div将img图片包装

2.3文本修饰

 超链接默认下划线，文本修饰经常用于超链接的删除超链接下划线，提升用户体验

 

 

 2.4.行高

顾名思义是控制两行文字之间的距离

 font: style weight size/line-height family;  复合属性写法，要记住

 拓展.Chrome调试工具

若是没有感叹号但是有删除线，则说明被层叠了或者被手动注释掉了

 若是有黄感叹号，说明属性写错了

 点到数据，可以手动调试

还可以在调试器中加css 

代码前面的勾代表正生效，如果将勾去掉则表示展示取消勾的效果

拓展.颜色常见取值（了解）

拓展.标签水平居中方法总结 margin: 0 auto

该方法在日常开发中非常的常用，要学会使用

这个是块元素整体居中，text-align是块元素里面的元素基于父元素居中