css:
是给html标签装饰的,变得更好看。
注释:
单行注释:/*注释内容*/
多行注释:/*
注释内容
注释内容
注释内容
*/
通常我们在写css代码时也会用注释来划分区域(html代码多,同样css代码也会很多)
比如:
/*顶部导航条样式*/
/*左侧菜单栏样式*/
/*右侧菜单栏样式*/
css语法结构:
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
css的三种引入方式:
1.style标签内部直接书写
<style>
h1 {
color: chartreuse;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="my_css_file">
3.行内式
<h1 style="color: green">老大好,欠抽吗</h1>
css的学习流程:
1.先学如何查找标签
因为后面所有的框架封装的查找语句都是基于css的
2.在学如何添加样式
css选择器(基本选择器、组合选择器、属性选择器)
基本选择器:
1.id选择器
#d1 {
color: greenyellow;
} /*找到id是d1的标签 将文本颜色变成绿黄色*/
2.类选择器
.c1 {
color: red;
} /*找到class值里面包含c1的标签*/
3.元素/标签选择器
span {
color: red;
} /*找到所有的span标签*/
4.通用选择器
* {
color: green;
} /*将html页面上所有的标签全部找到*/
组合选择器:
在前端,我们将标签的嵌套用亲戚关系来表述层级
<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的父亲
1.后代选择器
div span {
color: red;
}
2.儿子选择器
div>span {
color: red;
}
3.毗邻选择器
div+span {
color: aqua;
} /*同级别紧挨着的下面的第一个*/
4.弟弟选择器
div~span {
color: red;
} /*同级别下面所有的span*/
属性选择器
属性选择器是以[]作为标志的
1.含有某个属性
[username] {
background-color: red;
}
/*将所有含有属性名是username的标签背景色改为红色*/
2.含有某个属性并且有某个值
[username='jason'] {
background-color: orange;
}
/*找到所有属性名是username并且属性值是jason的标签*/
3.含有某个属性并且有某个值的某个标签
input[username='jason'] {
background-color: wheat;
}
/*找到所有属性名是username并且属性值是jason的input标签*/