CSS:Cascding Style Sheet 层叠样式表
1.作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
我们学习了CSS以后 尽量不使用 HTML标签自带的属性 全部用CSS 去设置
层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效
2.CSS 跟HTML 配合使用的方式
方式1:内联样式: 将CSS 代码写在标签上 所有的标签都会有一个 style属性，我们的CSS代码 就可以写在 style 属性里面，但内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用.
每个CSS样式 写法 属性名:属性值;属性名2:属性值2;属性3:属性值3 举例:
<font style="color:#ff66ff;font-size:20px">这段文字的样式</font>方式2.内部方式:将style属性写在<head>标签内部 常用
方式 3.外联样式:CSS样式写在一个单独文件中 这种方式常用
<!--HTML头部使用CSS-->
<html>
<head>
<title> New Document </title>
<!--style 说明所要使用的标记 -->
<!-- type="text/css" 说明这是一段css代码-->
<style type="text/css">
h3{color:black;font-size:35px;font-family:黑体 }
p{background:yellow;color:red;font-family:宋体}
</style>
</head>
<body>
<h3>在html文件的头部使用css</h3>
<hr>
<p>在html文件头部应用css(层叠样式表)</p>
</body>
</html><!--html内部使用CSS 基本语法：<html标记 style="样式的属性1:样式的属性1;样式的属性2:样式的属性2;......">-->
<html>
<head>
<title> New Document </title>
</head>
<body>
<h1 style="color:red;font-size:50px;font-family:黑体">标签内部使用css</h1>
<hr>
<p style="background:cyan;color:red;font-family:宋体">在html标记的内部使用css</p>
</body>
</html>
使用外部CSS文件基本语法：
<head> <link rel="stylesheet" type="text/css" href="css样式表文件的存放位置"> </head>
其中：rel="stylesheet" 是指在html文件中使用的是外部样式表文件
type="text/css" 指明该文件的类型是样式表文件
href="css样式表文件的存放位置" 样式表文件的地址（绝对路径或相对路径）
<!--过程分两步 第一 编写外部css文件（后缀名【.css】）-->
h3{color:red; font-size:35px;font-family:黑体}
p{ background:yellow; color:red;font-family:宋体}
<!--第二 步 <link rel="stylesheet" type="text/css" href="css样式表文件的存放位置"> -->
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<h3>使用外部css</h3>
<hr>
<p>在html文件使用外部css(层叠样式表)</p>
</body>
</html>1.font-family------设置字体
<html>
<head>
<title> New Document </title>
<style type="text/css">
h2{ font-family:黑体 }
p{ font-family:隶书,楷书,"Conrier New" }
</style>
</head>
<body>
<h2>设置字体</h2>
<hr>
<p>使用css来设置字体</p>
</body>
</html>2.font-size:绝对尺寸/关键字/相对尺寸/百分比
关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
<html>
<head>
<title> New Document </title>
<style>
#p1{ font-size:30px}
#p2{ font-size:0.1cm}
#p3{ font-size:0.5mm}
.p1{ font-size:large}
.p2{font-size:small}
.p3{font-size:xx-small}
</style>
</head>3.font-style 设置字体的样式（设置字体是否为斜体字）
normal----正常显示字体 italic---斜体字 oblique--歪斜体（倾斜角度大一点）
font-weight 设置字体的加粗 取值： normal ---- 正常显示 bold ----粗体（数字700粗细值） bolder ---加粗 lighter ---细体（比正常字体稍微细一点） number ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
4.text-shadow设置字体的阴影
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色： text-shadow: 5px 5px 5px #FF0000;
5.font-variant 设置字体的变体 设置字体是否显示为小型的大写字母 主要用于设置英文字体
normal --正常字体 small-caps 表示英文字母显示为小型的大写字母
6.设置字体颜色
color 关键字 英文单词来设置颜色“red” 红色 RGB值 颜色码
背景设置和边框设置：
设置背景颜色 background-color
设置背景图片 background-image
背景附件的设置 ：background-attachment 是指设置背景图片是否随着滚动条的移动而移动
scroll ---表示背景图片随着滚动条的移动而移动
fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
设置背景图片的重复： background-repeat 设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
repeat 背景图片在水平和垂直方向平铺
repeat-x 背景图片在水平方向平铺
repeat-y 背景图片在垂直方向平铺 no-repeat 背景图片不平铺、
背景图片的位置设置：background-position
| 关键字 | 百分比 | 位置说明 |
| top left | 0% 0% | 左上位置 |
| top center | 50% 0% | 靠上居中 |
| top right | 100% 0% | 右上位置 |
| left center | 0% 50% | 靠左居中 |
| center center | 50% 50% | 正中位置 |
| right center | 100% 50% | 靠右居中 |
| bottom left | 0% 100% | 左下位置 |
| bottom center | 50% 100% | 靠下居中 |
| bottom right | 100% 100% | 右下位置 |
Style里面的常见属性：
div中css的部分属性（部分属性必须使用支持HTML5的浏览器）
position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
top:80px;//距顶部距离
left:35px;//距左距离
width:20px//宽度
height:20px//高度
font-family:楷体;
font-size:14pt;
color:blue; //层里面的字体颜色
overflow:scroll/visible/hidden/auto //超出内容是否包裹
float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列
clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行，给两个控件中间夹一个空层设置style="clear:both;"
background: #99FFcc;//层的背景颜色
background-image:url('top.jpg');为层设置背景图片
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素
border:2px solid #f98510;//边框的宽度和样式以及颜色
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
position:absolute(绝对)/relative(相对);//属性规定元素的定位类型。
transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移
border-radius:20px;//边框圆角
border-image:url(border.png) 30 30 round;//边框图片 大小模式
box-shadow: 10px 10px 5px #888888;//添加阴影
//轮廓
outline:#00ff00 dotted thick;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(''),default;
//不同浏览器之间相互适配不同写法
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
