CSS学习记录1

来源：互联网发布：淘宝那家茶叶好编辑：程序博客网时间：2024/04/29 15:11

CSS 也叫层叠样式表

1、优点
修改简单

可以独立存在（多个页面可以同时使用）

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

（4）外部样式（作用于整个网站）

3、内联样式（直接在标记中写的属性）

写法：

内容
字体样式：
颜色:color:red；
字号大小：font-size:12px；
多个属性之间用分号（；）隔开

谷歌浏览器最小的字号为12px

4、内部样式

写法：

<head>
<style type="text/css">
选择器{属性:属性值；}
</style>
</head>
天猫
天猫
天猫
选择器

（1）标记选择器

写法：

标记名称{属性:属性值；}

（2）类选择器

写法：

.类名{属性:属性值；}

类命名：

内容
class="" 命名规则：第一个字符不能为数字；第一个字符可以是连接符（-），下划线（_）；其他的符号都不行；

class="类名1 类名2" 类名可以用多个（优先读取的是样式表下面的类样式）

常用类名命名：

菜单：menu
导航：nav
头部：top
底部：footer
新闻列表：news_list
新闻详情：news_info
内容：content
/*注释方法*/

（3）ID选择器

写法：

#id名{属性:属性值；}
内容
从单纯的css中，id名可以重复

id主要用于js，jQuery。id名称不能重复

选择器的优先级比较
标记选择器 < 类选择器
类选择器 < ID选择器
标记选择器 < ID选择器

总结：标记选择器 < 类选择器 < ID选择器

5、外部样式

（1）新建外部样式表 index.css

写法：

@charset "utf-8";
选择器{属性:属性值；}
（2）引入外部样式表
<link rel="stylesheet" href="index.css" type="text/css"/>
同一个外部样式表可以嵌入多个页面；

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

各个排版样式的优先级
内联样式 > 内部样式
内部样式外部样式（按照html页面中上下顺序）

0 0