Css3样式的学习

最新推荐文章于 2022-07-13 15:57:16 发布

嚣张的程序猿

最新推荐文章于 2022-07-13 15:57:16 发布

阅读量58

点赞数

分类专栏： Html5+CSS3+JavaScript+Vue的讲解

本文链接：https://blog.csdn.net/difgsief/article/details/115654297

版权

Html5+CSS3+JavaScript+Vue的讲解专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS3

结构+表现+交互

什么是CSS

如何去学习

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

1.1，什么是CSS

cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

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

在这里插入图片描述

1.2,发展史

css1.0

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

css2.1浮动和定位

css3.0 圆角，阴影，动画… 浏览器兼容性~

练习格式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t09Lml1I-1618277548736)(E:\学习\图片\116.PNG)]

1.3，快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写css代码,每一个声明最好使用分号结尾

    语法:
         选择器{

         声明1;
         声明2;
         声明3;

         }


    -->

    <style type="text/css">
        h1{
            color: #641780;
        }

    </style>

</head>
<body>


<h1>我是标题</h1>
</body>
</html>

建议使用这种样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzmPfXtp-1618277548737)(E:\学习\图片\117.PNG)]

css的优势：

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

1.4，CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
        
   <!--外部样式-->
        
   <link rel="stylesheet" href="css/Style.css">
</head>
<body>
<!--优先级:就近原则,谁更靠近html代码就用谁-->

<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: beige" ><font size="60px"> Hello,World!</font></h1>

</body>
</html>

/*外部样式 */
h1 {
    color: chartreuse;
    font-family: 楷体;
}

拓展：外部样式两种写法

链接式：

html

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

导入式：

CSS2.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--导入式-->
    <style>
        @import "css/Style.css";
    </style>
</head>
<body>
<h1>学Java</h1>
</body>
</html>

嚣张的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css3样式的学习

CSS3结构+表现+交互什么是CSS如何去学习css是什么css怎么用（快速入门）css选择器（重点+难点）美化网页（文字，阴影，超链接，列表，渐变…）盒子模型浮动定位网页动画（特效效果）1.1，什么是CSScascading Style Sheet层叠级联样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…1.2,发展史css1.0css2.0 DIV（块）+CSS ，HTML与CSS结构分离的思想，网页变得简单，SEO
复制链接

扫一扫