zoukankan      html  css  js  c++  java
  • 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.感觉编程代码是非常非常灵活的,每一个标签都有非常多的作用,这就要求我们在敲代码的时候要想好每个标签的具体作用,以最简洁最清晰的方式完成最多的需求!加油,越努力,越幸运!

  • 相关阅读:
    php 3des加密 兼容JAVA 多么痛的领悟呀
    主机序和网络序
    不用递归实现无限分类数据的树形格式化
    python学习笔记之open函数的用法
    据说是百度面试题(1)
    YII+DWZ三级城市联动挂件
    wpf 报错: 在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh”。
    MVVM了解
    纪念2015年上半年
    c# 委托与事件
  • 原文地址:https://www.cnblogs.com/nbkls/p/12145588.html
Copyright © 2011-2022 走看看