css基础第一节

要给网页做装修了！！！

CSS,是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS具有以下特点：

1、丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4、层叠

层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。

5、页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。

而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。

接下来是css的一些基础知识：

一、3种引入方式：
 　　 1：内联 在标签中引入样式
  　　<标签名 style="样式1：样式值1"；样式2：样式值2></标签名>
  　　2：内嵌 在head标签中添加一个style标签
  　　<head>
 　　  <style>
   　　选择器{
   　　  样式1：样式值1；
   　　  样式2：样式值2；
  　　   }
   　　</style> 
  　　</head>
  　　3：外部引入 将样式放到css文件中，然后用link标签在head标签中引入
  　　 <link href="xxx.css">
 　　  css引入方式的优先级：内联>内嵌>外部引入
    
二、 选择器（3种）：
 　　 1.id选择器:在标签中添加id属性
  　　 <标签名 id="id值"></标签名>
   　　注意：id值不能重复

　　　在style标签中

  　　 #id值{
    　　样式1：样式值1；
    　　样式2：样式值2；
   　　}
  　　2.class选择器：在标签中添加class属性
  　　<标签名 class="class值"></标签名>
  　　在style标签中
   　 .class值{
  　　  样式1：样式值1；
  　　  样式2：样式值2；
   　　 }
 　　 3.元素选择器：
　　  在style标签中
   　　标签名{
  　　  样式1：样式值1；
    　　样式2：样式值2；
  　　  }
  　　选择器优先级 id>class>元素选择器

三、选择器关系：
  1.并列关系：
   选择器1，选择器2{
     样式1：样式值1；
     样式2：样式值2；
     }
  2.父子关系：
   选择器1 选择器2{
     样式1：样式值1；
     样式2：样式值2；
     }
  3.兄弟关系：
   选择器1+选择器2{
     样式1：样式值1；
     样式2：样式值2；
     }
 四、字体样式：
  font-family：微软雅黑, Arial,Times New Roman；（字体类型，微软雅黑, 一般不设置，使用默认类型）
  font-size：30px；（字体大小，使用像素控制字体大小）
  font-weight：bold加粗；lighter加细；（字体粗细，一般常用bold和lighter，也可使用数字控制）
  font-style：italic斜体；（字体斜体）
  color：red颜色（颜色）
 五、文本样式：
  text-decoration：line-through 删除线
    underline 下划线
    overline 顶划线
    none 去除所有线（可以用来去除a标签链接的自带下划线）
  text-transform：none 默认值，无转换发生
             uppercase 转换成大写
             lowercase 转换成小写
             capitalize 将每个英文单词的首字母转换成大写，其余无转换发生（空格隔开为一个英文单词）
  text-indent：2em；2em代表缩进2个字符 px代表缩进多少像素，需要自己测量
  text-align：center；left；right；文本水平居中，左对齐，右对齐
  line-height：30px；行高，自己设置
 六、边框样式：
  border-width：10px；边框的宽度
  border-style：none；无样式
         solid；实线
         dashed；虚线 
         dotted；点线
         double；双线，双线的宽度等于border-width的值
  border-color：red；定义边框的颜色
  边框样式需要三个属性同时存在，简介的写法是：border：1px solid red；
  局部边框样式：border-top：；边框上面的线的样式
         border-bottom边框下面的线的样式
         border-left 边框左边的线的样式
         border-right 边框右边的线的样式

 

ps.感觉编程代码是非常非常灵活的，每一个标签都有非常多的作用，这就要求我们在敲代码的时候要想好每个标签的具体作用，以最简洁最清晰的方式完成最多的需求！加油，越努力，越幸运！

posted on 2020-01-03 16:31  煎饼果子不要果子谢谢  阅读(131)  评论(0)  编辑  收藏  举报

导航