CSS样式与布局详解-优快云博客

CSS 指层叠样式表(Cascading Style Sheets)，定义如何显示HTML元素。

CSS的样式规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）希望设置的样式属性（style attribute）。

CSS加载的方式

1.引入外部文件

<link href="outer.css" rel="stylesheet" type="text/css"></link>

HTML文档中使用<link>元素引入外部样式文件，引入外部样式文件应在<head>元素中增加<link>子元素。

2.导入外部样式单

<style type="text/css">
@import "../outer.css";
@import url('outer.css');
</style>

导入外部样式表单需要在<style>元素中执行@import进行导入。

3.使用内部CSS样式

一般来说我们不建议使用内部 CSS 样式：

复用性小。
导致HTML文档过大，会导致网络负载严重。
修改整站风格时，需要对每个网页文件进行样式修改。

4.使用内联CSS样式

内联样式只对单个标签有效，不会影响整个文件。

在 HTML 元素中使用 style 属性定义内联样式。

<div style="property1:value1;property2:value2;"/>

内联元素和区块元素简介

我们在之前的练习中发现，HTML标签具有不同的特性。

实际上，我们可以将HTML元素分为两大类：区块元素和内联元素。

区块元素

总是在新的一行上显示。
高度、行高、宽度、内边距、外边距等都是可控制的。
高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css控制它，显示的指定他的宽度和高度，可以利用浮动和定位来将他与其他的块元素也显示在一行上。
实例: <h1>,<p>, <ul>,<table>。

内联元素

内联元素和其他的元素显示在一行上。
上下边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度。
实例: <b>, <td>, <a>, <img>。

常用的内联元素

a - 锚点
em - 强调
img - 图片

`<div>`元素

HTML<div>元素是块级元素，它可用于组合其他HTML元素的容器。
<div>元素没有特定的含义。由于它属于块级元素，浏览器会在其前后显示换行。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。

`<span>`元素

HTML <span>元素是内联元素，可用作文本的容器
<span>元素也没有特定的含义。
当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

通配符选择器

使用"*"表示通配符，用来选择页面所有元素的样式。

*{ margin:0;
padding:0;}

类选择器

类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任意。

.myclass{...}

选择器

ID选择器中的样式会对具有指定id属性的HTML元素起作用。

HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。

需要注意的是id在HTML文档中具有唯一性，是不可以重复的。

#idValue{ ...}

包含选择器

包涵选择器用于指定处于某个选择器对应的内部元素。

h1 em {color:red;}

子选择器

子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。

parent>child{width: 200px; height: 35px;}

群组选择器

群组选择器使用逗号对选择符进行分隔。

我们可以将逗号读成“和”。

h1,p,myClass,#main{
	font-size:20px;
}

伪类

CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 将在用户悬停在选择器指定的元素上时应用样式。

a:hover

a:link

a:visited

a:hover

a:active

注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，a:active必须被置于
a:hover之后，才是有效的。伪类的名称不区分大小写。

12月14日笔记

first-child伪类

:first-child CSS 伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元素。

first-line伪类

"first-line" 伪元素用于向文本的首行设置特殊样式。

注意："first-line" 伪元素只能用于块级元素。

"first-line" 伪元素的应用元素

font properties

color properties

background properties

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

before伪类

":before" 伪元素可以在元素的内容前面插入新内容。

after伪类

":after" 伪元素可以在元素的内容后面插入新内容。

CSS颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。

CSS的颜色可以通过以下等方法指定：十六进制颜色、RGB颜色、RGBA颜色、颜色名等值指定。

十六进制颜色值

所有主要浏览器都支持十六进制颜色值。

指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。

p
{
background-color:#ff0000;
}

RGB颜色值

RGB颜色值在所有主要浏览器都支持。

RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。

此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）。

p
{
background-color:rgb(255,0,0);
}

3.RGBA颜色值

RGBA 颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

RGBA 颜色值是 RGB 颜色值 alpha 通道的延伸 - 指定对象的透明度。

RGBA 颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha 参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

p
{
background-color:rgba(255,0,0,0.5);
}

背景颜色

background-color 属性定义了元素的背景颜色。

背景图片

background-image 属性描述了元素的背景图像。

背景平铺重复设置

background-repeat属性控制背景图像的平铺重复效果。

背景图片固定

我们要把backgroun-attachment的属性设为fixed,那么背景图片就会被固定在该组件中，不会随滚动条的滚动而移动

body{background-attachment: fixed;}

背景图片定位

可以利用 background-position 属性改变图像在背景中的位置。

背景图片大小

background-size属性指定背景图片大小。

背景的简写属性

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

background: red url('')no-repeat fixed center center

文本的颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如:＃FF0000。
一个RGB值-如:RGB(255,0,0)。
颜色的名称 - 如:red。

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的水平对齐方式

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰

text-decoration属性一般用于删除链接的下划线。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

文本缩进

text-indent属性控制首行文本的缩进。

属性值可以是固定值（包括负数），也可是百分比。

注意em单位一般代表网页中一个字符的大小。

字符间距和字间距

letter-spacing属性控制字符的间距。属性值可以是正负数。

word-spacing属性控制字间距。

行间距

line-height属性控制行间距（简称行高）。

元素的垂直对齐方式

vertical-align属性控制元素垂直对齐方式。

vertical-align被用于垂直对齐inline元素，也就是display值为inline和inline-block的元素。

也就是垂直居中是运用在行内元素的。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标。
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
inherit	规定应该从父元素继承 vertical-align 属性的值。

使用 list-style-type 改变列表项标记。

边框

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度，样式，还有颜色。

样式包括：

你也可以通过设置样式为 none 或 hidden 来明确地移除边框。

