CSS笔记概述

CSS称为层叠样式表，引用样式表的目的是将"网页结构代码"和"网页样式风格代码"分离开
CSS3遵循模块化开发，标准被分为若干个相互独立的模块，有助于理清模块化规范之间的关系，减小完整文件的体积
主流浏览器为了自己的产品利益和推广，定义了很多私有属性用于加强页面显示样式和显示效果，虽然使用私有熟悉可以快速构建效果，但是对网页设计者是个大麻烦

CSS基础语法(待添加具体实例)

select{property:Value}
选择器属性值
例如：p{color:red}

CSS控制HTML5页面的方式通常有:(按优先级排序)

行内样式
内嵌样式
链接样式
导入样式

例如：
1.行内样式
在HTML标记中使用style属性，该属性的内容就是CSS的属性和值
<p style="color:red">段落样式</p>
2.内嵌样式
将CSS样式代码添加到之间,并用标记来声明
<head><style type="text/CSS">p{color:red}</style></head>
3.链接样式
是指在外部定义CSS样式表并形成.css为扩展名的文件，然后在页面中通过标记链接到页面中，该链接语句必须放在标记区
<link real="stylesheet" type="text/CSS" herf="1.css">
real一般也可不写，他表示链接到的样式表名stylesheet
type表示链接到的样式表类型为css
herf指定CSS样式表的文件的路径，此处表示当前路径下名为1.css文件(也就是说1.css文件与当前路径为同一路径)
4.导入样式
指在内嵌样式表的style标记中使用@import导入一个外部的CSS文件

CSS选择器按用途分

标记选择器
类选择器
全局选择器
ID选择器
伪类选择器(制作页面经常使用)

1.标记选择器
tagName{property:Value}
标记名称 CSS3属性 CSS3属性值

2.类选择器作用：
用来标记一系列定义相同的呈现方式
.classValue{property:Value}

3.全局选择器
*{property:Value}

4.ID选择器
id属性值在文档中最好不能重复
#idvalue{property:Value}
ID选择器比类选择器具有更高的优先级

组合选择器

将标记选择器和类选择器组合
将标记选择器和ID选择器组合

继承选择器

子标记在没有定义的情况下所有的样式是父标记的。
要修改子标记需按照文档书的逻辑编写

一个声明设置所有的边框属性。border-width  border-style  border-color # 后2个可互换顺序
.tets span img{border:1px blue solid;} # 一个声明设置所有的边框属性。
border-style:dotted solid double dashed; 点状 实线 双线 虚线；顺时针方向设置，从方向上开始
div span img{border:1px blue solide;}

伪类：

伪类定义的CSS样式并不是作用在标记上的，而是作用在标记的状态上。很多浏览器支持不同类型的伪类(反着说就是伪类有可能在浏览器中不起作用)
常用的超链接的伪类(其他伪类遇到在补充)
:link(:前可以是标记，属性等反正就是个能代表路径的东西)未访问超链接
：vistited已访问
:hover鼠标停留
:active激活

还有些不了解的选择器

属性选择器，结构伪类选择器，UI选择器

CSS字体与段落属性

字体属性：

{font:family:name}name是字体的名称，**可写多种字体**,按顺序排列，以逗号隔开，若字体名称包含空格，则应用引号括起

字号：

{font-size:10px}定义字体大小为10像素。此外还可以通过其他属性值定义字母的大小。如xx-small(最小),x-small,small,medium(正常),large(大)x-large等

继承属性：(很多属性都可以用它来继承)

inherit继承

字体风格：

{font-style:normal|italic|oblique|inherit}分别是默认；斜体；倾斜；继承

加粗字体：

{font-weight:100-900|bold|bolder|lighter|normal}浏览器默认字体粗细是400

小写转大写字母：

{font-variant:normal|small-caps|inherit}分别是默认|小型大写字体|继承

font属性一次性使用多个属性：

{font:font-size font-variant font-weight font-size font-family}注意：font-size font-family的顺序不可更改，就是说font-size必须在font-family之前

字体颜色：

