1. 简介

用于布局与美化网页（颜色，字体）

CSS语言是一种标记语言，不需编译，可直接由浏览器执行

大小写不敏感

CSS定义由选择符、属性、属性取值组成

格式：selector{property:value}

注释：/*CSS注释*/

长度单位：

相对长度单位：px像素，em相对于当前对象内文本的字体尺寸，%百分比

绝对长度单位：pt点，cm厘米，mm毫米

颜色值：#rrggbb，#rgb，rgb（x，x，x），rgb（x，x，x），x为0~100的整数值

css指定URL地址方式：

body{background-image:url(……)}

2. 在html文档中放置css的几种方式

2.1 内联引用（也叫行内引用）

就是把css样式直接作用在html标签中

<p style=”font-size:10px;color:#ffffff”>

使用css内联引用表现段落

</p>

2.2 内部引用（也叫内嵌式）

使用style标签直接把css文件中的内容直接加载到html文档内部的<head>标签中

特点是适合用于一个html文档具有独一无二的样式时

2.3 外部引用

使用了外接的css文件，一般的浏览器都有缓存功能，所以用户不用每次都下载此css文件

相对于内部引用和内联引用来说是高效的，是节省带宽的。

实现外部引用有两种方式：

使用link标签引用css

使用@import导入css

多重样式表的叠加：如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。

3. css选择器（选择符）

3.1 html（标签）选择符

即html标签，用来改变一个指定标签的样式，任何html元素都可以是一个css的选择符。

语法：html标签名{属性：值}

P{text-indent:3em}   /*当中的选择符是p*/

3.2 类选择符

匹配文档中元素E的class属性的属性值为classname的元素

语法：标记名.类名{属性：值}或.类名{属性：值}

类选择符的定义需要有.符号

.note{font-size:small}  /*为note的类可以被用于任何元素*/

3.3 ID选择符

匹配文档中元素E的id属性的属性值为idname的元素

语法：ID名称{属性：值}

定义需要有#符号

#main{text-indent:3em;}   /*ID名称main前加上一个#号*/

id属性的特殊之处在于，一个文档中只能有一个元素使用一个ID选择符（与class属性正好相反），id属性可用来单一地标识一个元素。

3.4 关联选择符

也叫包含选择符，可单独对某种元素包含关系定义的样式表，元素1包含元素2，这种方式只对在元素1的元素2定义，对单独的元素1或元素2无定义

语法：选择符1 选择符2 ……{属性：值}

如：table a {font-size:12px}

3.5 组合选择符

也叫选择符组，可把相同属性和值的选择符组合起来书写，用逗号将选择符分开，可减少样式重复定义。

语法：选择符1，选择符2，……{属性：值}

如：h1,h2,h3,h4,h5,h6{color:green}

3.6 伪元素选择符

指对同一个html元素不同状态的一种定义方式

语法：标签：伪元素{属性：值}

例：a：link{……}   /*未访问的链接*/

a：visited{……}   /*已访问的链接*/

a：hovor{……}   /*鼠标在链接上*/

a：active{……}   /*激活链接*/

提示：a：hovor必须置于a：link和a：visited之后才有效；a：active必须置于a：hovor之后才有效

4. 常见属性和值

4.1 字体和颜色

font---简写，把所有针对字体的属性设置在声明中

font-family字体系列   font----size字体尺寸   font----style字体风格 ……

4.2 文本属性

color---文本颜色

text-align  对齐元素中的文本

text-indent   缩进元素中文本的首行

text-height   设置行高

text-decoration   向文本添加修饰，如underline下划线

4.3 背景属性

background   简写，将背景属性设置在一个声明中

background-color、background-image、background-repeat（设置是否重复，repeat、repeat-x、repeat-y、no-repeat）……

可简写为一行：

background:<背景颜色>||<背景图片>||<背景重复>||<背景附件>||<背景位置>

4.4 边框属性

每个内容或元素外边都可以有一个边框，分top、bottom、left、right

有color（颜色），style（样式，一定要取值），width（宽度）

style取值：none无样式 hidden除了同表格边框发生冲突的时候，其他同none

dotted点划线 dashed虚线 solid实线 double双线 groove槽状 ridge脊状与groove相反

inset凹陷 outset凸出，与inset相反

4.5 列表属性

list-style-type 设定引导列表项的符号类型，可设置多种符号类型，值为disc、circle、square等

list-style-image 使用图像作为定制列表符号

list-style-position 决定列表项目缩进的程度

三．DIV+CSS网页标准化布局

1. DIV+CSS对页面布局的优势

