css的应用
简介：
css的应用主要是用于网页设计和布局的技术，可以帮助我们美化网页，合理设计布局。
CSS相关用法如下：
一.CSS四种引入方式
1.内嵌式引入
把style标签嵌套在head标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{font-size:36px;}
</style>
</head>
<body>
<p>一些老的<b>浏览器不支持 iframe。</b></p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
2.行内样式
<b style="font-size:56px;">11111111111111</b>
3.外链样式
<link rel="stylesheet" type="text/css" href="css/main.css">
4.嵌入样式
内嵌和外链一种综合性的使用
<style type="text/css">
@import url("css/style.css");
</style>
二.选择符
1、标签（类型）选择符：
就是针对html文档中的标签（那些html标签应用哪些css样式）如：p{font-size:12px;} div{background:blue;}
2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以因为“.”开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。
如：.warning{属性：值}
<p class="warning">....</p>
同时给某个元素应用多个类
<p class="a1 a2">....</p>
3、id选择符：与类基本相似，只是以英文“#”开头，因为id具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。
如：#main{属性：值}
<p id="warning">....</p>
同时给某个元素应用多个类与id
<p class="a1 a2" id="a6">...</p>
4、通配符选择器：*{属性：值}，用于定义所有html元素
5、包含选择符（嵌套/派生）：语法e1 e2{属性：值}
含义是所有被e1包含的e2
如：table td{属性：值} #header li a{属性：值}
优点就是不需要再单独为id为head的标签内，li标签内的a标签单独定义class或者id，css代码就少了，同样也优化css代码
6、选择符分组（集体控制）：将同样的样式定义用于多个选择符，选择符之间用逗号分隔。如：p，div，.waring{属性：值}
7、标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符
h1#content{}表示针对所有id为content的h1标签
h1.p1{}表示针对所有class为p1的h1标签
8、组合选择符：将以上选择符进行组合使用
h1.p1,h1#content{}
三、css的盒子模型
1.几个边界的理解
margin边界
border边框
padding填充
contet内容
margin-top/right/bottom/left:10px;
padding：上 右 下 左
margin:10px;上下左右4个方向
margin:10px 20px;上下 左右
margin：10px 20px 30px;上 左右 下
margin:10px 20px 30px 40px;上 右 下左
2.css控制边框的属性
设置边框粗细border-top-width：12px;
设置边框样式border-top-style:solid[实线]、dashed[虚线]
设置某一边框属性的简捷方式border-边框位置：线宽 线型 颜色；
设置某一个元素四条边框属性的简捷方式[仅限于四条边框属性完全相同]border:线宽 线型 颜色
四、css中元素的分类
1块状元素：{display:block}
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度（width）和高度(height)起作用。常见块状元素为div、p、body、h1-h6等
块状元素只能能设宽和高
2、内联元素{display：inline}
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度（width）和高度（height）不起作用。常见内联元素为a、em、span等
不能设宽和高但不影响换行
五、css控制背景
背景background:颜色 图片 平铺方式 固定方式 位置
背景颜色background-color：#ccc；
背景图像background-image：url（背景图像的位置及全称）
背景图像的重复方式background-repeat:[repeat、no-repeat、repeat-x、repeat-y]
背景图像的位置background-position：top[left center right]
center[left center right] bottom[left center right],坐标 y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素（0px 0px）]
m背景图像的依附方式background-attachment;[scroll、fixed]
六、css的三种布局
1、默认文档流方式
以默认的html元素的结构顺序显示
2、浮动布局方式
通过设置html元素的float属性显示
3、定位布局方式
通过设置html元素的position属性显示
七、浮动float
left：对象向左浮动，而后面的内容流向对象的右侧
right：对象向右浮动，而后面的内容流向对象的左侧
none：不浮动
清除浮动的意义：
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响
浮动的清理(clear)
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象
1、清除浮动的方法：
1、额外标签法：
这种方法应该说是最简单的一种了，w3c建议在容器的末尾增加一个“clear：both”的元素，强迫容器适应它的高度以便装下所有的float元素
<div id="main">
<div id="left">左盒子</div>
<div id=right">右盒子</div>
<div class="clear"></div>增加一个空div
</div>
<div id="footer">底部</div>
2、父元素使用overflow的方法：
*{margin:0;padding:0;}
#main,#footer{margin:0 auto;}
#main{width:800px;background:#ccc;overflow:hidden;zoom:1;position:relative;}
#left{width:200px;height:200px;background:blue;position:absolute;left:-100px;top:100px}
#right{width:300px;height:300px;background:green;float:right;}
#footer{width:800px;height:50px;background:red;}
八、定位
属性position描述设置对象的定位方式
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位
ps :
隐藏标题
text-indent：-9999em
用于大小写字母转换
Text-transform
vertical-align:sub----[设置文字为下标]
super----[设置文字为上标]
top----[把元素的顶端与行中最高元素的顶端对齐]
text-botton----[把元素的低端与行中最低元素的低端对齐]
控制大小写
text-transform:none----[正常大小]
capitalize----[每个单词的第一个字母转换成大写]
uppercase----[转换成大写]
lowercase----[转换成小写]
空白处理
white-space:normal-----[自动换行]
pre----[换行和空白受保护]
nowrap----[强制在同一行显示
九、圆角边框
1.边框
1.创建圆角边框——border-radius
2.向边框添加阴影——border-shadow
2.背景
1.规定背景图片的尺寸——background-size
3.过渡
我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
1028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
