CSS初涉（1）--基础

CSS

---

1. 选择器
   在HTML文件的head标签中设置<style>标签，统一将style设置写在里面，用以下的方式将修饰到各个标签中。
   
   • id选择器
     #名称{CSS样式设置}，在使用这些修饰属性时，只需要在对应的标签中设置id为响应的名称。但需要注意，标签的id号必须是唯一的，也就是说一个style用这种方式只能用一次， 代码重用性不高，一般不使用这种方法。
   • class选择器
     class选择器的大致用法与id选择器相同，不同的是它的style写法是.名称{CSS样式设置}。class属性可以重用，让代码的重用性比较高，一般使用频率很高。
   • 标签选择器
     标签选择器是将页面中所有的某一类标签，设置上某一类样式。格式为***(标签名）{CSS样式设置}。用这样的方式所有的这一类标签都应用这一种相同的样式。
   • 层级选择器
     用空格隔开，使用class选择器的style写法。.c1 .c2 标签名{CSS样式设置}用空格隔开，就可以将c1、c2的样式修饰到该标签上，类似于class选择直接修饰所有的这类标签，如果两种设置有冲突时，遵循编写代码的就近原则。
   • 组合选择器
     写法与层级选择器相同，只不过可以将id选择器和class选择器标签选择器组合使用，中间用逗号隔开，比如#c1,.c2 div{...}。
   • 属性选择器
     对选择的标签再通过属性进行一次筛选，相当于选择有某个属性的选择器。例如.c1[***="***"]{CSS样式设置}
2. CSS样式也可以写在单独文件中 写法为<link rel="stylesheet" href="***.css">
3. CSS的注释写法为/* 注释内容 */。
4. 边框
   边框设置为border：宽度，样式，颜色；例如`border:4px dotted red;
5. 标签常用设置
   标签设置中主要有以下样式：
   
   • height–高度，可用像素和百分比设置；
   • width–宽度，可用像素和百分比设置；
   • text-align：center–文字水平方向居中
   • line-height=标签高度时垂直居中
   • color–字体颜色
   • font-size–字体大小
   • font-weight–字体宽度
6. 块浮动float
   可以让div标签块飘起来，可以堆叠。float左右上下…
   当父div中的子div标签大小不适合会超出时，可以在父标签之中最后增加一个<div style="clear:both"></div>就会自动将父标签扩充至适合子标签的大小。

7. 标签显示display和可见性visibility
   display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏

   • display：none；–让标签消失,隐藏的元素不会占用任何空间
   • display：inline；–更改块标签为内联标签
   • display：block；–将内联标签改为块标签

   • display：inline-block；–同时具有两种性能

   • visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

8. 边距设置
   padding–内边距，指定指定上下左右像素值和百分比的方式使用。
   margin–外边距，可以有auto，指定上下左右像素值和百分比的方式使用，四个值默认按顺时针方向赋值。

   margin：0 auto
   网页中两端留白需要将本层div设置宽度并且设置matgin：0 auto 就可以将这个div居中。