CSS及效果实现
CSS（Cascading Style Sheet）层叠样式表，是一种用来表现文件样式的计算机语言。
1.CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式。
3.CSS拥有对网页对象和模型样式编辑的能力。
4.在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。
web标准 ：
结构层：HTML （用于描述网页的展示结构）
表现层：CSS （用于修饰装饰网页的美观度）
行为层：JavaScript (用于完成页面的组件）
CSS特点
1.继承：
网页中的子元素，将继承父元素的样式
2叠层
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式（后面定义的样式会覆盖前面定义的样式）
1.css书写格式（四种引入方式）
- 内嵌式引入
把style标签嵌套在head标签中
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"></style>
</head>
- 行内样式
<b style="">1111</b>
- 外链样式
把css当作一个文件，通过link标签引入到html中
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="***.css">
</head>
- 嵌入样式
内嵌和外链一种综合性的使用，不太常用，了解
<style type="text/css">
@import url();
</style>
四种引入方式优先级：取决于哪种样式离修饰目标近（行内样式>剩余三种样式）
2.选择符（第一类）
- 标签选择符：通过标签的名字来命名的
p{
text-align: center;
}
对html中所有该标签都起作用
- id选择器：当标签中出现id属性，可以使用该选择器
通常应用于某些标签中独有的样式
id选择器的标识：#
#head{
text-align: center;
}
- 类选择器：当标识中出现class属性的时候，使用该选择器
通常应用于某几个标签具有相同的样式
类选择器的标识：.
.head{
text-align: center;
}
- 全选择器：使用*号来表示，对整个html中所有标签都起作用
*{
font-weight: bold;
}
3.选择符（第二类）
- 包含选择符：嵌套，中间用空格间隔
包含选择符的标识：空格
#head p{
font-weight: bold;
}
- 分组选择符：多个选择符同时具备同一种样式
标识：，
#head,p,h1{
font-weight: bold;
}
- 标签指定式选择符：中间不存在任何符号
h1#head{
font-weight: bold;
}
组合选择符：把前面七种选择符综合起来使用
4.伪类
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
text-decoration:none;
CSS属性、盒子模型、块状内联元素
1.盒子模型
内边距 padding （ 用于填充内容内部）
外边距 margin (用于描述浏览器边缘到内容的距离）
边框 border :1px solid black(1像素 实线 黑色）
margin:100px; (上下左右都是100px距离）
margin：100px 200px;(上下100px，左右200px）
margin：100px 200px 300px;（上100px,左右200px，下300px)
margin:100px 200px 300px 400px;（上，右，下，左）
margin-top,margin-bottom,margin-left,margin-right 也适用于设定四个方向的值
2.块状元素和内联元素
1.块状元素：具有宽度和高度的属性，但不能与其他元素同行显示
代表标签：div p 等
默认属性：display:block;
2.内联元素：不具有高度和宽度的属性，允许其他元素与其同行
代表标签：a span
默认属性：display:inline;
两者可以转换
display:none; 可以隐藏元素
3.css部分属性
1.控制字体
font (简写属性。作用是把所有针对字体的属性设置在一个声明中。)
font-family (设置字体系列。)
font-size (设置字体的尺寸。)
font-size-adjust (当首选字体不可用时，对替换字体进行智能缩放。)
font-stretch (对字体进行水平拉伸。)
font-style (设置字体风格。)
font-variant (以小型大写字体或者正常字体显示文本。)
font-weight (设置字体的粗细。)
单位：px，cm,建议经常使用百分比，适合做屏幕适配
2.控制文本
color （设置文本颜色）
direction （设置文本方向）
line-height （设置行高）
letter-spacing （设置字符间距）
text-align （对齐元素中的文本）
text-decoration （向文本添加修饰）
text-indent （缩进元素中文本的首行）
text-shadow （设置文本阴影）
text-transform （控制元素中的字母）
unicode-bidi （设置文本方向）
white-space （设置元素中空白的处理方式）
word-spacing （设置字间距）
3.控制背景
background （简写属性，作用是将背景属性设置在一个声明中）
background-attachment （背景图像是否固定或者随着页面的其余部分滚动）
background-color （设置元素的背景颜色）
background-image （把图像设置为背景）
background-position （设置背景图像的起始位置）
background-repeat （设置背景图像是否及如何重复）
4.布局
1.浮动布局 float
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
none:不浮动；
left：对象向左浮动，后面的内容流向对象的右侧（前面的元素浮动起来后会对后面的元素产生影响）
right：对象向右浮动，后面的内容流向对象的左侧
清除浮动：clear
none:允许两边都有浮动对象
left:不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许两侧有浮动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#a{
margin: 0 auto;
height: 100px;
width: 900px;
background-color: blue;
}
#c{
height: 100px;
width: 900px;
margin: 0 auto;
background-color: green;
clear: both;
}
#b1{
background-color: red;
width: 300px;
height: 600px;
float: left;
}
#b2{
background-color: pink;
width: 300px;
height: 600px;
float: right;
}
#b3{
background-color: black;
width: 300px;
height: 600px;
float: left;
}
#b{
width: 900px;
height: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="a">头</div>
<div id="b">
<div id="b1">左</div>
<div id="b2">中</div>
<div id="b3">右</div>
</div>
<div id="c">底部</div>
</body>
</html>
2.定位布局
属性：positon
描述：设置对象的定位方式
static：静态定位
页面中每个对象的定位值
relative：相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：绝对定位
对象从文档流分离出来，通过设置left、right、top、bottom、四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
5.overflow
visible (默认值。内容不会被修剪，会呈现在元素框之外)
hidden (内容会被修剪，并且其余内容是不可见的)
scroll (内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容)
auto (如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容)
三种隐藏元素的方法：
1.display:none
2.width:0 height0
3.overflow:hidden
CSS3
1.边框
border-radius：圆角边框
通常使用单位：像素、百分比，em
可以通过方向来定位
<style type="text/css">
div{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>This is some text. This is some text. This is some text.</div>
阴影效果：box-shadow
<style type="text/css">
div{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
margin: 0 auto;
box-shadow: 10px 10px 5px #666666;
}
</style>
</head>
<body>
<div>This is some text. This is some text. This is some text.</div>
2.文本效果
font-weight:bold;(加粗）
text-shadow(文本阴影,用法与box-shadow类似）
word-wrap:break-word(自动换行）
3.2D动画效果
主要通过transform属性来进行使用
- 平移：translate（）方法
通过X轴和Y轴表示的屏幕横向的坐标位置和屏幕纵向的坐标位置div:hover{ box-shadow: 10px 10px 5px #666666; transform: translate(500px,0px); } - 旋转：rotate()方法
rotate(30deg)里面的参数描述的是角度，deg是角度单位，表示旋转（顺时针）
div:hover{
box-shadow: 10px 10px 5px #666666;
transform:rotate(30deg);
}
- 缩放：scale（）方法
scale(2,2)第一个表示宽度的2倍，第二个表示高度的2倍
div:hover{
box-shadow: 10px 10px 5px #666666;
transform:scale(2,2);
}
- 翻转：skew()方法
（）里第一个参数表示X轴的角度
第二个参数表示Y轴的角度
5.过渡：transiction
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
6.动画
@keyframes 规则 用于声明动画的效果
fome------to
0%-100%
自定义名称
7.透明度
opacity:o.8:
从0到11表示越来越不透明 0表示完全透明
2790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
