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. 简化通过classname查找 方法

    function getClass(oParent,sclass){ var aEle=oParent.getElementsByTagName('*'); var result=[]; for(va ...

  2. 多线程完成socket

    //服务器端代码 public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSo ...

  3. 四核exynos4412开发板使用网线上网注意事项

    问:RP4412开发板板子可以插网线上网? 答:可以.支持WIFI.LAN.3/4G上网的.插网线没? 问:我插了,他还是提示让我连wifi. 答:你是上网页还是其他的APP. 网页可以直接打开,有部 ...

  4. SELECT INTO 和 INSERT INTO区别

    (1).SELECT * INTO 新表名 FROM 旧表名 (2).INSERT INTO 新表名(列名1,列名2) SELECT * FROM 旧表名 第一句新表名不存在会自动创建, 第二句需创建 ...

  5. CSipSimple配置系统

    称作配置系统未免太大了一点,不过它的配置管理这一块确实有加以设计,一方面以增加灵活性,另一方面以支持第三方扩展.通过分析源码,粗略画出如下的结构图: 一.类分析 SharedPreference 一切 ...

  6. 浅谈Extjs radiogroup change事件与items下的checked属性

    在使用Extjs制作crud时,由于添加和修改界面的高度相似,使用了相同的row字段. 在角色字段中使用了change监听事件,用于动态的无效化权限分配字段,因为权限分配界面默认没有隐藏,设定了che ...

  7. 解决小米wifi在windows10无法创建问题

    1.打开小米随身WIFI客户端安装文件夹(软件安装在那个盘,就在那个盘里找). 2.D:\Program Files (x86)\XiaoMi\MiWiFi\drivers\Win81x64(系统是3 ...

  8. 初学者的python学习笔记2

    本来想是先把作业二搞定的,结果发现作业二用的字典,一脸懵逼,还是先搞定第二课吧.其实第二课和第一课内容差不多,据说是第一课的老师去美国了……不管怎么样先整理一下吧. ----------------- ...

  9. Android事件分发机制（上）

    Android事件分发机制这个问题不止一个人问过我,每次我的回答都显得模拟两可,是因为自己一直对这个没有很好的理解,趁现在比较闲对这个做一点总结 举个例子: 你当前有一个非常简单的项目,只有一个Act ...

  10. ubuntu 安装MTK 移动终端usb驱动

    lsusbBus 001 Device 002: ID 8087:8000 Intel Corp. Bus 001 Device 001: ID 1d6b:0002 Linux Foundation ...