航母已经抵达 發表於 2020-10-28 10:32:00

前端基础学习（2） CSS三种引用方式 CSS选择器类型 CSS属性

<h2 id="前端基础学习2-css三种引用方式-css选择器类型-css属性">前端基础学习（2） CSS三种引用方式 CSS选择器类型 CSS属性</h2>
<h4 id="一今日内容">一、今日内容</h4>
<ul>
<li>CSS的三种引用方式</li>
<li>CSS选择器的类型</li>
<li>CSS属性</li>
</ul>
<h4 id="二css的三种引用方式">二、CSS的三种引用方式</h4>
<p>CSS（Cascading Style Sheet），即层叠样式表，主要用于定义如何显示HTML元素，给HTML设置样式，让它更加美观；</p>
<p>CSS的基本语法为：</p>
<img src="https://gitee.com/raigor1/img_folder/raw/master/img/image-20201027194841673.png">
<p>同时，CSS的注释语法与HTML也不同：</p>
<pre><code class="language-css">/*这是一条CSS注释语句*/
</code></pre>
<p>那么，如何将CSS和HTML统一起来呢，主要有三种方法实现：</p>
<ol>
<li>
<p>head标签下引用</p>
<pre><code class="language-html">&lt;style&gt;
        div{
                background-color: red;
                height: 100px;
                width:100px;
        }
&lt;/style&gt;
</code></pre>
</li>
<li>
<p>操作标签下引用</p>
<pre><code class="language-html">&lt;div style="background-color: blue; height: 200px; width: 200px"&gt;
</code></pre>
</li>
<li>
<p>导入外部样式表</p>
<p>创建CSS样式表文件：</p>
<pre><code class="language-css">/*test.css*/
div{
        background-color: green;
        width: 200px;
        height: 200px;
}
</code></pre>
<p>然后再需要导入外部样式表的<code>.html</code>文件内的head标签下引用：</p>
<pre><code class="language-html">&lt;link re="stylesheet" href="test.css"
</code></pre>
</li>
</ol>
<h4 id="三css选择器的类型">三、CSS选择器的类型</h4>
<ol>
<li>
<p>基本选择器</p>
<ul>
<li>
<p>元素选择器</p>
<pre><code class="language-css">div{
        color: green;
}
</code></pre>
</li>
<li>
<p>id选择器</p>
<pre><code class="language-css">#yesimola{
        color: green;
}
</code></pre>
</li>
<li>
<p>类选择器</p>
<pre><code class="language-css">/*选择全部c1类型的标签*/
.c1{
        color: green;
}

/*选择div标签下class为c1的标签*/
div.c1{
        color: green;
}
</code></pre>
</li>
<li>
<p>通用选择器</p>
<pre><code class="language-css">/*选择全部标签*/
*{
        color: green;
}
</code></pre>
</li>
</ul>
</li>
<li>
<p>组合选择器</p>
<ul>
<li>
<p>后代选择器</p>
<pre><code class="language-css">/*找到div标签后代里面的所有a标签*/
div a{
        color: red;
}
</code></pre>
</li>
<li>
<p>儿子选择器</p>
<pre><code class="language-css">/*选择所有父级是div标签的a标签*/
div&gt;a{
        color: red;
}
</code></pre>
</li>
<li>
<p>毗邻选择器</p>
<pre><code class="language-css">/*选择所有紧邻这div标签之后的a标签*/
div+a{
        color: red;
}
</code></pre>
</li>
<li>
<p>弟弟选择器</p>
<pre><code class="language-css">/*选择同级的div标签后的所有兄弟标签*/
div~a{
        color: red;
}
</code></pre>
</li>
</ul>
</li>
<li>
<p>属性选择器</p>
<pre><code class="language-css">/*找到所有含有title属性的标签*/
{
    color: red;
}

/*找到含有title属性的div标签*/
div{
    color: red;
}

/*找到含有type属性且属性为text的input标签*/
input{
    color: red;
}
</code></pre>
</li>
<li>
<p>正则选择器</p>
<pre><code class="language-css">/*找到所有title属性以hello开头的元素*/
{
        color: red;
}

/*找到所有title属性以hello结尾的元素*/
{
    color: red;
}

/*找到所有title属性包含hello的元素*/
{
    color: red;
}

/*找到所有title属性中有一个值为hello的元素*/
{
    color: red;
}
</code></pre>
</li>
<li>
<p>分组</p>
<pre><code class="language-css">/*div和p标签设置共同的样式*/
div, p{
    color: red;
}
</code></pre>
</li>
<li>
<p>伪类选择器</p>
<pre><code class="language-css">/*选择未访问过的链接a标签*/
a:link{
    color: green;
}

/*选择已访问的链接*/
a:visited{
    color: green;
}

/*鼠标移动到链接上（可应用在其他标签上）*/
a:hover{
    color: green;
}

/*选定的链接（点击未松开的那个瞬间）*/
a:active{
    color: green;
}

