2.1 基本功

学前须知

块元素

指的是里面可以嵌套其他标签的元素

如：h1~h6 , p , div（接下来会经常用到） , ol , ul……

行内元素

合理的使用行内元素会为css的引入带来极大的便利

如：

行内元素说明
strong 粗体元素
em 斜体元素
a 超链接
span（接下来会超级常用） CSS的定义样式

id属性于class属性

id属性具有：唯一性，class属性为：“类”。

即使用方法为：

<一般标签 id="阿巴阿巴"></一般标签（即非自闭合标签）>

<一般标签 class="阿巴阿巴"></一般标签>

引入CSS的三种常见方式

css相当于网页的皮肤

同时三种引入方式编译器会采用就近原则，如果有多个操作重复，就会采用最近的那个。

外部引入（推荐）

rel 取值固定为：styiesheet

type 取值固定为：text/css

href="文件路径"指的是css文件的位置。

<link/>外部引入标签
语法：
<link rel="styiesheet" type="text/css" href="文件路径"/>

内部引入

<style type="text/css">
    ……
</style>

行内引入

<div style="coloe:red">
    ……
</div>
<div style="coloe:blue">
    ……
</div>

选择方式

如何准确的选择css要套用到的代码，以下有5种常见的方式

元素选择器

使用起来最为简单粗暴

使用方式：元素名{属性:属性值;属性:属性值;}

<style type="text/css">
    div{coloe:red;}
</style>

即，将此页面所有的div标签内容变为红色。

id选择器

使用前要先给目标元素设置一个id值，可以精准的选择对象

使用方式：#元素名{属性:属性值;属性:属性值;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #a1{coloe:red;}
        </style>
    </head>
    <body>
        <div>阿巴阿巴</div>
        <div id="a1">墨隐好帅</div>
        <div>墨隐超级帅</div>
    </body>

即第二行的文字变成红色。

class选择器

使用前要先给目标元素设置一个class值，可以大范围的选择对象

使用方式：.元素名{属性:属性值;属性:属性值;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .b1{coloe:red;}
        </style>
    </head>
    <body>
        <div class="b1">阿巴阿巴</div>
        <div>墨隐好帅</div>
        <p class="b1">墨隐超级帅</p>
    </body>

即第一行和第三行的文字变成红色。

后代选择器

使用方式：#块元素 子元素{属性:属性值;属性:属性值;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div p{coloe:red}
            #div span{coloe:blue;}
        </style>
    </head>
    <body>
        <div>
            <p>阿巴阿巴</p>
            <span>阿巴阿巴</span>
        </div>
    </body>

即第一行为红色，第二行为蓝色。

群组选择器

使用方式：元素名,元素名,……{属性:属性值;属性:属性值;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p，span{coloe:red}
        </style>
    </head>
    <body>
        <div>
            <p>阿巴阿巴</p>
            <span>阿巴阿巴</span>
        </div>
    </body>

即第一第二行为红色。

posted @ 2021-11-07 14:09  始墨......至隐  阅读(44)  评论(0)    收藏  举报