前端开发之CSS篇一

一、CSS介绍和语法

二、CSS引入方式

三、基本选择器

四、高级选择器

五、伪类选择器

六、伪元素选择器

1️⃣ CSS介绍和语法

　　1、 CSS的介绍

　　（1）为什么需要CSS？

　　使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，
我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，
并且修改的时候需要逐个修改，费心费力。而此时CSS就出现了。
　　CSS的出现解决了以下问题：
　　　　首先，将HTML页面的内容与样式的分离；其次，提高了Web开发的效率。

　　（2）什么是CSS？
　　CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。
也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
　　
　　（3）CSS的优势
　　　　一是内容与表现分离；二事网页的表现统一，容易修改；三是丰富的样式，使页面布局更加灵活；
四是减少网页的代码；五是运用独立页面的CSS，有利于网页被搜索引擎收录。

　　（4）如何使用CSS？
　　通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中
通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该
文件中的样式规则渲染HTML文件。

2、CSS语法
　　（1）CSS基础语法
　　　　CSS语法分为两部分：
　　　　选择器和声明
　　　　声明由属性和值组成，多个声明之间用分号隔开。

语法：
    选择器｛
            声明1；
            声明2；
            声明3；   
｝

  例如：
            h2{
                color:green;
                font-size:20px;
            }

　　（2）代码注释

　　　　方法：/*代码注释写在这里*/

2️⃣ CSS引入方式

　　网页中引入CSS样式有三种：　

    1、内联样式
    2、行内样式表
    3、外部样式表
        ①链入式
        ②导入式

　　（1）内嵌方式

　　　　style 标签

    例如：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式1</title>
<!--CSS引入的方式一-->
    <style>
        h2{
           color:green;     /*这是注释*/
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <h2>这是二号标题</h2>
    </div>
</body>
</html>

　　（2）行内样式

　　示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式2</title>
</head>
<body>
    <div>
        <p style="font-size: 30px;color:red">这是一个段落标签</p>
    </div>
</body>
</html>

　　（3）外联样式表--链接式

　　　　link 标签

　　　　例如：index.css为css样式表文件

　　　　index.css文件如下

　　　　　　color:pink;

　　　　　　font-size:30px;

　　　　}

　　　　然后在HTML文件中通过link标签引入，语法：index.css"/>

　　　　示例如下：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css_1</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div>
            <p >这是一个段落标签</p>
        </div>
    </body>
    </html>

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

　　　　同样导入index.css

　　　　语法如下：　　　

 <style>
           @import url(index.css);
       </style>
 注意：@import url() 必须写在文件最开始的位置

　　　　示例如下：

 <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>css_1</title>
            <style>
                @import "index.css";
            </style>
        </head>
        <body>
            <div>
                <p >这是一个段落标签</p>
            </div>
        </body>
        </html>

　　链接式与导入式的区别：　　

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

前端开发之CSS篇一

猜你喜欢