css基础知识整理

1 什么是CSS?

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
2 CSS语法

CSS基础语法
CSS规则由两个主要部分构成:选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性,每个属性有一个值,属性和值被冒号分开

比如 selector{property:value}
3 创建CSS

CSS 创建样式表分为三种情况:
内部样式表

<head>
  <style type="text/CSS">
      选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
      div{width:200px; height:200px; border:1px solid red;}
  </style>
</head>


行内式(内联样式)

<div style="width:200px;height:100px;border:1px solid black;"></div>


外部样式表(外链式)

  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>



样式优先级:内联样式>内部样式>外部样式
三种样式表区别:

行内样式表 :优点 书写方便;缺点 没有实现样式和结构相分离;使用情况 较少;控制范围 控制一个标签(少)。

内部样式表:优点 部分结构和样式相分离; 缺点 没有彻底分;使用情况 较多;控制范围 控制一个页面(中)。

外部样式表:优点 完全实现结构和样式相分离; 缺点 需要引入;使用情况 最多,推荐;控制范围 控制整个站点(多)。

4 id和class选择器

ID选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id 属性和身份证一样具有唯一性。

HTML元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 “#” 来定义。注意: id 属性不能以数字开头。

语法:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


class选择器:
class 选择器用于描述一组元素的样式,也叫做类选择器。

class 可以在多个元素中使用,并且一个元素也可以指定多个类名。

在 CSS 中,类选择器以一个点 “.” 号来定义。

同样的类名的第一个字符也不能使用数字。

语法:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


ID 选择器和类(class)选择器的区别:
相同点:

都可以应用于任何元素

不同点:

ID 选择器只能在文档中使用一次,而类选择器可以使用多次。可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名),而ID只能指定一个。

你可能感兴趣的:(css基础知识整理)