CSS知识达标

							CSS知识达标

什么是css？
答：CSS全称级联样式表，主要是给html添加样式和风格的
CSS分为：
1.1 元素内嵌式，定义在html标签里的style属性值，也就是说将css样式卸载html标签上
1.2 内联样式表，定义在head中的style内部，就是在head标签内，写一个style标签，将内联样式表写在里面，这样就减少了很多的冗余代码
1.3 外联样式表：将多个网页中共性的样式，定义在一个 xxx.css结尾的文件中。未来需要使用样式的HTML页面，通过标签link 来引用

一、选择器
首先我们要知道，css样式是伴随着html的运行而运行的，最主要的作用是给html添加样式的

1、Id选择器：id选择器的标签id要全局唯一，每一个html 的标签都可以设置一个id值

2、标签选择器：顾名思义，也就是把每一个html标签当成一个选择器，在head的style标签内调用，从而批量的去添加样式或者做一些需要的操作

3、class选择器：每一个html 的标签都可以设置一个class值，就像id选择器一样，我们可以给每一个html的标签设置一个id值，那么我们也可以给每一个html标签设置一个class值，同样的在head里的style标签里进行操作

4、组合选择器：我们在写html页面的时候，随着功能和样式的增多，那么标签也会很多，如果我们需要对很多的标签一起进行操作的话我们可以选择组合选择器，组合选择器也可以看作是标签选择器的升级版，标签选择器是对一个html标签进行操作，那么组合选择器就是对很多的标签进行操作，只需要在多个标签中加上逗号隔开就好

5、后代选择器：后代选择器在使用时不需要加上逗号，后代选择器的意思就是，我们在写标签时可能一个标签内又嵌套了一个标签，那么用后代选择器的话可以对当前标签的后代也就是说嵌套的哪个标签进行操作

6、伪类伪属性选择器：这个选择器是css官方已经定义好的选择器，我们可以直接拿着使用就好
font：size； 可以设置字体大小
color：red； 可以设置字体的颜色
cursor：wait； 可以设置等待样式point设置的是一个小手的样式

重点：
CSS中常用的基础样式
背景：
1.1 设置背景颜色：background-color：颜色(英文)
1.2 设置背景图片：background-image:url（图片路径）
1.3 设置背景图片平铺效果： background-repeat: no-repeat (不平铺) / repeat-x (横向平铺)/ repeat-y（纵向平铺）
1.4 设置图片大小：background-size 宽 高 一般图片只设置宽
1.5 设置背景图片是否跟随页面滚动： background-attachment: scroll （跟随页面滚动）【默认】/ fixed(不跟随页面滚动)
2. 文本
2.1 设置文本的对其方式： text-align: left/center/right;
2.2 设置文本中横线的位置： text-decoration : none / overline （上划线）/underline(下划线)/ line-through(贯穿线)
3. 字体
3.1 字体大小： font-size: 值
3.2 设置字体类型： font-family: 楷体等等;
3.3 设置字体线型的粗细： font-weight: bold;
4. 列表
设置列表项前面的图形样式： list-style-type: circle(空心圆) / square(实心正方形)

CSS的布局
1.1行内元素：行内元素的特点是与其他行内元素在同一行，通常不可以设置宽和高
比如 input font a 标签都是行内元素

1.2 块级元素：块级元素表示自己独占一行，不与其他元素在同一行，可以设置宽和高

1.3 span标签：span标签是行内元素，span标签的本身是没有任何的样式的，只要是在编程中方便对选中的进行样式的设置

1.4 div标签：div标签代表的是块级元素，一个div代表着一块区域

1.5 div 的常用属性

1.6盒子布局的概念