码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础

时间:2020-08-03 14:51:20      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:utf-8   href   快速   层叠   思想   收录   yellow   引擎   内容   

CSS基础

1. 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现层(美化网页)

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

2. 发展史

CSS1.0

CSS2.0 DIV(块)+CSS,提出了HTML与CSS分离的思想,网页变得很简单

CSS2.1 浮动,定位

CSS3.0 圆角边框,阴影,动画... 存在浏览器兼容性的问题

3. 快速入门

style

基本入门

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

    <!--规范,<style> 可以编写css代码,在head内
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
            ...
        }
    每一个声明最好使用分号结尾
    -->
    <style>
        h1{
            color: red;
        }
    </style>

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用这种规范(CSS和HTML分离,用link连接)

技术图片

CSS的优势

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的CSS文件
  5. 利用SEO(搜索引擎优化),容易被搜索引擎收录

4. CSS的三种导入方式

行内样式,内部样式,外部样式

<!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">我是标题</h1>

</body>
</html>
/*外部样式*/
h1{
    color: yellow;
}

优先级:就近原则,行内样式最高,谁离元素越近优先级越高

拓展:外部样式两种写法

  • 链接式:

    属于html标签

    <link rel="stylesheet" href="css/style.css">
    
  • 导入式:

    属于css样式,@import 是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>标题2</h1>
    
    </body>
    </html>
    

CSS基础

标签:utf-8   href   快速   层叠   思想   收录   yellow   引擎   内容   

原文地址:https://www.cnblogs.com/wang-sky/p/13426146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!