css部分总结

10.19HTML总结

1.<!DOCTYPE HTML>声明：告知浏览器文档使用哪种HTML或者XHTML规范，该标签可声明三种DTD（文档类型定义）类型：严格版本、过渡版本以及基于框架的HTML文档。

2. 段落标签：p标签

语法规则： p> align="">.../p>(align表示对其方式）

3.水平线标签：hr标签语法规则同段落标签

4.图像标签：image

语法规则：>image src="data:image/css作业3.html" width="14px" border="1px" title="我是图像" align="center"> /image>

5.表格标签

（1）table>属性：

Border 用来设定表格边框粗细。若省略，则无边框默认为0。
borderColor 设定表格边框的颜色
borderColorLight 设定表格边框颜色的亮色（现在不用了）
borderColorDark 设定表格边框颜色的暗色(现在不用了)
width和height 用来设定表格宽度和高度，可取绝对值或相对值。
Cellspacing 用来设定单元格之间的间隙。
Cellpadding 用来设定单元格格内部空白。
Bgcolor 设置表格的背景颜色
Background 设置表格的背景图像
Align 设置表格的对齐方式：center,left和right
Frame 设定显示那些表格的边框，值有above、below、border、box、hsides、lhs、rhs、void、visdes
Rules 设定显示那些内部边框，值有all 、rows 、cols、groups、none

（2）tr>设置表格中某一行

Align设置单元格中内容的水平对齐(center、left、right、justify)
Valign设置一整行单元格内容的垂直对齐(top、middle、bottom、baseline)vertical
Bgcolor
Background
Width和height
Bordercolor bordercolorlight bordercolordark

（3） td>设置表格的单元格

具有TR标记的属性
rowspan属性可实现单元格的跨行合并（纵向合并）。属性值为整数n，表格跨几行合并。
colspan属性可以进行单元格的跨列合并（横向合并）。属性值同上所有行属性都适用。

示例代码如下：

<table  border="1px" bgcolor="#7fffd4" cellspacing="15px" cellpadding="10px" align="center"><!--对表格中的背景颜色、格间距，格内空白进行设置-->
    <tr>
        <td colspan="2" align="center" >12</td><!--对单元格进行跨列合并-->
        <td>34</td>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="red">78</td><!--对单元格进行跨行合并-->
        <td>910</td>
        <td>1011</td>
    </tr>
    <tr>
        <td>1213</td>
        <td>1415</td>
    </tr>
</table>

<hr align="left" size="5px" width="100%" color="blue"><!--/插入一条横线/-->

<table  border="1px" bgcolor="#7fffd4"  cellpadding="10px" align="center">
    <thead align="center">
    <tr >
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>

    <tbody>
    <tr align="center" bgcolor="red">
        <td bgcolor="gray" style="color: yellow">袁辉</td> <!--/设置单元格背景颜色与字体颜色/-->
        <td>男</td>
        <td>24</td>
    </tr>
    <tr align="center">
        <td style="color:red ">元会</td>
        <td>女</td>
        <td>23</td>
    </tr>
    <tr align="center">
        <td>袁慧</td>
        <td>女</td>
        <td>22</td>
    </tr>

    </tbody>
</table>

6.表单类标签：form

form把来自用户的信息提交给服务器，是网络管理员与浏览者之间的桥梁，由两部分组成：

（1）描述表单的HTML源代码；

（2）处理用户表单中输入信息的服务器客户端应用程序，客户端脚本，如JS、ASP、PHP、JSP等。

语法规则

<input type="表达单项" name=“表达单项名” value="属性值"/>(还可加入其它样式属性)

注 disable：不可使用；；readonly：只读；；maxlength：最大长度

<selecte multiple size="数字"></select>（multiple：可多选；；size：候选个数）

<option value="例如">例如/option>（option与select搭配使用，其中value表示被选中并提交后，浏览器传输给服务器的数据）示例代码如下：：

<form name="登录" action="13.html" method="get" >
    <label>登录名称：</label><input type="text" name="usrer" disabled ><br/>
    <label>登录密码：</label><input type="password" name="psd" maxlength="6"><br/>
    <label>性&nbsp;&nbsp;别:</label>
    <input type="radio" name="gender" value="male">男</input>
    <input type="radio" name="gender" value="female">女</input><br/>
    <label>户籍所在地：
        <select name="fujisuozaidi" id="fujisuozaidi" multiple size="2"><!--对候选项项数进行设置，multiple为多选属性，size为选框显示的个数-->
            <option value="chengdu">成都</option>
            <option value="nanchong">南充</option>
            <option value="dazhou" selected="selected">达州</option><!--为什么默认选项没有达州？？？？-->
            <option value="mianyang">绵阳</option>
            <option value="zigong" >自贡</option>
            <option value="neijiang">内江</option>
        </select>
    </label><br/>
    <input type="submit" name="button" value="登录"/>
    <input type="reset" name="button" value="重置"/>
</form>

7多文本框标签：textarea

语法规则

<textarea rows="" cols="" wrap="soft/hard/off"></text>(文档换行属性)>，示例代码：：

<textarea style="border: double red " name="评论"  cols="50" rows="10" wrap="soft"></textarea>

8.跑马灯标签

marquee behavior="" direction="">...../marquee>

Behavior设置文字滚动的方式

scroll 循环滚动（默认值
slide 滚动一次停止
Alternate 来回交替滚动

direction设置文字的滚动方向

left 由右向左滚动（默认值）
right 有左向右滚动
up 由下向上滚动
down 由上向下滚动

示例代码如下：：

<marquee behavior="scroll" direction="up" bgcolor="pink">袁辉</marquee><!--插入滚动内容所用的标记；behavior属性显示滚动方式，direction为滚动方向-->
<marquee behavior="slide" direction="right" bgcolor="green">袁辉</marquee>
<marquee behavior="alternate" direction="right" bgcolor="yellow">袁辉</marquee>

补充

（1）快速建立3行3列表格：table>tr3>td3，再按tab键。

（2）语义化标签：header、nav、article、section、footer以及aside

10.20总结

web文档的结构由html元素定义，而html元素如何显示，则由层叠样式CSS（cascading style sheets）定义，主要用于网页外观、图像定义以及颜色的使用，解决内容与变现分离的问题，方便对网页的维护。

2.div中同时对某一标签进行多重定义时，后面的CSS样式将覆盖前面的CSS样式。例如：对label标签使用同时使用两个CSS样式style：color red以及style：color blue进行定义，后面的样式blue将覆盖样式red。

3.多个样式定义同一个元素时，样式优先级顺序（从上到下依次递减）：

（1）内联样式（在html元素内部，即<p style="color":red>）

（2）内部样式表（位于标签中，即 )