如果一次只指定某一个方向的边框，就用属性：border-top，border-right， border-bottom，border-left。

用margin属性或者 padding 属性分别设置外边距和内边距的宽度。

如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

注意：

外边距margin可以为负，内边距不可以为负。

行内元素设置上下边距不影响行高。

边框是可见的，边距是不可见的，只能看到对其他元素的影响。

行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。

如果设置上下边框或者边距，会导致盒子高度超过行高，盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。

综上所述，不推荐对行内元素设置盒子属性，一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。

元素盒子属性的默认值

大多HTML元素的盒子属性默认值都为0。

少部分HTML元素盒子属性存在默认值，如：`body`,`p`,`ul`,`li`,`form`标签等，因此我们在需要的时候可以先初始化他们的属性为0。

12月15日笔记

display的属性和实例

元素的显示和隐藏

使用`display:none`将元素隐藏起来，此时元素不占用页面空间。

使用`visibility:hidden`也可以隐藏元素，此时元素占用空间。

display:block就是将元素显示为块级元素

block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度默认是它的容器的100%，除非设定一个宽度

<div>,<p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline就是将元素显示为行内元素.

inline元素的特点是：

和其他元素都在一行上；

高，行高及顶和底外边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>,<label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

将a标签设置为display:block这样可以让a标签具备区块元素的特性，拥有独占一行的宽度，使得导航项目更容易被点击。

浮动和清除浮动

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

浮动会脱离文档流

脱离文档，也就是说浮动不会影响普通元素的布局。我们可以直接理解成，浮动的元素在普通文档流的上面一层，更靠近屏幕的上层。

默认三个设置了宽高的block元素，本来会格子独占一行；

如果框1设置了float:right，他会忽略框2和框3，直到碰到父元素；

如果，框1设置成float:left，就会覆盖住处在普通文档流中的框2。

(框1浮动后，框1原本在普通文档流中的位置被框2顶替，而框1向左浮动后，由于处在普通文档流的上层，就会盖住框2)。

浮动可以内联排列
浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这样可以使区块元素在一行显示。

当三个区块都浮动，而一行的空间不够了，会引起元素换行。

但是如果每个元素的高度不一致，会出现“卡住”的情况。

浮动会导致父元素高度坍塌

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

解决这个问题。我们需要清除浮动。

在原来的页面中添加了一个空的div元素，并且增加样式clear:both，不可以在已经浮动的元素中增加清除浮动的样式，这样只会让其不去进行位置浮动，但是仍然是脱离文档流的，依然不能撑开高度。

清除浮动的最佳实践

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1)display:block使生成的元素以块级元素显示,占满剩余空间。

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。

4）通过content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。

5）zoom：1触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容。

BFC的触发方式

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。所以以上的BFC触发方法都可以用来解决浮动问题，但是要选择合适的使用场景。

用Position属性进行定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

position属性设置元素定位类型，可以通过top,bottom,right,left属性，控制元素的定位位置。

position属性值有static，relative，absolute，fixed四个值。

static静态定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top,bottom,right,left属性的影响。

fixed固定定位

脱离标准流，在页面中不占位置。

不管页面有多大，永远相对于浏览器的边框来定位。

              
              
               
               *{
              
              

              
              
               
                   margin: 0;
              
              
              
              
               
                   padding: 0;
              
              
              
              
               
               }
.c1{
              
              
              
              
               
               th: 100px;
    he
              
              
              
              
               
               wi
              
              
              
              
               
               dight: 100px;
              
              
              
              
               
               -color: brown;
}

.c2{
    w
              
              
              
              
               
               backgroun
              
              
              
              
               
               didth: 100px;
    height: 100px;
              
              
              
              
               
               3{
    width: 100px;
    he
              
              
              
              
               
               background-color: blue;
}

.
              
              
              
              
               
               cight: 100px;
    background-color: black;
              
              
              
              
               
               ，不管窗口上下拉动，都不会消失（如广告位）*/
    left:20px;
    top:20px;
} 
              
              
              
              
               
               position: fixed;/*固定定位，不占位置，永远相对于浏览器来定
              
              
              
              
               
               位

              
              
               
               <body>
              
              

              
              
               
               <div class="c1"></div>
              
              
              
              
               
               <div class="c2"></div>
              
              
              
              
               
               <br><br><br><br><br><b
              
              
              
              
               
               <div class="c3"></div>
              
              
              
              
               
               br><br><br><br><br>...
</body> 
              
              
              
              
               
               r><br><br><br><br><br>
              
              
              
              
               
               <

relative 相对定位

不脱离标准流，在页面中占位置。

相对于自己原来的位置来进行定位。

              
              
               
               *{
              
              

              
              
               
                   margin: 0;
              
              
              
              
               
                   padding: 0;
              
              
              
              
               
               }
.c1{
              
              
              
              
               
               th: 100px;
    he
              
              
              
              
               
               wi
              
              
              
              
               
               dight: 100px;
              
              
              
              
               
               -color: brown;
    }

.c2{  
              
              
              
              
               
               backgroun
              
              
              
              
               
               d   width: 100px;
    height: 100px;
              
              
              
              
               
               ion: relative;/*相对定位，占位置，相对
              
              
              
              
               
               background-color: blue;
    posi
              
              
              
              
               
               t于自己原来的位置定位*/
    left: 20px;
    top:20px;
}

.c3{
              
              
              
              
               
               color: black;    
              
              
              
              
               
               width: 100px;
    height: 100px;
    background
              
              
              
              
               
               - }

              
              
               
               <body>
              
              

              
              
               
               <div class="c1"></div>
              
              
              
              
               
               <div class="c2"></div>
              
              
              
              
               
               </body> 
              
              
              
              
               
               <div class="c3"></div>