CSS学习
<h1 id="css学习">CSS学习</h1><h2 id="1-css简介">1 CSS简介</h2>
<p> Cascading Style Sheet 层叠级联样式表</p>
<p> CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位浮动等等</p>
<h2 id="2-选择器">2 选择器</h2>
<h3 id="21-标签选择器">2.1 标签选择器</h3>
<p> css注释符：/**/</p>
<h4 id="211-内部样式">2.1.1 内部样式</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<!--
规范：<style>可以编写css代码，每一个声明最好用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel="stylesheet" href="css/style.css">
<style>
h1{
color:rgb(32, 221, 79);
}
p{
color: blueviolet;
}
</style>
</head>
<body>
<h1>HelloWorld</h1>
<p>
Hello!
</p>
</body>
</html>
</code></pre>
<h4 id="222-外部样式">2.2.2 外部样式</h4>
<p>建议使用下列方法，html与css独立：</p>
<p>创建style.css</p>
<pre><code class="language-css">h1{
color: bisque;
}
</code></pre>
<pre><code class="language-html"><!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</code></pre>
<h3 id="22-类选择器">2.2 类选择器</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
类选择器的格式 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用
*/
.first{
color: red;
}
.second{
color: blue;
}
</style>
</head>
<body>
<h1 class="first">HelloWorld!</h1>
<h1 class="second">HelloWorld!</h1>
<h1 class="first">HelloWorld!</h1>
</body>
</html>
</code></pre>
<h3 id="23-id选择器">2.3 id选择器</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
id选择器：id必须保持全局唯一
#id名称{}
*/
#first{
color: red;
}
</style>
</head>
<body>
<h1 id="first">标题</h1>
</body>
</html>
</code></pre>
<h3 id="24-层次选择器">2.4 层次选择器</h3>
<pre><code class="language-html"><body>
<p>p1</p>
<p class="first">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</code></pre>
<p><img src="https://i.loli.net/2021/08/30/zA2fNYe8JisMFj7.png" alt="image-20210830210754844" loading="lazy"></p>
<h4 id="241-后代选择器">2.4.1 后代选择器</h4>
<pre><code class="language-css">body p{
background-color: aqua;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/30/gAvojtYzHBF5bUc.png" alt="image-20210830210652963" loading="lazy"></p>
<h4 id="242-子选择器">2.4.2 子选择器</h4>
<pre><code class="language-css">body>p{
background-color: aquamarine;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/30/nWrU4aj3ZqMbmys.png" alt="image-20210830210558453" loading="lazy"></p>
<h4 id="243-相邻兄弟选择器">2.4.3 相邻兄弟选择器</h4>
<pre><code class="language-css">.first +p{
background-color: blue;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/30/m4ZnWUY1oAEB78b.png" alt="image-20210830211921435" loading="lazy"></p>
<h4 id="244-通用选择器">2.4.4 通用选择器</h4>
<pre><code class="language-css">.first~p{
background-color: brown;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/30/2movZUdgzOKwtlf.png" alt="image-20210830211838394" loading="lazy"></p>
<h3 id="25-结构伪类选择器">2.5 结构伪类选择器</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
</code></pre>
<pre><code class="language-css">/*选中第一个子元素*/
ul li:first-child{
background-color: blue;
}
/*选中最后一个子元素*/
ul li:last-child{
background-color: aqua;
}
/*选中父元素下的第二个*/
p:nth-of-type(2){
background-color: yellow;
}
</code></pre>
<h3 id="26-属性选择器">2.6 属性选择器</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="demo1">
<a href="http://www.baidu.com" class="links item first" id="first>">1</a>
<a href="http://Super.icu" class="links item" id="second">2</a>
<a href="../images/123.png" class="links item">3</a>
<a href="../images/123.jpg" class="links item">4</a>
<a href="abc" class="links item">5</a>
<a href="/a.pdf" class="links item">6</a>
<a href="/abc.pdf" class="links item">7</a>
<a href="abc.doc" class="links item last">8</a>
</p>
</body>
</html>
</code></pre>
<p><img src="https://i.loli.net/2021/08/31/kRiM9vcAw8IleLY.png" alt="image-20210831005443227" loading="lazy"></p>
<p>美化界面</p>
<pre><code class="language-html"><style>
.demo1 a{
float:left;
display:block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: aqua;
text-align: center;
color: black;
margin-right: 5px;
font: bold 20px/50px Arial;
}
</style>
</code></pre>
<p><img src="https://i.loli.net/2021/08/31/UkgVlEGTrbehFXt.png" alt="image-20210831005505909" loading="lazy"></p>
<pre><code class="language-css">/*选择存在id属性的元素*/
a{
background-color: blue;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/31/DygZ4JBCo6RvOcA.png" alt="image-20210831005543654" loading="lazy"></p>
<pre><code class="language-css">/*选择id属性为first的元素*/
a{
background-color: red;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/31/8hBFWCf6JlYHrAv.png" alt="image-20210831005554464" loading="lazy"></p>
<pre><code class="language-css">/*选择class中有links的元素*/
a{
background-color: blueviolet;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/31/MGlBiyoJfExCu4R.png" alt="image-20210831005603941" loading="lazy"></p>
<pre><code class="language-css">/*选择href中以http开头的元素*/
a{
background-color: green;
}
</code></pre>
<p><img src="https://i.loli.net/2021/08/31/hPufUpYKnmljXyM.png" alt="image-20210831005616263" loading="lazy"></p>
<pre><code class="language-text">属性为：=
包含元素：*=
以*为开头：^=
以*为结尾：$=
</code></pre>
<h2 id="3-优先级问题">3 优先级问题</h2>
<h3 id="31-样式优先级">3.1 样式优先级</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
h1{
color:rgb(32, 221, 79);
}
</style>
</head>
<body>
<h1 style="color: red;">HelloWorld</h1>
</body>
</html>
</code></pre>
<pre><code>优先级：行内样式>内部样式>外部样式（**就近原则**）
</code></pre>
<pre><code class="language-html">（1）<link rel="stylesheet" href="css/style.css">
（2） <style>
h1{
color:rgb(32, 221, 79);
}
</style>
</code></pre>
<p>就近原则取（2）</p>
<h3 id="32-选择器优先级">3.2 选择器优先级</h3>
<p>id选择器>类选择器>标签选择器</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: red;
}
.first{
color: blue;
}
#second{
color: green;
}
</style>
</head>
<body>
<h1 id="second" class="first">HelloWorld!</h1>
</body>
</html>
</code></pre>
<p><img src="https://i.loli.net/2021/08/30/pCvET5cAf48PZMx.png" alt="image-20210830210836118" loading="lazy"></p>
<h2 id="4-美化网页元素">4 美化网页元素</h2>
<h3 id="41-字体美化">4.1 字体美化</h3>
<h4 id="411-span标签">4.1.1 span标签</h4>
<p>重点突出要突出的字，使用span套起来</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#first{
font-size: 50px;
}
</style>
</head>
<body>
Hello <span id="first">World!</span>
</body>
</html>
</code></pre>
<p><img alt="image-20210831052920198" loading="lazy"></p>
<h4 id="412-字体样式">4.1.2 字体样式</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
font-family: 字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
*/
body{
font-family: 宋体;
color: black;
}
h1{
font-size: 30px;
}
.p1{
font-weight: lighter;
}
.p2{
font-weight: 900;
}
</style>
</head>
<body>
<h1>CSS （层叠样式表）</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 </p>
<p class="p2">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 </p>
</body>
</html>
</code></pre>
<p><img alt="image-20210831052942470" loading="lazy"></p>
<h4 id="413-文本样式">4.1.3 文本样式</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
text-align:排版，居左，居中，居右
text-indent: 2em;段落首行缩进
img,span水平对齐：vertical-align: middle;
height,line-height行高和块的高度一致，可以上下居中
*/
h1{
color:rgba(0, 255, 255, 0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background-color: aqua;
height: 300px;
line-height: 300px;
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>CSS （层叠样式表）</h1>
<p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 </p>
<p class="p2">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 </p>
<p><img src="../../resources/images/纸飞机.png"><span>saafsa</span></p>
</body>
</html>
</code></pre>
<p><img alt="image-20210831052958908" loading="lazy"></p>
<h4 id="414-超链接伪类">4.1.4 超链接伪类</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*默认颜色*/
a{
text-decoration: none;
color: blue;
}
/*鼠标悬浮的颜色*/
a:hover{
color: brown;
font-size: larger;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
</style>
</head>
<body>
<a href="#"><img src="../../resources/images/纸飞机.png"></a>
<p><a href="#">纸飞机</a></p>
<p><a href="#">text</a></p>
</body>
</html>
</code></pre>
<h3 id="42-列表">4.2 列表</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a>&nbsp;&nbsp;</li>
<li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a>&nbsp;&nbsp;</li>
<li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>&nbsp;&nbsp;</li>
<li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a>&nbsp;&nbsp;</li>
<li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a>&nbsp;&nbsp;</li>
<li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a>&nbsp;&nbsp;</li>
<li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a>&nbsp;&nbsp;</li>
<li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;</li>
</ul>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">#nav{
width: 300px;
background-color: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background-color: red;
}
/*
list-style：
none：去掉原点
circle：空心圆
decimal：数字
suqare：正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
</code></pre>
<p><img alt="image-20210831052842492" loading="lazy"></p>
<h3 id="43-背景">4.3 背景</h3>
<h4 id="431-图片平铺">4.3.1 图片平铺</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
background-image: url("../../resources/images/纸飞机.png");
/*默认全部平铺*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
</code></pre>
<p><img alt="image-20210831052742719" loading="lazy"></p>
<h4 id="432-渐变">4.3.2 渐变</h4>
<p>工具：https://www.grabient.com/</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(256deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
</body>
</html>
</code></pre>
<h2 id="5-盒子模型">5 盒子模型</h2>
<h3 id="51-盒子">5.1 盒子</h3>
<p><img alt="image-20210831052418337" loading="lazy"></p>
<p>margin：外边距</p>
<p>padding：内边距</p>
<p>border：边框</p>
<h3 id="52-内外边距问题">5.2 内外边距问题</h3>
<p>Ⅰ.div{padding:?;margin:?}</p>
<ul>
<li>
<p>padding或margin属性有四个值时，顺序为上，右，下，左，顺时针</p>
</li>
<li>
<p>padding或margin属性有三个值时，顺序为上，左右，下</p>
</li>
<li>
<p>padding或margin属性有两个值时，顺序为上下，左右</p>
</li>
<li>
<p>padding或margin属性有一个值时，所有的边距一样</p>
</li>
</ul>
<p>Ⅱ.可以将外边距margin设为auto，可以使元素在容器内水平居中</p>
<h3 id="53-圆角边框">5.3 圆角边框</h3>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 10px solid red;
}
</code></pre>
<p><img alt="image-20210901150400891" loading="lazy"></p>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 50px 50px 0;
}
</code></pre>
<p><img alt="image-20210901150409426" loading="lazy"></p>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px 100px 100px 100px;
}
</code></pre>
<p><img alt="image-20210901150416876" loading="lazy"></p>
<p>图片边框：</p>
<pre><code class="language-css">img{
width: 280px;
height: 280px;
border: 10px solid red;
border-radius: 280px 280px 280px 280px;
}
</code></pre>
<p><img alt="image-20210901150425285" loading="lazy"></p>
<h2 id="6-浮动">6 浮动</h2>
<h3 id="61-display用法">6.1 display用法</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
block块元素
inline行内元素
inline-block是块元素，但是可以内联在一行
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
div元素
</div>
<span>行内元素</span>
</body>
</html>
</code></pre>
<p><img alt="image-20210901150438142" loading="lazy"></p>
<h3 id="62-float浮动">6.2 float浮动</h3>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
float: right;
}
</code></pre>
<p><img alt="image-20210901150451717" loading="lazy"></p>
<p>clear:清除浮动</p>
<h2 id="7-定位">7 定位</h2>
<h3 id="71-相对定位">7.1 相对定位</h3>
<p>position: relative;相对定位，利用上下左右进行调整</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
border: 1px dashed #191b9e;
background-color: blue;
position: relative;
left: 20px;
}
#second{
background-color: blue;
position: relative;
right: 20px;
}
#thrid{
background-color: blue;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="thrid">第三个盒子</div>
</div>
</body>
</html>
</code></pre>
<h3 id="72-绝对定位">7.2 绝对定位</h3>
<p>position: absolute;</p>
<p>定位：基于xxx定位，上下左右</p>
<p>1.没有父级元素定位的前提下，相对于浏览器定位</p>
<p>2.假设父级元素存在定位，通常相对于父级元素进行偏移</p>
<p>3.在父级元素范围内移动</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*绝对定位*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>
</code></pre>
<h3 id="73-固定定位">7.3 固定定位</h3>
<p>position: fixed;</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*绝对定位*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
/*固定定位*/
width: 100px;
height: 100px;
background-color: yellowgreen;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>
</code></pre><br><br>
来源：https://www.cnblogs.com/-SuPer/p/15316782.html
頁:
[1]