Css语法包括三部分：选择符，样式属性，属性值
基本语法：
Selector { property ：value ； property ：value；……property：value}
语法说明：
Selector代表选择符，类似html中的标签，例如：<p>、<h1>……
Property 代表属性，即要设置的文本属性，比如字体颜色，格式等
Value 代表属性值，即给属性赋值
Css要在<head>与</head>之间使用，并且添加一对<style></style>标签，在style标签中间书写各种东西
- Css选择器（适用于内部选择器）
- CSS 元素选择器、
元素选择器根据元素名称来选择 HTML 元素。
Eg：p {
text-align: center;
color: red;
}
说明：表示主体中所有使用了<p>标签的文字都会按这个标准而改变
- Css id选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。且id的名称不能使用数字开头
eg：#para1 {
text-align: center;
color: red;
}
说明：任意哪个标签，只要在标签内使用id=id标签名，就能使样式改变，如：<p id="para1">Hello World!</p>
- Css 类选择器
类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
Eg：.center {
text-align: center;
color: red;
}
说明：在一对style标签中定义了类选择器后，就可以在主题内容中，使用标签，在标签中调用class=类名，就可以改变样式
Eg：<h1 class="center">居中的红色标题</h1>
同时应当注意，html元素可以调用多个类，如：<p class="center large">这个段落引用两个类。</p>，这样书写调用也是正确的
- Css 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
Eg：* {
text-align: center;
color: blue;
}
在body体中，无需调用，通用选择器上的所有html元素都会被改变，都会起作用
- Css分组选择器
如果多对css元素选择器代码功能一样，就可以把他们归并在一起来写，以减少代码的长度
Eg：h1, h2, p {
text-align: center;
color: red;
}
这样，三个标签的字体效果，格式等，就一样
- 添加css
- 链入外部样式链表
注：使用外部样式链表就不用在style标签中间书写了，使用一个单标签<link>来链接，外部样式链表与本体相同，也就意味着，在css内部表定义的标签在外部html函数本体适用，相当于嵌入了一对css内部选择器
语法：<head>
…
<link rel=”stylesheet” type=”text/css” href=”地址”/>
</head>
注：rel与type等于的值在这是固定的，rel表示在html文件中使用的是外部样式表，type表示该文件类型是样式表文件，href表示的是文件地址（先放到html文件中，且文件必须是以 .css 扩展名保存）
- 内部css
内部样式表是通过一对style标签，把样式表的内容直接写在html文件中<head></head>标签中间的方法 <style type=”text/css”>
- 行内css
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
即直接在<body>与</body>标签中的，各个标签内，间直接添加style的方法
Eg：<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
- 层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
- 行内样式（在 HTML 元素中）
- 外部和内部样式表（在 head 部分）
3） 浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
- Css注释
注释用于解释代码，以后在您编辑源代码时可能会有所帮助。浏览器会忽略注释。位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：
- Css设置字体样式表
- 字体颜色—color
- 字体设置—font-family
注：font—family就像他的名字一样，是一个集合，家庭，可以设置多个字体，当计算机读取不到前面的字体时，会往后继续读取字体样式，直到读取到计算机上有的字体为止，不同字体之间用逗号“，”分隔开。还应当注意的是，平常输入汉字内容时，字体不用引号括起来，但是，定义英文字体时，就应该用引号阔起来
- 字号设置—font-size 常用单位：px
- 字体样式—font-style
注：用于控制字体是否以斜体显示
Normal 正常
Italic 斜体显示文字
Oblique 歪斜体
- 字体加粗—font-weight
注：字体以粗体显示
属性值：
Normal 正常
Bold 粗体
Bolder 加粗体
Lighter 细体
Number 数字越大，越粗
- 字体变体—font-variant
注：可以控制将小写的英文字母转换为大写的字母显示
属性值：
Normal 默认值，正常显示
Small-caps 英文字母小写转大写
- 字体组合属性 font
就是将繁琐的定义过程省去，用个font标签直接将所有的文字属性全部包含
基本语法：
Font: font-style font-variant font-weight font-size line-height font-fanily
注：使用font这种简写写法时，要保持上面的属性顺序不变
其他标签之间用空格隔开，但是，字体大小与行高就要用“/”隔开
使用这种写法，一定要定义font-size font-family。
- 段落样式
- 调整字符间距 letter-spacing
注：这里的字符指的是汉字字符
Normal 表示默认
？？px
- 调整单词间距 word-spacing
注：这里的单词间距就是指的是单词之间的间距
Normal 默认
？？px
- 添加文本修饰 text-decoration
注：添加上划线，下划线，删除线等
属性取值：
Underline：下划线
Overline：上划线
Normal：默认值，无文本修饰
Line-though：添加删除线
- 文本对齐 text-align
属性取值：
Left
Right
Center
Justify：代表两端对齐
- 段落缩进 text-indent
- 行高 line-height
- 英文大小写转换 text-transform
属性值：
Uppercase ：使所有单词的字母大写
Lowercase：使所有单词的字母小写
Capitalize：使所有单词的第一个单词大写
None ：默认值，原始内容展示
- Css中对列表的设置
- 列表样式
语法：list-style-type：属性值；
- 对于无序表 ul 用于设置前面的标签是什么形状
常用属性值：circle （空心圆）square（实心方块）
- 对于有序表 ol 用于设置标签以为序
常用属性值：lower-roman（小写罗马字母）upper-roman（大写罗马字母） decimal（数字） lower-alpha（小写英文字母）
- 列表图像
注：即对于无序表来说，用图像块来代替标签 且不需要定义类，在body中直接引用这个标签他就会改变
语法：list-style-image：url（“图片位置”）；
- 列表位置
注：用于设置列表标签相对于列表项内容的位置
语法：list-style-position：inside | outside | inherite；
- Inside 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本
- outside表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的
- 样例
<style type=text/css>
ul {
list-style-image: url('sqpurple.gif');
}
Ul.style1{
List-style-type:circle；
}
</style>
<body>
<ul class=”style1”>
<li>………</li>
</body>
- Css中对背景的设置
注：与其他属性内容一样，直接在样式表中书写
- 背景颜色 background-color:??;
- 设置背景图片
基本语法：background-image:url(“地址”)；
- 设置背景附件
语法：background-attachment：scroll | fixed；
Scroll表示是否背景图片随着滚动条滑动而滚动
Fixed表示背景图片不动
- 设置背景图片是否重复
语法：background-repeat：？？；
属性值：
- Repeat 默认，图片在水平和垂直方向平铺
- Repeat-x 在水平方向平铺
- Repeat-y在垂直方向平铺
- No-repeat 不平铺
- 背景图片位置
语法：background-position：value value；
- Css盒子模型：
盒子模型包括四个组成部分：margin（外边距） border（边框） padding（内边距） content（内容填充） 在选择器中直接定义书写这四个内容就好
- Css内边距 padding
表示的是内容填充到边框之间的内容
语法：padding-top：？？；
Padding-left：？？；
Padding-right：？？；
Padding-bottom：？？；
Padding：？？？？？；
注：设置内边距属性可以选择用padding-方向 的方法来分别定义上下左右四个方向的值，也可以选择用padding属性直接定义四个 如：padding：10px 10px 10px 10px; 这样就可以一条语句定义四个方向的内边距值，四个值指代的方向是：上右下左
- Css边框-border
语法：border：边框宽度 边框样式 边框颜色；
Border-top：上边框宽度 上边框宽度 上边框颜色；
…………
说明：这里的border-top相当于是一个复合属性，你可以在这么一个属性内，定义上边框的color style width三个属性的值，当然也可以更精确的定义在border-top后再接一个属性，用来精确定义。
这里的border是一个复合范围更大的标签，相当于复合了上下左右四个标签，在这么在一个属性内，你就可以将四条边的属性全部定义，不过四条边的属性会全部定义的一样，并不会精确
- 边框样式 //以下三点用法类似
语法：border-style：上边值 右边值 下边值 左边值 ；
Border-top-style：？？；
说明：border-style就是一个复合属性，你可以在这么一个属性中定义上下左右四条边的属性（注意顺序）
常用值：none 不显示边框，默认值
Dotted 点线
Dashed 虚线
Solid 实线
Double 双直线
- 边框宽度
语法：border-width：上 右 下 左；
Border-top-width：？？；
………
常用值：thin 细边框
Medium 中等边框 默认值
Thick 粗边框
- 边框颜色
语法：border-color：上 右 下 左；
Border-top-color：？？‘
- Css外边距-margin
语法：margin：上 右 下 左；//复合属性
Margin-top：？？；
Margin的取值可以是长度，百分比，或auto （auto表示自动提取边距值）
- Div+css布局
可以用一对双标签<div></div>来添加一个图层
- 创建层
语法：<body>
<div>可在此输入显示在图层上的内容</div>
</body>
- 创建层嵌套
语法：
<div><div>………</div></div>
- 层的常见属性
- Width 设置图层的宽度
- Height 设置图层的高度
- Position 设置定位方式（元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。）
Position的属性值有四种：
Static 默认值 静态定位的元素不受 top、bottom、left 和 right 属性的影响。
Relative 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
Fixed元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
Absolute 元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动
- Background 设置图片背景
Eg：<div style=”background:url(路径)；”>可在图片上显示的内容</div>
- 堆叠顺序 z-index:
说明：当层重叠时z-index大的层会排版在小的层前面，属性值是数字。
- Css浮动-float
Float常用于图像浮动，通过对float的定义，图像就会往哪边浮动，且文字会包围图像，灵活利用浮动，可以做出将图片并排等操作
注：浮动不仅仅可以使用于div标签，更多的时候可以于img标签内使用：img {
float: left;
}
属性值：
left：元素向左边浮动
right：元素向右边浮动
none：默认值，不浮动
- 浮动清除 clear
注：在div层中，左侧或者右侧不允许有浮动是，就要clear清楚效果，被清楚元素会在其下方显示
属性值：
None：允许两边都有
Left：不允许左边有
Right：不允许右边有
Both：不允许两边有浮动现象
- 溢出设置-overflow
当元素框太小，不足以装下元素时会溢出，采用overflow溢出设置
属性值：
visible：内容不会被裁剪，溢出部分出现在元素框外
hidden：溢出部分被裁剪
scroll：浏览器添加滑动条
1549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
