css学习
<h2 id="1什么是css">1、什么是CSS</h2><p>如何学习</p>
<ol>
<li>CSS是什么</li>
<li>CSS怎么用</li>
<li><strong>CSS选择器（重点，难点）</strong></li>
<li>美化网页（文字，阴影，超链接，列表，界面。。。。）</li>
<li>盒子模型</li>
<li>浮动</li>
<li>定位</li>
<li>网页动画（特效）</li>
</ol>
<h3 id="11什么是css">1.1、什么是CSS</h3>
<p>Cascading Style Sheet 层叠级联样式表</p>
<p>CSS：表现（美化页面）</p>
<p>字体，颜色，边距，高度，宽度，图片</p>
<h3 id="13快速入门">1.3、快速入门</h3>
<p>练习格式：</p>
<p><img alt="image-20210804155747788" loading="lazy"></p>
<p>style</p>
<p>基本入门</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style> 中可以编写css的代码，每一个声明最好使用分好结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
</code></pre>
<p>建议使用这种规范</p>
<p><img alt="image-20210804161947512" loading="lazy"></p>
<p><strong>css的优势</strong></p>
<ol>
<li>内容和表现分离</li>
<li>网页结构表现统一，可以实现复用</li>
<li>样式十分丰富</li>
<li>建议使用独立于html的css文件</li>
<li>利于SEO，容易被搜索引擎收录！</li>
</ol>
<h3 id="14css四种导入方式">1.4、css四种导入方式</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!--优先级：覆盖原则-->
<!--行内样式：在标签中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
</code></pre>
<h2 id="2选择器">2、选择器</h2>
<p>作用：选择页面上的某个或者某一类元素</p>
<h3 id="21基本选择器">2.1、基本选择器</h3>
<p>1.标签选择器：选择一类标签 标签{}</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--标签选择器会选择页面上所有的这个标签-->
h1{
color: red;
}
p{
color: green;
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听课</p>
</body>
</html>
</code></pre>
<p>2.类选择器class：选择所有class属性一致的标签，可以跨标签.类名{}</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式： .class的名称{}
好处：可以多个标签归类，是同一个class
*/
.yt{
color: #4db331;
}
.you{
color: #a63037;
}
</style>
</head>
<body>
<h1 class="yt">标题1</h1>
<h1 class="you">标题2</h1>
<h1 class="you">标题3</h1>
<p class="you">段落</p>
</body>
</html>
</code></pre>
<p>3.ID选择器：全局唯一，不能重复#id名{}</p>
<pre><code class="language-html"> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器, id必须保证全局唯一!
#id名称{}
几个选择器中不遵循就近原则，固定的
优先级：id选择器> class选择器 > 标签选择器
*/
#yt{
color: red;
}
</style>
</head>
<body>
<h1 id="yt">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
</body>
</html>
</code></pre>
<p>几个选择器中不遵循就近原则，固定的<br>
<strong>优先级：id选择器> class选择器 > 标签选择器</strong></p>
<h3 id="22层次选择器">2.2、层次选择器</h3>
<p>1.后代选择器：在某个元素后面</p>
<pre><code class="language-css"> <style>
/*后代选择器 空格*/
body p{
background-color: #a63037;
color: #59ca28;
}
</style>
</code></pre>
<p>2.子选择器, 一代 儿子</p>
<pre><code class="language-css">/*子选择器 大于符号*/
body>p{
background-color: yellow;
}
</code></pre>
<p>3.<strong>相邻</strong>兄弟选择器 同辈</p>
<pre><code class="language-css">/*相邻兄弟选择器 ：只有一个，向下 加号*/
.active + p{
background-color: blue;
}
</code></pre>
<p>4.通用选择器</p>
<pre><code class="language-css">/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/ .active~p{ background-color: chartreuse; }
</code></pre>
<h3 id="23结构伪类选择器">2.3、结构伪类选择器</h3>
<p>伪类：</p>
<pre><code class="language-css">/*ul的第一个子元素 */ ul li:first-child{ background-color: #a63037; } /*ul的最后一个子元素 */ ul li:last-child{ background-color: #4db331; }
</code></pre>
<h3 id="24属性选择器常用"><strong>2.4、属性选择器（常用）</strong></h3>
<p>id + class结合</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; height: 50px; width: 50px; border-radius: 30px; background: #4db331; text-align:center; color: gray; text-decoration: none; margin-left: 5px; font:bold 20px/50px Arial; } /*属性名 或者 属性名=属性值（正则） = 绝对等于 *= 包含这个元素 ^= 以这个元素开始 $= 以这个结尾 */ /*存在id属性的元素a[属性]{}*/ /* a{ background: yellow; } a{ background: red; } */ /*class 中有links的元素*/ a{ background: blue; } /*选中href中以http开头的元素*/ a{ background: yellow; } a{ background:red; } </style></head><body><p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item">3</a> <a href="images/123.png" class="links item">4</a> <a href="images/123.jpg" class="links item">5</a> <a href="abc" class="links item">6</a> <a href="/a.pdf" class="links item">7</a> <a href="/abc.pdf" class="links item">8</a> <a href="abc.doc" class="links item">9</a> <a href="abcd.doc" class="links item last">10</a></p></body></html>
</code></pre>
<p><img alt="image-20210805100339979" loading="lazy"></p>
<pre><code class="language-html">= 绝对等于*= 包含这个元素^= 以这个元素开始$= 以这个结尾
</code></pre>
<h2 id="3美化网页元素">3、美化网页元素</h2>
<h3 id="31-为什么要美化网页">3.1、 为什么要美化网页</h3>
<p>1、有效的传递信息</p>
<p>2、页面漂亮，吸引客户</p>
<p>3、凸显主题</p>
<p>4、提高用户体验</p>
<p>span标签：重点要突出的字，使用span标签套起来</p>
<h3 id="32字体样式">3.2、字体样式</h3>
<pre><code class="language-html"><head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family：字体 font-size:字体大小 font-weight: 字体粗细 color:字体的颜色 --> <style> body{ font-family: 楷体; color: #4db331; text-align: center; } h1{ font-size: 50px; } .p1{ font-weight: bold; } </style></head>
</code></pre>
<h3 id="33文本样式">3.3、文本样式</h3>
<p>1、颜色 color rgb rgba</p>
<p><strong>2、文本对齐方式 text-align = center</strong></p>
<p><strong>3、首行缩进text-indent: 2em;</strong></p>
<p><strong>4、行高 line-height</strong></p>
<p>5、装饰 text-decoration</p>
<p>6、文本图片对齐 vertical-align</p>
<h3 id="34文本阴影和超链接伪类">3.4、文本阴影和超链接伪类</h3>
<pre><code class="language-html"><style> /*默认的颜色*/ a{ text-decoration: none; color: black; } /*鼠标悬浮的状态*/ a:hover{ color: #59ca28; } /*鼠标按住未释放的状态*/ a:active{ color: red; } #price{ text-shadow: #59ca28 10px 10px 10px; } </style>
</code></pre>
<p>正常情况下，基本上只使用：</p>
<pre><code class="language-html">a:hover{ color: #59ca28; }
</code></pre>
<h3 id="35列表">3.5、列表</h3>
<p><strong>list-style:</strong></p>
<p> none 去掉原点</p>
<p> circle 空心原点</p>
<p> decimal 数字</p>
<h3 id="36背景">3.6、背景</h3>
<p>背景图片</p>
<pre><code class="language-html"><style> div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/a.PNG");//默认全部是平铺的 } .div1{ background-repeat: repeat-x; } .div2{ background-repeat: repeat-y; } .div3{ background-repeat: no-repeat; } </style>
</code></pre>
<h2 id="4盒子模型">4、盒子模型</h2>
<h3 id="41-什么是盒子模型">4.1、 什么是盒子模型</h3>
<p><img alt="image-20210805204119442" loading="lazy"></p>
<p>margin: 外边距</p>
<p>padding：内边距</p>
<p>border: 边框</p>
<h3 id="42边框">4.2、边框</h3>
<pre><code class="language-css"><style> body{ /*body 总有一个默认的外边距margin*/ margin: 0px; } /*border: 粗细，样式，颜色*/ #box{ width: 300px; height: 150px; border: 1px solid red; } form{ background: gray; } div:nth-of-type(1) input{ border: 3px solid black; } </style>
</code></pre>
<p>border: 3px solid black;</p>
<p>实线：solid</p>
<p>虚线：dashed</p>
<h3 id="43内外边距">4.3、内外边距</h3>
<p>外边距的妙用：居中</p>
<pre><code>margin: 0 auto;
</code></pre>
<p>上下左右</p>
<h3 id="44圆角边框">4.4、圆角边框</h3>
<pre><code class="language-css">border-radius:10px;
</code></pre>
<h3 id="45盒子阴影">4.5、盒子阴影</h3>
<pre><code class="language-css">box-shadow: 10px 10px 1px
</code></pre>
<h2 id="5浮动">5、浮动</h2>
<h3 id="51标准文档流">5.1、标准文档流：</h3>
<p><strong>文档流</strong>指的是元素排版布局过程中，元素会<strong>默认</strong>自动从左往右，从上往下的<strong>流式排列方式</strong></p>
<p>块级元素：独占一行</p>
<pre><code class="language-css">h1~h6 p div 列表、、、、、
</code></pre>
<p>行内元素：不独占一行</p>
<pre><code class="language-css">span a img .....
</code></pre>
<p>行内元素可以包含在块级元素中，反之不可以</p>
<h3 id="52display">5.2、display</h3>
<p>display:block;</p>
<p>block 块元素</p>
<p>inline 行内元素</p>
<p>inline-block 是块元素，但是可以内联，在一行</p>
<p>none:消失</p>
<h3 id="53float">5.3、float</h3>
<p>1、左右浮动 float</p>
<p>float:right;</p>
<p>float:left;</p>
<h3 id="54父级边框塌陷问题">5.4、父级边框塌陷问题</h3>
<p>clear:right; 右侧不允许有浮动元素</p>
<p>clear: left; 左侧不允许有浮动元素</p>
<p>clear: both; 两侧不允许有浮动元素</p>
<p>clear: none;</p>
<p><strong>解决方案</strong></p>
<p>1、增加父级元素高度</p>
<p><strong>2、增加一个空的div标签，清楚浮动</strong></p>
<pre><code class="language-css"><div class="clear"></div>.clear{ clear:both; margin:0; padding:0;}
</code></pre>
<p>3、overflow</p>
<p>在父级元素中增加一个 overflow:hidden;</p>
<p>overflow: scroll;//产生滚动条</p>
<p><strong>4、父类增加一个伪类：after</strong></p>
<pre><code class="language-css">#father:after{ content:''; display:block; clear:both;}
</code></pre>
<p><strong>小结：</strong></p>
<p>1.浮动元素后面增加div</p>
<p> 简单，代码中尽量避免空的div</p>
<p>2.设置父元素的高度</p>
<p> 简单，元素假设有了固定的高度，就会被限制</p>
<p>3.overflow</p>
<p> 简单，下拉的一些场景避免使用</p>
<p>4.父类增加一个伪类：after</p>
<p> 推荐使用，但写法复杂</p>
<h3 id="55对比">5.5、对比</h3>
<ul>
<li>
<p>diplay</p>
<p>方向不可以控制</p>
</li>
<li>
<p>float</p>
<p>浮动起来会脱离标准文档流</p>
</li>
</ul>
<h2 id="6定位">6、定位</h2>
<h3 id="61相对定位">6.1、相对定位</h3>
<p>position: relative;</p>
<p>相对于原来的位置，进行指定的偏移，仍然在标准文档流中，原来的位置会被保留</p>
<p>上左下右</p>
<p>top leftbottomright</p>
<h3 id="62绝对定位">6.2、绝对定位</h3>
<p>定位：基于xxx定位，上下左右</p>
<p>1、没有父类元素定位的前提下，相对于浏览器定位</p>
<p>2、如果父类元素存在，通常相对于父类元素偏移</p>
<p>不在原来的位置</p>
<h3 id="63固定定位">6.3、固定定位</h3>
<p>position: fixed</p>
<h3 id="64z-index">6.4、z-index</h3>
<p>图层</p>
<p>默认是0，最高无限</p>
<p>opacity:0.5 ;设置透明度</p>
<h2 id="7动画">7、动画</h2><br><br>
来源：https://www.cnblogs.com/y-tao/p/15110425.html
頁:
[1]