初识css|青训营笔记

用户3598481607327
110 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

什么是CSS

用来定义页面元素的样式，包括字体和颜色、位置和大小等

CSS语法

<style>
    选择器{
          属性名：属性值;
          属性名：属性值;
    }
</style>
  • 选择器：要修饰的对象
  • 属性名：修饰对象的哪个样式
  • 属性值：样式的取值

CSS的工作原理

在打开一个网页的过程中，首先会加载HTML，然后解析HTML，解析出来是一个DOM树，对CSS加载并进行解析，从而得到一个渲染树。

b616edc2cd5a2a2b9b94787559271b1.png

在页面使用CSS

有三种引用CSS方式：外部样式、内部样式和行内样式

 <!-- 外部 -->
 <link rel="stylesheet" href="mycss.css">
 <!-- 内部 -->
  <style>
  div{ 
      color:white;  
     }
  </style>
  <!-- 行内 -->
  <div style="color: blueviolet;font-size: 100px;">这是一个div标签</div>

选择器

通配选择器

通配选择器用一个*表示，可对文档中的任何元素进行渲染。

<p>通配</p>
<div>选择器</div>
<style>
        *{
            color: blue;
            font-size: 30px;
        }

    </style>

image.png

标签选择器

标签选择器也叫元素选择器、类型选择器，直接选用元素的标签名当作选择器。比如p标签、div标签等。

<p>标签</p>
<div>选择器</div>
<h1>css</h1>
<style>
        p{
            color: blue;
            font-size: 30px;
        }
        div{
            color: brown;
            font-weight: 200;
        }
        h1{
            color: darkmagenta;
            background: yellow;
        }

    </style>

image.png ID选择器

可以选择井号#前缀选择指定id的标签，只选择页面中唯一的一个标签。

ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。

 <p id="t">id    </p>
 <p>选择器</p>
<style>
        #t{
            color: palegreen;
            font-size: 30px;
        }
        
    </style>

同样为p标签，但是只有id名为't'的文字有被渲染。

image.png

类选择器

类选择器使用点.前缀选择指定class的标签。

<p class="yestoday">昨天</p>
<p class="today">今天</p>
<p>明天</p>
 <style>
        .yestoday{
            color: slateblue;
        }
        .today{
            color: salmon;
            font-size: 30px;
        }
        
    </style>

image.png

类选择器与id选择器不同，在html中可以被多次调用。

属性选择器

通过元素的属性和属性值去选中元素。

  • el[attr=val] 选择 attr 为 val 的 el 元素
  • el[attr *= val] 只要el 元素的 attr 属性值里含有 val 就能被选择
    <label>用户名：</label>
    <input type="text" value="chao" disabled>
    <br><br>
    <label>密码：</label>
    <input type="password" value="123456">
 <style>
       input[disabled]{
        background: wheat;
       }
       input[type='password']{
        border-color: red;
       }

    </style>

image.png

伪类选择器

同一个标签，根据不同的状态，拥有不同的样式，这就是“伪类”。分为状态伪类和结构性伪类。

  • 状态伪类

元素与用户进行交互时可以显示不同的状态

伪类说明
link未访问链接时属性
visited访问后的属性
hover鼠标悬停时属性
active点击后的属性
focus某个标签获得焦点时的样式
<a href="# ">超链接</a>
<style>
        a:link{
            color: #000;
        }
        a:visited{
            color: red;
        }
        a:hover{
        color: green;
        }
        a:active{
            color: purple;
        }

    </style>

未访问时，字体颜色为“#000”

image.png

访问后字体颜色变为“red”

image.png

鼠标悬停时颜色变为“green”，移开鼠标颜色又变回去

image.png

点击后颜色变为“purple”

image.png

  • 结构性伪类
伪类说明
:first-child第一个节点
:last-child最后一个节点
:nth-child(n)顺数第几个节点（2n则表示顺数所有偶数位节点）
:nth-last-child（n）逆着数第几个节点（2n表示逆数所有偶数节点）
<ol>
    <li>苹果</li>
    <li>梨</li>
    <li>桃子</li>
    <li>哈密瓜</li>
    <li>葡萄</li>
   </ol>
<style>
       li:first-child{
        color: red;
       }
       li:nth-child(2){
        color: yellow;
       }
       li:nth-child(3){
        color: pink;
       }

       li:last-child{
        color: green;
       }
       li:nth-last-child(2){
        color: orange;
       }
       

    </style>

image.png

选择器的组合

名称语法说明示例
直接组合AB同时满足A和Binput:focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A>B选中B，如果它是A的子元素section >p
兄弟选择器A~B选中B，如果它在A后且与A同级h2~p
亲子选择器A+B选中B，如果它紧跟在A后面h2+p

总结

今天对CSS有了初步的认识，主要对选择器有了大致的了解。通配选择器的功能较为强大，我们较少使用它。id选择器和类选择器有相似的地方，但是我们使用类选择器会更多，因为类选择器可以同时、多次被调用，而id选择器只能被调用一次。越到后面，我们会使用组合的选择器去更好实现我们想要的效果。

avatar
文章
阅读
粉丝