HTML是网页内容的载体
CSS样式是表现（外观控制）
Javascript是行为，用来实现网页特效效果

CSS-----层叠样式表

用于定义HTML内容在浏览器中的显示样式

CSS作用：

CSS简化HTML相关标签，网页体积小，下载快
解决内容与表现分离的问题
更好地维护网页，提高工作效率

CSS基本语法

CSS样式规则

CSS规则由两部分构成：选择器，声明选择器：控制给网页中的哪部分设置样式

CSS样式的引用

写在<head></head>标签内：
<style type="text/css">
    CSS样式
</style>

注意：

建议在每个声明后都加入分号

所输入的{}:;都需要在英文条件下输入

CSS样式的书写不区分大小写

字体的更改所选择的字体b必须要x系统自带或已经下载

简单代码实现

实现结果

当具有相同属性值的时候，可将选择器名称写在一起，并用，隔开

CSS注释： /* 注释 */

CSS使用方法

行内样式（内联样式）
内部样式表（嵌入样式）
外部样式表
导入式

行内样式

在开始标签内添加style样式属性

<p style="color:red;">内容</p>

内部样式

将css 样式代码

写在<head></head>标签内：
<style type="text/css">
    CSS样式
</style>

对于版本较低的浏览器，不识别style 标签，则需要用html注释标签将属性值内容包含起来

CSS外部样式

将CSS样式代码写在独立的一个文件中

扩展名：css文件名.css

引入外部文件

放入<head></head>中
<link href="XX.css" rel="stylesheet" type="text/css"/>

优点：（最常用）

css和html分离
多个文件可以使用同一个样式文件
多文件引用同一个css文件时，css只需加载一次

代码练习

实现结果

CSS导入式

@import "外部css样式"

写在style标签内

由于先读取完html再加载css文件，所以存在若浏览器加载很慢的情况下，会出现页面没有样式的情况

使用方法区别

类别	引入方法	位置	加载
行内样式	开始标签内style	html文件内	同时
内部样式	head中style内	html 文件内	同时
链入外部样式	head中link引用	css样式文件，与html文件分离	页面加载时，同时加载css样式
导入式@import	在样式代码最开始处	css样式文件，与html文件分离	在读取完html文件之后加载

css使用方法优先级

行内样式>内部样式>外部样式

说明：链入外部样式表与内部样式表的优先级取决于所处位置的先后
最后定义的优先级最高（就近原则）

CSS选择器

标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器

标签选择器

以html标签作为选择器设置样式，那么使用该标签的内容都将引用该样式

类选择器

为html标签添加class属性：

可对不同类型元素的同一个名称的类选择器设置不同的样式规则：

同一元素可以设置多个类，之间用空格隔开

代码应用

代码应用结果

ID选择器

id是唯一的，不可多个元素设置同一id，一元素也不可同时设置多个id

代码应用：

群组选择器

集体统一设置样式

class和id区分大小写

全局选择器

所有标签设置样式

*{
    color:blue;
    ....
}

后代选择器

伪类选择器

伪类选择器定义特殊状态下的样式
无法用标签、id、class、及其它属相实现

链接伪类：激活状态，已访问状态，未访问状态，鼠标悬停状态

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活的链接

：hover用于访问的鼠标经过某个元素时：active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）

链接伪类标签的顺序

说明：

a:hover必须置于a:link和a:visitd之后才有效
a:active必须置于a:hover之后才有效
伪类名称对大小写不敏感

对不同的链接设置不同的伪类

在a 内添加class属性

CSS继承和层叠

CSS继承

从父代继承部分css属性

好处

子标签继承部分父标签的属性
简化代码

为了防止浏览器版本过低，部分属性无法兼容的问题，一般使用群组选择器来定义大面积相同的标签属性

当继承得来的样式与标签本身默认的样式发生冲突时，系统将忽略继承得来的样式

CSS层叠

可以定义多个样式
不冲突时，多个样式可层叠为一个
冲突时，按不同样式的优先级来应用样式

CSS优先级（选择器）

ID选择器>class选择器>标签选择器>通配符

同类样式重复定义时，后定义的优先级高（就近原则）

CSS优先级规则同一样式表中

权值相同--就近原则（离被设置元素越近优先级越高）
权值不同--根据权值来判断CSS样式，哪种CSS样式权值高，就用哪种样式

选择器权值：

标签选择器：1
类选择器和伪类选择器：10
ID选择器：100
通配符选择器：0
行内样式：1000

权值规则：

统计不同选择器的个数
每类选择器的个数乘以相应权值
把所有的值相加得出选择器的权值

！important规则

可调整样式规则的优先级
添加在样式规则之后，中间用空格隔开

div{color:red !important;}

在一定条件下，该优先级最高

CSS样式命名

采用英文字母，数字，"-"","_"命名
以小写字母开头，不能以数字和“-”"_"开头
命名形式：单字，连字符，下划线和驼峰（驼峰：除第一个单词外，其他首写字母大写）
使用有意义命名

常用的CSS样式命名

页面结构

页头：header
页面主体：main
页尾：footer
内容：content/container
容器：container
导航：nav
侧栏：sidebar
栏目：column
页面外围控制：wrapper
左右中：left right center

导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题：title
摘要：summary

功能

标志：logo
广告：banner
登陆：login
登陆条：loginbar
注册：register
搜索：search
功能区：shop
标题：title

id不要滥用，谨慎使用（js需要用id来进行操作）

适当使用class

CSS ---基础学习