菜单 搜索
首页 前端知识 初识CSS

初识CSS

2024-04-12 20:04:46 前端知识 前端哥 723 246 我要收藏

目录

前言：

        CSS的介绍：

        CSS的发展：

        1）CSS1.0：

        2)CSS2.0:

        3)CSS2.1:

        4）CSS3：

CSS特点：

        1）丰富的样式定义：

        2）易于设置和修改：

        3）可以多页面应用：

        4）层叠：

5）页面压缩：

        CSS语法规则：

CSS选择器：

说明：

1.通用选择器：

2.标签选择器：

3.ID选择器：

4.类选择器：

5.后代选择器：

6.子代选择器：

7.相邻兄弟选择器：

8.通用兄弟选择器：

9.分组选择器：

10.属性选择器：

在HTML使用CSS的方式： 

1.内嵌样式表：

2.内联样式：

3.外部样式：

4.导入样式表：

CSS注释：

说明：

方法：

总结：

前言：

CSS在Web开发领域中有着举足轻重的地位，是一名前端工程师必备的技能之一，如下是CSS的优势：

  1. 简单：CSS很容易学习和理解不像很多语言具有逻辑思维复杂且关联多，对于HTML文档来说CSS是不可替代的，因为在很多HTML文档中都需要使用CSS来设置样式。
  2.  节省时间：你可以把所有的CSS样式都写到一个.css格式的文件中，然后再HTML页面中引用。
  3. 修改方便:当你将所有的CSS保存在.css文件中在其他多个HTML文件中引用了的话，那么修改一个.css文件里面的东西就可以一起修改所有的HTML文档中的样式，不需要一个个的去修改了。
  4.  兼容性：css还可以根据不同的设备来设计网页的样式。

0基础看这一篇就够了HTML教程(详细汇总)-CSDN博客

        CSS的介绍：

        CSS是"Cascading Style Sheet"的缩写，中文意思是"层叠样式表",它是一种标准的样式表语言，用于描述网页的表现形式。

        CSS的主要作用是修改属性的样式，比如字体的颜色，背景，元素所在的位置等等，不仅如此市面上所有的浏览器都支持CSS。

        CSS的发展：

        20世界90年代的时候HTML诞生了，这个时候的HTML只能用来控制网页的显示的效果，但是经过了不断地发展HTML中新添加了很多属性用来设计页面，随着属性的增多，HTML变得越来越慢，内容越来越多越杂越乱。于是CSS诞生了。

        1994年，哈坤-利提出了CSS的建议，并决定与伯特-波斯(Bert Bos)合作，共同开发CSS。

        1994年底，哈坤-利在芝加哥的一次会议上正式提出了CSS建议，之后又在1995年的www网络会议上再次提出了CSS，在会议上的伯特-波斯展示了支持CSS的Argo浏览器，哈坤-利也展示了支持CSS的Arena浏览器。

        同年，W3C组织(World WideWeb Consortium)成立，该组织对CSS的发展很感兴趣，为此还专门组织了一次讨论会，最终CSS的全部开发成员都加入了W3C组织，并负责CSS标准的制定，至此CSS的发展上走上正轨。

        W3C,中文名为"万维网联盟"，也称为"W3C理事会"，由万维网的发明者"蒂姆-波奈斯-李"于1994年10在麻省理工学院计算机科学实验室成立，是Web技术领域最具权威和影响力的国际中立性技术标注机构。

        至今为止，CSS经历了4个版本的迭代更新：

        1）CSS1.0：

        1996年12月W3C发布了CSS的第一个版本--CSS1.0,参考说明如：(https://www.w3.org/TR/CSS1/)

        2)CSS2.0:

        1998年5月，CSS2.0版本正式发布,参考说明如:(https://www.w3.org/TR/CSS2/).

        3)CSS2.1:

        2004年2月，CSS2.1正式发布，该版本在CSS2.0的基础上略微做了改动，上删除了许多不被浏览器支持的属性。

        4）CSS3：

        在2001年的时候，W3C就开始准备CSS的三个版本，目前为止该版本虽然还没定稿，但是很多浏览器已经开始支持其中大部分特性。

