CSS入门学习
<p>转载：https://www.cnblogs.com/yuanchenqi/articles/5977825.html</p><p> </p>
<p>一.CSS引入的四种方式</p>
<p>1.第一种：直接通过标签属性style写入：</p>
<pre><div <span style="color: rgba(255, 0, 0, 1)">style="color:red;background-color:beige"</span>>hello yuan</div><br>说明：css其实就是键值对。<br><br>第二种：style标签写入head标签中：</pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br><br><span style="color: rgba(255, 0, 0, 1)"><style></span><br><span style="color: rgba(255, 0, 0, 1)"> p{</span><br><span style="color: rgba(255, 0, 0, 1)"> color: rebeccapurple;</span><br><span style="color: rgba(255, 0, 0, 1)"> font-size: 40px;</span><br><span style="color: rgba(255, 0, 0, 1)"> }</span><br><br><span style="color: rgba(255, 0, 0, 1)"> a{</span><br><span style="color: rgba(255, 0, 0, 1)"> text-decoration: none;//去掉下划线</span><br><span style="color: rgba(255, 0, 0, 1)"> }</span><br><span style="color: rgba(255, 0, 0, 1)"> </style></span><br></head><br><body><br><br><div style="color:red;background-color:beige">hello yuan</div><br><br><div>hello div</div><br><p>hello p</p><br><a href="">点我</a><br></body><br></html><br><br>第三种：链接式<br>首先，新建css后缀的文件，即Stylesheet，文件名称为：test1.css;<br>然后，通过link标签引入css文件；<br>说明：需在head标签中进行引入，link标签（自闭合标签），且注意写rel，告诉它是什么文件类型；</pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <span style="color: rgba(255, 0, 0, 1)"><link href="test1.css" rel="stylesheet"></span><br></head><br><body><br><div>hello div</div><br><p>hello p</p><br><a href="">点我</a><br></body><br></html></pre>
<pre>第四种：导入式</pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <span style="color: rgba(255, 0, 0, 1)"> <style></span><br><span style="color: rgba(255, 0, 0, 1)"> @import "test1.css";</span><br><span style="color: rgba(255, 0, 0, 1)"> </style></span><br></head><br><body><br><div>hello div</div><br><p>hello p</p><br><a href="">点我</a><br></body><br></html></pre>
<pre>链接式和导入式的区别：<br>1.链接式引入文件的数量是没有限制的，导入式是有限制的；<br>2.导入式对css代码和html代码进行了分隔；<br>3.导入式先加载HTML，再加载css，若css延迟，有可能出来没有css的html的丑陋界面；<br>链接式是先把css准备好，css没准备好，不会让html显示出来的，所以你只要能看到结果，一定是最完整的结果；<br>结论：推荐使用链接式<br><br>二：CSS的选择器（Selector）<br>1.基础选择器<br><span style="background-color: rgba(255, 255, 0, 1); color: rgba(255, 0, 0, 1)">*：通用选择器 </span> //改变所有标签</pre>
<pre>*{<br> <br>}</pre>
<pre><span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 255, 0, 1)">E：标签选择器</span> //element,通过标签名字</pre>
<pre>div{<br><br>}<br><br><span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 255, 0, 1)">id选择器</span>：--使用井号 #<br><br>说明：id和井号#是亲兄弟，只要看到#，基本上就是指的id</pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> <span style="color: rgba(255, 0, 0, 1)"> #littleP</span>{<br> color:hotpink;<br> }<br><br> </style><br></head><br><body><br><div>hello div</div><br><p <span style="color: rgba(255, 0, 0, 1)">id="littleP"</span>>hello p</p><br><a href="">点我</a><br></body><br></html></pre>
<pre><span style="background-color: rgba(255, 255, 0, 1); color: rgba(255, 0, 0, 1)">class 类选择器：---使用点 .<br></span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> <span style="color: rgba(255, 0, 0, 1)">.cc</span>{<br> color:hotpink;<br> }<br><br> </style><br></head><br><body><br><div>hello div</div><br><p id="littleP">hello p</p><br><a href="">点我</a><br><p <span style="color: rgba(255, 0, 0, 1)">class="cc"</span>>PPP</p><br><p <span style="color: rgba(255, 0, 0, 1)">class="cc"</span>>PP</p><br></body><br></html></pre>
<pre>eg:混合基础选择器</pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> <span style="color: rgba(255, 0, 0, 1)">div.cc</span>{//混合基本基础选择器，注意：div和\.cc之间不要有空格<br> color:hotpink;<br> }<br><br> </style><br></head><br><body><br><div>hello div</div><br><p id="littleP">hello p</p><br><a href="">点我</a><br><p class="cc">PPP</p><br><p class="cc">PP</p><br><span style="color: rgba(255, 0, 0, 1)"><div class="cc">lalala</div></span><br></body><br></html></pre>
<pre><br>2.组合选择器<br><br><span style="background-color: rgba(255, 255, 0, 1); color: rgba(255, 0, 0, 1)">逗号--逗号相当于并列的意思<br></span>把两个标签用一句话表示出来，加逗号即可</pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> <span style="color: rgba(255, 0, 0, 1)">#littleP,div.cc</span>{//逗号相当于并列的意思<br> color:hotpink;<br> }<br><br> </style><br></head><br><body><br><div>hello div</div><br><span style="color: rgba(255, 0, 0, 1)"><p id="littleP">hello p</p></span><br><a href="">点我</a><br><p class="cc">PPP</p><br><p class="cc">PP</p><br><span style="color: rgba(255, 0, 0, 1)"><div class="cc">lalala</div></span><br></body><br></html></pre>
<pre><span style="background-color: rgba(255, 255, 0, 1); color: rgba(255, 0, 0, 1)">空格---后代选择器（看所有后代，需要涉及嵌套）<br></span>.div1 .div2 <br><br><span style="background-color: rgba(255, 255, 0, 1); color: rgba(255, 0, 0, 1)">大于号---子代选择器(只看儿子层)<br></span>.div1>.cc<br>.div div>p{<br>}<br><br><span style="color: rgba(255, 0, 0, 1); background-color: rgba(255, 255, 0, 1)">毗邻元素选择器（并列的时候会用，需要紧挨着才行）---说明：仅向下找，不向上找<br></span></pre>
<pre>.div1 + div<br><br>3.属性选择器</pre>
<pre> E 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“”。以下同。） p { color:#f00; }
E 匹配所有att属性等于“val”的E元素 div { color:#f00; }
E 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td { color:#f00; }
E 匹配属性值以指定值开头的每个元素 div{background:#ffff00;}
E 匹配属性值以指定值结尾的每个元素 div{background:#ffff00;}
E 匹配属性值中包含指定值的每个元素 div{background:#ffff00;}<br><br>4.伪类--专用于控制链接的显示效果</pre>
<pre>a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。---悬浮用的最多
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }<br><br>补充：<br>after/before</pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> <span style="color: rgba(255, 0, 0, 1)">.add:after</span>{//在定位到的标签元素后加文档，并且对添加的部分做css操作<br> content: "欢迎加入前端学习";<br> color:hotpink;<br> }<br><br> </style><br></head><br><body><br><div class="add">hello</div><br><br></body><br></html></pre>
<pre>显示效果：</pre>
<p><img src="https://img2020.cnblogs.com/blog/1775548/202102/1775548-20210223120757822-1085231051.png"></p>
<p> </p>
<p> 三.CSS的常用属性</p>
<p>1.颜色属性</p>
<p><code class="python plain">div style</code><code class="python keyword">=</code><code class="python string">"color:blueviolet"</code><code class="python plain">>ppppp<</code><code class="python keyword">/</code><code class="python plain">div> //颜色的英文单词</code></p>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="python plain"><div style</code><code class="python keyword">=</code><code class="python string">"color:#ffee33"</code><code class="python plain">>ppppp<</code><code class="python keyword">/</code><code class="python plain">div> //<strong>RGB颜色对照表（十六进制）</strong></code></div>
<div class="line number4 index3 alt1"> </div>
<div class="line number5 index4 alt2"><code class="python plain"><div style</code><code class="python keyword">=</code><code class="python string">"color:rgb(255,0,0)"</code><code class="python plain">>ppppp<</code><code class="python keyword">/</code><code class="python plain">div> //red、green、blue三种颜色范围：0-255</code></div>
<div class="line number6 index5 alt1"> </div>
<div class="line number7 index6 alt2"><code class="python plain"><div style</code><code class="python keyword">=</code><code class="python string">"color:rgba(255,0,0,0.5)"</code><code class="python plain">>ppppp<</code><code class="python keyword">/</code><code class="python plain">div> //多出来的a表示透明度，数值越小越透明</code></div>
<div class="line number7 index6 alt2"> </div>
<div class="line number7 index6 alt2">2.字体属性</div>
<div class="line number7 index6 alt2"><code class="python plain">font</code><code class="python keyword">-</code><code class="python plain">size: </code><code class="python value">20px</code><code class="python keyword">/</code><code class="python value">50</code><code class="python keyword">%</code><code class="python keyword">/</code><code class="python plain">larger //可通过三种方式设置：像素、百分比、还有smaller</code>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="python plain">font</code><code class="python keyword">-</code><code class="python plain">family:</code><code class="python string">'Lucida Bright' //字体，一般论文都是：Times New Roman</code></div>
<div class="line number4 index3 alt1"> </div>
<div class="line number5 index4 alt2"><code class="python plain">font</code><code class="python keyword">-</code><code class="python plain">weight: lighter</code><code class="python keyword">/</code><code class="python plain">bold</code><code class="python keyword">/</code><code class="python plain">border</code><code class="python keyword">/ //粗体</code></div>
<div class="line number6 index5 alt1"> </div>
<div class="line number7 index6 alt2"><code class="python plain"><h1 style</code><code class="python keyword">=</code><code class="python string">"font-style: oblique"</code><code class="python plain">>老男孩<</code><code class="python keyword">/</code><code class="python plain">h1> //斜体</code></div>
<div class="line number7 index6 alt2"> </div>
<div class="line number7 index6 alt2"> </div>
</div>
<pre><br><br></pre>
<pre><br><br></pre><br><br>
来源：https://www.cnblogs.com/sf-express/p/14431957.html
頁:
[1]