css初识
css
层叠样式表, 主要是用来调节标签样式
css注释
/* 这是注释, 多行只是直接换行 */
注释的使用
css 应该是独立的一个文件
/* 页面通用样式 */
/* 导航条样式 */
/* 侧边栏样式 */
css语法结构
选择器 {
属性名: 属性值;
属性名: 属性值;
属性名: 属性值;
属性名: 属性值;
}
css 三种引用方式
- 1 : 外部css 文件(最正规的方式)
<link rel="stylesheet" href="mycss.css">
- 2 : 在head 标签内使用 style 标签进行css代码的书写
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
div {
background-color: red;
}
</style>
</head>
- 3 : 行内式 在标签内部使用style属性进行 css 代码的使用(极力不推荐)
<p style="background-color: red"></p>
css 学习流程
如何查找标签
要想对标签进行样式的修改 , 首先要找到标签的所在位置 , 我们慢慢学习
基本选择器
最基础的选择器
-
标签选择器 元素选择器
# css 代码 div { color: red; } # html 标签 <div>我是你爸爸</div> -
类选择器
# 语法 . 类名 { color:red; } # css .d1 { color:red; } # html 标签 <div class="d1"> 这是div标签 </html> -
id 选择器
# 语法 #+id {属性:属性值;} # css 代码 #d1 { color:red; } # html代码 <div id="d1"> 这是div标签</div> -
通用选择器
# 语法 * {属性:属性值;} # css代码 * { color:red;}
组合选择器
-
后代选择器
找到所有后代进行样式的控制
# 语法 标签+空格+标签 {属性名:属性值;} # css代码 div span { color:red; } # html 标签 <div> <span></span> </div> -
儿子选择器
只找后代的儿子代
# 语法 标签 > 标签 {属性名:属性值;} # css代码 div > span { color:red; } # html 标签 <div> <span></span> </div> -
毗邻选择器
选择在此标签之后的一个指定的标签(只能选择一个)
# 语法 标签 + 标签 {属性名:属性值;} # css代码 <style> a + span { color: red; } </style> # html 代码 <span>这是上面的span</span> <a href="">我是你爸爸爸爸</a> <span>这是下面的span</span> <span>这是下下面的span</span> -
弟弟选择器
选中此标签之后的所有指定的标签(弟弟标签)
# 语法 标签 ~ 标签 {属性名:属性值;} # css 代码 <style> a ~ span{ color: red; } </style> # html标签 <span>这是上面的span</span> <a href="">我是你爸爸爸爸</a> <span>这是下面的span</span> <span>这是下下面的span</span>
属性选择器
属性选择器, 就是找到 具有属性名的标签
注意 html 标签可以自定义属性
# 语法
[属性名=属性值] {属性名:属性值;}
属性值可以写可以不写, 当写的时候, 找到的就是具有此属性值的标签
# css 代码
<style>
[username="zhang"] {
color: red;
}
</style>
# html 标签
<span username="zhang">313131</span>
分组与嵌套
当很多类标签都需要同一个css 代码进行控制的时候, 就需要css代码
# 选择器之间使用, 分割 选择器之间是平级的
# css代码
.c1,#d1,p {
color: red;
}
# html代码
<div class="c1">快要下课了 我好饿 好饿 好饿 我真的好饿
<h1>我是h标签</h1>
</div>
<span id="d1">快要下课了 我好饿 好饿 好饿 我真的好饿</span>
<p>快要下课了 我好饿 好饿 好饿 我真的好饿</p>
伪类选择器
以a标签为例
点击之前
a:link {
color:red;
}
# 鼠标悬浮
a:hover {
color;black;
}
# 点击时
a:active {
color:green;
}
# 点击之后
a:visited {
color:gray;
}
# input 标签 获取焦点之后
input :focus{
background-color: red;
}
# html标签
<a href="https://www.mzitu.com">点我1</a>
<a href="https://www.luffycity.com">点我2</a>
<a href="https://www.sogo.com">点我2</a>
<a href="https://www.sajdkasd.com">点我2</a>
伪元素选择器
# 在之前或者之后添加文本
css代码
p:before {
content: '你好啊';
color: red;
}
p:after {
content: '?';
color: blue;
}
html 代码
<p>大家啊上课登记卡圣诞快乐撒娇的空间sad健身卡大的萨达</p>