CSS特点：

        CSS是Web利于中的一个突破，他为HTML提供了一种描述元素样式的方法，使用CSS和HTML可以制作出精美的网页，CSS有以下特点：

        1）丰富的样式定义：

        CSS为HTML标签提供了丰富的外观属性，可以在网页中显示各种效果，如:

  •         为元素设置不同的边框(border)，以及边框和元素之间的内外边距(padding,margin).
  •         改变文字的颜色，大小，字体，为文字添加修饰（删除线，下划线）。
  •         为网页设置背景图或者颜色等等。

        2）易于设置和修改：

        CSS样式信息不仅可以在HTML元素的style属性中定义，也可以定义在HTML文档<head>标签里面的<style>标签中，还可以定义在专门的.css格式的文件中，然后再到HTML文档中引入。如下：

在.css文件：

/* 如下代码给一个div标签属性改为红色然后定义了一张背景图 */
div {
    color: red;
    width: 700px;
    height: 700px;
    background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.V1iS_0jMw5TDhmSsG6CtzQHaER?w=301&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7);
    /* color:yellow; */
}

h1 {
    text-align: center;
    color: aqua;
}

h1 {
    color: red;
}

在头部标签中<style>里的： 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .crosshair {
            height: 200px;
            width: 300px;
            border: 2px solid green;
            cursor: crosshair;
        /* cursor是鼠标样式，crosshair是他的值为十字准线 */
        }

        .no-drop {
            height: 200px;
            width: 300px;
            background-color: red;
            cursor: no-drop;
        }
    </style>
</head>

        3）可以多页面应用：

        多页面应用就是将CSS样式统一放到一个.css格式的文件中，这个文件不是页面，但我们可以在不同的页面引用这个.css格式的文件，这样就可以统一页面的风格。

        4）层叠：

        层叠就是指可以对同一个HTML元素多次定义CSS样式，后面定义的样式会覆盖前面定义的演示。

h1 {
    text-align: center;
    color: aqua;
}
h1{
    color:red;
}

 如下是h1标签的运行结果：可以看到的是h1标题的颜色为红色

        如整个站点引用了同样的CSS样式文件，但想要调整其中某个页面的元素，这个时候就可以针对想要调整的元素单独定义一份样式文件并引用到页面中，这样后来单独定义的样式就会覆盖前面的样式，在浏览器中只会看到最后设置的效果。

5）页面压缩：

        CSS语法规则：

  •         CSS样式由一系列规则组成，这些规则由Web浏览器解析，然后引用与HTML文档对应的元素上面，CSS样式规则由三个部分组成，分别是选择器，属性和值：
  •         选择器：由HTML元素的id属性或class属性或者元素的名字以及一些特殊的符号构成，用来指定要为那个HTML元素定义样式，如选择器p就表为示页面中的所有<p>标签定义样式。
  •         属性：如果要给HTML元素设置样式名称，由一系列的关键字组成，如color(颜色)，border(边框)，font(字体)等等，CSS提供了多种属性，可以通过https://www.w3.org/TR/CSS2/propidx.html来查看。
  •         值：由数值和单位或者关键字组成，用来定义某个标签的属性，如color属性的值可以是red，#0F0F0F等等

        如标题标签h1定义CSS样式的语法规则：

h1{color:red;text-align:center;}

        从上述代码中可以看出来在CSS中语法规则中，属性和值之间需要使用冒号:进行分隔，每个属性和值的组成可以看做一个声明，每个声明的结尾都需要使用分号;作为结尾，属于同一选择器的声明需要使用花括号{}包裹起来。

        上述代码说明：

  •         选择器的h1表示为网页中所有的<h1>标签定义样式：
  •         其中color表示字体的颜色的属性，值是red表示将字体设置为红色；
  •         属性text-align表示文本的对齐方式(上下左右中间)，值center表示将文本对齐方式设置为居中对齐。

        上列代码可以写成以下形式       

h1{
    color:red;
    text-align:center;
}

        这样分明的写法更有利于我们的读写；

        在CSS中的属性和大部分的值都是不区分大小写的，但是CSS选择器中常用的大小写，如选择器，.bianchengbang和.BianChengBang表示两个不同的选择器。

CSS选择器：

说明：

选择器是由HTML中的元素id，class属性或者元素本身的名字，以及一些符号如*+等等组成，选择器的作用一般都是让我们选择要为那个HTML元素定义样式，选择器是CSS规则中重要的组成部分，在选择器中定义的样式的效果只对选择器选中那些元素有效果。如下是几种选择器的分类。

1.通用选择器：

通用选择器用*来表示，它匹配的是HTML文档中所有的元素，需要注意的是：因为他是匹配HTML文档中的每一个元素，如果频繁使用的话那么将对浏览器造成压力。

