css基本概念

css概念

1.css优点：

css能够极大提高工作效率。

• 能够使代码精简，可读性提高。
• 便于维护
• 结构与样式分离
• 对于搜索引擎更加友好，因为搜索引擎更注重内容。

2.css概念

cascading style sheets 层叠样式表

通俗的说：规定了HTML标签在网页上的显示样式。

样式：HTML标签在页面的显示效果。

3.css基本语法

1.选择器：谁要做样式改变。

2.声明：做什么样的样式改变。

选择器{

​ 声明；（属性：属性值）

}

	  p{
            color: #e67e22;
            text-align: center;
            font-size: 24px;
            font-family: "竹刻书法字体";
        }

每一条声明由一个属性和一个属性值组成，使用冒号分割，以分号结尾。

css 对于空格，换行 缩进不敏感。

合理的缩进和换行可以调高代码的可阅读性。

4.css小属性

文本样式

字体，颜色，大小。

字体：

font-family: "竹刻书法字体";

字体分为英文字体和中文字体。

字体可以有多个属性值，用逗号隔开，后面的字体表示备用字体。

英文常见字体：Arial consolas。

中文常见字体：宋体，微软雅黑，黑体。

若文本中有中文和英文，需要设置两种文字。英文字体在前，中文字体在后。

中文字体也有英文名称：

宋体，SimSun,微软雅黑 Micrsoft Yahei

盒子样式

宽 高 背景色 边框

width：宽，单位为px。

height：高，单位为px。

background-color：背景色。属性值为英文单词名称，16进制，RGB（red,green,blue）

border:边框 多个属性值，属性值之间用空格隔开。顺序为：宽度，线的类型，颜色

border: 1px solid red;

5.书写位置

根据书写位置的不同，可分为四种：行内式，内嵌式，外链式，导入式。

行内式

​ css声明直接写在标签的style属性中。

优点：写法简单。

缺点：

• 结构和样式没有分离，不利于维护。
• 样式不能复用，只能对当前元素生效。

开发中不推荐使用。

内嵌式

将css代码写在style标签中。style标签放置在head标签中。

<style>
        h1{
            color: red;
        } 
 </style>

优点：

• 结构与样式分离
• 样式可以复用，便于维护

缺点：

• 只对当前页面生效。

外链式

<link rel="stylesheet" href="css/demo1.css">

通过link标签将独立的css文件引入到html页面中。

注意：css文件名不能以数字开头。

rel表示引入文件与页面的关系。

优点：

• 结构与样式完全分离
• 便于维护
• 多个页面可以复用
• 可以利用浏览器缓存机制，加快页面加载速度。

导入式

有很多问题，不建议使用。

<style>
      @import url("css/demo1.css");
</style>

注意点:

在页面加载时，外链式时css文件与html一同加载；导入式时先加载html文件，等html文件加载完，再加载css文件。推荐使用外链式。

https://www.cnblogs.com/my–sunshine/p/6872224.html