深圳幻海软件技术有限公司 欢迎您!

Web前端学习笔记4——CSS

2023-03-03

CSS基本语法规范CSS的使用的标签:<style></style>style标签一般放在head里面,CSS一般由一个选择器和一个或多个声明组成示例如下:1<head>2<metacharset="utf-8">3<title>4Test

CSS基本语法规范

CSS的使用的标签:<style></style>

style标签一般放在head里面,CSS一般由一个选择器和一个或多个声明组成

示例如下:

 1       <head>
 2         <meta charset="utf-8">
 3         <title>
 4             Test
 5         </title>
 6         <style>
 7             h1
 8             {
 9                 color:blue;font-size: 100px;
10             }
11         </style>
12     </head>
13     <body>
14         <h1>Hello World!</h1>
15     </body>

 具体效果:

 

选择器即是选择HTML的标签,color和font-size是属性,blue和100px是值,属性和值类似于C#里面的键值对,一组属性和值组成了一个声明

选择器

选择器分为基础选择器和复合选择器两个大类

基础选择器是由单个选择器组成的,它包括标签选择器,类选择器,id选择器和通配符选择器

上述的示例就是用的标签选择器,即:标签名{属性1:属性值1;属性2:属性值2;}

标签选择器可以选择一种标签,并对其属性进行修改,标签选择器要改只能将一种标签全部修改,不能单独修改

类选择器可以单独选择一个或某几个标签

语法:.类名{属性1:属性值1;}

调用这个类选择器时,需要调用的标签里面写calss="类名",在给类命名的时候,不能使用已经有的标签

每个标签里面都可以调用多个类,类选择器的使用类似于C++里面的封装继承

示例:

 1 <head>
 2         <meta charset="utf-8">
 3         <title>
 4             Test
 5         </title>
 6         <style>
 7             .blue
 8             {
 9                 color:blue;
10             }
11         </style>
12     </head>
13     <body>
14         <p>Hello World!</p>
15         <p class="blue">Hello World!</p>
16         <p class="blue">Hello World!</p>
17     </body>

 

具体效果:

 id选择器语法:#id名{属性1;属性值1;}

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             Test
 7         </title>
 8         <style>
 9             .blue
10             {
11                 color:blue;
12             }
13             #yellow
14             {
15                 color:yellow;
16             }
17         </style>
18     </head>
19     <body>
20         <p>Hello World!</p>
21         <p id="yellow">Hello World!</p>
22         <p class="blue">Hello World!</p>
23     </body>
24 </html>    

 

具体效果:

 

 

 注意,id属性每个html文档只能出现一次,只能调用一次(比如上述示例,只能有一个人的id是yellow),但其实第三行的hello world的id也可以是yellow,一样有效果,只是不规范

通配符选择器语法:*{属性1;属性值1;}

它可以改变页面中所有标签的属性

CSS字体属性

font-family:

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>
 6             Test
 7         </title>
 8         <style>
 9             p
10             {
11                 font-family: "Microsoft YaHei";
12             }
13             h1
14             {
15                 font-family: 宋体,微软雅黑;
16             }
17         </style>
18     </head>
19     <body>
20         <h1>Hello World!</h1>
21         <p>Hello World!</p>
22         <p>Hello World!</p>
23     </body>
24 </html>    

 

具体效果:

注意:各个字体之间应该用英文逗号隔开,当我们使用的字体是几个英文单词的时候,一定要加引号,如果一个font-family后面跟着好几个字体,意思是浏览器优先显示前面的字体,如果系统中没有前面的字体,则显示后面的

font-size可以设置文字大小

如:font-size: 16px;

font-weight可以设置字体的粗细

具体的属性值有:normal,bold,bolder,lighter,number

normal为正常,bold为粗体,bolder为特粗体,lighter为细体,number是具体的粗细调节,可以写100,200,300,

如:font-size: 700;

其实bold也就相当于700,一般我们开发中习惯用数字进行调整字体粗细

font-style可以设置属性的文本风格

style的属性值可以是normal或者italic(斜体)

让字体成为斜体,还有一个标签<em></em>可以使用,如<em>这是斜体的字</em>

font的复合形式可以简化代码

例如