Web学习-CSS（一）

学战發表於 2020-6-16 16:48:00

<h1 id="toc_0">CSS（一）</h1>
<h2 id="toc_1">引入CSS样式表</h2>
<h3 id="toc_2">1.行内样式表（内联样式）</h3>
<pre><code class="language-markup"><h2 style="color: blue; font-size: 22px;">行内样式表</h2>

<标签 style="属性名: 属性值; 属性名: 属性值;...."></标签>

</code></pre>
<ul>
<li>属性和属性值之间用<code>:</code>隔开</li>
<li>多组属性之间用<code>;</code>隔开</li>
</ul>
<h3 id="toc_3">2.内部样式表</h3>
<p>写在<code><head></head></code>之间</p>
<pre><code class="language-markup">选择器 {
   属性名: 属性值;
   属性名: 属性值;
   }

<style type="text/css">
   h2 {
         color: green;
         font-size: 22px;
   }
   h4 {
         color: blue;
   }
   p {
         color: red;
   }
</style>

</code></pre>
<ul>
<li>选择器可以理解为，你想要选择的标签比如 <code>h2</code>、<code>p</code>等等</li>
<li><code>type="text/css"</code>可省略</li>
</ul>
<h3 id="toc_4">3.外部样式表（外链式）</h3>
<p>将所有的样式放在一个或多个以<code>.css</code>为扩展名的外部样式表文件中<br>
通过<code>link</code>标签将外部样式表文件链接到HTML文件中</p>
<p>操作步骤：</p>
<p><strong>1.</strong> 新建一个文件，保存为style.css，在文件中添加代码</p>
<pre><code class="language-markup"> h3 {
   color: cyan;
   font-size: 66px;
}

</code></pre>
<p><strong>2.</strong> 新建一个html文件，保存为index.html，在body中写入下面代码</p>
<pre><code class="language-markup"> <h3> 狂浪是一种态度狂浪在起起伏伏狂浪狂浪狂浪狂浪 </h3>
</code></pre>
<p><strong>3.</strong> 在html文件的head标签中添加下面的代码</p>
<pre><code class="language-markup"> <link rel="stylesheet" href="style.css">
</code></pre>
<blockquote>
<p>好啦！运行一下试试吧！<br>
<strong>注意：按照上面的写法，css文件和html文件要在同一个文件夹中！！！</strong></p>
</blockquote>
<h2 id="toc_5">CSS选择器</h2>
<h3 id="toc_6">1.CSS选择器作用</h3>
<p>找到特定的HTML页面元素，就是选择标签用的，把想要的元素选择出来。</p>
<ul>
<li>CSS做了两件事：<strong>选对人，做对事</strong></li>
<li>CSS选择器分为基础选择器和复合选择器</li>
</ul>
<h3 id="toc_7">2. CSS基础选择器</h3>
<h4 id="toc_8">2.1 标签选择器（元素选择器）</h4>
<p>标签选择器：可以把某一类的标签全部选择出来，例如：所有的<code>div</code>、<code>span</code></p>
<blockquote>
<p>前面的CSS使用的就是标签选择器</p>
</blockquote>
<h4 id="toc_9">2.2 类选择器</h4>
<p>标签选择器使用<code>.</code>进行标识，后面紧跟类名</p>
<p>语法：</p>
<pre><code class="language-markup"> .类名 {
   属性名: 属性值;
   属性名: 属性值;
   ...
}
</code></pre>
<p>在标签中的使用</p>
<pre><code class="language-markup"> <p class='类名'></p>
</code></pre>
<ul>
<li>实例展示</li>
</ul>
<pre><code class="language-markup"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>外部样式表的使用</title>

<style>
   .red {
         color: red
   }
</style>
</head>
<body>



<div>一波一波接踵而来</div>
<div>大风带着我摇摆</div>
<div>梦在燃烧</div>
<div>心在澎拜</div>
<div>不用徘徊</div>
<div>大摇大摆漂在人海</div>
<div class="red">随着心情放肆嗨</div>
<div>别服输</div>
<div>跟着脚步</div>
<div>要爱你就来</div>

