CSS教程

认识CSS

本文主要是介绍认识CSS，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

什么是CSS？

如何css

1.css是什么

2.css怎么用（快速入门）

3.CSS选择器（重点+难点）

4.美化网页（文字美化，阴影，超链接，列表，渐变...）

5.盒子模型

6.浮动

7.定位

8.网页动画（特效）wccc 菜鸟教程

1.1 什么是CSS？

CSS(Cascading Style Sheet) 层叠样式表

CSS ：表现层 （美化网页）

字体 ，颜色，边距，高度，宽度，背景图片，网页定义和浮动...

1.2 CSS发展史

CSS1.0

CSS2.0 CSS和HTML分离

CSS2.1 浮动，定位

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

举例

此时css和html 写在了一起，一般建议html 和css分离

    <!--规范，<style> 可以编写CSS的代码
    语法：
    选择器{
        声明1;			<!--每一个声明最好使用分号结尾-->
        声明2;
        声明3;
        ...
    }
    -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java,西部开源">
    <meta name="description" content="来这个地方可以学习Java">
    <title>我的第一个网页</title>
    <style>
    h1{
    color : blue;
    }
    </style>

</head>
<body>
<h1>Hello World !</h1>
<style>
    h1{
    color : red;
    }
</style>
</body>
</html>

建议html 和 css 分离

link标签 将分离的html 和css 联系起来

css的优势：

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

CSS的三种导入方式 和起作用优先级

1.行内样式

2.内部样式表

3.外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
<!--内部样式-->
    <style>
        /*这里面是要写css 不是html的注释方法  css注释方法为/**/   */
    h1{
        color:green;
    }
    </style>


</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<!--不符合 结构与表现分离的思想-->
<h1 style="color:red">我是标题~~</h1>
<!--<h1 style="color:red; ..."> 多个的话，分号隔开-->
三种样式优先级高到低（就近原则 （谁离这个代码近，谁优先级高））：行内样式>  外部样式表 ？ 内部样式表
<hr>
新版本有变化 ：三种样式优先级高到低：行内样式> 外部样式 > 内部样式
</body>
</html>

/*外部样式*/
h1{
    color:pink;
}

优先级：三种样式优先级高到低（就近原则 （谁离这个代码近，谁优先级高））：

行内样式> 外部样式表 ？ 内部样式表

新版本有变化 ：三种样式优先级高到低：行内样式> 外部样式 > 内部样式

外部样式拓展：（两种写法）

一 ：链接式：link标签

html

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

二：导入式：@import url("");

@import url(""); 是 css2.1特有的 ，一般不用这个

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

    <style>
        @import url("css/style.css");
    </style>

</head>
<body>
<h1>123456</h1>
</body>
</html>
这篇关于认识CSS的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航