Web前端学习笔记4——CSS

  • Web前端学习笔记4——CSS已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

CSS的使用的标签:<style></style> style标签一般放在head里面,CSS一般由一个选择器和一个或多个声明组成


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>

 具体效果:

Web前端学习笔记4——CSS

 

选择器即是选择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>

 

具体效果:

Web前端学习笔记4——CSS