css标签学习
目录
前端之CSS
层叠样式表
注释
/*单行注释*/
/*
多
行
注
释
*/
语法结构
选择器 {属性1：属性1的值; 属性2：属性2的值;属性3：属性3的值...}
三种引入方式
<!--1、head内style标签内部直接书写css代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
p {
color: red;
}
</style>
<body>
<p>一身诗意千寻瀑，万古人间四月天</p>
</body>
</html>
/*2.1、link标签引入外部css文件*/
/*css文件名： mycss.css 文件内容：*/
/*xx功能区css样式开始*/
p {
color: red;
}
/*xx功能区css样式结束*/
<!--2.2、link标签引入外部css文件--> <!--推荐使用此方法-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
<link rel="stylesheet" href="mycss.css">
</style>
<body>
<p>一身诗意千寻瀑，万古人间四月天</p>
</body>
</html>
<!--3、直接在标签内通过style属性书写css样式--> <!--不推荐使用此方法-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<body>
<p style="color: red">一身诗意千寻瀑，万古人间四月天</p>
</body>
</html>
如何查找标签
基本选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器
基本选择器
1/标签选择器 x {}
2/id选择器 #x {}
3/类选择器 .x {}
4/通用选择器 * {}
标通常都必须有的属性：
id 用来唯一标识标签
class 标签类属性(******)
ps：可以理解成python面向对象的继承
你可以给任意的标签加任意的属性名和属性值
<!--测试时可将 各选择器 分别注释以测试-->
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>输诚</title>
<style>
/*标签选择器，使所有div标签的内容变为红色*/
div {
color:red;
}
/*id选择器，使id为指定值的标签的内容变为绿色*/
#hero {
color: green;
}
/*类选择器，使类属性为指定值的标签内容变为粉色*/
.info {
color:pink;
}
/*通用选择器，使所有标签内容变为蓝色*/
* {
color:blue;
}
</style>
</head>
<body>
<span id="hero">不才</span>
<div class="info data"> <!--多个class属性值要以空格分隔-->
<p>挽林徽因
<span class="info">一身诗意千寻瀑，万古人间四月天</span>
</p>
</div>
<div class="data">
一身诗意千寻瀑，你是人间四月天
</div>
</body>
</html>
组合选择器
后代选择器 x y {}
儿子选择器 x>y {}
毗邻选择器 x+y {}
弟弟选择器 x~y {}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>输诚</title>
<style>
/*后代选择器，使得div标签包含的所有标签的内容都变为红色*/
div p {
color:red;
}
/*儿子选择器，使得div标签内的所有span标签的内容都变为绿色*/
div>span {
color:green;
}
/*毗邻选择器，使得div标签下方的第一个指定类型的标签的所有内容都变为蓝色*/
div+div {
color:blue;
}
/*弟弟选择器，使得div标签下方的所有指定标签的所有内容都变为粉色*/
div~span {
color:pink;
}
</style>
</head>
<body>
<div>
<span>我是div里面的第一个span</span>
<p>我是div里面的第一个p
<span>我是div里面的第一个p里面的span</span>
</p>
<span>我是div里面的第二个span</span>
</div>
<div>我是第一个div下面的第一个标签
<p>我是第一个div下面的第一个标签的p标签
<span>不知名span标签</span>
</p>
</div>
<span>我是div下面的第一个span</span>
<span>我是div下面的第二个span</span>
</body>
</html>
属性选择器
可以给 任意标签 添加 属性， 属性可以是任意个，属性值可以是任意值
但是属性名讲究 见名知意
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>输诚</title>
<style>
/*将含有指定属性singer的标签内容都变成红色*/
[singer] {
color:red;
}
/*将属性值等于指定属性值的标签内容都变成绿色*/
[info="不才"] {
color:green;
}
/*将指定标签中 等于该属性值的标签内容变为粉色*/
p[info="挽林徽因"] {
color:pink;
}
</style>
</head>
<body>
<span singer="不才">不才</span>
<span singer>不才</span>
<p info="不才">不才
<span>一身诗意千寻瀑，你是人间四月天</span>
</p>
<p info="挽林徽因">
一身诗意千寻瀑，万古人间四月天
</p>
</body>
</html>
即 属性选择器 可以只指定 属性，也可以指定属性对应的属性值， 也可以指定标签下的指定属性对应的属性值
分组与嵌套
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>输诚</title>
<style>
/*想要给下方body中三种标签都加上同一种样式*/
/*方法一*/
div {
color: red;
}
p {
color: red;
}
span {
color: red;
}
/*方法二:分组*/
div,p,span {
color:red;
}
/*嵌套, 不同选择器混合使用：毗邻选择器与标签选择器嵌套使用*/
div+p,span {
color:red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>
</html>
伪类选择器
<!--主要是针对于 a标签 超连接标签 来使用的-->
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>输诚</title>
<style>
/*链接未被点击过时的颜色样式*/
a:link {
color:red;
}
/*鼠标悬浮在链接上时的颜色样式*/
a:hover {
color:yellow;
}
/*鼠标点击时链接的颜色样式*/
a:active {
color:green;
}
/*链接点击后链接的颜色样式*/
a:visited {
color:black;
}
/*焦点输入框：当选中输入框时，输入框背景颜色样式就会变为红色*/
input:focus {
background-color:red;
}
</style>
</head>
<body>
<a href="https://www.bilibili.com/video/av3327271?from=search&seid=8180765432034182224" target="_blank">神秘链接</a>
<input type="text">
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
/*在指定标签内的所有内容的最开头字符设定样式*/
p:first-letter {
color: red;
font-size: 24px;
}
/*在指定标签内所有内容最开头加上content内容，并设定插入的内容的样式*/
p:before {
content: '*';
color: green;
}
/*在指定标签内所有内容最末尾加上content内容，并设定插入的内容的样式*/
p:after {
content: '?';
color: deeppink;
font-size: 48px;
}
</style>
</head>
<body>
<p>一身诗意千寻瀑，万古人间四月天</p>
<p>一身诗意千寻瀑，万古人间四月天</p>
<p>一身诗意千寻瀑，万古人间四月天</p>
<p>一身诗意千寻瀑，万古人间四月天</p>
</body>
</html>
选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
/*id选择器*/
#p1 {
color: green;
}
/*类选择器*/
.c1 {
color: aqua;
}
/*标签选择器*/
p {
color: red;
}
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">p</p>
</body>
</html>
相同的 选择器 不同的引入方式
———— 就近原则 谁最靠近指定标签谁生效
不同的 选择器 相同的引入方式
———— 行内样式 > id选择器> 类选择器 > 标签选择器
如何修改标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
/*设置标签的高度和宽度*/
div {
width:400px;
height:100px;
}
/*设置字体*/
p {
font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
/*设置字体大小和字重（粗细）*/
p {
font-size:24px;
font-weight:bold;
}
</style>
</head>
<body>
<div>不才</div>
<div>不才</div>
<p>一身诗意千寻瀑，万古人间四月天</p>
</body>
</html>
字重表
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，700等同于bold |
| inherit | 继承父标签的粗细值 |
修改文本颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
p {
/*四种修改文本颜色的方式*/
color: red;
color: rgb(0,0,255);
color: #FF6700;
color: rgba(0,0,255,0.8); /*第四个值为透明度 0.0~1.0*/
}
</style>
</head>
<body>
<p>一身诗意千寻瀑，万古人间四月天</p>
</body>
</html>
文字属性
文字对齐
text-align 属性来规定标签中文本的对齐方式
| 值 | 描述 |
|---|---|
| left | 靠左对齐，默认也是靠左对齐 |
| right | 靠右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
| inherit | 继承父标签的text-decoration属性的值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
/*设定指定标签内文本的对齐方式*/
p {
/*text-align:right;*/
/*text-align:left;*/
/*text-align:center;*/
text-align:justify;
}
/*去掉a标签默认的显示内容的下划线*/
a {
text-decoration:none;
}
/*首行缩进指定大小*/
p {
text-indent:32px;
}
</style>
</head>
<body>
<p>一身诗意千寻瀑，万古人间四月天</p>
<a href="https://www.bilibili.com/video/av3327271?from=search&seid=8180765432034182224" target="_blank">神秘链接</a>
</body>
</html>
背景属性
背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
div {
widht=600px;
height=600px;
/*background-color:red;*/
/*background-image:url("蓬莱.png")*/
/*background-repeat:no-repeat;*/
/*background-position:center;*/
/*以上4行可合并成下面一行，以空格分隔，可以被自动识别*/
background:no-repeat center url("蓬莱.png")
}
</style>
</head>
<body>
<div>不才
<span>
一身诗意千寻瀑，万古人间四月天
</span>
</div>
</body>
</html>
边框
边框属性：
border-width
border-style
border-color
#i1 {
border-width:2px;
border-style:solid;
border-color:red;
}
/*通常使用简写方式*/
#i1 {
border:2px solid red;
}
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
/*除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：*/
#i1 {
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
border-radius （画圆）
用这个属性能实现圆角边框的效果
将border-radius设置为长或高的一半 即可得到一个圆形
div {
width: 400px;
height: 400px;
background-color: red;
border: 3px solid black;
border-radius: 50%;
}
display
用于控制HTML标签的显示效果
| 值 | 描述 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示，也不占页面空间，一半用于配合JS代码使用 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分 |
| display:"inline" | 按行内元素显示，此时再设置元素的width/height/margin-top/margin-bottom/float属性都不会有什么影响 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输诚</title>
<style>
/*div {*/
/*display: none;*/
/*}*/
/*inline将块儿级标签变成行内标签*/
/*div {*/
/*display: inline;*/
/*}*/
/*span {*/
/*display: block;*/
/*}*/
/*将选择的标签既具有行内标签特点又有块儿级标签的特点*/
span {
display: inline-block;
height: 400px;
width: 400px;
background-color: red;
border: 3px solid black;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
display:none 与 visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
取出无序列表 ul 的自带样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
padding-left: 0;
}
</style>
</head>
<body>
<ul>
<li>书籍1</li>
<li>书籍2</li>
<li>书籍3</li>
<li>书籍4</li>
<li>书籍5</li>
</ul>
</body>
</html>
