css的学习

文章目录

内联样式
内部样式
外部样式
CSS语法格式
选择器
- 基本选择器
- - ID 选择器
  - 元素选择器
  - 类选择器
  - - 不带标签名
    - 带标签名
  - 通用选择器
  - 并集选择器
  - 选择器的优先级
- 扩展选择器
- - 组合选择器
  - 属性选择器
  - 伪类选择器
  - 伪元素选择器

css 是 Cascading Style Sheets，层叠样式表。
层叠含义是多种样式可以作用于同一个html元素上，且都会有独立的表现效果。

内联样式

在标签内使用 style 属性指定 css 代码。

<div style="color:red;">hello css</div>

内联样式不推荐使用，因为表现和内容耦合在一起，不好维护。

内部样式

在 head 标签内定义 style 标签，style 的标签体内容就是 css 代码。

<head>
<style>
div{color:blue;}
</style>
</head>

外部样式

在 head 标签内定义 link 标签，引入外部的 css 资源文件。

<head>
<link rel="stylesheet" href="css/1.css">
</head>

或者

<head>
<style>
@import “css/1.css”；
</style>
</head>

CSS语法格式

选择器 {属性名1: 属性值1属性名2: 属性值2属性名3: 属性值3...			
}

选择器：筛选具有相同特征的元素。
属性对：属性名和属性值使用冒号分隔，而属性对之间使用分号分隔。

选择器

基本选择器

基本选择器也叫简单选择器，点击查看更多详情。

ID 选择器

语法：

#id属性值{}

例如：

<style>#male {color: blue;}
</style>

元素选择器

直接写标签名，语法：

标签名称 {属性名1: 属性值1属性名2: 属性值2属性名3: 属性值3...	
}

类选择器

不带标签名

语法：

.class属性值 {属性名1: 属性值1属性名2: 属性值2属性名3: 属性值3...	
}

说明：将样式作用于 class 属性值匹配的元素上

带标签名

语法：

标签名称.class属性值 {属性名1: 属性值1属性名2: 属性值2属性名3: 属性值3...	
}

说明：上面的选择器，是将样式作用于标签名称和 class 属性值都匹配的元素上。

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

语法：

* {属性名1: 属性值1属性名2: 属性值2属性名3: 属性值3...	
}

并集选择器

并集选择器也叫分组选择器。

选取 h1，h2，h3 元素，将它们的文本颜色设为 green：

h1, h2, h3 {
color: green; 
}

选取 id 值分别为 name，password，age 的元素，将它们的文本颜色设为 green：

#name, #password, #age {
color: green; 
}

选择器的优先级

id 选择器 > 类选择器 > 元素选择器

扩展选择器

组合选择器

后代选择器匹配属于指定元素后代的所有元素。

#d2 p {font-size: 120px;
}

说明：表示将 id 属性值为 d2 的元素内部的所有 p 元素的字号设为 120px。

点击查看更多组合选择器。

属性选择器

属性选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素：

a[target] {background-color: yellow;
}

点击查看更多属性选择器。

伪类选择器

语法：

选择器:状态 {}

锚伪类：

/* 未访问的链接 */
a:link {color: #FF0000;
}/* 已访问的链接 */
a:visited {color: #00FF00;
}/* 鼠标悬停链接 */
a:hover {color: #FF00FF;
}/* 已选择的链接，即按鼠标左键点击未松开的状态 */
a:active {color: #0000FF;
}

点击查看详情。