酸菜记 之 CSS的零基础.

这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教,

学前了解:

  • CSS中字母是不分大小写的;
  • CSS文件可以使用在各种程序文件中(如:PHP,HTML,jsp,asp...);

一. CSS的定义

CSS 是指层叠样式表, (Cascading Style Sheets),来定义HTML如何显示的;

二. CSS分为内联样式和外联样式

  • 内联样式,就是写到HTML里面, 一般都是这样来写:
<head>

<style>

...放置CSS内容

</style>

</head>
  • 外联样式,就是在CSS内容在自己的文件内,解决了内容和样式分离,极大提高工作效率.

但是外联需要在HTML文件中放入链接CSS文件的一串代码:

<head>

<link rel="stylesheet" type="text/css" href="demo.css">

<!--此处demo.css就是要放置的外联CSS文件-->

</head>

三. CSS中常用的四种选择器

1. 类选择器(class选择器);

基本使用语法

.类选择器{

属性名:属性值;

...

}

2. id选择器;

基本使用语法

#id选择器{

属性名:属性值;

...

}

3. html元素选择器;

html 元素选择器的优先级比id和类都低.

基本使用语法

某个html元素{

属性名:属性值;

...

}

4.通配符选择器;

该选择器可以用到所有的HTML元素,但是它的优先级是最低的;

基本使用语法:

*{

margin:0px;

}

四个选择器的优先权:

id>class>Html>通配符;

选择器的细节问题:

1.父子选择器

  1. 父子选择器 可以有多级,但是再实际开发中不要超过3层;
  2. 父子选择器有严格的层级关系;
  3. 父子选择器不局限于什么类型的选择器,id,class,html...

2.一个元素可以同时有id选择器和class选择器;

3.一个元素最多有一个id选择器,但是可以有多个class选择器;

4.一个元素同时有两个class选择器,如有相同样式重复设定,在CSS文件中,靠后的会覆盖前面的;

class="s1 s2"(空格配有两个类选择器)

#id1 span{

color:red;

}

#id1 span span{

color:blue;

}

#id1 span span a{

color:green;

}

四.margin 外边距值

  • 4个值:上右下左;(顺时针旋转的)
  • 1个值:用于全部四边;
  • 2个值:上下,左右;
  • 3个值:上,左右,下;

auto 自动居中

屏蔽不同浏览器,一般先指定清零(有些浏览器默认是有值的)

margin:0px;

padding:0px;

五.padding 内边距值

六.行内元素和块元素

行内元素(inline element): 行内元素只能占据自己显示内容的宽度,不会占据整行;

块元素(block element):块元素不管自己内容有多少,占据整行,而且会换行显示;

*常见的行内元素:  <a> <span> <input type="xxx">

*常见的块原素: <div> <p>

行内元素和块元素的区别:

1.行内元素只占内容的宽度,块元素不管内容多少要占全行;

2.行内元素只能容纳文本与其他的行内元素,块元素可以容纳文本/行内元素/块元素;(和浏览器版本和类型有关)

3.一些CSS属性对行内元素不生效,如:margin/left/right/width/height/ 建议尽可能用块元素定位;(与浏览器类型版本有关)

行内元素和块元素可以转换,如下:

display:inline; 表示使用行内元素方式显示;

display:block; 表示使用块元素方式显示;

CSS文件的相互引用指令

@import url('被引入的CSS的url')

七.标准流和非标准流

流:Html元素在网页中显示的顺序.

标准流:在Html文件中,写在前面的元素在前面显示,写在后面的元素在后面显示;

非标准流:在Html文件中,当某个元素脱离了标准流,那么它就处于非标准流;

八.盒子模型

body{

border:1px solid red; /* 边框的宽度, solid实线 颜色*/

}

<!DOCTYPE>

