HTML+CSS基础学习-了解css(1)

CSS指层叠样式表(Cascading Style Sheets)，定义如何显示html元素，如文字大小、颜色、字体加粗等。样式表允许以多种方式规定样式信息，可以在单个html元素中，也可以在html页的头部，或者以外部文件的形式引入。

语法

主要两个部分构成：选择器和声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是需要改变样式的HTML元素。声明由属性和值组成，属性就是你需要改变的样式属性。多个声明由分号（;）,一般最后一条声明后也会加上分号。

示意图 来源w3school

注释

css中注释很简单，不用多说。/*注释语句*/

css样式设置方式

• 内联式
• 嵌入式
• 外部式

内联式

直接写在html标签style属性中。

这里文字是红色。

嵌入式

css样式代码写在页面的标签之间。一般嵌入式css写在之间。

外部式

css样式写在一个单独的文件中，扩展名.css，一般在head标签内使用link标签将文件链接到html文件内。

优先级

一般来说：内联式 > 嵌入式 > 外部式。 就近原则（离被设置元素越近优先级别越高）

css选择器

• 标签选择器 p{font-size:12px;}
• 类选择器

  /* .类选器名称{css样式代码;} */
  .main{font-size:14px;}
  

• ID选择器

  /* #类选器名称{css样式代码;} */
  #main{font-size:14px;}
  

• 子选择器> 用于选择指定标签元素的第一代子元素 .food>li{border:1px solid red;}
• 后代选择器 用于选择指定标签元素下的后辈元素 .first span{color:red;}
• 通用选择器* 匹配html中所有标签元素 * {color:red;}
• 伪类选择符 常用的也就这一个a:hover{color:red;}
• 分组选择符,

  h1,span{color:red;}
  /* 等价于 */
  h1{color:red;}
  span{color:red;}
  

类和ID选择器的区别

类选择器和ID选择器都可以应用于任何元素，但是他们有一些不同的地方。ID选择器只能使用一次，一个元素只能设置一个ID属性，而类选择器则可以使用多次，多个不同的元素使用，而且一个元素也可以同时设多个样式，在class属性中以空格分割设置多个类选择器名。

继承

继承是css的一种规则，它允许样式不仅应用于某个特定的html标签元素，而且应用于其后代。根据CSS，子元素可以从父元素继承属性。

权值

当为同一个元素设置了多个不同的css样式代码时，最终启用哪一个css样式，就取决于权值，使用权值最高的。据了解标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承也有权值但特别低，可以理解是最低的。

层叠

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。(就近原则)

!important

!important要写在分号的前面，设置某些样式具有最高权值。