CSS简介
CSS(Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化(渲染)。
css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式
(css语言代码也可以直接写在html文件中) 采用的语言是级联样式表 (Cascading Style Sheet)，也属于标记语言。CSS语法
CSS语法
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2
}注释语法
/*注释内容*/css代码书写位置(引入方式)
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法
可以分为行内式、内部式和外部式三种。
CSS的几种引入方式
1.style内部直接编写css代码
平时学习练习的时候推荐使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>春宵一夜值千金</title>
<style>
h1 {
color: darkorchid;
}
</style>
</head>
<body>
<h1>今晚搞个通宵</h1>
</body>
</html>2.link标签引入外部css文件代码
正式工作，实际生产环境推荐使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>春宵一夜值千金</title>
<!--引入外部css文件-->
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<h1>今晚搞个通宵</h1>
</body>
</html>
3.标签内直接书写代码
一般情况下不推荐使用，容易造成代码冗余现象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>春宵一夜值千金</title>
</head>
<body>
<h1 style="color: darkorchid">今晚搞个通宵</h1>
</body>
</html>css注释
单独开设的css文件内代码会很多，可以借助于注释管理(方便后期查找)
注释举例：
/*导航条样式*/
/*左侧边栏样式*/
/*核心样式*/
/*右侧边栏样式*/基本选择器
css是用来调节标签样式，那为什么需要学习选择器？
因为同一个页面上有很多相似的标签，并且这些标签在不同的位置有不同的样式，所以为了能够区分我们需要先学习如何查找指定的标签。
如何在页面上查找标签？
标签选择器>>>：通过标签名直接查找
<style>
div { /*查找所有的div标签并件内部文本改为暗紫色*/
color: darkorchid;
}
</style>
类选择器(关键符号为句点符) >>>：通过class值查找标签
<style>
.c1 { /*查找所有含有c1样式类的标签并改为蓝色*/
color: blue;
}
</style>
id选择器(关键字为井号#)>>>：通过id值查找标签
<style>
#d1 { /*查找所有含有d1样式类标签并改为浅绿色*/
color: aqua;
}
</style>
通用选择器
<style>
* { /*查找body内所有的标签*/
color: aqua;
}
</style>
组合选择器
为了区分嵌套标签之间的关系，我们发明了一种称呼
<div>
<p>
<span></span>
</p>
</div>span是p的儿子，是div的孙子也可以说是div的后代。
p是div的儿子，也是div的后代，是span的父亲。
div是p的父亲，是span的爷爷。
-
后代选择器(特征为空格)空格的意思为后代
/*查找div内部所有的后代span*/
<style>
div span {
color: blue;
}
</style>
- 儿子选择器(特征：>)
/*查找div内部所有的儿子span*/
<style>
div > span {
color: blue;
}
</style>
-
毗邻选择器(特征为+)
/*查找同级别下面紧挨着的第一个span标签
(不可有其他标签间隔，若有其他标签间隔则毗邻选择器无法生效)*/
<style>
div + span {
color: red;
}
</style>
-
弟弟选择器(特征为~)
/*查找同级别下面所有的span标签
(与毗邻选择器不同的是，弟弟选择器不需要紧挨着)*/
<style>
div + span {
color: red;
}
</style>
属性选择器
标签可以有默认的属性也可以自定义属性
<p id="d1" class="c1" name="jason" pwd="123">123</p>- 查找name属性名的标签
[name] {
color: red;
}
- 查找含有name属性名并且值为俊杰的标签
<style>
[name=俊杰] {
color: red;
}
</style>
- 查找含有name属性并且值为俊杰的p标签
<style>
p[name='俊杰'] { /*查找含有name属性名并且值为俊杰的标签*/
color: red;
}
</style>
分组与嵌套
多个相同选择器并列使用
<style>
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
</style>多个不同选择器并并列使用
<style>
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
</style>不并列同样可以使用组合选择器
<style>
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
</style>直接筛选
<style>
div#d1 { /*查找div标签中的id为d1*/
color: red;
}
</style>查找class为c1的div标签
<style>
div.c1 { /*查找class为c1的div标签*/
color: red;
}
</style>编写d1>div>.c1>span.c2代码
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>别搞别搞</title>
<style>
#d1>div>.c1>span.c2 {
color: red;
}
</style>
</head>
<body>
<div id="d1">1
<div>2
<p class="c1">3
<span class="c1">4</span>
<span class="c2">5</span>
</p>
<p class="c2">6
<span class="c1">7</span>
<span class="c2">8</span>
</p>
</div>
</div>
</body>
</html>
查找id为d1的标签内部的儿子div
并且在儿子div内部查找class为c1的儿子标签
并且在该儿子内部查找class为c2的儿子span伪类选择器
鼠标悬浮在上面
a:hover {
color: orange;
}a标签默认的颜色会变化 第一次是红色 后面是紫色
focus(聚焦状态)
将input框被用户点击并即将录入数据的过程看成是focus状态(聚焦状态)
未访问的链接
/* 未访问的链接 */
a:link {
color: #FF0000
}鼠标移动到链接上
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}选定的链接
a:active {
color: #0000FF
}已访问的链接
a:visited {
color: #00FF00
}溜了
1374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
