CSS指层叠样式表（CascadingStyleSheets）CSS 指层叠样式表 (Cascading Style Sheets)
CSS (Cascading Style Sheets) ⽤于渲染HTML元素标签的样式
样式定义如何显⽰ HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极⼤提⾼⼯作效率
外部样式表通常存储在 CSS ⽂件中
多个样式定义可层叠为⼀
:
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
class 选择器⽤于描述⼀组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使⽤。
class 选择器在HTML中以class属性表⽰, 在 CSS 中，类选择器以⼀个点"."号显⽰：
类名的第⼀个字符不能使⽤数字！它⽆法在 Mozilla 或 Firefox 中起作⽤
选择器通常是您需要改变样式的 HTML 元素。
每条声明由⼀个属性和⼀个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有⼀个值。属性和值被冒号分开
http:/ /www.iis7/b/wzjk/
:
css样式三种调⽤使⽤⽅式：
插⼊样式表的⽅法有三种:
外部样式表(External style sheet)：语法：<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表(Internal style sheet)：在头部写样式
内联样式(Inline style)：直接在元素中写(不推荐)
*全局标记{ }
：
为了避免Internet Explorer 中⽆法调整⽂本的问题，使⽤ em 单位代替像素。
em的尺⼨单位由W3C建议。
1em和当前字体⼤⼩相等。在浏览器中默认的⽂字⼤⼩是16px。
因此，1em的默认⼤⼩是16px，可以换算。
:
css背景样式：
background-color：背景颜⾊
background-image：url("图⽚")：背景图⽚(默认情况下，背景图像进⾏平铺重复显⽰，以覆盖整个元素实体)
background-repeat：背景平铺 on-repeat不平铺  -x横向平铺-y垂直平铺
background-position：背景定位属性
background-attachment：背景附件属性 fixed(固定背景属性)
background：# url（#）有背景有图⽚输⼊ 列⼦
：
css⽂本样式值：
font-size：#px； ⽂字⼤⼩
font-family：字体样式，如：微软雅⿊
font-style：⽂字状态如 斜体等
font-weight：⽂字粗细
text-align：⽂本对齐
font-variant ：字体之间的转变，以⼩型⼤写字体或者正常字体显⽰⽂本。
line-height：⾏⾼ 上下距离会有变化，也可以⽤于⾏与⾏之间的空间(%)
text-decoration：⽂本装饰 underline下划线 none去除下划线
text-decoration: overline：上划线
text-decoration:line-through：删除线
text-transform: uppercase：英⽂⼤写
text-transform:lowercase：英⽂⼩写
text-transform:capitalize：⾸字母⼤写
text-align：设置为"justify"，每⼀⾏被展开为宽度相等，左，右外边距是对齐
text-indent：第⼀⾏的⽂本缩进
text-shadow：⽂本阴影，(1.左右2.上下3.模糊程度4.颜⾊)
letter-spacing：字符之间的空间
direction：⽂字⽅向
word-spacing：增加在字符之间空⽩的空间
white-space:nowrap：在元素内禁⽌⽂字环绕
字体属性定义字体，加粗，⼤⼩，⽂字样式。
font-family 属性设置⽂本的字体系列。
font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下⼀种字体。
font-style：这个属性有三个值：normal(正常)，italic(斜体)，oblique(斜体)
font-size 属性设置⽂本的⼤⼩。
能否管理⽂字的⼤⼩，在⽹页设计中是⾮常重要的。但是，你不能通过调整字体⼤⼩使段落看上去像标题，或者使标题看上去像段落。
请务必使⽤正确的HTML标签，就<h1> - <h6>表⽰标题和<p>表⽰段落：
字体⼤⼩的值可以是绝对或相对的⼤⼩。
绝对⼤⼩：设置⼀个指定⼤⼩的⽂本，不允许⽤户在所有浏览器中改变⽂本⼤⼩
确定了输出的物理尺⼨时绝对⼤⼩很有⽤
相对⼤⼩：相对于周围的元素来设置⼤⼩，允许⽤户在浏览器中改变⽂字⼤⼩
：
css列表样式：
在HTML中，有两种类型的列表：
<ul>⽆序列表 - 列表项标记⽤特殊图形（如⼩⿊点、⼩⽅框等）
<ol>有序列表 - 列表项的标记有数字或字母
list-style-type：列表符号
list-style-image：图像符号(可以⾃定义)
list-style-position：位置符号
list-style：复合属性(可以多种属性在⼀起)
list-style: none：清除默认⼩⿊点
circle圆圈
disc正⽅形
：
CSS 盒⼦模型(Box Model)
所有HTML元素可以看作盒⼦，在CSS中，"box model"这⼀术语是⽤来设计和布局时使⽤。
CSS盒模型本质上是⼀个盒⼦，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
margin(外边距) - 清除边框外的区域，外边距是透明的, Margin可以使⽤负值，重叠的内容。Margin: # auto(⾃动)居中：放⼤缩⼩  #上下⾃动
border(边框) - 围绕在内边距和内容外的边框。top上, left左, right右, bottom下，(color颜⾊, width宽, solid实线，dashed虚线)
padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒⼦的内容，显⽰⽂本和图像。
最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总⾼度最终计算公式是这样的：总元素的⾼度=⾼度+顶部填充+底部填充+上边框+下边框+上边距+下边距
border-style：⽤于设置元素所有边框的样式，或者单独地为各边设置边框样式，如下所⽰：
none :  默认⽆边框
dotted : 定义⼀个点线边框
dashed :  定义⼀个虚线边框
solid :  定义实线边框
double :  定义两个边框。 两个边框的宽度和 border-width 的值相同
groove :  定义3D沟槽边框。效果取决于边框的颜⾊值
ridge :  定义3D脊边框。效果取决于边框的颜⾊值
inset :  定义⼀个3D的嵌⼊边框。效果取决于边框的颜⾊值
outset :  定义⼀个3D突出边框。 效果取决于边框的颜⾊值
。。。。。。。。。。。
border-right：分割线
border：⽤于把针对四个边的属性设置在⼀个声明。
border-width：⽤于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color：设置元素的所有边框中可见部分的颜⾊，或为 4 个边分别设置颜⾊。
border-bottom：⽤于把下边框的所有属性设置到⼀个声明中。
border-bottom-color：设置元素的下边框的颜⾊。
border-bottom-style：设置元素的下边框的样式。
border-bottom-width：设置元素的下边框的宽度。
border-left：⽤于把左边框的所有属性设置到⼀个声明中。
border-left-color：设置元素的左边框的颜⾊。
border-left-style：设置元素的左边框的样式。
border-left-width：设置元素的左边框的宽度。
border-right：⽤于把右边框的所有属性设置到⼀个声明中。
border-right-color：设置元素的右边框的颜⾊。
border-right-style：设置元素的右边框的样式。
border-right-width：设置元素的右边框的宽度。
border-top：⽤于把上边框的所有属性设置到⼀个声明中。
border-top-color： 设置元素的上边框的颜⾊。
border-top-style：设置元素的上边框的样式。
border-top-width：设置元素的上边框的宽度。
为边框指定宽度有两种⽅法：可以指定长度值，⽐如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使⽤ 3 个关键字之⼀，它们分别是thick(厚的) 、(中等)medium（默认值） 和 thin(薄的)。
：
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的⼀条线，位于边框边缘的外围，可起到突出元素的作⽤。padding是外边距还是内边距
轮廓（outline）属性指定元素轮廓的样式、颜⾊和宽度
outline：在⼀个声明中设置所有的轮廓属性
outline-color：设置轮廓的颜⾊
outline-style：设置轮廓的样式
outline-width：设置轮廓的宽度
：
CSS margin(外边距)
margin(外边距)属性定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜⾊，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以⼀次改变所有的属性。
margin可以使⽤负值，重叠的内容。
auto ：设置浏览器边距，这样做的结果会依赖于浏览器
length：定义⼀个固定的margin（使⽤像素，pt，em等）
% ：定义⼀个使⽤百分⽐的边距
为了缩短代码，有可能使⽤⼀个属性中margin指定的所有边距属性。这就是所谓的简写属性，所有边距属性的简写属性是 margin : margin：属性可以有⼀到四个值：(边距是顺时针旋转：上右下左)
margin：在⼀个声明中设置所有外边距属性。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。
margin-right：设置元素的右外边距。
margin-top：设置元素的上外边距。
：
CSS padding（填充）
length：定义⼀个固定的填充(像素, pt, em，等)
%：使⽤百分⽐值定义⼀个填充
padding（填充）是⼀个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜⾊的填充。
单独使⽤ padding 属性可以改变上下左右的填充。
为了缩短代码，它可以在⼀个属性中指定的所有填充属性，这就是所谓的简写属性。所有的填充属性的简写属性是 padding : padding：属性可以有⼀到四个值：(边距是顺时针旋转：上右下左)
padding：使⽤简写属性设置在⼀个声明中的所有填充属性
padding-bottom：设置元素的底部填充
padding-left：设置元素的左部填充
padding-right：设置元素的右部填充
padding-top：设置元素的顶部填充
:
CSS 尺⼨ (Dimension)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。