CSS简单入门（一）

最新推荐文章于 2022-09-01 12:24:41 发布

tylambition

最新推荐文章于 2022-09-01 12:24:41 发布

阅读量197

点赞数

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

本文链接：https://blog.csdn.net/tylambition/article/details/104254816

版权

CSS简单入门(一)

CSS是什么
CSS怎么用
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接、列表、渐变…）
盒子模型
浮动
定位
网页定位（特效效果）

1.CSS是什么

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

在这里插入图片描述

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单,SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画…浏览器兼容性

1.3 快速入门

stytle

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范<stytle> 可以编写css代码。每一个声明，最好使用分号结尾
      语法：
            选择器{
                声明1;
                声明2;
                声明3;
            }
    -->
    <style>

        h1{
    
            color:red;
        }
    </style>
</head>
<body>
<h1>CSS语法</h1>
</body>
</html>

建议使用这种规范
在这里插入图片描述

css的优势

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

1.4CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
    
            color:green;
        }
    </style>


    <link rel="stylesheet" href="css/stytle.css">

</head>
<body>

<!--优先级：就近原则-->

<!--行内样式:在标签元素中，编写一个stytle属性，编写样式即可-->
<h1 style="color:red" >CSS语法</h1>
<h1 >CSS语法</h1>


</body>
</html>

拓展：外部样式两种方式

链接式

html

<!--外部样式 链接式-->
    <link rel="stylesheet" href="css/stytle.css">

导入式

@import 是CSS2.1特有的！

<!--外部样式 导入式-->
    <style>
        @import url("css/stytle.css");
    </style>

2选择器

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

2.1基本选择器

标签选择器：选择一类标签格式：标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
      
        color: red;
        background: aqua;
        border-radius: 25px;
    }
    p{
      
        font-size:80px;
    }
</style>

<h1>hello</h1>
<h1>world</h1>
<p>你好！

最低0.47元/天解锁文章

tylambition

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简单入门（一）

CSS简单入门(一)CSS是什么CSS怎么用CSS选择器（重点+难点）美化网页（文字，阴影，超链接、列表、渐变…）盒子模型浮动定位网页定位（特效效果）1.CSS是什么1.1 什么是CSSCascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…1.2...
复制链接

扫一扫