前端基础学习笔记2-CSS3

最新推荐文章于 2024-07-08 17:09:50 发布

aoliaoliaoo

最新推荐文章于 2024-07-08 17:09:50 发布

阅读量62

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/aoliaoliaoo/article/details/117961352

版权

CSS3

一、简述

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

编写规范

文件夹目录

-xxx程序（文件夹）

-css（文件夹）

-html文件

css语法

选择器{
       
    声明1;
    声明2;
}

编写

style.css
```
h1{
         
    color: red;
}
```

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--关联样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

二、3种CSS导入方式

行内样式
内部样式
外部样式
若多个同时存在，采用就近原则！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
     
            color: blue;
        }
    </style>
    <!--外部样式，链接css文件-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式，在标签元素中添加style属性-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

三、选择器

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

1、三种基本选择器（重点）

标签选择器：选择一类标签
class选择器：选择所有class属性一致的标签，可以跨标签
id选择器：id全局唯一
若多个同时存在，不遵循就近原则！优先级：id>class>标签！

<!DOCTYPE html>

最低0.47元/天解锁文章

aoliaoliaoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础学习笔记2-CSS3

CSS3一、简述优势：美化网页实现内容和表现分离（css和html分离）网页结构统一，可以复用样式十分丰富建议使用独立于html的css文件利用SEO，容易被搜索引擎收录编写规范文件夹目录-xxx程序（文件夹） -css（文件夹） -html文件css语法选择器{ 声明1; 声明2;}编写style.cssh1{ color: red;}index.html<!DOCTYPE html>
复制链接

扫一扫