WEB_CSS的发展史和三大基础选择器

本文链接：https://blog.csdn.net/mulinghanxue/article/details/92691507

初识CSS目录

什么是CSS

CSS是:Cascading Style Sheet 的简称,称为层叠样式表,是表现HTML文件样式的语言,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定…

CSS的发展史

1996年 CSS1.0
1998年 CSS2.0

融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离

2004年 CSS2.1

融入了更多高级的用法，如浮动，定位等。但当时很多浏览器不支持2.1,因此导致一些当时的一些功能无法使用

2010年 CSS3.0

它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，
又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，
但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少，对市场
企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势。

CSS的优势

内容与表现分离
网页的表现统一，容易修改
样式丰富 ,使得页面布局更加灵活
**减少网页的代码量 **， 增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS ，有利于网页被搜索引擎收录
…

初识CSS

CSS基础语法

<!--这是HTML中的注释方式-->
选择器{
	声明1;
	声明2;
}

注意:CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最
后一条声明的结束“;” 都要写上…

Style 标签

style标签是书写CSS的一个容器,可在style标签中书写CSS语句。
在HTML文档中的位置,在<head> 和 </head>之间
格式如下:

<style>
/*style标签属于CSS了,这是它的注释方式*/

	选择器{
		声明1;
		声明2;
	}
</style>

引入CSS的方式

行内样式
使用style属性引入CSS样式,这样写的方式是需要对每一行标签都要设置,有点繁琐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--设置h1标签的字体大小为 50像素-->
<h1 style="font-size:30px">HELLO,CSS</h1>

</body>
</html>

内部样式表
CSS代码写在<head>的<style>标签中(就像是上面写的style标签那样),这杨慧对body中的所有h1标签都会设置为30px(像素)的字体大小,一定程度上简化了代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    h1{
    	font-size:30px
    }
    </style>
</head>
<body>
<!--设置下列三行h1标签的字体大小为 30像素-->
<h1 >HELLO,CSS1</h1>
<h1 >HELLO,CSS2</h1>
<h1 >HELLO,CSS3</h1>



</body>
</html>

外部样式表
1.链接式
2.导入式

链接式: 因为当页面越来越负责,head标签中的style标签越来越多,看起来会显得很繁琐,因此提出了将CSS样式提出到外部的一个.css文件,若只有一个页面,我们通常会命名为style.css示例如下:

/*style.css文件*/
p{
    font-size: 30px;
}

<!--HTML文件-->
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通过link链接进行导入css文件,注意路径问题-->
    <link rel="stylesheet" href="style.css">
</head>
<body>

<p>hello,css</p>
</body>
</html>

导入式: 导入式和链接式使用方式类似,唯一的区别是,链接式是通过link标签,而导入式是通过在style标签中加入@impoet,style.css文件都相同,所以这里只给出html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="style.css">-->
    <style>
    /*注意路径问题!*/
        @import url(style.css);
    </style>
</head>
<body>
<p>hello,css</p>
</body>
</html>

总结: 可以通过上所示的三种方法得出在庞大的web网站中,外部样式表是使代码最为简洁的,那么链接式和导入式各自的优缺点和不同又是什么呢?
链接式和导入式的区别:

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

因此更为推荐link方式

因为这里只是示范,为了方便观看.所以下面代码都使用内部样式引入CSS

CSS基础选择器

标签选择器

HTML标签作为标签选择器的名称

-例如:<h1>…<h6>、<image/>、<p>
格式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
    /*这就标签选择器,设置段落标签的字体大小为30px,字体样式为斜体*/
        p{
            font-size: 30px;
            font-style: italic;
        }
    /*设置超链接标签的字体楷体*/
        a{
            font-family: 楷体;
        }
    </style>
</head>
<body>
<p>hello,css</p>
<a href="">这是个链接</a>
</body>
</html>

类选择器

在写的标签中的加入class属性,然后在head中的style标签中针对class属性进行操作

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

    <style>
        .cla1{
            font-size: 30px;
            font-style: italic;
        }
        .cla2{
            font-family: 楷体;
        }
    </style>
</head>
<body>
<p class="cla1">hello,css</p>
<a href="" class="cla1">这是个链接</a>

<p class="cla2">hello,css</p>
<a href="" class="cla3">这是个链接</a>
</body>
</html>

对于class属性为cla1的标签(第一个p标签和第一个超链接标签)字体大小为30px,斜体;
对于class属性为cla2的标签(第二个p标签和第二个超链接标签)字体设置为斜体

id选择器

类似于类选择器,不过因为id属性每个标签都不得同名,因此也就规定了id选择器只会针对一个标签进行操作

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

    <style>
    /*只针对于第三行的段落进行设置字体大小为50px,字体颜色为黄色*/
		#name3{
            font-size: 50px;
            color: yellow;
        }
    </style>
</head>
<body>
<p id="name1">晓看天色暮看云,行也思君,坐也思君1</p>
<p id="name2">晓看天色暮看云,行也思君,坐也思君2</p>
<p id="name3">晓看天色暮看云,行也思君,坐也思君3</p>
<p id="name4">晓看天色暮看云,行也思君,坐也思君4</p>
<p id="name5">晓看天色暮看云,行也思君,坐也思君5</p>
</body>
</html>