（3）外部样式表（CSS文件）

（4）浏览器缺省值

3.CSS语法规则：CSS由选择器与一个或者多个声明组成，其中选择器为html中的标签；；声明由属性和属性值组成，如h1{color：red；font-size：15px}。

注：（1）声明之间由分号分隔；；（2）若属性值为若干单词时，则要给属性值+双引号。.

4.选择器分组：对多个选择器的声明进行相同设置，每个选择器之间用“，”分开；；若是*{}则是对所有内容进行同一的设置。

5.派生选择器：根据文档的上下文关系来确定某个标签的样式，，即有一个块级元素div class="meue">ul>li>a （1）先对div中的meue定义：div.meue ul{}；（2）其次对li定义：div.meue ul li{}；（3）再对a定义：div.meue ul li a{}；

6.id选择器：对标有特定id的元素制定特定的样式，使用# 定义；；一个文档中可以有多个id，但id属性只能有一个。

（1）#paragraph：对id=paragraph的元素指定样式；

（2）div#paragraph：对div中id=paragraph的元素指定样式。

7.类选择器：对拥有同个类"class"的元素指定样式；；使用 .定义。

（1）.center：对class="center"的元素指定样式；

（2）.fancy td：对class="fancy"中的td元素指定样式（类选择的派生选择器；；；也可以基于类而被选择：：td.fancy）。

8.属性选择器：对指定属性的元素指定样式；；使用[ ]定义。

（1）[title] 对文档中属性为title的所有元素指定样式；

（2）[title=yuanhui]：对文档中属性为title，值为yuanhui的所有元素指定样式；

（3）[title~=hello]：对title中含有hello的所有元素设置样式；；适用于由空格分隔的属性值；

（4）[lang|=en]：对带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值。没怎么明白

