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布局；
第三阶段：新的语义化块级元素布局。