{color:red|#ff0000|rgb(255,0,0)}分别是：颜色名称|十六进制的颜色|rgb代码的颜色

阴影文本：

{text-shadow:length length opacity color} 也可不用全部写
分别是：水平位移可取正负，垂直位移可取正负；阴影模糊半径（可选）不可为负数；阴影颜色

溢出文本处理：

{text-overflow:clip|ellipsis}分别是：不显示省略标记作简单的裁剪；当对象文本溢出时显示省略标记...

控制换行

{word-wrap:normal|break_work}分别是：允许内容顶开指定的边界；内容将在边界内换行
注意：break_work属性只控制是否断词，二人不是断字符。（对长的英文字符串起不了作用）

保持字体尺寸不变

{font-size-adjust:none|number}分别是：默认值，允许字体序列每一个字体遵循自己的尺寸；为字体序列中所有字体强迫指定同一尺寸。

设置单词间隔（不包括中文）

{word-spacing:normal|length}分别是：默认；定义单词之间的固定间隔

设置字符间隔

{letter-spacing:normal|length}分别是：默认|由浮点数和单位标识符组成的长度值，可为负值，正值

文字修饰

{text-decoration:none|underline|overeline|line-through}默认值|下面线|上面线|删除线|

垂直对齐方式

{vertical-align:baseline|sub|supper|Top|text-top|middle|bottom|text-bottom|+-数字%}分别是：默认值|垂直对齐文本的下标|对其文本的上标|把元素的顶端与行中最高元素的对齐|放置在父元素的中部

文本转换（仅作用于字母型文本）

{text-transform:none|Capitalize|uppercase|lowercase}无转换发生|将每个单词的第一个字母转换成大写|转换成大写|转换成小写

水平对齐方式

{text-align:start|end|left|right|center|justify|}向行的开始边缘对齐|向行的结束边缘对齐|左|右|行内居中对齐|两端对齐均匀分布|按指定的#### 字符进行对齐
start和end属性主要针对行内元素的，而属性值主要用于单元表格格中，将根据某个指定的字符对齐

文本缩进

{text-indent:length}百分比数字或浮点数字和单位标识组成的长度值(如30mm)

文本行高

{line-height:normal|length}默认|百分比数字，可以允许为负值

处理空白

{white-space:normal|pre|nowrap|pre-wrap|pre-line}默认|空白会被浏览器保留|文本不会换行，文本会在同一行继续知道遇到
标记|保留空白序列，但是正常换行|合并空白序列，但是保留换行符（若文本居中，则这个属性会让其左对齐）

文本反排

{Unicode-bidi:normal|bidi-override|embed}默认|为下面的属性direction服务|元素打开一个额外的嵌入级别
{direction:lrt | rtl | inherit}文本流从左到右|从右到左|文本流的值不可继承

CSS3美化表格和表单样式

表格边框border>0时显示边框，=0时，则不显示边框；边框显示后，可以使用CSS3的border属性及衍生属性和border-collapse属性对边框进行修饰。
表格边框可用来界定不同单元格的数据
{border-collapse:separate|collapse}默认值边框被分开|合并边框

表格边框宽度

{border-6px}其衍生属性有:border-top-width;boder-left-width

表格边框颜色

{background-color:red}

表格边框线条

{boder:dotted solid double dashed}点状实线双线虚线；顺时针方向设置，从方向上开始

美化表单中的元素

<form>、<input>、<textarea>、<select>、<option>

美化提交按钮

<input type="submit" value=""class="">

美化下拉菜单

<select name="" id="" ><option value=""></option></select>

CSS3美化图片

css3可以定义多张图片的各种属性，如图片边框border，图片缩放wdith,height。
max-width,max-height设置图片宽度最大值和高度最大值；可写一个，另一个会按照比例进行缩放
img图片属性本身没有对齐的属性，需要使用CSS继承父标记中的text-align（横向对齐）；Vertical-align(纵向对齐)

文字环绕

{float:none|left|right}默认值|文本流向对象的右边|文本流向对象的作边（均是作用在图片上）

网页的定位与布局

定位属性

可以将每个元素都认为包含在一个矩形框内，成为元素框。而元素内容与元素框共同形成了元素块。

定位：就是定位元素块位置和大小

前6个属性是实际的定位属性，后面4个属性是用来设置元素框，或对元素框中的内容进行控制，position属性是最主要的定位属性,left,right,top和bottom只在position属性中使用才会发挥作用。
{position:static|absolute|fixed|relative}分别是默认值|绝对定位|绝对定位相当于浏览器窗口进行定位|相对定位，对象不可重叠
absolute是参照浏览器的左上角，配合top，left，bottom和right进行定位的。在父层position属性为默认值时，上、下、左、右的坐标原点以body的坐标原点为起始位置。

当然在定位时，最好使用

相对定位

relative：坐标原点本身偏移前的原点，与上级元素无关。

固定定位

fixed:参照位置是浏览器窗口，而不是上级元素。所以可以使用固定定位来设置类似传统框架样式窗口，广告框架，导航框架等。

层叠顺序

{z-index:zuto|number}遵循父对象的定位|无单位的整数值可以为负值，该属性只作用于position的属性值为relative或absolute的对象，不能作用在窗口组件上

边偏移属性

left、right、top和bottom
描述元素块与包含元素块最近的边线之间的偏移量的属性；

4个属性取值很相似:

{left:auto|length}系统自动取值|由浮点数字和单位标识符组成的长度值或百分数（设置数值用来设置元素的绝对位置，百分比设置元素是相对于其他上级元素的位置而设置的；取值为auto，则在定位中允许元素刚好有显示其内容所需的宽度和高度。)

