zoukankan      html  css  js  c++  java
  • css初接触

    一、简介:CSS 即 级联样式表 。

    它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

    css是能够真正做到网页表现与内容分离的一种样式设计语言

    相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

    这种分离方式有点像前面的配置文件。都能够提高设计效率。


    二、css选择器

    1、什么是选择器呢?

    每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

    2、包含类型及优先级:

    ID选择器>类选择器>HTML标签选择器

    三、css排版

    1、标准流与浮动:

    标准流就是标签的排列方式。

    页面里显示的顺序和代码里的顺序一致就是符合标准流的

    若是给上面的标签加上浮动或定为属性,就可能脱离标准流,此时便可能出现同一行排版多个标签的情况。

    2、盒子模型

    css盒子模型就像普通的盒子一样具有内容(content)、填充(padding)、边框(border)、边界(margin)四个属性,每个属性又都有上、右、下、左四个部分



    3、绝对定位与相对定位

    (1)相对定位:没有脱离原来的标准流,相对于原来的位置移动

    (2)绝对定位:脱离原来的标准流,绝对于包含此盒子的更外一层盒子移动


    4、行列元素与块级元素

    行列元素

    <span style="font-size:14px;"><span class="menu"> 栏目一</span> </span>


    块级元素

    <span style="font-size:14px;"><div class="menu"> 栏目一</div> </span>


    顾名思义,他们两个的区别就是“行布局”与“块布局”的区别,也因此行列元素对盒子模型的很多属性都是不能使用的的。 而块级元素只能是矩形形状的,所以盒子模型适合于我们的块级元素。






  • 相关阅读:
    【二食堂】Alpha
    【二食堂】Alpha
    【二食堂】Alpha
    【二食堂】Alpha
    【二食堂】Alpha
    【二食堂】团队贡献分分配规则
    【二食堂】Alpha
    【二食堂】Alpha
    Scrum Meeting 10
    Scrum Meeting 9
  • 原文地址:https://www.cnblogs.com/jinfulin/p/3797706.html
Copyright © 2011-2022 走看看