示例代码如下：

   <style>
        h1{
            font-size: 12px;
            color: blue/*对h1中的文本的颜色、字体大小进行设置，也可以在body中的h1 中进行style的设置——内部样式表*/
        }
        p strong{/*派生选择器：根据元素在器位置的上下文关系来定义*/
            font-size: 10em;
            color: green;
            font-style: italic;
            font-family: sans-serif;/*如果值为多个单词组成，则要给值加引号*/

        }
        #firstId{ /*ID选择器*/
            color: #4e667d;
        }
        div#first1{
            color: blue;
        }
        div#first2{/*div  id选择器*/
            color: green;
        }
        .center{/*类选择器*/
            text-align: right;
        }
    </style>

</head>
<body>

<h1 style="color: red;font-size:30px" >介绍css语法结构</h1><!--对h1中文本的颜色，字体大小进行设置也可在style中进行设置——内联样式-->

<h1 id="firstId">ID选择器测试</h1><!--ID选择器-->
<p><strong>派生选择器介绍</strong></p>

<div style="border:2px double"><br/>
<div id="first1" style="border:1px solid pink ">袁辉</div><!--div  id选择器-->
    <br/>
    <div id="first2" style="border:1px solid deeppink ">袁慧</div>
    <br/>
</div>

<p class="center">类选择器p元素</p> <!--类选择器应用-->
<h2 class="center">类选择器H2元素</h2>
</body>

10.21 css样式总结

一、css样式

1.css背景

（1）背景颜色：background-color，不能继承，默认值是transparent（透明）；

（2）背景图像：background-image，默认值是none（没有图像），设置背景图像，需给属性设置一个URL值，例如：body{background-image：URL（） }

（3）背景重复：background-repeat

repeat：导致图像在水平垂直方向上都平铺

repeat-x/repeat-y：分别导致图像只在水平或垂直方向上重复

no-repeat：则不允许图像在任何方向上平铺。

inherit：规定从父元素继承background-repeat属性值

（4）背景定位：background-position，可以使用关键字（top、right、bottom、left以及center）、长度值、百分数值。

关键字:可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向，例如：top right==right top。如果只出现一个关键字，则认为另一个关键字是 center。

百分数值：百分数注同时应用于元素和图像，也就是说，图像中描述为50% 50%的点（中心点）与元素中描述为50% 50%的点（中心点）对齐。 如果只有一个百分值，这个值将作用于水平方向，垂直值将假设为50%

长度值：元素内边距区左上角的偏移。偏移点是图像的左上角。比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

（5）背景关联：background-attachment,如果文档较长，当文档向下滚动时，背景图像也会随之滚动，可以使用关联防止滚动，属性值有：

scroll默认值：背景图像会随着页面其余部分的滚动而移动。

fixed：当页面的其余部分滚动时，背景图像不会移动。

inherit：规定应该从父元素继承 background-attachment 属性的设置。

2.css文本属性 color 设置文本颜色

direction 设置文本方向，值：ltr/rtl（从左往右/从右往左）

line-height 设置行高。

letter-spacing 设置字符间距。

text-align 对齐元素中的文本（left、right、center、justify—两端对齐文本）。

text-decoration 向文本添加修饰：

none 默认。定义标准的文本。

underline 定义文本下的一条线。

overline 定义文本上的一条线。

line-through 定义穿过文本下的一条线。

blink 定义闪烁的文本。

inherit 规定应该从父元素继承 text-decoration 属性的值。

text-indent 缩进元素中文本的首行，text-indent：2em（首行缩进2字符）。

text-shadow 设置文本阴影，text-shadow：5px 5px 5px red：右下阴影效果分别为5px，阴影颜色为red。

text-transform 控制元素中的字：

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义无大写字母，仅有小写字母。

white-space 设置元素中空白的处理方式。

word-spacing 设置字间距。

3.css列表

（1）list-style-type：列表样式类型

（2）list-style-image:url() ::列表图片

（3）list-style-position：inside/outside：以上三个可以合并成一个属性：list-style

li{list-style：URL（） square inside}

折叠边框：border-collapse，将边框折叠为单一边框。

表格文本对齐： text-align文本水平对齐，，vertical-align文本垂直对齐。

4.伪类根据元素的特殊状态来选取元素，使元素在特殊状态下显示出特殊效果，例如div#one ul li a：hover{background-color：red}，有一下类型：

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。