浮动定位

{float:none|left|right}不浮动，在左面，在右面
float会对相邻内容造成影响，也可实现内容环绕图片的效果

清除浮动元素

{clear:none|left|right|both}两边都可以有浮动元素|不允许左边有浮动元素|不允许右边有浮动元素|不允许有浮动对象
这个可以清除float带来的影响

溢出定位：

{overflow:visible|auto|hidden|scroll}溢出内容可见|等同于scroll，需要时应用滚动条|内容隐藏|保持元素框大小，在框内应用滚动条

隐藏定位

{visbility:inherit|visible|collapse|hiden}继承|可见|隐藏元素的行列，隐藏的行或列能够被其他内容使用|元素隐藏(元素不可见，但他仍旧会占有部分页面位置，影响页面的布局)

块和行内元素display

通过display属性控制元素显示，即元素显示方式

{display:block|none|inline|等等}块元素|隐藏|内联

display属性的默认值为block,即元素的默认显示方式是以块元素方式显示。常用的段落p,标题h1、表单form、列表、ul,li都可以定义成块元素。一个块元素其行高和顶部和底部都是可控的。如果不设置密度，快就会默认为整个容器的100%，如果设置了值，显示大小就由值来决定。
行内元素：

当display的值被设置为inline时,可以把元素设置为行内元素，并在浏览器中同一行显示。

CSS3盒子和DIV布局

层在HTML布局应用

div和span的区别：div是一个块级元素，其包含的元素会自动换行。span标记是个行内标记，其前后都不会发生和换行。div标记可以包含span标记元素，但span标记一般不包含div标记。

盒子模型是由margin（边界）、border（边框）、padding（外边界据文字的距离）、content(内容)

margin:外边距：用来设置内容与内容之间的距离
border:设置内容边框
padding:设置内容和边框的距离
content:文字和图片等

CSS3盒子新增弹性盒子模型

该模型绝对元素在盒子中的分布方式以及如何处理盒子的可用空间。但一般都需要浏览器的私有属性来支持弹性盒子模型。

定义盒子的坐标轴

{box-orient:horizontal|vertical|inline-axis|block-axis|inherit}在一条水平线上显示|在一条垂直线上显示|沿着内联轴显示|沿着块轴显示

定义盒子的显示顺序

{box-direction:normal|reverse|inherit}正常显示|反向显示

定义元素在盒子内的显示顺序

{box-ordinal-group:}参数值integr是一个自然数，从1开始，用来设置子元素的位置序号，子元素分别根据这个定义元素在盒子内的显示顺序

子元素在盒子中的显示空间

{box-flex:}是一个整数或小数，表示的是子元素在盒子中所占的面积，但box-flex只有在盒子拥有确定的空间大小时才能够正确解析，可用width和height宽高定义属性

子元素在盒子内水平孔吉纳的分配

{box-pack:start|end|center|justify}左侧，右侧为空|右侧，左侧为空|全局居中|平均分布

子元素在盒子内竖直空间的分配

{box-align:start|end|center|baseline|stretch}顶部|底部|居中|沿基线排列，富余的空间可前后显示|所以子容器和父容器保持同一高度

空间溢出管理

{box-lines:single|multiple}单行单列显示|子元素多行多列显示

CSS3+DIV页面基本排版

将页面用DIV分块
设置各块的位置
利用CSS对DIV进行定位

固定宽度布局

经典的网页排版方式：包括宽度固定的上中下版式，宽度固定的左右版式，自适应宽度布局和浮动布局。

新增CSS3多列布局

列宽度

{column-[|auto]}由浮点数和单位标识符组成|根据浏览器计算值的自动计算

列数

{column-count:auto|}由浮点数和单位标识符组成不可为负值

列间距

{colume-gap:normal|}由浮点数和单位标识符组成

列边框样式

{colume-gap:normal||

努力拼搏吧，不要害怕，不要去规划，不要迷茫。但你一定要在路上一直的走下去，尽管可能停滞不前，但也要走。