/*input输入框获取光标时*/
input:focus{
    background-color: green;
}
</code></pre>
</li>
<li>
<p>伪元素选择器（通过CSS来造标签，不推荐使用）</p>
<ul>
<li>
<p>first-letter</p>
<pre><code class="language-css">/*将p标签中文本第一个字改变颜色和大小*/
p:first-letter{
    font-size: 40px;
    color: red;
}
</code></pre>
</li>
<li>
<p>before</p>
<pre><code class="language-css">/*将p标签中文本前面加上相应内容(CSS语法中，属性值内的字符要用单引号)*/
p:before{
        content: '?';
        color: red;
        font-size: 40px;
}
</code></pre>
</li>
<li>
<p>after</p>
<pre><code class="language-css">/*将p标签中文本后面加上相应内容*/
p:after{
        content: '!';
        color: red;
        font-size: 40px;
}
</code></pre>
</li>
</ul>
</li>
<li>
<p>CSS的继承</p>
<p>我们对一个标签限定CSS样式，会直接影响父标签下除a标签外所有子标签的效果；</p>
</li>
<li>
<p>选择器的优先级</p>
<p>设定CSS选择器时，有时会选定多次个别标签，这时不同的CSS选择器的优先级顺序就显得尤为重要。选择器的优先级加权如下：</p>
<table>
<thead>
<tr>
<th>选择器类型</th>
<th>优先级加权</th>
</tr>
</thead>
<tbody>
<tr>
<td>继承</td>
<td>0</td>
</tr>
<tr>
<td>类选择器</td>
<td>10</td>
</tr>
<tr>
<td>元素选择器</td>
<td>11</td>
</tr>
<tr>
<td>id选择器</td>
<td>100</td>
</tr>
<tr>
<td>内联样式</td>
<td>1000</td>
</tr>
<tr>
<td>属性值后加<code>!important</code></td>
<td>INF</td>
</tr>
</tbody>
</table>
<p>优先级数字越大，越优先展示其效果，优先级相同的，显示后面定义的选择器对应的样式；</p>
</li>
</ol>
<h4 id="四css属性">四、CSS属性</h4>
<ol>
<li>
<p>高度宽度设置</p>
<ul>
<li>内敛标签的宽度（width）高度（heigtht）无法设置，只和文字覆盖区域有关；</li>
<li>块级标签的宽度高度可设置；</li>
</ul>
</li>
<li>
<p>字体属性</p>
<ul>
<li>
<p>字体类型（如果选择多个字体属性浏览器会寻找第一个可使用的字体）</p>
<pre><code class="language-css">font-family: '楷体', '宋体', '微软雅黑';
</code></pre>
</li>
<li>
<p>字体大小（默认伪16px）</p>
<pre><code class="language-css">font-size: 16px;
</code></pre>
</li>
<li>
<p>字体颜色</p>
<p>字体颜色具有：十六进制、RGB、颜色名、RGBA四种表示方法。</p>
<pre><code class="language-css">color: purple;
</code></pre>
</li>
<li>
<p>字重（粗细）</p>
<pre><code class="language-css">font-weigth: bold;
</code></pre>
<p>该属性对应的属性值主要包括：</p>
<ul>
<li>normal：default；</li>
<li>bold；</li>
<li>bolder；</li>
<li>lighter；</li>
<li>100-900：400对应normal，700对应bold；</li>
<li>inherit：继承父元素字体的粗细值；</li>
</ul>
</li>
</ul>
</li>
<li>
<p>文字属性</p>
<ul>
<li>
<p>文字对齐</p>
<pre><code class="language-css">text-align: rigth;
</code></pre>
<p>该属性对应的属性值主要包括：rigth、left、center、justify（两边对齐）;</p>
</li>
<li>
<p>文字装饰</p>
<pre><code class="language-css">text-decoration: none;
</code></pre>
<p>该属性对应的属性值只要包括：none（常用于给超链接a标签去掉下划线）、underline、overline、line-through、inherit等；</p>
</li>
<li>
<p>首行缩进（英文字符默认占据16px）</p>
<pre><code class="language-css">text-indent: 32px;
</code></pre>
</li>
</ul>
</li>
<li>
<p>背景属性</p>
<ul>
<li>
<p>背景颜色</p>
<pre><code class="language-css">background-color: color;
</code></pre>
<p>同文字颜色一样，也可以使用RGB、十六进制、RGBA、颜色名称四种方式表示；</p>
</li>
<li>
<p>背景图片</p>
<pre><code class="language-css">background-image: url("")
</code></pre>
<p>如果设置尺寸超过了图片本身尺寸，会多个图片铺满整个背景区域，如果想要单个背景图片拉伸铺满屏幕，可以添加属性：</p>
<pre><code class="language-css">/*关闭平铺*/
background-repeat: no-repeat;
/*将图片尺寸XY轴都缩放至背景的100%*/
background-size: 100% 100%;
</code></pre>
<p>此外，back-ground属性还具有repeat-x和repeat-y等属性值，分别代表横向平铺和纵向平铺；</p>
<p>另外，我们可能还需要将图片位置设置在浏览器页面中央：</p>
<pre><code class="language-css">background-position: center center;
</code></pre>
<p>除center center属性值外，从左上角至右下角，位置属性值依次为：left top\center top\right top\left center\rigth center\left botton等；</p>
<p>这么多属性也可以统一简写在一个属性内：</p>
<pre><code class="language-css">background: url("yeye.jpg") no-repeat left center;
</code></pre>
<p><em>小例子：利用<code>background-attachment: fixed;</code>让背景图片固定，即使鼠标滚轮上下滑动也保持位置：</em></p>
<pre><code class="language-html">&lt;!--case.html--&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;滚动背景图示例&lt;/title&gt;
    &lt;style&gt;
      * {
            margin: 0;
      }
      .box {
            width: 100%;
            height: 500px;
            background: url("https://gitee.com/raigor1/img_folder/raw/master/img/image-20200924165150649.png") no-repeat center center;
            background-attachment: fixed;
      }
      .d1 {
            height: 500px;
            background-color: tomato;
      }
      .d2 {
            height: 500px;
            background-color: steelblue;
      }
      .d3 {
            height: 500px;
            background-color: mediumorchid;
      }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="d1"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
    &lt;div class="d2"&gt;&lt;/div&gt;
    &lt;div class="d3"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</li>
</ul>
</li>
</ol><br><br>
来源：https://www.cnblogs.com/raygor/p/13889617.html
頁: [1]
查看完整版本: 前端基础学习（2） CSS三种引用方式 CSS选择器类型 CSS属性