CSS（简介or选择器）

时间 2020-06-14

标签 css 简介选择器栏目 CSS 繁體版

原文原文链接

咱们为何须要CSS?

使用css的目的就是让网页具备美观一致的页面，另一个最重要的缘由是内容与格式分离在没有CSS以前，咱们想要修改HTML元素的样式须要为每一个HTML元素单独定义样式属性，当HTML内容很是多时，就会定义不少重复的样式属性，而且修改的时候须要逐个修改，费心费力。是时候作出改变了，因此CSS就出现了。css

CSS的出现解决了下面两个问题：html

将HTML页面的内容与样式分离。
提升web开发的工做效率。

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式一般又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。web

css的优点

1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减小网页的代码量，增长网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录浏览器

如何使用CSS？

咱们一般会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，而后在HTML文件中经过link标签引用该CSS文件便可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。网络

CSS语法

CSS基础语法

CSS语法能够分为两部分：布局

选择器
声明

声明由属性和值组成，多个声明之间用分号分隔。搜索引擎

网页中引用CSS样式

内联样式
行内样式表
外部样式表
- 连接式
- 导入式

内嵌方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS内嵌式</title>

</head>
    <style>
        p{
            color: #ff00c2;
        }
    </style
    >
<body>
    <p>我是CSS内嵌式</p>

</body>
</html>

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS行内样式</title>
</head>
<body>
    <p style="color: red">我是CSS行内样式</p>
</body>
</html>

外联样式表-连接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外联样式表连接式</title>
</head>
    <link rel="stylesheet" href="index.css"
<body>
    <p>我是外联样式表连接</p>
</body>
</html>

index.cssurl

p{
    color:green;
}

外联样式表-@import url()方式导入式

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        @import url(index.css);
    </style>
<body>
    <p>导入式</p>
</body>
</html>

index.cssspa

p{
    color:green;
}

注意：
@import url()必须写在文件最开始的位置。code

连接式与导入式的区别

一、<link/>标签属于XHTML,@import是属性css2.1 二、使用<link/>连接的css文件先加载到网页当中，再进行编译显示 三、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中 四、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来讲就是无效的