CSS学习
<h2 id="css快速入门">CSS快速入门</h2><h3 id="导入css的几种方式">导入css的几种方式：</h3>
<ol>
<li>
<p>链接式（link标签）</p>
<pre><code class="language-html"><link rel="stylesheet" href="../css/Style.css">
</code></pre>
</li>
<li>
<p>内部样式（style标签）</p>
<pre><code class="language-html"><style>
h1{
color:green;
}
</style>
</code></pre>
</li>
<li>
<p>导入式- css2.1的方式（@import）---不推荐使用，了解即可</p>
<pre><code class="language-html"><style>
@import url("../css/Style.css");
</style>
</code></pre>
<p>导入的优先级：就近原则</p>
</li>
</ol>
<h3 id="三种选择器-重要">三种选择器-重要</h3>
<ol>
<li>
<p>标签选择器</p>
<p>标签{}</p>
<pre><code class="language-html"><style>
h1{
color:green;
}
</style>
</code></pre>
</li>
<li>
<p>类选择器（可跨标签）</p>
<p>.类名{}</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器学习</title>
<style>
.phil01{
color:green;
}
.phil02{
color:red;
}
</style>
</head>
<body>
<h1 class="phil01">选择器学习</h1>
<h1 class="phil02">选择器学习</h1>
<h1 class="phil03">选择器学习</h1>
<h1 class="phil04">选择器学习</h1>
</body>
</html>
</code></pre>
</li>
<li>
<p>id选择器</p>
<h1 id="id名称">id名称{}</h1>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器学习</title>
<!-- id选择器-->
<style>
#phil{
color: red;
}
</style>
</head>
<body>
<h1 id="phil">选择器学习</h1>
</body>
</html>
</code></pre>
</li>
</ol>
<p>注意：不遵循就近原则</p>
<p>优先级：id选择器 > 类选择器 > 标签选择器</p>
<h3 id="层次选择器">层次选择器</h3>
<ul>
<li>
<p>后代选择器</p>
<p>在某个元素的后面 祖爷爷爷爷爸爸你</p>
<pre><code class="language-html"><style>
body p{
background: red;
}
</style>
</code></pre>
</li>
<li>
<p>子选择器</p>
<p>一代 儿子</p>
<pre><code><style>
body>p{
background: green;
}
</style>
</code></pre>
</li>
<li>
<p>相邻兄弟选择器</p>
<p>下方的某一个相同元素同辈</p>
<pre><code><style>
.aaa+p{
background: red;
}
</style>
</code></pre>
</li>
<li>
<p>通用选择器</p>
<p>下方的所有相同元素同辈</p>
<pre><code><style>
.aaa~p{
background: yellow;
}
</style>
</code></pre>
</li>
</ul>
<h3 id="结构伪类选择器">结构伪类选择器</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child{
background: red;
}
</style>
<!-- 选择当前标签的父级，然后选择父级的第N个元素
注意：需要是当前元素才能生效！当第N个元素不是定义的标签时，无效
-->
<style>
p:nth-child(2){
background: blue;
}
</style>
<!-- 选择父级元素中该类型的第二个元素-->
<style>
p:nth-of-type(2){
background: yellow;
}
</style>
<!-- 鼠标移动上去后的效果-->
<style>
p:hover{
background: green;
}
</style>
</head>
<body>
<p>p1</p>
<h1>ddd</h1>
<p class="aaa">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>
</code></pre>
<p>效果图：</p>
<p>!(/Users/xiaofei/Library/Application Support/typora-user-images/image-20201202163122654.png)</p>
<h3 id="属性选择器">属性选择器</h3>
<p>类似正则表达式</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left;/*左对齐*/
display:block;/*设置块样式*/
background: blue;/*蓝色背景*/
width:50px;/*宽度*/
height:50px;/*高度*/
border-radius:10px;/*圆角*/
text-align:center;/*居中*/
color:gray;/*灰色字体*/
text-decoration:none;/*去掉下划线*/
margin-right: 5px;/*偏移量--间距*/
font: bold 20px/50px Arial;/*字体样式*/
}
.demo a{
background: white;
}
.demo a{
background: yellow;
}
.demo a{
color:red;
}
.demo a{
color: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="this is the first item" id="phil" title="I am title">1</a>
<a href="MyFirstCSS.html" class="this is the second item" title="I am title2">2</a>
<a href="Mysdfaljfql.png" class="my name is three" id="phil3">3</a>
<a href="aMysdfaljfql.jpg" class="my name is four this">4</a>
<a href="/a/b/c.jpg" class="five">5</a>
<a href="/a/b/e.png" class="six~">6</a>
<a href="image/123/13.jpg" class="seven---">7</a>
<a href="myd.doc" class="eight>>>">8</a>
<a href="mydiu.doc" class="nine<<<">9</a>
</p>
</body>
</html>
</code></pre>
<h3 id="字体样式">字体样式</h3>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!--
1. span标签：约定用span标签，想要重点突出的字
-->
<!-- span标签样式-->
<style>
h1{
/*对齐方式--居中*/
text-align: center;
}
span{
/*字体大小*/
font-size: 50px;
}
body{
/*字体样式：serif*/
font-family: serif;
}
.p1{
/*字体加粗*/
font-weight: bolder;
/*字体红色*/
color: red;
/*首行缩进2个字符*/
text-indent: 2em;
}
<!-- 字体风格-->
.p2{
/*字体 斜体 细 12px大小 emoji字体样式*/
font: oblique lighter 12px emoji;
}
</style>
</head>
<body>
<h1><span>无极</span>片段</h1>
<p class="p1">
一个小女孩在战场上横七竖八的尸体间寻找食物。一个身份尊贵的男孩说，如果她同意做他的奴隶，
那么他将给她一点吃的。小女孩接受了，但很快违背了承诺并带着食物逃跑，去寻找她的母亲。
跑到黑暗中时，小女孩遇到了一位漂亮的女巫。女巫问：“你想成为全世界男人都想要追求的公主吗？
但代价是你将永远无法体验到真爱和快乐。你接受吗？”“我愿意。”女孩回答。
</p>
<p class="p2">
其间，大将军穿上了他那闪亮的、绣满花纹的红色盔甲，正准备一场可能会成为有生以来第一次失败的壮烈战斗。
难以置信的是，刚纳入麾下的年轻奴隶对于战斗的结果具有决定作用。由于年轻奴隶超凡的才能——“超越风的速度”；
大将军再次体验了胜利的滋味。在部队庆功时，皇城中却传出了公爵叛乱的消息。光明大将军必须立刻班师回朝从敌方入侵者手中救出国王。
他命令年轻的奴隶随他一起，但在经过一片黑暗森林时，这两人却被神秘的分开了。这时女巫出现在大将军面前，打开命运之图，
图上显示一个穿着将军盔甲的人杀了国王。大将军不相信命运的力量，仰天长笑后他拔剑指向女巫，这时女巫不见了。
</p>
</body>
</html>
</code></pre>
<h3 id="文本样式">文本样式</h3>
<ol>
<li>颜色 color:red;</li>
<li>文本对齐方式 text-align:center;</li>
<li>首行缩进 text-indent:2em;</li>
<li>行高 line-height: 50px;</li>
<li>装饰 text-decoration: underline（下划线）、overline（上划线）、line-through（中划线）;</li>
<li>文本图片水平对齐 vertical-align: center</li>
</ol>
<p>代码：</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. 颜色
2. 文本对齐方式
3. 首行缩进
4. 行高
5. 装饰（上划线、中划线、下划线）
6. 文本图片水平对齐
-->
<style>
.p1{
/*1. 字体颜色*/
color: red;
/*2. 字体对齐*/
text-align: center;
}
.p2{
/*3. 首行缩进*/
text-indent: 2em;
background: blue;
height: 50px;
/*4. 行高*/
line-height: 20px;
}
.p3{
/*5. 下划线*/
text-decoration: underline;
}
.p4{
/*5. 中划线*/
text-decoration: line-through;
}
.p5{
/*5. 上划线*/
text-decoration: overline;
}
img,p6{
/*文本图片水平对齐*/
vertical-align:middle;
}
</style>
</head>
<body>
<p class="p1">
一个小女孩在战场上横七竖八的尸体间寻找食物。一个身份尊贵的男孩说，如果她同意做他的奴隶，
那么他将给她一点吃的。小女孩接受了，但很快违背了承诺并带着食物逃跑，去寻找她的母亲。
跑到黑暗中时，小女孩遇到了一位漂亮的女巫。女巫问：“你想成为全世界男人都想要追求的公主吗？
但代价是你将永远无法体验到真爱和快乐。你接受吗？”“我愿意。”女孩回答。
</p>
<p class="p2">
其间，大将军穿上了他那闪亮的、绣满花纹的红色盔甲，正准备一场可能会成为有生以来第一次失败的壮烈战斗。
难以置信的是，刚纳入麾下的年轻奴隶对于战斗的结果具有决定作用。由于年轻奴隶超凡的才能——“超越风的速度”；
大将军再次体验了胜利的滋味。在部队庆功时，皇城中却传出了公爵叛乱的消息。光明大将军必须立刻班师回朝从敌方入侵者手中救出国王。
他命令年轻的奴隶随他一起，但在经过一片黑暗森林时，这两人却被神秘的分开了。这时女巫出现在大将军面前，打开命运之图，
图上显示一个穿着将军盔甲的人杀了国王。大将军不相信命运的力量，仰天长笑后他拔剑指向女巫，这时女巫不见了。
</p>
<p class="p3">111111</p>
<p class="p4">222222</p>
<p class="p5">333333</p>
<p class="p6"><img src="../../../resources/image/mbg.png" alt="666" class="img">这是一段文字</p>
</body>
</html>
</code></pre>
<h3 id="超链接伪类">超链接伪类</h3>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类</title>
<style>
/* 设置样式 */
a{
text-decoration: none;
color: blue;
}
/*鼠标移动至区域的效果*/
a:hover{
color:yellow;
}
/*点击效果*/
a:active{
background:red;
}
/*阴影*/
#price{
text-shadow: orange 1px 1px 1px;
}
</style>
</head>
<body>
<a href="#">
<img src="../../../resources/image/qbs.png" alt="666">
</a>
<p>
<a href="">书名：乔布斯传</a>
</p>
<p>
<a href="">作者：沃尔特・艾萨克森</a>
</p>
<p>
<a href="" id="price">￥80</a>
</p>
</body>
</html>
</code></pre>
<p>阴影样式</p>
<p>text-shadow: 颜色 x偏移量 y偏移量 阴影圆角</p>
<h3 id="样式练习">样式练习</h3>
<p>目标样式</p>
<p>!(/Users/xiaofei/Library/Application Support/typora-user-images/image-20201204113926216.png)</p>
<p>html代码：</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="../css/列表样式练习style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品类别</h2>
<ul>
<li><a href="#">图书1</a>&nbsp;&nbsp;<a href="#">音响1</a>&nbsp;&nbsp;<a href="#">数字商品1</a></li>
<li><a href="#">图书2</a>&nbsp;&nbsp;<a href="#">音响2</a>&nbsp;&nbsp;<a href="#">数字商品2</a></li>
<li><a href="#">图书3</a>&nbsp;&nbsp;<a href="#">音响3</a>&nbsp;&nbsp;<a href="#">数字商品3</a></li>
<li><a href="#">图书4</a>&nbsp;&nbsp;<a href="#">音响4</a>&nbsp;&nbsp;<a href="#">数字商品4</a></li>
<li><a href="#">图书5</a>&nbsp;&nbsp;<a href="#">音响5</a>&nbsp;&nbsp;<a href="#">数字商品5</a></li>
<li><a href="#">图书6</a>&nbsp;&nbsp;<a href="#">音响6</a>&nbsp;&nbsp;<a href="#">数字商品6</a></li>
<li><a href="#">图书7</a>&nbsp;&nbsp;<a href="#">音响7</a>&nbsp;&nbsp;<a href="#">数字商品7</a></li>
<li><a href="#">图书8</a>&nbsp;&nbsp;<a href="#">音响8</a>&nbsp;&nbsp;<a href="#">数字商品8</a></li>
</ul>
</div>
</body>
</html>
</code></pre>
<p>css代码</p>
<pre><code class="language-css">#nav{
width: 300px;
background: gray;
}
.title{
font-size: 30px;
background: red;
}
ul li{
font-size: 20px;
font-weight: bold;
list-style: none;
text-indent: 1em;
line-height: 30px;
}
a{
color: black;
text-decoration: none;
}
a:hover{
background: yellow;
}
</code></pre>
<h3 id="背景图片及渐变色">背景图片及渐变色</h3>
<ul>
<li>背景图片</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图和渐变练习</title>
<style>
div{
width: 1000px;
height: 800px;
border: 1px solid green;
background-image: url("../../../resources/image/mbg.png")
}
.div1{
/*左右平铺*/
background-repeat: repeat-x;
}
.div2{
/*放一张原图*/
background-repeat: no-repeat;
/*设置位置*/
background-position: 200px 300px;
}
.div3{
/*上下平铺*/
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1">2222</div>
<div class="div2">2222</div>
<div class="div3">22222</div>
</body>
</html>
</code></pre>
<ul>
<li>渐变色</li>
</ul>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
</style>
</head>
<body>
</body>
</html>
</code></pre><br><br>
来源：https://www.cnblogs.com/philx/p/14097129.html
頁:
[1]