</body>
</html>
</code></pre>
<p>效果：</p>
<p><img src="https://upload-images.jianshu.io/upload_images/1089506-2c7c5847fabfc5d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></p>
<blockquote>
<p>命名规范：不要纯数字、中文，尽量使用英文字母来表示，要做到见名知意<br>
长名称或者词组，中间使用中横线连接</p>
</blockquote>
<h4 id="toc_10">2.3 多类名选择器</h4>
<p>在实际开发中，每个标签的样式大都不是来自于一个类，会用多个类来组合到一起展示样式，这个需要怎么做呢？</p>
<pre><code class="language-markup"> 
<style>

   .font120 {
         font-size: 120px;
   }

   .blue {
         color: blue;
   }
</style>


<span class="blue font120">G</span>



</code></pre>
<ul>
<li>注意：多类名在使用时，不可以写一个以上的<code>class</code>属性</li>
<li>多个类名写在一个<code>class</code>属性中，各类名中间用空格隔开</li>
</ul>
<blockquote>
<p>Google案例下载</p>
</blockquote>
<h4 id="toc_11">2.4 id选择器</h4>
<p>id选择器的用法和类选择器很是相像</p>
<pre><code class="language-markup">/*定义一个id选择器*/
#(id名) {
属性名: 属性值;
...
}

#red {
color: red;
}


<p id="red">心很空</p>

</code></pre>
<p><strong>id选择器和类选择器的区别</strong></p>
<ul>
<li>类选择器可以重复多次使用，id选择器不得重复，只能使用一次</li>
<li>id选择器<strong>没有</strong> <em>多id选择器</em> 的功能</li>
<li>id选择器一般用于页面唯一性的元素身上，经常和javascript搭配使用</li>
</ul>
<h4 id="toc_12">2.5 通配符选择器</h4>
<p>通配符选择器使用<code>*</code>表示，代表选择页面中所有标签</p>
<pre><code class="language-markup">* {
   属性名: 属性值;
   ...
}



