HTML基础介绍三

2022-08-11 23:31:32 阅读：161 来源： 互联网

标签：span color 标签基础介绍 HTML div 选择器 css

# CSS

层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看

```python
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

# css的语法结构
选择器 {
　　属性1:值1;
　　属性2:值2;
　　属性3:值3;
　　属性4:值4;
}

# css的三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
　　h1 {
　　　　color: burlywood;
　　}
</style>
2.link标签引入外部css文件(最正规的方式解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: green">老板好要上课吗?</h1>

css的学习流程
　　1.先学如何查找标签
　　　　css查找标签的方式你一定要学会
　　　　因为后面所有的框架封装的查找语句都是基于css来的
　　　　css选择器很简单很好学不要有压力!!!

2.之后再学如何添加样式
"""
```

# CSS选择器

### 基本选择器

```python
# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器

　
```

### 组合选择器

```PYTHON
"""
在前端我们将标签的嵌套用亲戚关系来表述层级
<div>div
　　　　<p>div p</p>
　　　　<p>div p
　　　　　　<span>div p span</span>
　　　　</p>
　　　　<span>span</span>
　　　　<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子是div的孙子
div是p的父亲
...
"""

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器

后代选择器
div span {
　　color: red;
}

儿子选择器
div>span {
　　color: red;
}

毗邻选择器
div+span { 同级别紧挨着的下面的第一个
　　color: aqua;
}

弟弟选择器
div~span { 同级别下面所有的span
　　color: red;
}
```

### 属性选择器

```python
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

[username] { !*将所有含有属性名是username的标签背景色改为红色*!
　　background-color: red;
}

[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!
　　background-color: orange;
}

input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!
　　background-color: wheat;
}

标签：span,color,标签,基础,介绍,HTML,div,选择器,css
来源： https://www.cnblogs.com/molei123ok/p/16578298.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML基础介绍三