CSS层叠式样式知识点_层叠式样式表什么当前页面吗-CSDN博客

本文链接：https://blog.csdn.net/nobody_618/article/details/56486123

CC层叠式样式主要用于页面布局+修饰

1、优点
（1）修改简单
（2）可以独立存在，多个页面可以同时使用

2、分类
（1）浏览器缺省（默认）
（2）内联样式（作用于当前标记）
（3）内部样式（作用与当前页面）
（4）外部样式（作用于整个网站）

3、内联样式
... （多个属性之间用分号隔开）
例：天猫 (文本：天猫；文本颜色：红色；字体大小：12px）
（谷歌浏览器最小的字号为12px）
字体样式：
颜色：color:..
字号大小：font-size:...px（一定要加单位px）

4、内部样式
<head>
<style type="text/css">
选择器{属性：属性值}
</style>
</head>
<body>
...
...
...
...
...
...
</body>

选择器
（1）标记选择器
标记名称{属性：属性值}
例：
<head>
<style type="text/css">
span{color：red;font-size:12px} （标记span中的文本颜色设置为红色，字体大小为12px）
p{color:bule;font-size:24px} （标记p中的的文本颜色为蓝色，字体大小为24px）
</style>
</head>
<body>
...
...
...
...
...
...
</body>
（2）类选择器
例：
<head>
<style type="text/css">
/*odd 为红色；even 为蓝色*/ （CSS中注释符号：/*......*/）
.odd{color:red} （类选择器前要加点）
.even{color:bule}
</style>
</head>
<body>
...
...
...
...
... (类可以有多个，用空格隔开；该文本为蓝色，原因：优先读取样式表下面的样式）
</body>

class="" 命名规则：第一个字符不能为数字
一般命名：
【1】菜单：menu
【2】导航：nav
【3】头部：top
【4】底部：footer
【5】新闻列表：news_list
【6】新闻详情：news_info
【7】内容：content

（3）ID选择器（一般不常用，容易与js冲突）
例：
<head>
<style type="text/css">
#tm{color="red"}
</style>
<body>
... （文本内容为红色）
...
...
</body>

从单纯的CSS中，id名可以重复
id主要用于js、jquery，id名称不能重复使用

（4）内部选择器之间的优先级关系：标记选择器 < 类选择器 < ID选择器

（5）继承关系：被多个样式选中，优先级替换相同的样式，不同样式依旧实现。

5、外部样式
（1）新建外部样式表（文件格式：.css）
@charset"utf-8";
选择器{属性：属性值}

（2）引入外部样式表
<link rel="stylesheet" href="外部样式文件名称.css" type="text/css" />

同一外部样式表可以嵌入多个页面；
一个页面可以引入多个外部样式表；