CSS学习笔记
<h1 id="1学习路线">1、学习路线</h1><blockquote>
<ol>
<li>CSS是什么</li>
<li>CSS怎么用（快速入门）</li>
<li><strong>CSS 选择器 （重点+难点）</strong></li>
<li>美化网页（文字、阴影、超链接、列表、渐变....）</li>
<li>盒子模型</li>
<li>浮动</li>
<li>定位</li>
<li>网页动画（特效效果）</li>
</ol>
</blockquote>
<h2 id="11什么是css">1.1、什么是CSS</h2>
<blockquote>
<p>Cacading Style Sheel 层级样式表</p>
<p>CSS ：表现（美化网页）</p>
<p>字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...</p>
</blockquote>
<h2 id="12快速入门">1.2快速入门</h2>
<blockquote>
<p>外部CSS的优势：</p>
<ol>
<li>内容表现分离</li>
<li>网页结构统一、可以实现复用</li>
<li>样式十分丰富</li>
<li>利用SEO，容易被搜索引擎收录。</li>
</ol>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--网页内置CSS-->
<style>
h1{
color: #e70880;
}
</style>
<!--外部CSS文件引入：
推荐使用外部引入格式
-->
<link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<!--优先级：就近原则，利标签最近的CSS优先展示-->
<!--行类样式-->
<h1 style="color: #000cfa" >大家好，欢迎学习CSS</h1>
</body>
</html>
</code></pre>
<h1 id="2选择器">2、选择器</h1>
<blockquote>
<p>作用：选择页面上的某一个或者某一类元素。</p>
</blockquote>
<h2 id="21基本选择器">2.1、基本选择器</h2>
<blockquote>
<p>优先级：id > class > 标签</p>
</blockquote>
<ol>
<li>
<p>标签选择器</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器标签名{} */
h1{
color: #e70880;
}
p{
color: #e70880;
}
</style>
</head>
<body>
<h1>大家好，欢迎学习CSS</h1>
<p>段落标签</p>
</body>
</html>
</code></pre>
</li>
<li>
<p>类选择器 class</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
优点：可以将各种标签归类，可以复用
*/
.wyx{
color: #023df5;
}
</style>
</head>
<body>
<h1 class="wyx">类选择器</h1>
<h1 class="wyx">类选择器</h1>
</body>
</html>
</code></pre>
</li>
<li>
<p>id选择器</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 #id的名称{}
id必须保证全局唯一！
*/
#wyx{
color: #023df5;
}
#w{
color: #00fa3b;
}
</style>
</head>
<body>
<h1 id="wyx">ID选择器</h1>
<h1 id="w">ID选择器</h1>
</body>
</html>
</code></pre>
</li>
</ol>
<h2 id="22层次选择器">2.2、层次选择器</h2>
<blockquote>
<ol>
<li>
<p>后代选择器：在某个元素后面的所有元素</p>
<pre><code class="language-css">body p{
}
</code></pre>
</li>
<li>
<p>子选择器：选择某个元素的后面一代元素</p>
<pre><code class="language-css">body>p{
}
</code></pre>
</li>
<li>
<p>兄弟选择器：选择同辈的元素向下的一个元素（同辈）</p>
<pre><code class="language-css">body h1 + p{
}
</code></pre>
</li>
<li>
<p>通用选择器：选择同辈的元素向下的所有元素（同辈）</p>
<pre><code class="language-css">body h1~p{
}
</code></pre>
</li>
</ol>
</blockquote>
<h2 id="23结构伪类选择器">2.3、结构伪类选择器</h2>
<p>伪类：在选择的元素中添加一些条件继续选择</p>
<pre><code class="language-css">/*选择ul下的第一个li*/
ul li:first-child{
background-color: #00fa3b;
}
/*选择ul下的最后一个li*/
ul li:last-child{
color: #e70880;
}
/*选中当前元素父元素下的第n个元素*/
p:nth-child(1){
color: #82ff00;
}
/*选中当前元素父元素下类型为（当前元素类型）的第n个元素*/
p:nth-of-type(2){
color: #e00808;
}
</code></pre>
<h2 id="24属性选择器常用"><strong>2.4、属性选择器（常用）</strong></h2>
<blockquote>
<p>id+class 结合~</p>
<pre><code class="language-css">/*
属性名，属性名=属性值（可以是正则）
= 绝对等于
*= 包含这个属性值
^= 以这个开头的
$= 以这个结尾
格式：标签名[属性名=属性值]{
}
*/
</code></pre>
</blockquote>
<h1 id="3美化网页">3、美化网页</h1>
<p>span标签：用来接住重要的关键字，突出重点。</p>
<h2 id="31字体样式">3.1、字体样式</h2>
<blockquote>
<p>font-family: 楷体; 字体样式<br>
font-size: 50px; 字体大小<br>
font-weight: bold; 字体粗细<br>
color: #ff0606; 字体颜色</p>
<pre><code class="language-css">/*
oblique：斜体
bolder：粗体
字体大小：
字体样式
*/
font:oblique bolder 16px"楷体，Arial";
</code></pre>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family: 楷体; 字体样式
font-size: 50px; 字体大小
font-weight: bold; 字体粗细
color: #ff0606; 字体颜色
-->
<style>
body{
font-family: 楷体;
}
h1{
font-size: 50px;
}
p{
font-weight: bold;
color: #ff0606;
}
#p1{
/*
oblique：斜体
bolder：粗体
字体大小：
字体样式
*/
font:oblique bolder 16px"楷体，Arial";
color: blue;
}
</style>
</head>
<body>
<h1>大圣娶亲</h1>
<p id="p1">牛魔王抢走了铁扇公主的宝扇，将一众人等带回妖窟，至尊宝为逃避铁扇假装跳悬崖，不料真的掉了下去，却救了三个被抓住的小偷。宝在昏迷中将三人带到盘丝洞，这时白晶晶慕盘丝大仙之名前来拜师，宝向其说明前因后果，决定和她成亲。另一方面，牛魔王逼迫紫霞结婚，紫霞幻想自己的意中人会踏着五彩祥云来救自己。白晶晶看见了紫霞留在至尊宝心里的一滴眼泪，发现宝之所以回到五百年前其实是为了寻找紫霞，她留下一封信后离去。至尊宝迷乱之余，春三十娘来到，将宝和其他三人杀死。宝死后回到了水帘洞，他决定戴上金箍圈，一心一意保护唐僧西天取经。</p>
<p>紫霞和青霞原是佛祖缠在一起的灯芯，两人前世斗争激烈。紫霞夺走了至尊宝的月光宝盒，又在他的脚上印下了3颗痣。紫霞要至尊宝带她走，牛魔王要纳紫霞为妾，而牛的妹妹牛香香也要嫁至尊宝，一时乱作一团。铁扇公主也赶来和牛魔王杀在一起。牛魔王擒回紫霞逼迫她与他成亲，被绑在一旁的唐僧流下了同情的泪水。至尊宝拿起金箍套在头上，他便不再是凡人了。孙悟空驾云来到牛府，要救唐僧一行去西天取经。</p>
<p>故事发生在《大话西游》上一集《月光宝盒》之前500年。至尊宝被月光宝盒带回到五百年前，恰巧遇到紫霞仙子。紫霞仙子曾有一誓言，只要谁能拔出她手中的紫青宝剑，就是她的意中人。不想宝剑被至尊宝拔出，紫霞决定以身相许，却遭至尊宝拒绝。</p>
</body>
</html>
</code></pre>
<h2 id="32文本样式">3.2、文本样式</h2>
<ol>
<li>颜色： color rgb：颜色函数 rgba：颜色函数，a代表透明度取值0~1</li>
<li>文本对齐方式：text-align = center</li>
<li>首行缩进：text-indent: 2em</li>
<li>行高：line-height: 单行文字上下居中！ line-height = height</li>
<li>装饰：text-decoration:值（有上中下三种横行）超链接去除下划线。none</li>
<li>文本图片水平对齐：vertical-align: middle</li>
</ol>
<h2 id="33阴影">3.3、阴影</h2>
<pre><code class="language-css">/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#p{
text-shadow: #bfa 10px -10px 2px;
}
</code></pre>
<h2 id="34超链接伪类">3.4、超链接伪类</h2>
<blockquote>
<pre><code class="language-css">a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</code></pre>
</blockquote>
<h2 id="36列表">3.6、列表</h2>
<pre><code class="language-css">/*ul li*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
url(xxx.gif) 图片列表
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
</code></pre>
<h2 id="36背景">3.6、背景</h2>
<pre><code class="language-css">/* 颜色，图片，图片位置，平铺方式 */
div{
background: red url("/images/1.jpg" 270px 10px no-repeat)
}
/* 分开写 */
div{
background-color: red;
background-image: url("/images/1.jpg");
background-repeat: no-repeat;
background-position: 270px 10px;
}
</code></pre>
<h2 id="37渐变">3.7、渐变</h2>
<p>渐变CSS参考网站</p>
<h1 id="4盒子模型">4、盒子模型</h1>
<p><img src="https://img2020.cnblogs.com/blog/2294494/202102/2294494-20210201180052404-827092710.png" alt="" loading="lazy"></p>
<p>margin：外边距</p>
<p>padding：内边距</p>
<p>border：边框</p>
<h2 id="41边框">4.1、边框</h2>
<ol>
<li>
<p>边框的粗细</p>
</li>
<li>
<p>边框的样式</p>
</li>
<li>
<p>边框的颜色</p>
<pre><code class="language-css">border: 粗细 样式 颜色
border: 1px solid red
</code></pre>
</li>
</ol>
<h2 id="42圆角边框">4.2、圆角边框</h2>
<p>四个角，是可以选择圆的方向，也可以将头像弄成圆形</p>
<p>border-radius: 10px;</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid orange;
border-radius: 10px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
</code></pre>
<h2 id="43盒子阴影">4.3、盒子阴影</h2>
<pre><code class="language-css">/*box-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
div{
box-shadow: #bfa 10px -10px 2px;
}
</code></pre>
<h1 id="5浮动">5、浮动</h1>
<p>行内元素可以被包含到块级元素中，反之，不可以。</p>
<h2 id="51display">5.1、display</h2>
<p>改变元素的类型常用以下三种值：</p>
<p>block（块元素）</p>
<p>inline（行内元素）</p>
<p>inline-block（同时拥有两个元素的属性）</p>
<h2 id="52float">5.2、float</h2>
<ol>
<li>向左浮动</li>
<li>向右浮动</li>
</ol>
<h2 id="53父级边框塌陷问题面试常考">5.3、父级边框塌陷问题(面试常考)</h2>
<pre><code class="language-css">/*
clear: right;右侧不允许有浮动元素
clear: left;左侧不允许有浮动元素
clear: both;两侧侧不允许有浮动元素
*/
</code></pre>
<p>解决方案：</p>
<ol>
<li>
<p>增加父级元素的高度</p>
</li>
<li>
<p>在最后增加一个空的div标签，清除浮动</p>
<pre><code class="language-css">选中增加的div{
clear: both;
margin: 0;
padding: 0;
}
</code></pre>
</li>
<li>
<p>在父级元素(CSS)中添加一个 overflow: hidden</p>
</li>
<li>
<p><strong>父类添加一个伪类</strong>(常用推荐)</p>
<pre><code class="language-css">父级元素:after{
content: '';
display: block;
clear: both;
}
</code></pre>
</li>
</ol>
<h1 id="6定位">6、定位</h1>
<h2 id="61相对定位">6.1、相对定位</h2>
<p>相对于原来自己的位置发生偏移，原来的位置会保留。</p>
<pre><code class="language-css">标签{
position: relative;/*开启相对定位*/
top: -20px;
left: 20px;
bottom: 40px;
right: 40px;
}
</code></pre>
<h2 id="62绝对定位">6.2、绝对定位</h2>
<ol>
<li>没有父元素的情况下，相对于浏览器定位</li>
<li>假设父级元素存在定位，我们通常会相对于父元素定位，不能脱离父级元素</li>
<li>它不在标准文档流中，原来位置不会保留。</li>
</ol>
<h2 id="63固定定位-fixed">6.3、固定定位 fixed</h2>
<p>相对于浏览器不会动，如何滚动浏览器都不会动，常用于导航栏。</p>
<pre><code class="language-css">标签{
position: fixed;
/*上下左右任选两个来确定位置*/
}
</code></pre>
<h2 id="64z-index">6.4、z-index</h2>
<p>当图层被覆盖时，利用z-index调节图层显示0~无穷大，级数越高，越优先显示。</p>
<pre><code class="language-css">z-index: 2;
/*透明度 取值0~1*/
opacity: 0.5;
</code></pre><br><br>
来源：https://www.cnblogs.com/Rampant/p/14358033.html
頁:
[1]