程序员的网络日志

CSS

# CSS

# CSS的发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

# CSS 网页的美容师

CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。

CSS的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！

# 开始学习

CSS 全称Cascading Style Sheets，通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS语句都有

  • 一个场所（元素，例如卧室），
  • 一个属性（例如窗帘，地毯）
  • 一个提供给属性的样式（例如颜色）

举例：

p {
  width: 700px;
}

说明一下在上面的例子中各个 单词的含义

image-20200411211604433

选择器：用于指定CSS样式作用的标签，花括号内是对该标签设置的具体样式。这里选择的是p标签，说明要对p标签的样式做修改；

属性：是对指定的标签设置的样式属性，例如宽度、字体大小和文本颜色等。

属性值：属性的值，例如设置宽度为700像素、字体大小为20像素、设置文本颜色为红色等。在这里红色和像素就是属性值。

属性和属性值之间用英文冒号 “:” 连接。

多个“键值对”之间用英文分号：“;” 进行区分。

整个过程称为规则。如果只有一个样式，可以写在一行。一个典型的规则包含一个选择符、若干属性和属性值

# 注释

CSS规则是使用     /*  需要注释的内容  */  进行注释的，
即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

p {
  font-size: 14px;                 /* 所有的字体是14像素大小*/
}

# 在HTML文件写CSS

type代表是CSS样式。目前没有其他的通用样式，但是HTML的设计者 考虑到以后会有其他样式类型。

<style type="text/css">

CSS可以写到那个位置？ 是不是一定写到html文件里面呢？

# 内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

JS