* {
   margin: 0;
   padding: 0;
}
</code></pre>
<ul>
<li>通配符选择器会匹配页面<strong>所有元素</strong>，降低页面响应速度，不要随便使用</li>
</ul>
<blockquote>
<p>案例链接</p>
</blockquote>
<h2 id="toc_13">CSS字体样式属性及调试工具</h2>
<ul>
<li>学习目标
<ul>
<li>使用css字体样式完成对字体的设置</li>
<li>使用css外观属性给页面元素添加样式</li>
<li>使用常用的emment语法</li>
<li>能够使用开发人员工具代码调试</li>
</ul></li>
</ul>
<h3 id="toc_14">1.font字体</h3>
<h4 id="toc_15">1.1 font-size:字体大小</h4>
<p>font-size属性用来设置字号</p>
<pre><code class="language-markup">p {
   font-size: 20px;
}
</code></pre>
<ul>
<li>px：单位，像素。</li>
<li>可以使用相对长度单位，也可以使用绝对长度单位。</li>
<li>绝对长度单位使用情况较少，推荐使用px</li>
</ul>
<p>单位相关，见下图：<br>
<img src="http://web-learn-coder.oss-cn-beijing.aliyuncs.com/2020/06/16/zi-ti-dan-wei.png?x-oss-process=image/auto-orient,1/quality,q_90/watermark,text_QOi1jue9queahOeggeWGnA,size_16,g_nw,x_1,y_1"></p>
<ul>
<li>在开发过程中使用的单位，基本就是px，其他单位很少用</li>
<li>谷歌浏览器默认文字大小是16px</li>
<li>各浏览器默认的字体大小不一致，所以尽量指定大小</li>
</ul>
<h4 id="toc_16">1.2 font-family:字体</h4>
<pre><code class="language-markup">p {
   font-family: "微软雅黑";
}
</code></pre>
<pre><code class="language-markup">p {
   font-family: Arial, "Microsoft YaHei", "微软雅黑", "黑体";
}
</code></pre>
<blockquote>
<p>同时指定多个字体，要用<code>,</code>分割<br>
在指定多个字体时，系统从第一个字体开始匹配，如匹配不到，则匹配第二个字体，匹配到，则使用该字体。<br>
如果都没有，则使用电脑默认字体。</p>
</blockquote>
<p><strong>CSS Unicode字体</strong></p>
<ul>
<li>在CSS中设置字体名称，可以使用中文，但是在一些文件编码不匹配时，会产生乱码</li>
<li>解决办法：
<ul>
<li>可以使用英文</li>
<li>可以使用unicode编码来指定字体名称</li>
</ul></li>
</ul>
<table>
<thead>
<tr>
<th>字体名称</th>
<th>英文名称</th>
<th>Unicode 编码</th>
</tr>
</thead>
<tbody>
<tr>
<td>宋体</td>
<td>SimSun</td>
<td>\5B8B\4F53</td>
</tr>
<tr>
<td>新宋体</td>
<td>NSimSun</td>
<td>\65B0\5B8B\4F53</td>
</tr>
<tr>
<td>黑体</td>
<td>SimHei</td>
<td>\9ED1\4F53</td>
</tr>
<tr>
<td>微软雅黑</td>
<td>Microsoft YaHei</td>
<td>\5FAE\8F6F\96C5\9ED1</td>
</tr>
<tr>
<td>楷体_GB2312</td>
<td>KaiTi_GB2312</td>
<td>\6977\4F53_GB2312</td>
</tr>
<tr>
<td>隶书</td>
<td>LiSu</td>
<td>\96B6\4E66</td>
</tr>
<tr>
<td>幼园</td>
<td>YouYuan</td>
<td>\5E7C\5706</td>
</tr>
<tr>
<td>华文细黑</td>
<td>STXihei</td>
<td>\534E\6587\7EC6\9ED1</td>
</tr>
<tr>
<td>细明体</td>
<td>MingLiU</td>
<td>\7EC6\660E\4F53</td>
</tr>
<tr>
<td>新细明体</td>
<td>PMingLiU</td>
<td>\65B0\7EC6\660E\4F53</td>
</tr>
</tbody>
</table>
<blockquote>
<p>上面是常见字体的英文名称和unicode编码</p>
</blockquote>
<h4 id="toc_17">1.3 font-weight:字体粗细</h4>
<ul>
<li>在html中可以使用<code>b</code>或者<code>strong</code>标签使文本加粗</li>
<li>可以使用CSS来实现加粗，但是CSS是没有语义的</li>
</ul>
<table>
<thead>
<tr>
<th>属性值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td style="text-align: left">默认值（不加粗的）</td>
</tr>
<tr>
<td>bold</td>
<td style="text-align: left">定义粗体（加粗的）</td>
</tr>
<tr>
<td>100~900</td>
<td style="text-align: left">400 等同于 normal，而 700 等同于 bold我们重点记住这句话</td>
</tr>
</tbody>
</table>
<pre><code class="language-markup">p {
   font-weight: 700;
}
h2 {
   font-weight: normal;
}
</code></pre>
<h4 id="toc_18">1.4 font-style:字体风格（倾斜）</h4>
<ul>
<li>在html中可以使用<code>i</code>或者<code>em</code>标签使文本加粗</li>
<li>可以使用CSS来实现，但是CSS是没有语义的</li>
</ul>
<table>
<thead>
<tr>
<th>属性</th>
<th style="text-align: left">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td style="text-align: left">默认值，浏览器会显示标准的字体样式font-style: normal;</td>
</tr>
<tr>
<td>italic</td>
<td style="text-align: left">浏览器会显示斜体的字体样式。</td>
</tr>
</tbody>
</table>
<pre><code class="language-markup">.style {
   font-style: italic;
}
</code></pre>
<ul>
<li>Tips：平时很少给字体添加倾斜，反而将倾斜字体改为正常模式比较多</li>
</ul>
<h4 id="toc_19">1.5 综合性写法</h4>
<pre><code class="language-markup">    /*
      font: font-stylefont-weightfont-size/line-heightfont-family;
      */
   .title {
         /*综合性写法*/
         font: italic 700 20px "黑体";
   }
</code></pre>
<blockquote>
<p>line-height：行间距，后续会说到</p>
</blockquote>
<ul>
<li>注意：
<ul>
<li>使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以<strong>空格</strong>隔开。</li>
<li>其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。</li>
</ul></li>
</ul>
<h2 id="toc_20">CSS外观属性</h2>
<h3 id="toc_21">1.1 color 文本颜色</h3>
<p>color属性用于定义文本颜色</p>
<p><strong>取值方式</strong></p>
<ul>
<li>其取值方式有如下3种：</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">表示表示</th>
<th style="text-align: left">属性值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">预定义的颜色值</td>
<td style="text-align: left">red，green，blue</td>
</tr>
<tr>
<td style="text-align: left">十六进制</td>
<td style="text-align: left">#FF0000，#FF6600，#29D794</td>
</tr>
<tr>
<td style="text-align: left">RGB代码</td>
<td style="text-align: left">rgb(255,0,0)或rgb(100%,0%,0%)</td>
</tr>
</tbody>
</table>
<h3 id="toc_22">1.2 text-align 文本水平对齐方式</h3>
<p>作用：设置文本内容的水平对齐方式</p>
<table>
<thead>
<tr>
<th>属性</th>
<th style="text-align: center">解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>left</td>
<td style="text-align: center">左对齐（默认值）</td>
</tr>
<tr>
<td>right</td>
<td style="text-align: center">右对齐</td>
</tr>
<tr>
<td>center</td>
<td style="text-align: center">居中对齐</td>
</tr>
</tbody>
</table>
<pre><code class="language-markup">.align_center {
         text-align: center;
   }
