CSS《精通CSS.DIV网页样式与布局》视频前5课总结：

地对地导弹

第一课：

使用CSS控制页面：

1，行内样式

<p style="color:#0000FF; font-size:20px; text-decoration:underline;">正文内容</p>

2，内嵌式

<style type="text/css">

p{

color:#0000FF;                        /*紫色*/

text-decoration:underline;      /*有下划线*/

font-weight:bold;                      /*粗体*/

font-size:25px;                           /*字体大小*/

}

</style>

<body>

<p>紫色、粗体、下划线、25px的效果1</p>

<p>紫色、粗体、下划线、25px的效果2</p>

<p>紫色、粗体、下划线、25px的效果2</p>

</body>

3，链接式
<link href="1.css" type="text/css" rel="stylesheet">

<body>

<h2>CSS标题1</h2>

<p>紫色、粗体、下划线、25px的效果1</p>

<h2>CSS标题2</h2>

<p>紫色、粗体、下划线、25px的效果2</p>

1.css文件:

H2{

color:#0000FF;

}

p{

color:#FF00FF;

text-decoration:underline;

font-weigth:bold;

font-size:20px;

}

</body>

(注：

rel：relationship的英文缩写.

REL属性用于定义连接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。

)

4，导入样式

<style type="text/css">

@import ur1(1.css);

</style>

第二课：CSS基本语法

CSS选择器：

分类：

1，标记选择器

<style>

h1{

color:red;

font-size:25px;

}

</style>

2，类别选择器
 

<style type="text/css">

.one{

color:red;           /*红色*/

font-size:18px;  /*文字大小*/

}

.two{

color:green;

font-size:20px;
    }

</style>

<body>

<p class="one">class选择器1</p>

<p class="two">class选择器2</p>

<h3 class="two">h3同样适用</p>

</body>

3，ID选择器

<style>

#one{

font-weigth:bold;      /*粗体*/

}

#two{

font-size:30px;           /*字体30px*/

}

</style>

<body>

<p id="one">ID选择器1</p>

<p id="two">ID选择器2</p>

</body>

(注：ID可以用在CSS中，也可以用在JavaScript中，当在JS中用ID对html进行寻找时，如果同一个ID用在两个标记中，将导致JS的语法混乱)

声明：

1，集体声明

<style type="text/css">

h1,h2,h3,h4,h5,p{

color:purple;      /*文字颜色*/

font-size:15px;  /*字体大小*/

}

h2.special, .special,#one{

text-decoration:underline;    /*下划线*/

}

</style>

<body>

<h1>集体声明h1</h1>

<h2 class="special">集体声明h2</h2>

<h3>集体声明h3</h3>

<h4>集体声明h4</h4>

<h5>集体声明h5</h5>

<p>集体声明p1</p1>

<p class="special">集体声明p2

<p id="one">集体声明p3</p>

</body>

2，选择器的嵌套

<style type="text/css">

p b{                      /*p标记中的b标记的样式*/

color:maroon;

text-decoration:underline;

}

</style>

<body>

<p>嵌套使<b>用CSS</b>标记的方法</p>

嵌套之外的<b>标记</b>不生效

<body>

显示效果：

CSS的继承

如果一个标记被包含在另一个标记中，则他会继承前一个标记的样式；

第三课：CSS文字效果

文字样式

字体：font-family

<style>

h2{

font-family:黑体,幼圆;

}

p{

font-family:Arial,Helvetion,sans-serif;

}

</style>

<body>

<h2>立春</h2>

<p>韩学敏，你好！</p>

</body>

(注：解释p{font=family:Arial,Helvetica,sans-
serif;}——浏览器对字体进行检测，如果有第一个字体Arial，则采用Arial，如果没有则检测是否有第二个字体Helvetica….如果这
些字体都没有，则采用浏览器默认字体)

文字大小：font-size

<style>

p.inch{font-size:0.5in;}

p.cm{font-size:0.5cm;}

p.mm{font-size:4mm;}

p.pt{font-size:12pt;}

p.pc{font-size:2pc;}

</style>

<body>

<p class="inch">文字大小，0.5in</p>

<p class="cm">文字大小，0.5cm</p>

<p class="mm">文字大小，4mm</p>

<p class="pt">文字大小，12pt</p>
<p class="pc">文字大小，2pc</p>

</body>

文字颜色：color

颜色的表示方法有很多中：

（1）RGB：红蓝绿

