酸菜记 之 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. HTTP Header

    1.User-Agent 记录访问当前网页的用户浏览器类型和版本,操作系统类型和版本.常见场景:根据不同浏览器和版本提供不同站点. JavaScript通过window.navigator.userA ...

  2. Mock之easymock, powermock, and mockito

    easymock, powermock, and mockito Easymock Class Mocking Limitations To be coherent with interface mo ...

  3. Cocoa Touch事件处理流程--响应者链

    Cocoa Touch事件处理流程--响应者链 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/9264335 转载请注明 ...

  4. PostgreSQL windows service启动失败

    from: http://stackoverflow.com/questions/1251233/unable-to-run-postgresql-as-windows-servicepg_ctl - ...

  5. JAVASE02-Unit06： 文件操作——File 、 文件操作—— RandomAccessFile

    Unit06: 文件操作--File . 文件操作-- RandomAccessFile java.io.FileFile的每一个实例是用来表示文件系统中的一个文件或目录 package day06; ...

  6. Python开发程序：RPC异步执行命令（RabbitMQ双向通信）

    RPC异步执行命令 需求: 利用RibbitMQ进行数据交互 可以对多台服务器进行操作 执行命令后不等待命令的执行结果,而是直接让输入下一条命令,结果出来后自动打印 实现异步操作 不懂rpc的请移步h ...

  7. Python开发【十一章】：数据库操作Memcache、Redis

    一.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...

  8. Java语言程序设计(基础篇) 第五章 循环

    第五章 循环 5.2 while循环 1.while循环的语法如下: while(循环继续条件){ //循环体 语句(组); } 2.程序:提示用户为两个个位数相加的问题给出答案 package co ...

  9. npm总结

    1.npm install -g 模块               全局安装                 2.npm install 模块@version      安装具体摸个版本的模块     ...

  10. iOS 9后修改状态栏方法

    1.plist文件中添加View controller-based status bar appearance字段 值为NO 2.程序中添加 [UIApplication sharedApplicat ...