<style>
p {
color: #000;
font: 100;
}
</style>
css每一部分由选择器 与声明 构成p{color: #000;}，选择器为p代表样式被更改者，声明 {color: #000;font: 100;}由键值对组成，属性与属性值，每一个声明最后要用分号来结尾。样式要写在<style></style>标签中。 代码规范：样式格式可以写为紧凑格式p{color: #000;font: 100;}或展开格式，如上方代码，推荐使用展开格式；样式大小写一般要求小写；空格规范，要求冒号后面加个空格，选择器与大括号之间加一个空格。 选择器 用来选择标签。选择器可以分为基础选择器与复合选择器。基础选择器是由单个选择器组成的，基础选择器包括标签选择器，类选择器，id选择器和通配符选择器。标签选择器 是使用HTML标签名 p，h1，div等作为选择器，会将此标签的所有内容都设置为同一样式。类选择器 需要在html元素中写class属性<div class="aa bb"></div>，然后在CSS样式中使用.aa {color: #000;font: 100;}这样就会为特定一部分html赋予样式。可以使用-连接两个单词作为class名，不建议使用中文或纯数字来命名。同一个类也可以拥有多个类名，多个类名以空格间隔，多类选择器提高代码复用性与减少修改内容，类选择器使用最多。id选择器 需要在html元素中写id属性<div class="red box" id="kkk"></div>，然后在CSS样式中使用#kkk {width: 100px;height: 100px;}，这样就会为单独的一个标签内容赋予样式。id值是唯一的，不同的标签不可以拥有同一个id，i的选择器一般与JS搭配使用。通配符选择器 * {width: 100px;height: 100px;}会将所有标签都设置上样式，只在特殊情况下使用。字体 {font-family:'Microsoft Yahei', Arial}建议字体使用英文拼写。在字体中可以写多个字体，浏览器会按顺序查看字体，没有就继续查看。多个字体之间使用逗号分隔，如果字体为多个单词，用引号包裹。大小 {font-size: }属性简易使用像素px作为单位，标题需要单独设置字号大小。文字样式 {font-weight: }可以设置文字的粗细，属性可以为单词或者数字，推荐使用数字，不需要加单位{font-style: }可以设置文字样式，其中有ltalic斜体。一般是用来让倾斜字体不倾斜。font复合属性 {font: font-style font-weight font-size/line-height font-family;}按顺序为文字样式，文字粗细，文字大小，文字字体。中间以空格隔开。可以省略前两个元素，后两个不可省略。文本颜色 {color: }属性可以以文字形式，或者16进制RGB数字，或者RGB值来完成。此属性会设置文字颜色，最常用的是RGB16进制。对齐文本 {text-align: }属性值有center或left或right，对应居中对齐，左对齐，右对齐，对齐指的是盒子对齐，默认值为左对齐。装饰文本 {text-decoration: }属性值有none默认没有装饰线，underline下划线，overline上划线，line-through删除线。可以使用此属性删除a标签中默认存在的下划线。文本缩进 {text-indent: }用来指定文本的第一行的缩进，属性值为缩进像素数，只会是第一行缩进，也可使用em作为属性单位，就是文字大小距离。行间距 {line-height: }此属性用来设置行高，即文本高度加上下间距的值，单位为像素值。内部样式表 在html页面内部写样式，但是是单独写到<style></style>标签中，理论上标签可以放在任何地点，但建议放在<head></head>标签中，通过此种方式可以控制整个页面内部的元素样式，使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是练习时常用的方式。行内样式表 在html标签行中书写样式，<div style="width: 1;height: 1;"></div>，使用style作为标签的属性，在双引号中书写属性，并且要符合CSS规范，可以控制当前的标签样式，通常被称为行内式引入，优先级最高。外部样式表 在外部写一个.CSS文件，在css文件中不需要使用style标签，写完.css文件后需要在html中使用<link rel="stylesheet" href="css文件路径">来引入此文件，stylesheet代表样式表，href代表文件路径，可以同时控制多个页面，完全实现结构和样式相分离。图片居中对齐 若要使图片居中对齐，需要让其父标签添加水平居中的代码Chrome调试工具 F12后左边是html，右边是样式，Ctrl+0快捷键是快速复原浏览器大小单行文字垂直居中 可以使用文字行高等于盒子高度就可以使得文字垂直居中。当行高小于盒子高度，文字垂直会偏上，大于盒子高度，文字垂直会偏下。创建HTML时 建议在布局前，先进行内外间距的清除，同时对于行内元素，建议只设置左右内外间距，不设置上下内外间距。网页布局第一准则 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。网页布局第二准则 先设置盒子的大小，再设置盒子的位置。去除列表样式 使用list-style属性进行设置。CSS书写顺序 布局定位属性display，position，float，clear，visibility，overflow->自身属性width，height，margin，padding，border，background->文本属性color，font，text-decoration，text-align，vertical-align，white-space，break-word->其他属性content，cursor，border-radius，box-shadow，text-shadow等，建议display第一个写，因为关系到模式。导航栏设计时 实际开发中，不会直接使用链接a，而是使用li包含(li+a)的做法，原因为，li+a语义更清晰。同样，如果直接用a标签，搜索引擎容易辨别为有堆砌关键字的嫌疑，会降低网站排名。生成标签 直接输入标签名 按tab键即可，例如输入div然后tab键，就可以生成<div></div>多个相同标签 如果需要生成多个相同标签，加上*即可，例如div*3就可以快速生成3个div父子标签 如果有父子级关系的标签，可以用>，例如ul>li就可以生成<ul><li></li></ul>兄弟标签 如果有兄弟级关系的标签，可以用+，例如div+p就可以生成<div></div><p></p>类名与id 直接在标签名后面加.或#后面书写类名与id后按tab键就可以了顺序div标签 如果标签的类名或者id需要顺序排序，可以在类名后加$CSS样式 首字母缩写加属性即可实现一个CSS声明后代选择器 又被称为包含选择器，使用多个基础选择器拼接而成，中间使用空格分隔，第一个选择器为父级，第二个选择器为子级，此选择器会选择父级元素中所有子级元素，选择器可以有多级。例如ul li {}或.nav li a {}。子元素选择器 元素1与元素2以>分隔开，选择离元素1最近的元素2，可以理解为嫡子选择器。例如ul>li {}或.nav>li{}。并集选择器 并集选择器通过,分隔开，表示连接的选择器都被选择，并集选择器的多个子元素可以为任意的选择器。例如ul,div {}或hi,.nav li{}。链接伪类选择器 a:link选择所有未被访问的链接；a:visited选择所有已被访问的链接；a:hover选择鼠标指针位于其上的链接；a:active选择活动链接（鼠标按下未弹起的链接），为了保证链接伪类选择器生效，要按照LVHA的顺序书写。顺序为link->visited->hover->active，一般只使用a标签选择器与hover伪类选择器。focus伪类选择器 一般情况下配合<input>标签使用，用于获取焦点的表单元素，即鼠标正在放置的元素，使用方法为input:focus。分显示方式 元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，由比如一行可以放置多个<span>，HTML元素一般分为块元素 和行内元素 两种类型块元素 特点是自己独占一行；高度，宽度，外边距以及内边距都可以控制；宽度默认是容器（父级宽度）的100%；是一个容器级盒子，里面可以放行内或块级元素。常见的有<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等。注意，文字标签<h1>~<h6>，<p>里面不可以放置块级元素。行内元素 特点是相邻行内元素在一行上，一行可以显示多个；高，宽直接设置是无效的；默认宽度就是他本身内容的宽度；行内元素只能容纳文本或其他行内元素。常见的有<a>，<strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<span>等。<a>标签里面不可以放置块级元素，特殊情况<a>标签里面可以放置块级元素，但是建议转换一下块级模式最安全。行内块元素 存在这一些特殊的标签，同时具有块元素和行内元素的特点，将其称为行内块元素。特点是和相邻行内元素（行内块元素）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）；默认宽度就是其本身内容的宽度（行内元素特点）；高度，行高、外边距以及内边距都可以控制（块级元素特点）。常见的有<img/>，<input/>，<td>元素显示转换 简单理解为一种模式的元素需要另外一种模式的特性，行内元素转换为块级元素，可以使用display:block声明完成；转换为行内元素，使用display:inline声明完成；转换为行内块元素，使用display:inline-block声明完成背景颜色 使用声明{background-color:}实现对背景颜色的设置，默认为Transparent，即透明色。可以使用rgba属性设置alpha透明度，取值范围在0~1间。0.3中的0可以省略，写成.3(IE9+以上浏览器才支持)背景图片 使用声明{background-image:url()}实现对背景图片的设置，url里面写图片的路径，默认图片为平铺效果。属性默认为none。背景图片也可以不平铺，使用{background-repeat:}声明设置平铺，属性值有repeat，no-repeat，repeat-x，repeat-y。背景图片会压住背景颜色。背景图片位置 使用声明{background-position:}，属性值可以是方位或者属性值，如果指定的两个值都是方位名词left，top，right，bottom，center，此时两个值的前后顺序无关，如果只写一个方位名词，那么另一个方位默认居中。位置也可以是具体参数，即{background-position: 20px 50px}第一个参数是距离左边界，第二个参数是距离上边界。如果只给定一个数值，默认距离左侧数值，垂直居中。两个参数可以以方位名词与数值混合使用。背景图像大小 background-size当有两个参数时，第一个参数为图片的宽度，第二个参数为图片的高度；当只有一个参数时，表示的是宽度，图片会等比例缩放；里面也可以放置百分比，即父盒子的大小；可以使用cover关键字作为属性，意思为将背景图像扩展至足够大，以使背景图像完全覆盖背景区域，可能有部分背景图片显示不全；也可以使用contain关键字作为属性，意为把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，可能会有部分留白，这两个关键字都不会改变比例。背景图像固定 又叫背景附着，使用声明{background-attachment:}设置背景图像是否固定fixed或者随着页面的其余部分滚动scroll背景复合写法 将背景的多个属性合在一起写，没有特定的书写顺序，一般习惯约定顺序为：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置。提倡这样书写CSS具备三个非常重要的特性：层叠性，继承性，优先级。 层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则上，当样式冲突时，遵循的原则为就近原则，哪个样式离结构近，就执行哪个样式。继承性 子标签会继承父标签中的某些样式，如文本颜色和字号（text-，font-，line-这些元素开头的可以继承，以及color属性）。简单的理解就是：子承父业。行高的继承性，父行高可以使用/1.5属性进行定义，这样子行高会乘上父行高中的1.5。优先级 选择器权重如下所示
选择器 选择器权重 继承 或者 * 0,0,0,0 元素选择器 0,0,0,1 类选择器，伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式 style="" 1,0,0,0 !important 重要的 ∞无穷大
继承的权重为0，不管父元素权重多高，子元素得到的权重都是0。 复合选择器会有权重叠加的问题，也就是li{}权重为0,0,0,1，ul li{}权重为0,0,0,2。 网页布局步骤 首先准备好相关的网页元素，然后利用CSS设置盒子样式，然后摆放到相应位置，最后往盒子里装内容。盒子模型组成 盒子组成部分分为border盒子边框，content盒子内部内容，padding盒子边框与内容边距，margin两个盒子之间的边距。盒子边框 使用border设置，合着写为通俗顺序为border-width边框粗细，单位为px；border-style边框样式，实线solid，虚线dashed，点线dotted等；border-color边框颜色，分开写也可以。边框四条边可以分别写，只需在border后加方位即可。合并相邻边框可以使用border-collapse属性，令其为collapse属性即可。边框会影响盒子的实际大小，盒子大小会增加一个边框大小。内边距 设置内间距，边框与内容之间距离，使用padding属性。拥有一个值时代表上下左右都为此属性；两个值时为第一个值是上下内间距，第二个值为左右内间距；三个值时第一个值为上内间距，第二个值为左右内间距，第三个值为下内间距；四个值时第一个值为上间距，第二个值为右间距，第三个值为下间距，第四个值为左内间距，以顺时针转。也可以分别写，加方位词就可以了，盒子加内间距也会增加实际大小。如果盒子本身没有指定高度或宽度属性，使用内间距就不会多撑大盒子。外边距 使用margin属性控制外间距，简写方式与内间距简写方式相同。块级盒子水平居中，要求盒子必须设置了宽度，左右外间距都设置为auto。行内块元素水平居中，给其父元素添加text-align:center即可。当父盒子与子盒子都具备外间距时，会出现塌陷问题，此时可以为父元素定义上边框，或为父元素定义上内边距，或为父元素添加overflow:hidden属性也可以解决塌陷问题。圆角边框 使用border-radius:声明实现圆角边框的设置，属性值为圆角的半径，或者百分比为宽度与高度的一半，甚至可以变成椭圆。四个角可以设置不同的圆角。可以单独设置一个角的圆角，但属性名要先写上下后写左右。盒子阴影 使用box-shadow拥有以下几个属性，h-shadow水平阴影的位置，v-shadow垂直阴影的位置，blur模糊距离，spread阴影的尺寸，color阴影的颜色，inset将外部阴影转换为内部阴影。位置尺寸都可以使用负值。前两个值为必需的，后面值可以省略。文字阴影 可以使用text-shadow完成设计。，h-shadow水平阴影的位置，v-shadow垂直阴影的位置，blur模糊距离，color阴影的颜色。传统布局方式 有标准流，浮动，定位三种布局方式。标准流是以标签按照规定好的默认方式排列。浮动 最典型的应用就是让多个块级元素一行内排列显示。使用属性float完成设置，具有三个属性值none，left，right，分别是不浮动的默认值，左浮动与右浮动。浮动框会将浮动移动到一侧，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。浮动特性 浮动元素会脱离标准流(脱标)不会再保留原来的位置，多图层理解，浮动元素会一行内显示，并且元素顶部对齐，浮动的元素会具有行内块元素的特性。浮动的盒子中间没有缝隙，是紧挨在一起的。当需要浮动盒子在页面上固定位置时，需要使用父标准流盒子，子浮动盒子。浮动只会影响浮动盒子后面的标准流，不会影响前面的标准流。清除浮动 本质是清除浮动元素造成的影响。也就是希望父盒子能够被浮动子盒子撑开，在不设置父盒子高度时。清除浮动要闭合清除，拥有四种方法额外标签法(W3c推荐的做法) ，父级添加overflow属性 ，父级添加after伪元素 ，父级添加双伪元素 。额外标签法 又称为隔墙法，会在浮动元素的末尾处添加一个空的标签，例如<div style="clear:both"></div>或其他标签，例如<br/>等，优点是通俗易懂，书写方便，缺点会增加很多无意义的标签，结构化比较差。要求新标签必须是块级元素，不能是行内元素。父级添加overflow属性 这种方法是直接给父级元素添加overflow属性，将其属性值设置为hidden，auto或scroll。这种方法优点是代码简洁，缺点是无法显示溢出的部分。after伪元素法 这种方法是给对应的父元素加一个伪元素类，并设置属性值。相当于额外标签法的升级版双伪元素清除浮动 给父元素添加before与after属性，是在前后都生成一个元素，也相当于额外标签法的升级版。定位组成 定位由定位模式与边偏移组成，定位是将盒子定位到一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。定位模式通过CSS中的position属性来设置，其值可以分为四个：静态定位static，相对定位relative，绝对定位absolute，固定定位fixed。边偏移具有四个属性：上下左右，代表该元素的最终位置。静态定位static 静态定位是元素的默认定位方式，无定位的意思，语法：选择器{position:static;}静态定位按照标准流特性摆放位置，它没有边偏移，因此静态定位在布局中很少使用。相对定位relative 相对定位是元素在移动位置的时候，相对于其原本的位置来说的。语法：选择器{position:relative;}移动时是以其原来的坐标点为参照点，原本的位置在标准流中依旧会继续占有，但新位置不会占有。后面的盒子则仍然以标准流的方式对待它。其最大作用为给绝对位置当父属性。绝对定位absolute 绝对定位是移动位置时，相对于其上一级元素来说的。语法选择器{position:absolute;}如果此元素没有父元素或者父元素没有定位，其会以浏览器为准进行定位，如果祖先元素有定位（相对，绝对，固定定位），则以其最近一级的有定位的祖先元素为参考点移动位置。绝对定位不再占有原来的位置，也就是脱离标准流的定位。可以使用父元素相对定位，子元素绝对定位进行定位。可以简单记为子绝父相。固定定位fixed 固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变选择器{position:fixed;}。特点是以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动；固定定位不占有位置，也是脱离标准流的。固定定位也可以固定到版心的一侧，让固定定位的盒子增加一个margin一半版心宽度的属性，同时左偏移一半，就可以将元素定位到版心的一侧了。粘性定位sticky 粘性定位可以被认为是相对定位与固定定位的混合。语法选择器{position:sticky;}，以浏览器的可视窗口为参照点移动元素，粘性定位占有原先的位置，必须添加其中一个偏移量才会生效。兼容性比较差，IE浏览器不支持。定位的叠放次序 使用z-index属性来设置盒子的前后次序，数值越大，盒子越靠上，默认为auto，属性值可以为负值，正值与0。数字后面不可以加单位，如果属性值相同，则按照书写顺序，后来居上。定位拓展 定位居中使用绝对定位50% ，同时margin 元素的一半像素的负值。绝对定位与固定定位和浮动类似，行内元素添加决定或者固定定位，可以直接设置高度和宽度；块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。浮动元素，绝对定位的元素都不会触发外边距合并的问题。绝对定位，固定定位会完全压住盒子，而浮动元组只会压住下面标准流的盒子，不会压住下面标准流盒子里面的图片与文字。如果一个盒子既有左又有右，则先左后右。元素显示与隐藏 本质为让一个元素在页面中隐藏或者显示出来。如果为display属性设置none属性值，元素被隐藏且不占有位置，如果为visibility属性赋予visible属性表示可见，赋予hidden属性表示不可见，但其仍会继续占有原来的位置。overflow属性指定了如果内容溢出一个元素的框时，会发生什么；属性可以设置为scroll添加滚动条，auto属性会在溢出时显示滚动条。
1339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
