css完结

时间：2016年5月20号

在盒模型结束后，对于之前的文本样式和表格属性具体讲解了一些知识点，但是并不是重要的，只需记得了解即可。值得注意的就是我们索要显示页面布局在不是用div块标签的情况下，是用浮动来时先页面的布局。首先，值得注意的是：浮动只能左右浮动并不能上下浮动。

浮动元素：float

具体实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5*5</title>
（这是设置css的样式，在head里面设置style的样式）
<style type="text/css">
（先给出一个主题的div标签，并设置样式，高度和宽度，最后删除不必要的高度）
#main{

    width: 500px;
    
    background-color: white;
}
#top{
    width:500px;
    overflow: hidden;
    background-color:#30f; 
}
#d{
    width: 100px;
    （此处设置浮动）
    float: right;
}
.right{
    width: 98px;
    height: 98px;
    border: 1px dotted blue;
    background-color: #3f0; 
}
#bottom{
    float: left;
    width: 500px;
    
    background-color: blue;
}
.f{
    width: 98px;
    height: 98px;
    border: 1px dotted black;
    background-color: #c30;

（此处设置浮动）
float: right;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="left">

    </div>
    <div id="d">
        <div class="right"></div>
        <div class="right" ></div>
        <div class="right"></div>
        <div class="right"></div>
</div>
</div>
<div id="bottom">
    <div class="f"></div>
    <div class="f" ></div>
    <div class="f" ></div>
    <div class="f"></div>
    <div class="f"></div>
</div>

</div>
</body>
</html>

运行效果图：

192.png

上图中显示，右侧的绿色一栏用的就是右浮动，下面红色部分用的是左浮动。但是值得注意的是：div标签中的设置了边框的话，边框的宽度也是算在内容里的。

1、⽂文本格式化概述
• 主要包括
– 控制字体：如字体⼤大⼩小、字体加粗、字体系列等
– 设置⽂文本格式：如⽂文本颜⾊色、⽂文本排列和⽂文本缩进等
• 建议使⽤用⽂文本格式化相关的样式，取代加粗（<b>）、倾斜（<i>）等 HTML 元素

控制字体
• 指定字体 – font-family : value1,value2;
• 字体⼤大⼩小 – font-size : value;
• 字体加粗 – font-weight : normal/bold/value;
• 字体样式 – font-style : normal/italic;
• ⼩小型⼤大写字⺟母显⽰示 – font-variant : normal/small-caps;

字体属性 font
• 字体属性 font ⽤用于把所有针对字体的属性设置在⼀一个声明中
• 为简写属性，包含6个值，可以按顺序设置
– font : font-style font-variant font-weight font-size fontfamily;
– 不设置的值，则使⽤用默认设置

控制⽂文本格式
• ⽂文本颜⾊色 color : value;
• ⽂文本排列 text-align : left/right/center;
• ⽂文字修饰 text-decoration : none/underline;
• ⾏行⾼高 line-height : value;
• ⾸首⾏行⽂文本缩进 text-indent : value;
• ⽂文本阴影 – text-shadow : h-shadow v-shadow blur color;

溢出
• 处理空⽩白 – white-space：normal/nowrap;
• ⽂文本溢出 – text-overflow : clip/ellipsis

换⾏行
• ⻓长单词换⾏行 – word-wrap : normal/break-word;
• ⽂文本换⾏行 – word-break : normal/break-all/keep-all;

实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3</title>
<style type="text/css">
div{
width: 100px;
height: 300px;
border:1px dotted black;
/overflow: hidden;/
}
#b{
/white-space: normal;/
/文本横向超出，使用...必须搭配overflow：hidden使用/
/text-overflow: ellipsis;/
/长单词换行/
word-wrap: break-word;
}
#c{
/white-space nowrap文本不换行/
/white-space: nowrap;/
/text-overflow: clip;/
word-break: break-all;

}
#e{
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    word-break: keep-all;