</code></pre>
<h3 id="toc_23">1.3 line-height 行间距</h3>
<p>行间距：行与行之间的距离，一般比字号大7-8像素就可以了</p>
<ul>
<li>单位：
<ul>
<li>line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px</li>
</ul></li>
</ul>
<pre><code class="language-markup"> p {
         line-height: 24px;
   }
</code></pre>
<h3 id="toc_24">1.4 text-indent 首行缩进</h3>
<p>用于设置文本的首行缩进</p>
<ul>
<li><p>属性值</p>
<ul>
<li>其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,</li>
<li>建议使用em作为设置单位。</li>
</ul></li>
</ul>
<p><strong>1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度</strong></p>
<pre><code class="language-markup"> p {
         text-indent: 2em;
   }
</code></pre>
<h3 id="toc_25">1.5 text-decoration 文本装饰</h3>
<p>text-decoration 通常我们用于给链接修改装饰效果</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>默认。定义标准的文本。取消下划线（最常用）</td>
</tr>
<tr>
<td>underline</td>
<td>定义文本下的一条线。下划线也是我们链接自带的（常用）</td>
</tr>
<tr>
<td>overline</td>
<td>定义文本上的一条线。（不用）</td>
</tr>
<tr>
<td>line-through</td>
<td>定义穿过文本下的一条线。（不常用）</td>
</tr>
<tr>
<td>blink</td>
<td>闪烁</td>
</tr>
</tbody>
</table>
<h2 id="toc_26">开发者工具（Chrome，谷歌浏览器）</h2>
<p><img src="http://web-learn-coder.oss-cn-beijing.aliyuncs.com/2020/06/16/15922953551517.jpg?x-oss-process=image/auto-orient,1/quality,q_90/watermark,text_QOi1jue9queahOeggeWGnA,size_16,g_nw,x_1,y_1"></p>
<p><img src="http://web-learn-coder.oss-cn-beijing.aliyuncs.com/2020/06/16/15922955229590.jpg?x-oss-process=image/auto-orient,1/quality,q_90/watermark,text_QOi1jue9queahOeggeWGnA,size_16,g_nw,x_1,y_1"></p>
<blockquote>
<p>点击三个小点第一行可以控制调试面板位置</p>
</blockquote>
<p><img src="http://web-learn-coder.oss-cn-beijing.aliyuncs.com/2020/06/16/15922965101760.jpg?x-oss-process=image/auto-orient,1/quality,q_90/watermark,text_QOi1jue9queahOeggeWGnA,size_16,g_nw,x_1,y_1"></p>
<h2 id="toc_27">Emmet</h2>
<p>Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。</p>
<ol>
<li><p>生成标签直接输入标签名按tab键即可比如div 然后tab 键，就可以生成 </p><div></div><p></p></li>
<li><p>如果想要生成多个相同标签加上 * 就可以了比如 div*3就可以快速生成3个div</p></li>
<li><p>如果有父子级关系的标签，可以用 >比如 ul > li就可以了</p></li>
<li><p>如果有兄弟关系的标签，用+就可以了比如 div+p</p></li>
<li><p>如果生成带有类名或者id名字的，直接写.demo或者#two tab 键就可以了</p></li>
<li><p>如果生成的div 类名是有顺序的，可以用自增符号$<br><br>
Emment语法</p></li>
</ol>
<blockquote>
<p>综合案例下载</p>
</blockquote>
<p>个人公众号</p>
<p><img src="http://web-learn-coder.oss-cn-beijing.aliyuncs.com/2020/06/17/qrcodeforghccade8c7ee1c344.jpg?x-oss-process=image/auto-orient,1/quality,q_90/watermark,text_QOi1jue9queahOeggeWGnA,size_16,g_nw,x_1,y_1"></p><br><br>
来源：https://www.cnblogs.com/fireday/p/1css-yi.html

頁: [1]

琼殿技术论坛's Archiver

Web学习-CSS（一）