CSS学习笔记
<h1 id="css学习笔记">CSS学习笔记</h1><h2 id="一css简介">一.CSS简介</h2>
<h3 id="1什么是css">1.什么是CSS</h3>
<p>CSS:Cascading Style Sheet层叠样式表</p>
<p>是一组样式设置规则,用于控制页面的外观样式</p>
<h3 id="2为什么使用css">2.为什么使用CSS</h3>
<ul>
<li>实现内容与样式的分离</li>
<li>样式复用,便于维护</li>
<li>页面的精确控制,是页面更精美</li>
</ul>
<h3 id="3css的作用">3.CSS的作用</h3>
<ul>
<li>页面外观美化</li>
<li>布局和定位</li>
</ul>
<h2 id="二css的基本用法">二.CSS的基本用法</h2>
<h3 id="1css基本语法">1.CSS基本语法</h3>
<pre><code class="language-html"><head>
<style type="text/css">
<!--这里是css代码 -->
</style>
</head>
</code></pre>
<ul>
<li>选择器:要修饰的对象(元素)</li>
<li>属性名:要修饰对象的哪一个属性</li>
<li>属性值:要修饰对象属性的效果</li>
</ul>
<h3 id="2css应用方式">2.CSS应用方式</h3>
<p>也称CSS的引用方式:</p>
<ul>
<li>
<p>内部样式</p>
<pre><code class="language-html"><head>
<style type="text/css">
<!--这里是css代码 -->
</style>
</head>
</code></pre>
</li>
<li>
<p>行内样式</p>
<pre><code class="language-html"><body>
<h1 style="<!--这里是css代码 -->">Hello</h1>
</body>
</code></pre>
</li>
<li>
<p>外部样式</p>
<ul>
<li>
<p>link标签</p>
<p>他表示链接,不会合并代码</p>
</li>
</ul>
<pre><code class="language-html"><head>
<link rel="stylesheet" type="text/css" href="<!--这里是css文件路径 -->" />
</head>
</code></pre>
<ul>
<li>
<p>@import指令 (很少使用)</p>
<p>他表示导入,代码合并在本文件中</p>
</li>
</ul>
<pre><code class="language-html"><head>
<style type="text/css">
@import "<!--这里是css文件路径 -->";
@import url(<!--这里是css文件路径 -->);
</style>
</head>
</code></pre>
</li>
</ul>
<h2 id="三css选择器">三.CSS选择器</h2>
<h3 id="1基础选择器">1.基础选择器</h3>
<h4 id="11标签选择器">1.1标签选择器</h4>
<p>也成为元素选择器,使用HTML标签作为选择器名称,它是以标签名作为应用依据的.</p>
<h4 id="12类选择器">1.2类选择器</h4>
<p>使用自定义名称,以<code>.</code>号作为前缀,然后通过HTML标签的class属性调用类选择器,它是以class属性作为应用依据的.</p>
<p>注意事项:</p>
<ul>
<li>调用时只写类名,不加<code>.</code></li>
<li>同时调用多个类选择器以<code>空格</code>隔开</li>
<li>类选择器不能以数字开头</li>
</ul>
<h4 id="13id选择器">1.3ID选择器</h4>
<p>使用自定义名称,以<code>#</code>号作为前缀,然后通过HTML标签的id属性进行应用匹配</p>
<p>它是以id作为应用依据,是一一对应关系.</p>
<h3 id="2复杂选择器">2.复杂选择器</h3>
<h4 id="21复合选择器">2.1复合选择器</h4>
<p>同时使用两个或两个以上的选择器,即为复合选择器.</p>
<h4 id="22组合选择器">2.2组合选择器</h4>
<p>也称为集体声明,将多个具有相同样式的选择器发在一起声明,用<code>逗号</code>隔开</p>
<h4 id="23嵌套选择器">2.3嵌套选择器</h4>
<p>在某个选择器内再设置选择器即为嵌套选择器,嵌套时用<code>空格</code>隔开</p>
<p>只有满足层次关系的最内部选择器才能应用样式</p>
<p><font color="red">注:使用<code>空格</code>时不区分父子还是后代,使用CSS3中新增的<code>></code>时必须是父子关系才可以应用样式</font></p>
<h2 id="未完待续">未完待续...</h2>
</div>
<div id="MySignature" role="contentinfo">
只有服从理性,我们才能成人!<br><br>
来源：https://www.cnblogs.com/Cikaros/p/12425464.html
頁:
[1]