（2）16进制表示

（3）英文单词

<style>

h2{  color:rgb(0%,0%80%;)}

p{

color:#333333;

font-size:13px;

}

p span{ color:blue;}

</style>

<body>

<h2>冬至的由来</h2>

<p><span>冬至</span>过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说</p>

</body>

（注：<span>标记：在CSS定义中属于一个行内元素，在行内定义一个区域，也就是一行可以被<span>划分好几个区域，从而实现某种特定效果。<span>本身没有任何属性。

<div>在CSS定义中属于一个块级元素。<div>可以包含段落、标题、表格甚至其他部分。这使DIV便于建立不同集成德 类，如章节、 或备注。在页面效果上，使用<div>会自动换行，使用<span>就会保持同行）

文字粗细：font-weigth

(注：1，可以采用数字，也可以采用英文单词；

2，bold:粗体；lighter：正常；

)

文字斜体：font-style

(斜体：italic；正常：normal)

下划线、顶划线、删除线

(注：下划线：text-decoration:underline;

顶划线：text-decoration:overline;

删除线：text-decoration:line-through;

闪烁：text-decoration:blink;)

(注：IE浏览器不支持“闪烁”的效果，只有firefox支持)

英文字母大小写

(注：单词首字母大写：text-transform:capitalize;

全部大写：text-transform:uppercase;

全部小写：text-transform:lowercase; )

例子：模拟Google公司logo

<style>

p{

font-size:80px;

letter-spacing:-2px;       /*字母间距*/

font-family：Arial，Helvetica，sans-serif;

}