*{
    color: red;
}

2.标签选择器：

标签选择器一般都是匹配HTML所有相同的标签，如下:

span{
    color: red;
}

 上述标签选择器是匹配HTML文档里面的所有<span>标签将其文本内容变为红色。

3.ID选择器：

ID选择器是用来匹配HTML文档中具有相同ID的元素，ID选择器定义的时候需要在前面加#然后ID名。如下：

#overstriking{
    color:blueviolet;
}

上述代码匹配的是HTML文档中具有id="overstriking"属性的标签。

4.类选择器：

类选择器是匹配HTML文档中所有class属性值相同的标签，类选择器的定义更ID很想但是不同的是id是#符号，类选择器是.符号,代码如下：

.text{
    color:red;
}

5.后代选择器：

当一个标签嵌套在另一个标签里面的时候，我们就可以称里面这个标签为嵌套他的后代，如我用一个<div>嵌套了一个<h2>标签,此时<h2>标签就是<div>的后代标签，选中后代标签的方式一般都是选择它的父标签的class，id或者标签名，然后按照等级从外到内依次列出，使用空格隔开，如下:

.text ul li a{
    color:red;
}
#text ul li a{
    color:red;
}
ul li a{
    color:red;
}

6.子代选择器：

子代选择器匹配机制很像后代吗选择器，但是子代选择器之间只能隔一层嵌套，子代选择器一般使用>分隔,如下:

div>h2{
    color:red;
}

7.相邻兄弟选择器：

兄弟选择器一般都是匹配具有相同父级元素，并且需要兄弟之间是相邻的，并且不存在嵌套关系，相邻兄弟选择器定义的时候需要使用+,加号的两边为相邻的两个元素，选择器会匹配加号后面的元素，如下:

h2+ul{
    color:red;
}
ul.text+span{
    color:red;
}

8.通用兄弟选择器：

通用兄弟选择器会匹配同一父级元素下的兄弟元素，但是兄弟之间无需紧邻，定义通用兄弟选择器需要使用~波浪号，波浪号链表是同一父级元素下的两个元素，示例如下:

h2~span{
    color:red;
}

9.分组选择器：

分组选择器可以将同样样式规则的选择器应用到一个选择器里面，每个选择器之间使用,逗号分隔，这么做可以避免代码冗余，如下:

h2{
    color:red;
    font-size:23px;
}
span{
    color:
    font-size:90px;
}
p{
    color:red;
    font-size:80px;
}

 上述代码使用分组选择器之后就会 变成：

h2,span,p{
    color:red;
}
h2{
    font-size:23px;
}
span{
    font-size:90px;
}
p{
    font-size:80px;
}

10.属性选择器：

属性选择器一般用来匹配具有特定属性的元素属性选择器的定义方式是使用一对[]括号来指定具有的属性信息，如下:

input[type="text"]{
    color:red;
}

上述选择器会匹配所有具有type="text"属性的<input>标签。

属性选择器还有一下几种写法:

[target]：选择所有target属性的元素。

[target=_blank]：选择所有target="_blank"属性的元素。

[title~=flower]：选择所有title属性包含"flower"的元素。

[lang|=en]：选择lang属性正好是"en"或者"en"为开头的所有元素。

下列是一部分测试实例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }

        span {
            color: black;
        }

        #overstriking {
            color: blueviolet;
        }

        .text ul li a {
            color: rgb(0, 255, 170);
        }

        #text ul li a {
            color: rgb(0, 255, 191);
        }

        ul li a {
            color: rgb(183, 0, 255);
        }
    </style>
</head>

<body>
    <div>
        <h2>这是第一个标题</h2>
        <p>这是一段内容</p>
        <ul>

            <a href="">
                <li>无序列表的第一项</li>
            </a>
            <li>无序列表的第二项</li>
            <li>无序列表的第三项</li>
        </ul>
    </div>
    <span class="text">这只是一段文本</span>
    <b id="overstriking">这只是一段加粗文本</b>
</body>

</html>

在HTML使用CSS的方式： 

如果要在HTML中使用CSS有以下几种方式：

1.内嵌样式表：

在HTML的<head>标签内的<style>标签里定义的CSS，使用内嵌样式只能对当前页面有效。一般情况下不会把内嵌样式定义在HTML文档里面，比如此文档 要大量使用css样式这样会导致代码过于冗余，对于后期的维护也是不好的，当然如果只是测试某个东西的功能是可以这样做的。方法如下:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./test1.css"> -->
    <style>
        h1{
            color:red;
        }
        p{
            color: aqua;
        }
    </style>
