css日记

 css：主要是用来规定网页上这些内容的样式。

 使用css的优点：

    1.代码比较简洁

    2.可读性比较强

    3.便于维护

    4.更关心内容，对搜索引擎比较友好

如何去使用css

  基础语法：

  选择器{

      属性: 属性值;（声明）

      属性: 属性值;。}

 选择器：选择页面中哪些元素去做样式的修改。

  声明：要做什么样的样式修改。

  声明：都是由属性和属性值组成的。中间用：，以分号结尾。

  css对缩进和空格不敏感，咱们可以通过合理的缩进来提高代码的可读性。

  css分为五类：文本，盒子，浮动，定位，背景。

  文本：

   字体，大小，颜色。

  盒子：宽，高，背景色，边框、

  根据书写位置的不同可以分为以下。

  1.行内式，内嵌式，外链式，导入式。

行内式写法：  直接写在标签style属性中

  行内式：写法简单。

  缺点：1.结构和样式没有分离。

  2.只对当前的标签生效。不能够复用。（注：开发中并不推荐）

外链式写法：<link rel="stylesheet" href="css/demo.css">

  通过link标签，引入外部的css文件。

  优点：

    结构和样式分离。

    样式可以复用。

    可以多个页面使用。

导入式写法：<style>

   @import url(css/demo.css);

 </style>

外链式：会先加载css，再去加载HTML页面。

导入式：会先加载HTML页面，再加载css。

《不推荐使用导入式，使用最多的是外链式。》

 选择器：选择页面上的元素进行样式的修改。

  标签选择器：

    通过标签名来选择相应的标签。

    会选择页面中所有的相应标签，不管嵌套关系是怎么样的。

    用途：a标签，li标签。利用标签选择器，进行默认样式的初始化。

    因为标签选择器会选择页面中所有的相应标签，实际工作中，不会用来更改某一个标签的样式。

 类选择器

    通过标签的class属性来选择相应的标签。

    class值是可以重复的。

    格式：

    .class属性值{声明; }

    类选择器选择的是拥有相同class属性的标签元素。

    class属性是可以有多个的。命名规则与ID值是一样的。字母开头，后面跟 数字，下划线，横线。

    css样式书写样式 最多的选择器就是类选择器。

    通配符。*

    可以选择包括body在内的所有标签。

    现在不常用。因为效率不高。

    有的标签没有相应的属性，有的标签有相应的属性，这个时候使用通配符，所有的标签都会去执行一次。

    ID选择器：

    通过给标签设置一个ID值，然后通过这个ID值来选择标签。

    写法：

     #id{声明； }

    一个页面中ID值是唯一的，ID选择器只会选择一个标签。

    id值的写法规范：以字母开头，后面可以是数字，下划线或横线。

    痛点：

      假如有多个标签，有同样的样式，使用ID选择器的时候，需要分别给他们设置ID值，然后再重复的设置一样的样式。

      id常用场景：不是用来设置样式，配合js去添加事件的。