css笔记

CSS样式表详解

最新推荐文章于 2025-05-10 16:22:55 发布

qq_29856871

最新推荐文章于 2025-05-10 16:22:55 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_29856871/article/details/74893415

java 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了CSS的基本概念及其在网页设计中的应用。详细讲解了CSS与HTML的四种结合方式，包括直接设置样式、内部样式表、外部样式表以及链接样式表。此外还探讨了CSS的选择器类型，如标签名选择器、类选择器、ID选择器等，以及它们的优先级。最后，文章提到了CSS布局的相关知识。

什么是css？

是层叠样式表用来定义网页的显示效果

CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS和HTML结合方式

第一种方式：直接对某个标签设置样式

<div style="background: red;color: yellow;">这是第一个div</div>
<div style="background: red;color: black;">这是第二个div</div>
<span style="background:blue ;color: red;"> 这是第一个span</span>
<span style="background:blue;color: black;"> 这是第二个span</span>

问题？两个div的样式相同有类似的地方，能不能把共性的地方抽取？

第二种方式:在html界面中引用css属性


<style type="text/css">
div {
    background: red;
    color: black
}
</style>
<style type="text/css">
span {
    background: blue;
    color: black;
}
</style>

问题？假设还有好多的html中的div要求有类似的属性？如何引用呢?


第三种方式:定义css的样式效果，通过引用方式进行使用  这种方式UI用的很多

创建css文件 
@CHARSET "UTF-8";

div {
        background: red;
        color: black;
}

@CHARSET "UTF-8";
span {
    background: blue;
    color: red;
}

在html文件中进行引用  

<style type="text/css">
@IMPORT url("div.css");
</style>

问题:对于div 或者span可能有多种样式，页面可能多变,如何灵活替换呢？


第四种方式:创建一个总的样式表，通过link 标签进行关联
@CHARSET "UTF-8";
@IMPORT url("div.css");
@IMPORT url("span.css");

<link rel="stylesheet" type="text/css" href="zong.css">

stylesheet 代表当前的文件和被引入的文件之间的关系
href         CSS文件的地址

CSS样式优先级

由上到下，由外到内。优先级由低到高。

CSS选择器

作用：告诉css的代码作用在哪个标签上


标签名选择器 具有相同标签名的标签，都有相同的样式

    div{}; span{}; table{}; 

类选择器：凡是表明同样的class属性的标签，拥有同样的属性

<style type="text/css">
    .hah {
        background: red;
        color: black;
        font-size: 45px;
    }
} 
id选择器:对专有的某个id的标签设置属性值，一般id唯一

<style type="text/css">
    #hehe {
    background: blue;
    border: thick;
    font-style: oblique;
    font-size: 33px;
    } 
</style>

* 优先级：特殊的情况下：标签名选择器 < 类选择器 < ID选择器 < style属性

CSS扩展选择器

关联选择器
    标签是可以嵌套的，标签和标签之间存在关系
    语法： div font{}

    <style type="text/css">
        div font {
        color: red;
        background: black;
    }

组合选择器
    可以将类选择器和id选择器进行合并书写
    .aaa,#bbb {
    background: #00ff00;
    }

伪元素选择器

    根据标签不同的状态设置不同的样式效果

    input:FOCUS {
    background: #00ff00;
}

    input:HOVER {
        background: #ff0000;
    }
    /* 未访问状态 */
    a:LINK {
        color: black;

    }

    /* 访问完成 */
    a:VISITED {
        color: green;
        font-size: 15px;
    }

    /* 悬停状态 */
    a:HOVER {
        color: red;
        font-size: 25px;
    }

    /* 点击状态 */
    a:ACTIVE {
        color: blue;
        font-size: 35px;
    }

CSS布局

盒子模型 
    margin 外边距
    padding 内边距
float
    悬浮
position
    位置