.g1,g2{ color:#184dc6;}

.o1,e{ color:#c61800;}

.o2{color:#efba00;}

.l{color:42c34a;}

</style>

<body>

<p><span class="g1">g</span><span class="o1">o</span><span class="o2">o</span>

<span class="g2">g</span><span class="l">l</span><span>e</span></p>

</body>

段落文字

段落间水平对齐方式:

text-align:left(左对齐)/right(右对齐)/center(居中对齐)/justify(两端对齐)

段落间垂直对齐方式：

vertical-align:top(顶端对齐)/bottom(底端对齐)/middle(中间对齐)

行间距、字间距：

line-height:1.5em;/*行间距，相对数值*/

line-height:8pt;        /* 行间距，绝对数值,行间距小于字体大小*/

letter-spacing:-2px;       /*字间距*/

首字放大：float：left;  /*首字下沉*/

第四课  CSS图片效果

图片样式

1，图片边框

(border-**)

<style>

img.test1{

border-style:dotted;  /*点画线*/

border-color:#FF9900;  /*边框颜色*/

border-weigth:5px;     /*边框粗细*/

}

img.test2{

border-style:dashed;    /*虚线*/

border-color:blue;

border-width:2px;

/*或者使用一句：border:dashed 2px blue;*/

}

</style>

<body>

<img src="banana.jpg" class="test1">

<img src="banana.jpg" class="test2">

</body>

(注：还可以对边框的上下左右分别设置：

img.test2{

border-left:dashed 2px blue;

border-right:dotted 5px red;

}

)

2,图片缩放

<style>

img.test1{

width:50%;                             /*相对宽度*/

}

</style>

<body>

<img src="pear.jpg" class="test1">

</body>

(，width:50%——相对宽度，宽度始终为浏览器的50%；

width:80px——绝对宽度，不会随着浏览器大小的变化而变化；

2，

如果宽度为绝对值，高度为相对值，则浏览器的宽高度发生变化时，宽度不变，高度随着浏览器的变化而变化，实现缩放

)

图片对齐

1，横向对齐：text-align:left/center/right;

2，纵向对齐:vertical-align:baseline/bottom/middle/sub/super/text-bottom/text-top/top;

横向对齐left、center、right的效果图：

图文混排

1，文字环绕

显示效果：

2，设置图片与文字的间距

第五课：CSS页面背景

第六课：CSS设置表格和表单样式

给出如下一个表格，分别设置表格的颜色、表格的边框

<body>

<table class="datalist">

<caption>年度收入 2004 - 2007</caption>

<tr>

<th></th>

<th scope="col">2004</th>

<th scope="col">2005</th>

<th scope="col">2006</th>

<th scope="col">2007</th>

</tr>

<tr>

<th scope="row">拨款</th>

<td>11,980</td>

<td>12,650</td>

<td>9,700</td>

<td>10,600</td>

</tr>

<tr>

<th scope="row">捐款</th>

<td>4,780</td>

<td>4,989</td>

<td>6,700</td>

<td>6,590</td>

</tr>

<tr>

<th scope="row">投资</th>

<td>8,000</td>

<td>8,100</td>

<td>8,760</td>

<td>8,490</td>

</tr>

<tr>

<th scope="row">募捐</th>

<td>3,200</td>

<td>3,120</td>

<td>3,700</td>

<td>4,210</td>

</tr>

<tr>

<th scope="row">销售</th>

<td>28,400</td>

<td>27,100</td>

<td>27,950</td>

<td>29,050</td>

</tr>

<tr>

<th scope="row">杂费</th>

<td>2,100</td>

<td>1,900</td>

<td>1,300</td>

<td>1,760</td>

</tr>

<tr>

<th scope="row">总计</th>

<td>58,460</td>

<td>57,859</td>

<td>58,110</td>

<td>60,700</td>

</tr>

</table>

</body>

显示效果：

1，表格颜色

显示效果：

2，表格边框：border

显示效果：

CSS前5课总结的更多相关文章

  1. 妙味课堂——HTML+CSS(第四课)(一)

    这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...

  2. [Codecademy] HTML&CSS 第三课：HTML Basic II

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  3. [Codecademy] HTML&CSS第八课：Design a Button for Your Webwite

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  4. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  5. 妙味课堂——HTML+CSS(第三课)

    常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...

  6. [Codecademy] HTML&CSS 第七课：CSS: An Overview

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  7. 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)

    在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...

  8. CSS前叙

    1 css是什么?层叠样式表,修饰网页结构2 如何去使用css?a.在html网页中,加入一个style标签,在这个style标签里面写css代码b.可以直接把style里面的代码放到一个单独的文件中 ...

  9. CSS(前)篇

    1.1CSS重点总结 1.1.1 选择器 1.1.2 盒子模型 1.1.3 浮动 1.1.4定位 1.2CSS介绍 概念: 层叠样式表或者级联样式表(Cascading Style Sheets) 层 ...

随机推荐

  1. 10.6 CCPC northeast

    1001 Minimum's Revenge 点的编号从 1 到 n ,u  v 的边权是 LCM(u,v) ,求这个图的最下生成树 搞成一颗以 1 为 根 的菊花树 ---------------- ...

  2. adapter用法

    Android之Adapter用法总结 1.概念 Adapter是连接后端数据和前端显示的适配器接口,是数据和UI(View)之间一个重要的纽带.在常见的View(ListView,GridView) ...

  3. HDU--杭电--1195--Open the Lock--深搜--都用双向广搜，弱爆了，看题了没？语文没过关吧？暴力深搜难道我会害羞？

    这个题我看了,都是推荐的神马双向广搜,难道这个深搜你们都木有发现?还是特意留个机会给我装逼? Open the Lock Time Limit: 2000/1000 MS (Java/Others)  ...

  4. React Native 使用问题记录

    1.<View></View>之间有空格会报错 Trying to add unknown view tag 2.一些js语法糖注意点http://facebook.githu ...

  5. HDU 2669

    题目大意: 已知线性方程ax+by=1; 输入a, b的值, 要求输出整数解x, y的值(输出x, y的最小整数解), 若没有解, 输出"sorry".   分析: 求线性方程的解 ...

  6. android中添加背景音乐

    方法一:这是使用java中的多线程,另外new出一个类,用类来启动音乐. 这个方法,就像当初写java的小游戏一样,不过是在电脑上运行的,可以控制每一个动作,比如你的触碰动作,但是,在我这个游戏中,我 ...

  7. 浅谈c语言结构体

    对于很多非计算机专业来说,c语言课程基本上指针都不怎么讲,更别说后面的结构体了.这造成很多学生对结构体的不熟悉.这里我就浅谈一下我对结构体的认识. 结构体,就是我们自己定义出一种新的类型,定义好之后, ...

  8. logsatsh input 插件之 collectd

    logsatsh input 插件之 collectd 标签(空格分隔): logstash 作用:用于监控内存,cpu,磁盘I等信息 未完待续,时间未定. 参考: logstash 官网 elast ...

  9. html5/css学习笔记

    请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...

  10. 还有一个月，或者不到一个月就要期末了，复习ing

    首先,线性代数,课程设计,php  ,数据库,操作系统,还有概率论 ,四级