初始CSS样式

最新推荐文章于 2024-07-20 16:31:54 发布

「已注销」

最新推荐文章于 2024-07-20 16:31:54 发布

阅读量149

点赞数

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_42207496/article/details/104171241

版权

学习笔记专栏收录该内容

28 篇文章

订阅专栏

本文深入讲解CSS（层叠样式表）的基本概念与使用方法，包括四种引入方式：行内样式、内部样式、外部样式和导入式。探讨了选择器的种类及优先级，如全局选择器、元素选择器、类选择器和ID选择器，以及它们在网页布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

层叠样式表，级联样式表，简称样式表
文件后缀  .css

作用：
实现了内容与表现的分离
提高了代码的重用性和可维护性

一个css文件可以被对个HTML文件引入
一个HTML文件可以引入多个css文件

引入css

1）行内样式（内联样式）  只对当前元素起作用
<div style="color: red;"></div>

2）内部样式     只对当前页面起作用
<head>
    <style>
        /*css样式*/
        选择器{
            属性:属性值;
            属性:属性值;
            属性:属性值;
        }
    </style>
</head>

3）外部样式   提高了代码的重用性和可维护性，实现了内容与结构完全分离
<head>
    <link rel="stylesheet" href=".css"/>
</head>


4）导入式
<head>
    <style>
        @import "";
    </style>
</head>

@import和link的区别：
1.@import先加载HTML，再加载css样式，link一边加载HTML，一边加载css
2.@import有兼容性，IE5以上支持，link没有兼容性
3.@import只能引入css文件，link还可以引入其他内容
4.@import会增多http请求

基本选择器

7.基本选择器
1）全局选择器，通用选择器    *
选中网页所有内容

2）元素选择器   div   a   img   b   p  span  ul   li   table   input
选中所有指定的元素

3）类选择器
<div class="className"></div>
.className{}

class名字可以重复，class名字可以起多个，用空格隔开

4）ID选择器
<div id="idName"></div>

#idName{}

id名字唯一

选择器优先级：行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重：         1000      100      10          1
优先级相同，后面的代码生效

5）合并选择器
选择器1,选择器2,...{}

提取共同样式