css选择器以及基础介绍

转义字符（实体）

&nbs p;空格转义；

&l t;小于号；

&g t;大于号；

&c opy;版权；

&r eg;注册商标；

语法结构——&转义字符;

meta

中文乱码问题；

文件的编码格式——UTF-8

HTML的编码格式——utf-8

<meta charset="utf-8">

设置当前HTML页面的编码格式

在浏览器运行当前HTML页面时，告诉浏览器当前编码格式。

字符集

概念——存放所使用的所有的字符（汉字）

分类

ANSI-美国

ISO-8859-1-欧洲

GBK-中国

Unicode-万国码

UTF-8

UTF-16

计算机的存储方式

利用二进制方式——1和0；

中国：将汉字转换成二进制，然后进行存储（GBK）；读取时是将二进制转换成汉字，进行显示(UTF-8)。

CSS内容

注意：

只编写HTML页面时，给出不同标签在浏览器运行时会有不同样式。

在不同浏览器中，相同标签现实的样式（效果）不同。

浏览器对HTML页面的标签进行解析，不同的浏览器，解析方式有差异——最终显示的样式不同。

概念：层叠样式表——Cascading Style Sheets。

作用：定义HTML标签在浏览器中效果。

特点——实现了

HTML页面的结构与样式分离

。

结构——通过HTML的标签完成

样式——通过css内容完成

版本：

96年第一版

98年第二版本

目前是第三版本css3

如何使用css

第一种方式：内联样式；

通过设置HTML标签的标准属性style完成css样式

问题：HTML结构与css样式的耦合程度不高。

第二种方式：内联样式；

通过设置HTML标签的标准属性class完成除上述样式进行关联；

再通过head标签中，定义style标签编写css样式内容。

.class名称{

样式名称：样式值；

}

第三种方式——外联样式

css样式支持独立的样式——扩展名为“.css”; 将所有关于css样式的内容，编写在独立的css文件中；

HTML页面中，通过head标签中引入link标签，来关联css样式文件

<link rel="stylesheet" href="文件路径">

link标签：

作用：关联外部css文件

必要属性：

rel属性——设置当前关联文件的类型；

stylesheet——表示css的样式文件；

href——设置css的样式路径；

在浏览器中运行三种HTML页面时，这三种css样式的加载是否有区别？

答：加载的时候是没有任何区别的！当浏览器解析加载的时候，会自动识别碰到css属性的时候都会另外再单独去加载，所以三种方式是没有任何区别的！

css语法

css的注释：/ * css的注释内容 * /单多行一样；

结构：选择器{样式名称：样式值；}（固定写法）；

“{}”称之为声明块，声明结构；

css语法，称之为声明；

注意：

冒号：必须是英文输入；

分号：必须是英文输入；

注意——css本身不规定是否换行，允许编写成一行的，但是css代码可读性很差。快速格式化快捷键：选中内容之后Ctrl+shift+f。

选择器

类选择器

.class{
}

ID选择器

#id{
}

标签选择器

tag{
}

通配符选择器

*{
}

优先级别：

style行内样式＞ID选择器＞类选择器＞元素选择器＞通配符选择器

组合选择器

选择器1，选择器2，选择器3{}——并集选择器

选择器1选择器2选择器3{}——交集选择器，目的是为了做个性化设置的。



属性选择器



HTML设置默认选择样式

使用通配符选择器方式；

设置body/HTML标签选择器来设置可以继承的属性。

css样式是否具有继承性

HTML标签是否具有特殊性

作用——在不同浏览器中，显示效果相同

在实际开发中，第三方写好了一个css文件。

设置颜色

使用英文单词

必须记得单词名称，和对应效果；

英文单词来表示颜色数量是有限的；

RGB方式：red green blue三原色

语法格式：rgb(red,green,blue)

每个颜色值的范围：0~255（推荐使用）

每个颜色值的范围：0%~100%

常见颜色：

黑色——rgb（0，0，0）；

白色——rgb（255，255，255）

红色——rgb（255，0，0）

绿色

蓝色

黄色——rgb（255，255，0）

青色——rgb（0，255，255）

十六进制RGB表示

语法格式：#+red+green+blue

红绿蓝三种颜色分别用两位数字来表示，范围：00~ff；

通过js控制颜色变化时，使用RGB十进制表示方式。

进制：

二进制

八进制

十进制

十六进制：每十六进一

块级和行内元素

块级元素

概念：每个块级元素占页面的整个宽度；

作用：用于完成页面内的布局；

代表——div-无语义化

行内元素

概念：每个内联元素占当前文本的宽度；

作用：用于来设置指定文本样式；

代表——span-无语义化

关于页面布局：

以table标签完成页面布局代表——微软必应bing搜索；

以div完成页面布局——bootstrap官网

发展历史：

第一阶段：table布局；

第二阶段：div布局；

第三阶段：新的语义化块级元素布局。