CSS样式学习 - Powered by Discuz! Archiver

首页 › CSS论坛 › CSS样式学习

今年夏天 發表於 2020-5-1 14:15:00

CSS样式学习

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                     <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
               </svg>
               <h3>CSS样式学习</h3>
<h4>1.css概述</h4>
<p>css（cascading style sheet）:是一种层叠样式表语言</p>
<p>css的作用是修饰HTML页面，设置html元素的样式，让HTML页面更加好看。</p>
<p>css样式能写在html文件中，css的存在就是修饰HTML。</p>
<h5>html中使用css样式的方法</h5>
<pre><code class="prism language-html">方式一：在style属性中设置元素的css样式，这种方式称为内联定义
格式：
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">样式名</span><span class="token punctuation">:</span>样式值<span class="token punctuation">;</span><span class="token property">样式值</span><span class="token punctuation">:</span>样式名······</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>标签</span><span class="token punctuation">></span></span>

方式二：样式块（在head标签当中使用style块）
格式：
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
   <span class="token selector">选择器</span><span class="token punctuation">{</span>
         <span class="token property">样式名</span><span class="token punctuation">:</span>样式值；
         <span class="token property">样式名</span><span class="token punctuation">:</span>样式值；
         ······
   <span class="token punctuation">}</span>
   <span class="token selector">选择器</span><span class="token punctuation">{</span>
         <span class="token property">样式名</span><span class="token punctuation">:</span>样式值；
         <span class="token property">样式名</span><span class="token punctuation">:</span>样式值；
         ······
   <span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>

第三种方式：链入外部外部样式表文件（将样式写到一个独立的xxx.css文件中）
链入语法格式：
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>文件路径<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
这种方式易于维护
</code></pre>
<h5>第一种方式：</h5>
<pre><code class="prism language-html"><span class="token doctype"><!doctype html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>html中用css样式第一种方式<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
   <span class="token comment"></span>

   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid black</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>red <span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span>solid</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h5>第二种方式引入：</h5>
<pre><code class="prism language-html"><span class="token doctype"><!doctype html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>html中用css样式第一种方式<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>


   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
      <span class="token comment">/*css注释*/</span>
         <span class="token comment">/*id选择器，选择某个id使用{}中的样式,id唯一*/</span>
         <span class="token selector">#use</span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
         <span class="token punctuation">}</span>
         <span class="token comment">/*标签选择器*/</span>
         <span class="token selector">div</span><span class="token punctuation">{</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
         <span class="token punctuation">}</span>
         <span class="token comment">/*类选择器*/</span>
         <span class="token selector">.mystyle</span><span class="token punctuation">{</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
         <span class="token punctuation">}</span>
         <span class="token comment">/*
         1)Css定义位置的优先级：（离元素越近，优先级越高） “元素上的style” > “文件头上的style元素” >“外部样式文件”

特例：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2）关于选择器的优先级：(越精确，优先级越高) id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
         */</span>

   </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
   <span class="token comment"></span>

   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>use<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这里是div块,使用了id选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token punctuation">></span></span>这里是div块,使用了id选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p>CSS样式定义的优先级顺序总结https://blog.csdn.net/zztfj/article/details/6731008</p>
<h5>第三种方式</h5>
<pre><code class="prism language-html"><span class="token doctype"><!doctype html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>html中用css样式第一种方式<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>

   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>文件路径<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p>本文只介绍简单的样式，不做深入探索。<br> 下一章：js基础总结https://blog.csdn.net/qq_43203949/article/details/106404883.</p><br><br>
来源：https://www.cnblogs.com/yalier/p/17505003.html

頁: [1]

查看完整版本: CSS样式学习