酸菜记 之 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. 阿里云服务器Linux CentOS安装配置（八）nginx安装、配置、域名绑定

    阿里云服务器Linux CentOS安装配置(八)nginx安装.配置.域名绑定 1.安装nginx yum -y install nginx 2.启动nginx service nginx star ...

  2. 展望 2017年商业智能BI 发展的趋势

    在展望2017年商业智能 BI 发展趋势前,我们先来了解一下商业智能 BI 发展的几个重要阶段. 传统 BI 和新型 BI 的分水岭(2013年) 大背景 在2013年以前相当长的一个周期(2005年 ...

  3. IE 6 ~ 9 CSS Hack 写法总结

    IE 6 ~ 9 CSS Hack 写法总结 24th 四, 14 lip2up [code lang="css"]_color: red;    /* ie6 */*color: ...

  4. SQL DEFAULT 约束

    DEFAULT 约束用于向列中插入默认值. 如果没有规定其他的值,那么会将默认值添加到所有的新记录. 下面的 SQL 在 "Persons" 表创建时为 "City&qu ...

  5. Java中JDBC连接数据库代码和步骤详解总结

    JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤:         1.加载JDBC驱动程序:         在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Jav ...

  6. sublime通用快捷键 汉化 安装 插件

    Ctrl+Alt+P     切换项目 1.Ctrl+Shift+P     打开Package Control     Ctrl + Shift + P ,输入View, 选择Toogle Tabs ...

  7. C# 日期格式转【转】

    使用:DateTime.ToString的方法(String, IFormatProvider)转换格式 using System; using System.Globalization; Strin ...

  8. 常用prototype函数

    $("spcode").value --取得当前页面的值的value,可以赋值 $F('spcode')         --不能赋值 $!spcode             - ...

  9. axis2打包方式发布

    参照http://gao-xianglong.iteye.com/blog/1744557这篇文章,注意的是打包services.xml的时候要将它的上级目录meta-inf一起打包,放到axis2\ ...

  10. NET基础（4）：引用类型和值类型

    CLR支持两种类型:引用类型和值类型.虽然FCL的大多数类型都是引用类型,但程序员用的最多的还是引用类型,引用类型总是从托管堆分配,c#的new操作符返回对象内存地址-即指向对象数据的内存地址.使用引 ...