【牛腩】HTML+CSS基础了解

从牛腩老师那里了解到了HTML和CSS的一部分基础知识。又在网上查了一些资料，有了一个初步的了解。

HTML:

标签：HTML 文档和 HTML 元素是通过 HTML 标签进行标记的

容器：与容器AOP概念不一样。

HTML（文字）标签选择器、类选择器、ID选择器

优先级：ID选择器> 类选择器> 标签选择器

标签选择器

例子

HTML中：

Body{

    2345
}
    

CSS中：

Body{
    
    Color:#fof;

}
    

类选择器

例子：

HTML中：

span class="menu">
    • 1

CSS中：

.menu{
     /*栏目样式*/
    Color:#f00;
/* 文字颜色*/
}
    

ID选择器

例子：

HTML中：

span id="special">
    • 1

CSS中：

#special{
    
    Font-weight:bold;
/*粗体*/
}
    

选择器的父子关系、并列关系：

.title span{
/*CSS 中的父子关系*/
    }
    

.menu, .title{
 /*CSS 中的并列关系*/
    }
    

/*HTML 中的并列关系,冲突时，与CSS的排列顺序有关*/
    Span class="menu niu">
    栏目吧/span>
    • 1

CSS:

CSS核心内容：标准流、盒子模型、浮动、定位

块级元素 block、行集元素 inline

块级元素：div p h1 h2 h3 h4 form ul

行内元素： a b br i span input select

div >
    /div>
    /*单管一行*/• 1

span>
    /span>
    • 1

行级可以变块级，块比行好控制，在多个浏览器中显示一样

标准流：按顺序显示，类似代码的顺序执行

盒子模型：

内边距：上下左右；padding

外边距：上下左右；margin:

内容区域：宽，高；content:width,height

画框：宽。border-width

共14个参数。三层包围4个+中心2个。对称。

浮动 float：

用于控制浮动，把盒子横向排列。

.box{
    
    clear:left;
      /*清除向左浮动*/
    clear:right;
     /*清除向右浮动*/
    clear:both;
      /*同时清除向左向右浮动*/

定位 position：

相对定位 relative vs 绝对定位 absolute。

相对定位，不脱离标准流。偏移量，相对于原来的位置。

绝对定位，脱离标准流。会影响标准流中的其他元素。

在查找资料的过程中发现一个特别有意思的CSS学习资料：http://zh.learnlayout.com/no-layout.html 里面讲了CSS布局的基础属性。

HTML + CSS：

html是静态网页文本内容，css是对界面元素样式的设置。应用html+css把网页的内容和样式解耦，使之更易于维护。

初步进行了一些了解，接下来还要多用，多深入学习。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！