CSS基础知识

2024-03-07 20:10:51

1.CSS初步认识

　　1.定义：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

　　2.作用：主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等)、图片的外形(宽高,边框样式,边距等)以及版面的布局和外观显示样式。CSS以HTMl为基础，提供了丰富的功能，如字体，颜色、背景的控制及整体排版等，而且可以针对不同的浏览器可以设置不同的样式。

2.引入样式表

通过了解CSS的作用我们知道CSS是用来修饰HTML的语言，这时我们就要来考虑怎么在HTML中引入CSS语言，在HTML中有三种引入的方法，分别是：链入式样式表，头部样式表，行内样式表。

行内样式表：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="width: 100px; height: 100px; background: lightgreen;"></div>
 9 </body>
10 </html>

头部样式表：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         div{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

外部css样式：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="css/main.css">
 7     <!-- 用link引入外部css -->
 8 </head>
 9 <body>
10     <div></div>
11 </body>
12 </html>

1 /*main.css*/
2 div{
3     width: 100px;
4     height: 100px;
5     background: lightgreen;
6 }

3.选择器：

我们常见的选择器有：id选择器、类选择器、标签选择器、通配符选择器。

1.id选择器：

用id进行命名设置，用#加上名字进行选择。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         #xiaoMing{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="xiaoMing"></div>
16 </body>
17 </html>

2.标签选择器：

直接在头部或外部加上div或其他标签，直接对所有div或其他标签进行设置。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         div{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

3.类选择器：

用class进行命名用.加名称进行选择。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         .xiaoHong{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="xiaoHong"></div>
16 </body>
17 </html>

4.通配符选择器：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             background: lightgreen;
 9         }
10     </style>
11 </head>
12 <body>
13     <div></div>
14     <span></span>
15     <p></p>
16 </body>
17 </html>

码农公寓