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 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。