CSS零基础学习笔记.的更多相关文章

  1. Spark (Python版) 零基础学习笔记（一）—— 快速入门

    由于Scala才刚刚开始学习,还是对python更为熟悉,因此在这记录一下自己的学习过程,主要内容来自于spark的官方帮助文档,这一节的地址为: http://spark.apache.org/do ...

  2. Spark (Python版) 零基础学习笔记（二）—— Spark Transformations总结及举例

    1. map(func) 将func函数作用到数据集的每个元素,生成一个新的分布式的数据集并返回 >>> a = sc.parallelize(('a', 'b', 'c')) &g ...

  3. HTML5零基础学习Web前端需要知道哪些？

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  4. Yaf零基础学习总结3-Hello Yaf

    Yaf零基础学习总结3-Hello Yaf 上一次我们已经学习了如何安装yaf了,准备工作做好了之后我们来开始实际的编码了,码农都知道一个经典的语句就是“Hello World”了,今天我们开始入手Y ...

  5. 零基础学习hadoop到上手工作线路指导

    零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...

  6. [iOS]关于零基础学习iOS开发的学习方法总结

    关于零基础学习iOS开发的学习方法总结 最近很多零基础来参加蓝鸥培训的学生经常会问到一些学习方法的问题,就如下我自己见过的好的学习方法一起讨论一下. 蓝鸥iOS开发技术的学习路线图 程序员的主要工作是 ...

  7. salesforce零基础学习（八十）使用autoComplete 输入内容自动联想结果以及去重实现

    项目中,我们有时候会需要实现自动联想功能,比如我们想输入用户或者联系人名称,去联想出系统中有的相关的用户和联系人,当点击以后获取相关的邮箱或者其他信息等等.这种情况下可以使用jquery ui中的au ...

  8. 零基础学习Hadoop

    零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...

  9. 零基础学习hadoop到上手工作线路指导（中级篇）

    此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结. 五一假期:在写点内容,也算是总结.上面我们会了基本的编程,我们需要对hadoop有一个更深的理解: hadoop分为h ...

随机推荐

  1. ECMAScript Web APIs node.js

    https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ What falls under the scope of ECMASc ...

  2. MyBatis学习总结(三)——优化MyBatis配置文件中的配置（转载）

    本文转载自:http://www.cnblogs.com/jpf-java/p/6013548.html 一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置 ...

  3. sql server 存储过程 以及java如何使用存储过程

    Sql 语句 有一个test_table1表  他有两个字段  ID 和name proc是procedure的缩写 也就是存储过程,StuProc2为创建的存储过程名称 执行以下创建存储后会在Sql ...

  4. [skill] C++ delete VS delete []

    delete 用来删除 new 返回的对象. 先调用对象的析构,然后释放指针指向的内存. delete[] 用来删除 new [] 返回的对象. 先调用数组中每一个对象的析构,然后释放指针指向的内存.

  5. linq join的lambda写法

    var query = _db.Bank_CommercialOpus .Join(_db.Bank_Opus, s => s.OpusID, Opus => Opus.ID, (s, O ...

  6. @Html.Raw（）

    在用VS 2015写代码时,匹配邮箱的正则表达式 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/​ @报错  主要因为 @是MVC里的关键字,所以不能直 ...

  7. outlook2013 更改邮件文件位置

    找了许多也是不行, 最后自己来多次试验,原来就是这么容易 ., 1: 先增加你的邮件账号,然后找到数据文件的位置 2: 关闭OUTLOOK 2013,把上一步中的数据文件复制到你要的位置,如D:\ou ...

  8. C# MDI子窗体互相操作

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. Swift：属性观察器

    1.简单介绍 属性观察器监控和响应属性值的变化,每次属性被设置值的时候都会调用属性观察器,甚至新的值和现在的值相同的时候也不例外. 可以为除了延迟存储属性之外的其他存储属性添加属性观察器,也可以通过重 ...

  10. Docker应用程序容器技术_转

    转自:百度百科 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相 ...