程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

CSS快速入门

发布于2021-03-13 19:05     阅读(1343)     评论(0)     点赞(19)     收藏(2)


1、什么是CSS


如何学习

1. css是什么
2. css怎么用 (快速入门)
3. css选择器 (重点 + 难点)
4. 美化网页 (文字,阴影,超链接,渐变.....)
5. 盒子模型 
6. 浮动
7. 定位
8. 网页动画 (特效动画)

1.1 什么是CSS

CSS:表现(美化网页) 包括内容如下:

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

1.2 CSS发展史

CSS1.0

CSS2.0 DIV(块级元素) + CSS,HTML和CSS结构分离的思想,网页变得简单,SEO

CSS2.1 浮动和定位

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

CSS3.0继承CSS2.0所有

1.3 快速入门

1.基本入门

​ 这种是内部CSS样式

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

<!--
        规范,style 可以编写css代码,每一个声明最后都使用分号结尾
        语法:
            选择器{
                声明1:
                声明2:
                声明3:
            }
-->

    <style>

        h1{
           color: rosybrown;
        }

    </style>

</head>
<body>

    <h1>Holle world!</h1>

</body>
</html>

建议使用这种方式,外部引入CSS

在这里插入图片描述

2.CSS的优势

1. 内容和表现分离
2. 网页结构表现统一,可以实现复用性
3. 样式十分的丰富
4. 建议使用独立于html的css文件,也就是上方的外部引入css
5. 利用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>

    <!--  优先级:就近原则 -->
    <!--  行内样式:在标签元素中,编写一个style属性,编写样式即可  -->
    <h1 style="color: red">Holle world!</h1>

</body>
</html>

拓展: 外部样式两种写法

  • 导入式:@import 是CSS2.1特有的

  • 	<style>
            @import url("css/style.css");
        </style>
    
  • 链接式:

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

​ 本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。

原文链接:https://blog.csdn.net/HongLingya/article/details/114655178




所属网站分类: 技术文章 > 博客

作者:92wwhehjw

链接:http://www.qianduanheidong.com/blog/article/35811/a9a1d767f051c1eac80e/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)