（keep-all保证每个标点符号分割，break-all任意分割。）

}
p{
    /*浏览器加载字体*/
    font-family: times,'New York',serif;
    /*font-size识别尺寸单位 em默认字体大小的四倍 em px使用较多*/
    /*数字默认100-900 默认为四百*/
    font-size: 20pt;
    font-weight: bolder;
    /*字体倾斜 inherit表示从父标签获取font-style*/
    font-style: italic;
    /*以小型大写字母显示*/
    font-variant: small-caps;
}
.d{
    font:italic small-caps bolder 1em times;
    /*设置文本颜色*/
    color：#ff0000;
    /*文本对齐方式*/
    /*text-align: right;*/
    /*设置文本线条*/
    text-decoration: overline;
    /*文字阴影 第一个参数是x轴的偏移，第二个参数是y轴的偏移，第三个参数是模糊度，第四个参数是阴影的颜色*/
    text-shadow: 5px 5px 2px #30c;
    border:1px solid black;
    text-indent: 20pt;
    line-height: 100px;
    /*单行文本，行高可以做文字垂直居中 line-height*/
}
</style>

</head>
<body>
<p class='d'>今天太阳不错，心情也不错</p>
<div id="b">to be or not to be ,this is a question.i always think no seeking,no gaining.long long long long long ago.如何换行？
</div>

<div id="c">to be or not to be ,this is a question.i always think no seeking,no gaining.long long long long long ago.如何换行？
</div>

<div id="e">to be or not to be ,this is a question.i always think no seeking,no gaining.long long long long long ago.如何换行？
</div>

</body>
</html>

运行效果：

1.png

2.png

表格常⽤用样式属性
• 边距属性：padding
• 尺⼨寸属性：width、height
– 设置表格或者单元格的尺⼨寸
• ⽂文本格式化属性
• 背景属性：设置表格或者单元格的背景⾊色或者背景图像
• border 属性：设置表格的边框

垂直⽅方向对⻬齐
• vertical-align 属性
– 在表单元格中，设置单元格框中的单元格内容的对⻬齐⽅方式
• 取值
– vertical-align : top/middle/bottom

边框合并 border-collapse
• 如果设置了单元格的边框，相邻单元格的边框会单独显⽰示，类似于双线边框
• border-collapse 属性：合并相邻的边框
– 设置是否将表格边框合并为单⼀一边框
• border-collapse :separate/collapse;

边框边距 border-spacing
• border-spacing 属性
– 设置相邻单元格的边框间的距离
– 仅限于分隔单元格边框，即border-collapse（这里设置的时候一定注意的是要保证table和td都有边框才可以设置）属性为 separate 值的情况下，也称为边框分离模式
• 取值为⻓长度值，可以为该属性指定⼀一个或者两个值
– 指定一个值：该值同时应⽤用于⽔水平和垂直间距
– 指定两个值：第⼀一个值指定⽔水平间距，第⼆二个值指定垂直间距，且两个值之间⽤用空格隔开

标题位置 caption-side
• caption-side 属性设置表格标题的位置，指定表标题相对于表框的放置位置
• 可取值
– top：表格标题定位在表格之上，为默认值
– bottom：表格标题定位在表格之下

显⽰示规则 table-layout
• table-layout 属性⽤用来帮助浏览器如何显⽰示或者布局一张表，即⽤用来设置显⽰示表格单元格、⾏行、列的算法规则
• 可取值
– auto：列宽度由单元格内容设定，为默认值，即⾃自动表格布局
– fixed：列宽由表格宽度和列宽度设定，即固定表格布局

定位概述
• 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于⽗父元素、另⼀一个元素甚⾄至浏览器窗⼝口本⾝身的位置
• 普通流定位
• 浮动定位
• 相对定位
• 绝对定位

普通流定位
• ⻚页⾯面中的块级元素框从上到下一个接⼀个地排列
– 每一个块级元素都会出现在一个新⾏行中（⽐比如 <p> 元素、 <div> 元素）
– 元素框之间的垂直距离是由框的垂直外边距计算出来的
• 内联元素将在一⾏行中从左到右排列⽔水平布置
– 不需要从新⾏行开始
– 可以使⽤用⽔水平内边距、边框和外边距调整它们的间距

浮动概述
• 浮动定位是指
– 将元素排除在普通流之外，即元素将脱离标准⽂文档流
– 元素将不在⻚页⾯面占⽤用空间
– 将浮动元素放置在包含框的左边或者右边
– 浮动元素依旧位于包含框之内
• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为⽌止
– 经常使⽤用它来实现特殊的定位效果

