【Web前端HTML5&CSS3】04-CSS 基础语法

张张睡不醒

已于 2022-07-20 09:51:02 修改

阅读量60

点赞数

分类专栏： web前端文章标签： html5 css3 前端 css html

于 2022-07-18 12:32:05 首次发布

本文链接：https://blog.csdn.net/m0_56324984/article/details/125774591

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS：层叠样式表，用来设计网页元素样式

第一种方式：标签内部通过style设置，行内样式。只能对一个标签起作用，不方便维护

 <p style="color: red;">耶比</p>

第二种方式：编写到head中，单独使用style标签。通过CSS选择器选中元素为其设置各种样式。只能对一个页面中起作用，不能跨页面复用。

<style>
    p{color: blueviolet;}
</style>

第三种方式：编写到外部CSS文件，通过link标签来引入。可以使用到缓存机制，加快加载速度。

<link rel="stylesheet" href="style.css">

注释

   /*
     CSS注释
   */
   
    <!--HTML注释-->

基本语法

选择器、申明块

选择器：通过选择器可以选中页面中指定元素

申明块：指定为元素设置样式

常用选择器

id选择器

#id属性值{}，但是id不能重复使用，只能作用于一个

class选择器

.class属性值{}，与id类似，但不同的是可以重复使用。通过它给元素分组

统配选择器

*{}，全部标签

    <style>
        #mi{color: coral;}
        .hh{color: brown;}
       .ll{font-size: 50px;}
    </style>

    <p title=abd>z</p>
    <p id="mi">z</p>
    <p>s</p>
    <p class="hh ll">b</p>
    <p class="hh">x</p>

想要组合使用，交集选择器p.hh{}。元素选择器在前，如p

关系选择器

子元素选择器：语法父元素>子元素{}

后代元素选择器：语法祖先后代{}

选择下一个兄弟：语法前一个+后一个{}（要紧挨着）

选择下边所有兄弟：语法兄~弟{}

同一个标签下，如div，可以用,来一起选择

div *选择所有，注意有空格

属性选择器

p[title]{}

p[title=abd]{}

p[title^=abd]{} 以abd开头

p[title$=abd]{} 以abd结尾

p[title*=abd]{} 含有abd

伪类选择器

用来描述一个元素的特殊状态，比如第一个元素，被点击的元素。一般使用:开头

ul>li ：first-child{}（第一个子元素

ul>li ：last-child{}（最后一个子元素

ul>li ：nth-child(){}（第n个一个子元素，若括号直接写n选中所有，2n或even选中偶数位个，2n+1或odd选中奇数位，从1开始计数

plate:nth-of-type(2n+3) 3、5、7

nth-last-child()倒数

根据所有子元素进行排序

ul>li ：first-of-type{}

ul>li ：not(){} 符合条件元素剔除

链接 a:link{}没有访问过（正常链接）

a:visited{}表示访问过（由于隐私原因，只能修改颜色）

a:hover{鼠标移入}

a:active{鼠标点击}

伪元素选择器

用来描述一个元素的特殊状态，比如第一个元素，被点击的元素。一般使用：：开头

::first-letter 第一个字母

::first-line 第一行

::selection 鼠标选中内容

::before 必须结合content属性使用

::after

 div::before{
            content:'ddd';
            color: rgb(205, 102, 50);
        }
 div::after{
            content:'aad';
            color: rgb(50, 205, 55);
        }


body
    <div>hhhhhh</div>

得到结果