当前位置：首页 > article >正文

(前端基础)CSS(一)

article 2025/2/22 18:21:49

了解

Cascading Style Sheet：层叠级联样式表

CSS：表现层（美化网页）如：字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动

css优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

CSS的四种导入方式

行内样式

在需要设置的标签后面加style。优先级最高

css内部样式

可在html文件中的head标签中写如下：

<style>
选择器{
声明1；

声明2；

声明3；
}
</style>

链接式外部样式

在文件恰当位置添加一个css文件

在需要引用样式的HTML文件的head标签中添加link标签。

<link rel="stylesheet" href="css文件位置">

内部样式与外部样式优先级一致，从上到下，谁先写，谁的优先级就高。

导入式外部样式（了解）

先在head标签中添加style标签

<style>
@import "css路径";
</style>

选择器

作用：选择页面上的某一个或者某一类元素

标签选择器

会选择到页面上所有的这个标签的元素（选择一类标签），标签选择器优先级最低

标签选择器{

声明1；

声明2；

}

类选择器class

在标签后加class，class属性值为自定义，class值相同的为一组，可以复用，类选择器优先级>标签选择器（选择所有class属性值一致的标签）

<h1 class="类名称"></h1>

样式引用时，格式如下：

.类名{

声明1；

声明2

}

id选择器

在标签后加id，id属性值为自定义，id全局唯一,优先级最高

<h1 id="id名称"></h1>

样式引用时，格式如下：

#id名{

声明1；

声明2

}

优先级对比：id选择器>类选择器>标签选择器

层次选择器

根据以下框架，写HTML文件的body结构

红色为类选择器，紫色为id选择器

HMTL如下：

后代选择器

在某个元素的后面,eg:body后面的所有p标签

标签1 标签2{

声明1；

}

body后面的p标签全部设置为红色

类tex后面的p标签全部设置为黄色背景

子选择器

某个标签(选择器)的子标签，eg：body标签后面的p标签，该处p标签不包含无序列表中的p标签

标签1>标签2{

声明1；

}

body后面的第一轮子标签p字体全部设置为红色,类标签tex下的p标签背景为黄色

相邻选择器

某个标签（选择器）的相邻（下一个元素），eg：类选择器action的相邻标签

选择器+标签{

声明；

}

li的相邻li标签设置为红色字体

id选择器的同级p设置为蓝色背景，tex选择器的同级p设置为黄色背景，action的同级p设置为红色字体

通用选择器

选中元素的向下的所有兄弟元素

选择器+标签{

声明；

}

类选择器action的相邻p（所有下一个）元素，设置为橙色

结构伪类选择器

伪类选择器格式：

标签：参数{

声明；

}

first-child:第一个元素

last-child：最后一个元素

标签：nth-child()选择当前p元素的父级下的第几个元素,根据顺序选择

nth-of-type(2):选择父元素下的p标签的第几个，根据类型选择

扩展：hover，鼠标移动改变效果

属性选择器

设置10个标签，每个标签中包含许多属性，为a标签设置默认样式，如下

<p class="demo">
    <a href="http://baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item "  >3</a>
    <a href="images/123.png" class="links item "  >4</a>
    <a href="images/123.ipg" class="links item "  >5</a>
    <a href="abc" class="links item "  >6</a>
    <a href="/a.pdf" class="links item "  >7</a>
    <a href="/abc.pdf" class="links item "  >8</a>
    <a href="abc.doc" class="links item "  >9</a>
    <a href="abcd.doc" class="links item last"  >10</a>
</p>

默认样式：

<style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: red;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    </style>