float 属性
• 如果需要设置框浮动在包含框的左边或者右边，可以通过 float 属性来实现
• float 属性定义元素在哪个⽅方向浮动
– 在 CSS 中，任何元素都可以浮动

clear 属性
• clear 属性⽤用于清除浮动所带来的影响
• clear : none/left/right/both ;
– 定义了元素的哪边上不允许出现浮动元素

显⽰示⽅方式
• “⼀一切皆为框”：⻚页⾯面上所有的元素都可以显⽰示为框
• 块级元素
– <div>、<h1> 或 <p> 元素等
– 这些元素显⽰示为一块内容，即“块框”
• 内联元素 /⾏行内元素

display 属性
• 取值
– display : none/block/inline/inline-block;
• none
– 让⽣生成的元素根本没有框 – 该框及其所有内容就不再显⽰示，不占⽤用⽂文档中的空间
• block
– 让⾏行内元素（⽐比如 <a> 元素）表现得像块级元素一样
• inline
– 让块级元素（⽐比如 <p> 元素）表现得像内联元素一样
• inline-block – ⾏行内块元素

visibility 属性
• visibility 属性规定元素是否可⻅见
• 可取值 – visible：默认值，元素可⻅见 – hidden：元素不可⻅见，但是依然占据空间
– collapse：⽤用在表格元素时，可删除一⾏行或一列，且不影响表格的布局

opacity 属性
• opacity 属性设置元素的不透明级别
• 取值 opacity : value;
– value 规定不透明度，从 0.0 （完全透明）到 1.0（完全不透明）

vertical-align 属性
• 设置单元格框中的单元格内容的垂直对⻬齐⽅方式
• 对于⾏行内块级元素，如 <img>，可设置垂直对⻬齐⽅方式
– 定义⾏行内元素的基线相对于该元素所在⾏行的基线的垂直对⻬齐
• 常⽤用取值
– baseline：默认，元素放置在⽗父元素的基线上
– top：把元素的顶端与⾏行中最⾼高元素的顶端对⻬齐
– bottom：把元素的顶端与⾏行中最低的元素的顶端对⻬齐
– middle：把此元素放置在⽗父元素的中部

光标
• 默认情况下，光标会根据⽤用户的操作发⽣生改变
– 当⿏鼠标悬停在一个链接上时，光标将从指针形状变为⼿手状形状
– 当⿏鼠标悬停在⽂文本区域时，会显⽰示 I 形状
– ⽽而当⿏鼠标悬停在一个按钮上时，光标会显⽰示为箭头
• 可以使⽤用 cursor 属性指定显⽰示给⽤用户的⿏鼠标光标类型（形状）
– 可以为⽤用户提供⼀一种可视化的暗⽰示，提⽰示可以进⾏行的操作

cursor 属性
• cursor 属性定义了⿏鼠标指针放在一个元素边界范围内时所⽤用的光标形状
• 可取值
– default
– pointer
– crosshair
– text
– wait
– help 等

列表项标志 list-style-type
• list-style-type 属性⽤用于控制列表中列表项标志的样式
– ⽆无序列表：出现在各列表项旁边的圆点
– 有序列表：可能是字⺟母、数字或另外某种计数体系中的一个符号
• ⽆无序列表取值
– none：⽆无标记
– disc：实⼼心圆，为默认值
– circle：空⼼心圆 – square：实⼼心⽅方块

列表项标志 list-style-type（续1）
• 有序列表取值
– none：⽆无标记
– decimal：数字（如 1,2,3,4,5），为默认值
– lower-roman：⼩小写罗⻢马数字（如 i, ii, iii, iv, v）
– upper-roman：⼤大写罗⻢马数字（如 I, II, III, IV, V） – 等

列表项位置 list-style-position
• list-style-position 属性可以控制列表标记的位置
• 可取值
– outside：标记位于⽂文本的左侧，且放置在⽂文本以外，为默认值
– inside：标记放置在⽂文本以内

列表属性 list-style
• list-style 属性为简写属性，⽤用于控制项表项的样式
• 语法为
– list-style:type url(图像URL) position;
• 一般情况下，直接将list-style属性设置为 none

css完结

推荐阅读更多精彩内容