5.伪元素：是对元素中的特定内容进行操作，目的是选取元素内容中的第一个字母、第一行、选取元素内容前面或者后面无法完成的操作。

:first-letter 向文本的第一个字母添加特殊样式。

:first-line 向文本的首行添加特殊样式。

:before 在元素之前添加内容。

:after 在元素之后添加内容。

6.权重权重类有：style、id、属性类和伪类、元素和伪元素，其优先级依次递减，复合优先级计算，各个有先集初始值均为0，有则加1（可以累加），比较数值大小，当同一个选择器有两个属性值比较时，第一个数值一个为1，另一个为0，则1的优先级高。在css中通配符*{}的优先级最低；；；！important的优先级最高。

示例代码如下：：

 <style type="text/css">
        body{

            background-image: url("茶杯_03.gif");
            background-attachment: scroll;/*背景图片是否滚动或者随着页面的其余部分滚动*/
            background-repeat: no-repeat;/*背景平铺，默认为repeat,还有repeat-X；；repeat-Y*/
            background-position: 50%; /*;背景图片位置，还可以对x，y轴的位置进行设置，在position后分别加-x，-y*/
            /*background-size:100%;*//*背景图片大小*/
            background-color: red;/*背景颜色*/
        }

            #center{
                text-align: center;
                border: 1px solid red;
            }

        .word{
            word-spacing: 50px;*//*对字/单词进行间距设置，字/单词之间必须有空格*//*
        }
*/
        h2:after/*冒号前后不能有空格*/
        {
            content:"！！！！我不是伪元素"
        }

        h2:first-letter/*冒号前后不能有空格*/
        {
            font-size: 60px;
        }

        a:link{color:red}/*第一次访问之后，link效果缓存在浏览器中，将浏览器缓存清空就可正常显示*/
        a:visited{color:orangered}
        a:hover{color:deeppink}
        a:active{color:darkblue}

    </style>
</head>
<body>
<img src="茶杯_03.gif" />
<div id=<"center">
    <label>这是一条神奇的天路</label>
    <p class="word">这是 一 条           神 奇 的 天 路</p>
    <p class="word">my name is yuanhui</p>

</div>

<hr size="10px" width="100%" color="pink"/>

<h2>伪元素测试</h2>
<h3 class="one two"><label></label>我是一个杯子</h3>

<a href="#" style="font-size: 50px">百度</a>

</body>

10.22 css3总结

1.css3边框：

（1）圆角边框：border-radius，可以使用length/%定义圆角的形状；

（2）边框阴影：border-shadow，div{box-shadow: 10px 10px 5px #888888;}，分别表示阴影向右、下偏移10px，阴影模糊效果为5px，阴影颜色为#888888；

（3）边框图片：border-image，，border-image:url(../i/border.png) 30 30 round; round（图片环绕），stretch（图片拉伸）。

2.2D转换 transform：方法

2D Transform 方法

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。

translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n) 定义 2D 转换，沿着 X 轴移动元素。

translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度（x/y为数值，表示转换为原有尺度的x/y倍）。

scaleX(n) 定义 2D 缩放转换，改变元素的宽度。

scaleY(n) 定义 2D 缩放转换，改变元素的高度。

rotate(angle) 定义 2D 旋转，在参数中规定角度（单位：deg）

skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。

skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3.css3过渡transition

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 定义过渡效果花费的时间。默认是 0。

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

（1）linear：规定以相同速度开始至结束的过渡效果

（2）ease 规定慢速开始，然后变快，然后慢速结束的过渡效果

（3）ease-in 规定以慢速开始的过渡效果

（4）ease-out 规定以慢速结束的过渡效果

（5）ease-in-out 规定以慢速开始和结束的过渡效果

transition-delay 规定过渡效果何时开始。默认是 0。

例如：

div { width:100px; height:100px; background:blue; transition-property:width; transition-duration:5s； transition-timing-function：ease-in-out： transition-delay：2s}

div：hover {width:300px;}

4.css3动画animation（参照过渡）：通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：（1）规定动画的名称；；（2）规定动画的时长

@keyframes 规定动画。

animation-iteration-count 规定动画被播放的次数，默认是1，infinite无限循环。

animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"，alterna偶数向前，奇数向后。

注释为了保证一些浏览器的兼容，需对浏览器的姜蓉进行设置：