表现与内容相分离；代码简洁，提高页面浏览速度；易于维护和改版；提高搜索引擎对网页的索引效率

2. “无意义”的HTML元素div和span

div和span标签没有任何内容上的意义，但与CSS结合起来后应用十分广泛。它们被用来组合成一大块HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span是内联的，用在一小块内联HTML中，而div是块级的（等同于其前后有断行）。

3. W3C盒子模型

4. 与页面布局有关的CSS属性

position  用于定义一个元素是否absolute（绝对），relative（相对）

top、left 层距离顶点纵、横坐标的距离

text-align、line-height

z-index  决定层的先后顺序和覆盖关系

display 显示属性，设定block值以块状显示；设定inline值则内联显示；设定none值关闭指定元素及其子元素的显示

visibility 针对嵌套层的设置，inherit父层可见子层可见，visible父层是否可见子层都可见，hidden父层是否可见子层都隐藏

overflow 设置层内的内容超过曾所能容纳的范围处理方式。常用hidden，隐藏超出层大小的内容

float 设置区块漂浮属性，分left、right

clear 清除属性指定一个元素是否允许有元素漂浮在它旁边，值有left、right、none（缺省值）、both

5. 盒子区块框的定位

相对定位a:hovor{

position:relative;

top:1px;       /*设置元素使用相对定位*/

left:1px;

}

绝对定位（不方便更改，少用）

CSS简要内容的更多相关文章

  1. Python开发【第十篇】：CSS --无内容点击-不进去（一）

    Python开发[第十篇]:CSS  --无内容点击-不进去(一)

  2. 使用CSS为内容设定特定的鼠标样式（cursor）介绍

    相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...

  3. css基础内容

    css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...

  4. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  5. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

  6. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  7. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  8. JavaScript权威设计--CSS(简要学习笔记十六)

    1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domai ...

  9. JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

    1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与 ...

随机推荐

  1. 我的vimrc配置

    fankcoder@fankcoder:~$ cat ~/.vimrclet Tlist_Auto_Highlight_Tag=1 let Tlist_Auto_Open=1 let Tlist_Au ...

  2. EclipsePHP Studio 常用设置笔记

    工作需要,学习PHP使用EclipsePHP Studio开发工具, 习惯整理下常用的使用设置,分享一下吧: 1.窗口-首选项-常规-工作空间,把文本文件编码改为utf8,以后再新建文件就默认是utf ...

  3. C语言 位操作

    c语言位操作中需要注意有: 位操作只针对整型和字符型数据 在右移操作中:对无符号数和有符号中的正数补 0:符号数中的负数,取决于所使用的系统:补 0 的称为“逻辑右移”,补 1 的称为“算术右移”. ...

  4. POJ3617 简单字符串

    三分之一的通过率的字符串 题意为,输入一个S串,有一个空串T.对S串有两种操作,一是取出S串的头放入T串的尾,二是取出S串的尾放入T串的尾.要求是要使得T串的字典序最小. 从题意来看是一个很明显的贪心 ...

  5. TMethod的学习与使用

    http://bbs.2ccc.com/topic.asp?topicid=496893

  6. POJ2084 Game of Connections（数学,dp)

    题目链接. 分析: 简单的 Catalan 数 将x~y编号,设解为 d(x, y), d(x, y) = {d(x+1,i-1)*d(i+1,y)}, 其中 x+1<= i  <= y, ...

  7. SRM475 - SRM479(1-250pt,500pt)

    SRM 475 DIV1 300pt 题意:玩游戏.给一个棋盘,它有1×n(1行n列,每列标号分别为0,1,2..n-1)的格子,每个格子里面可以放一个棋子,并且给定一个只含三个字母WBR,长度为n的 ...

  8. Java图像灰度化的实现过程解析

    概要 本文主要介绍了灰度化的几种方法,以及如何使用Java实现灰度化.同时分析了网上一种常见却并不妥当的Java灰度化实现,以及证明了opencv的灰度化是使用“加权灰度化”法 24位彩色图与8位灰度 ...

  9. Android开发学习之Camera

    今天本来想写一篇关于百度地图定位SDK的文章的,无奈根据官网提供的例子编写的程序始终无法运行,所以这个计划只能落空.那么今天要与大家分享的是Camera,即照相机.随着硬件能力的大幅提升,手机上各种依 ...

  10. Mac下phpstorm 浏览器出现 502 bad gateway 解决办法

    问题: 在网上搜了好久,都没有合适的解决办法,于是决定分享下自己鼓捣好久解决了的办法,希望能帮到大家. 出现上述情况,一般在phpstorm里都会出现这个提示 我们只需要点击蓝色的进去,或者点phps ...