</head>

<body>
    <div>
        <h1>这是一个最大的标题</h1>
        <p>这是一个段落</p>
    </div>

</body>
</html>

2.内联样式：

所谓内联样式就是定义在HTML标签里面的style属性，因为定义在标签里面，所以它只对当前标签有效，虽然方便但是他的缺点也很明显：如果给每个标签定义style属性，那么很不方便还会导致标签看起来过长不易读与改。示例代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div>
        <h1 style="color:red;">这是一个最大的标题</h1>
        <p style="color: aqua;">这是一个段落</p>
    </div>

</body>
</html>

3.外部样式：

我们引入外部样式需要一个<link>标签，然后把CSS样式写到.css格式的文件中，然后使用<link>，把这个.css文件引入到HTML文档里。如下定义了一个test1.css文件然后再HTML文档中引入：

test1.css文件中的内容：

/* 如下代码给一个div标签属性改为红色然后定义了一张背景图 */
div {
    color: red;
    width: 700px;
    height: 700px;
    background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.V1iS_0jMw5TDhmSsG6CtzQHaER?w=301&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7);
    /* color:yellow; */
}

h1 {
    text-align: center;
    color: aqua;
}

h1 {
    color: red;
}

HTML文档中的内容，其中文档名字可以自己取:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test1.css">
</head>

<body>
    <div>
        <h1 style="color:red;">这是一个最大的标题</h1>
        <p style="color: aqua;">这是一个段落</p>
    </div>

</body>

</html>

4.导入样式表：

我们可以使用<link>标签来引入css样式，也可以使用@import来引入外部样式表，语法为:

@import"URL";

@import url("URL");

其中的URL表示外部样式的路径。

 其中引入的.css就是上述的css

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./test1.css"> -->
    <style>
        /* @import url(./test1.css); */
        @import "./test1.css";
    </style>
</head>

<body>
    <div>
        <h1 style="color:red;">这是一个最大的标题</h1>
        <p style="color: aqua;">这是一个段落</p>
    </div>

</body>

</html>

使用@import时需要注意：

  • @import必须定义在<style>标签里面，如果<style>里面还有其他的CSS样式，那@import必须定义在所有CSS样式的最前面，。
  • 同样@import也可以使用在.css文件里面，但是同样的需要定义在所有样式的最前面。
  • @import是CSS2.1新增的功能，所以一些低版本的浏览器可能不支持。
  • 在页面加载时如果@import要引入的文件太大，就会导致<link>标签里的样式先使用，然后@import加载完之后就会不会出现了。

CSS注释：

说明：

在CSS中注释里面的内容不会对文档造成影响，因为注释的作用就是给程序员查看的。

当我们需要对下列代码进行一些说明的时候就可以使用注释，或者一些暂时不需要的代码也可以使用注释。

我们知道在任何编程中都需要注释，因为注释既能帮助程序员更好的理解代码又能帮助他人查看自己程序的时候更好的理解其中的含义。

方法：

在CSS中注释是使用/*  注释内容  */来注释代码的，在中间的内容就是注释的内容，如下是一个示例:

test.html中的代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test1.css">
</head>

<body>
    <div>
        <h1>这是一个最大的标题</h1>
        <p>这是一个段落</p>

    </div>

</body>

</html>

上述代码中引入了 .css，其中test1.css中的代码如下：

/* 如下代码给一个div标签属性改为红色然后定义了一张背景图 */
div {
    color: red;
    width: 700px;
    height: 700px;
    background-image: url(./test3/img/16650C9C58EBE5C1AF8047EE40C0159A.jpg);
    /* color:yellow; */
}

h1 {
    text-align: center;
    color: aqua;
}

上述代码中div里面中的yellow并没有产生效果，因为被注释掉了。

 上述代码运行结果如下：

总结：

CSS是如今互联网必不可少的一部分，如今互联网高速发展对各个方面的需求如性能要求速度要求等等越来越大，而CSS极大地优化了HTML可是说是大大的满足了如今互联网的需求，这对于如今互联网的发展有着重大的作用。而且CSS仅仅只是记了就会用，不像很多语言在很多时候都需要很强的逻辑思维，可以说CSS是前端工程师必不可少的一部分。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/4748.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！