-moz-：火狐

-o-：Opera 浏览器

-webkit-：Chrome 和 Safari

-ms-：IE浏览器

示例代码：：

<style>
        div#border-radius{
            width: 300px;
            height: 100px;
            border:1px solid red;
            background: chartreuse;
            -moz-border-radius: 90px;/*浏览器兼容  火狐老版本*/
            -webkit-border-radius: 90px;/*Safari兼容*/
            border-radius: 90px;
        }
        div#box-shadow{
            width: 300px;
            height: 100px;
            margin: 10px;
            background-color: #3671a5;
            box-shadow: 10px 10px 5px red;/*依次表示右、下、模糊度以及模糊颜色*/
        }
        div.setborder{
            边框
            宽度
            内边局
        }
        div#borderimage-round{
            -moz-border-image: 图片地址 30 30 round;
        }
        div#borderimage-stretch{
            -moz-border-image: 图片地址 30 30 round;
        }
        div#backgroungsize{
            高度
            宽度
            边框
            background-image：URL  norepeat
            background-size:100px 60px;(长、宽)
        }
        #text{
            text-shadow: 10px 20px 1px skyblue;
        }
        @font-face{
            font-family: firstfont;
            src: url();
        }
        #fontfamily{
            font-family: firstfont;
        }
        #action{
            width: 100px;
            height: 100px;
            background-color:red;
            transition: width 5s,height 8s;
            text-align: center;
            background-position: right;
            transform: scale(2,4);
        }
       /* #过渡:hover{
            width: 150px;
            height: 200px;
            transform: rotate(0deg) skew(60deg,2deg) scale(2,1) translate(50px,20px);*/
        /*}*/
        #action{
            margin: 100px auto;
            width: 10px;
            height: 10px;
            background-color: red;
            background-position: center;
            animation: first 1s;
            border-radius: 100%;
            animation-iteration-count: infinite;
            animation-duration: 1s;
            animation-play-state: running;
            /*animation-timing-function: linear;*/

        }

        @keyframes first {
           /* 0%{font-style:italic;">            25%{background-color:mediumvioletred;}
            50%{font-style:italic;">            75%{background-color: green}
            100%{font-style:italic;">            0%{
            /*opacity: 100;*/
            transform:scale(0,0)}
            100%{
                /*font-style:italic;">                opacity:0;
                transform:scale(20,20)}

        }
        @-moz-keyframes first {
             0%{background-color:red opacity: 100; transform:scale(0,0)}
             100%{background-color:red opacity:0; transform:scale(20,20)}

         }

    </style>
</head>
<body>
<div id="border-radius"> </div>
<div id="box-shadow"></div>
<div class="setborder" id="borderimage-round"></div>
<div class="setborder" id="borderimage-stretch"></div>
<div id="backgroungsize"></div>
<p id="text">文本阴影效果</p>
<p id="fontfamily">这是css3字体测试</p>
<div id="weiyi"></div>

<div id="过渡">过渡的div</div>
<br/>
<div id="action"></div>
</body>

10.23 css框模型

1.css内边距：padding元素内容与边框之间的距离，接受长度值、百分比值，但不允许使用负值，，可以使用上、右、下、左的顺序设置个边的内边距，单边内边距padding-top/right/bottom/left。

当使用百分比值设置内边距是，百分数值是相对于其父元素的width计算的，父元素的width改变，它们也会改变，例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

2.css边框：border-style

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线

border-*-width/color/style：边框（单边）宽度/颜色/样式

3.css外边距：margin 围绕在元素边框的空白区域是外边距，接受任何长度单位、百分数值甚至负值。

margin-bottom 设置元素的下外边距。

margin-left 设置元素的左外边距。

margin-right 设置元素的右外边距。

margin-top 设置元素的上外边距。

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

4.css定位

示例代码如下：

<style>
        /* div{
             width: 160px;
             height: 160px;
             border: 3px solid green;
             padding: 0px;
         }*/

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top: 100px;
            /*border: 1px solid blue;*/
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-left: 100px;
            margin-top: -90px;/*更改位置，为什么是红色的移动*/
            /*border: 1px solid red;*/
            position: relative;
        }

        #box3 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: -100px;
            /*border: 1px solid skyblue;*/
        }
    </style>
</head>
<body>
<div></div>

<hr/>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

</body>