css样式 第6节
程序员语录：
不要太刻意地把写程序这件事和挣钱挂起来，局限了你挣钱的本事
<html>
<head>
<title>网页样式</title>
</head>
<body>
<!--标记的属性-->
<font size="30" color="red">人</font>
<!--css样式-->
<font style="font-size:250px;color:red;">人</font>
</body>
</html>
结果：
标签样式
<html>
<head>
<title>标签样式</title>
<style type="text/css">
span{
font-size:22px;
color:blue;
background-color:#FFFF99;
border:1px solid green;
}
div{
background-color:#CCFFCC;
border:1px solid blue;
}
</style>
</head>
<body>
<!--区域标记 标示作用 span行的标记-->
<span>span标记</span>
body样式
<u>u标记</u>
<div>
div1
div1
div1
</div>
<p>p标记</p>
</body>
</html>
结果显示：
样式选择器：
<html>
<head>
<title>样式选择器</title>
<style type="text/css">
/*嵌入样式表 html选择器 使用html标记名称*/
h1{
border-bottom:2px solid red;
font-size:30px;
font-weight:bold;
color:red;
height:60px;
line-height:60px;
padding-left:20px;
}
/*类选择器*/
.red {
border:2px dotted red;
font-size:18px;
font-weight:bold;
color:white;
height:100px;
width:100px;
line-height:100px;
background-color:red;
text-align:center;
}
/*ID选择器*/
#blue {
border:2px dotted blue;
font-size:18px;
font-weight:bold;
color:white;
height:150px;
width:150px;
line-height:150px;
background-color:blue;
text-align:center;
}
/*联合选择器*/
span.green{
border:2px dotted green;
font-size:18px;
font-weight:bold;
color:white;
height:200px;
width:200px;
line-height:200px;
background-color:green;
text-align:center;
}
/*层级选择器*/
div .yellow {
border: 1px dotted yellow;
font-size:16px;
font-weight:normal;
color:white;
height:30px;
width:60px;
line-height:30px;
background-color:yellow;
text-align:center;
}
/*层级选择器*/
.red .yellow {
border:1px dotted yelllow;
font-size:16px;
font-weight:normal;
color:white:
height:30px;
width:60px;
line-weight:30px;
background-color:yellow;
text-align:center;
}
h4,h5,h6 {
font-size:16px;
font-weight:normal;
color:green;
}
</style>
</head>
<body>
<h1>样式选择器</h1>
<span>span</span>
<span class="red" >span</span>
<span id="blue">span</span>
<span class="green">span</span>
<div class="green">div</div> <div>
<span class="yellow">span</span><div class="blue">div</div>
</div>
<span class="yellow">span</span>
<span class="red">
<span class="yellow">span</span>
</span> <h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
结果显示：
页面使用css:
index.html:
<html>
<head>
<title>页面使用css</title>
<style type="text/css">
/*嵌入样式表*/
h6 {
/*border-color:green;
border-style:double;
border-width:5px;*/
border: 2px dotted gray;
width:300p;
font-size:18px;
font-weight:normal;
color:gray;
height:60px;
text-align:center;
vertical-align:bottom;
line-height:60px;
}
</style>
<!--导入外部样式表-->
<link rel="StyleSheet" href="main.css" type="text/css"/>
</head>
<body>
<h1>页面使用css</h1>
<hr/>
<h3>内联</h3>
<h5 style="font-size:25px;color:blue;font-family:黑体;font-weight:bold;border:1 solid blue;width:300px;">样式</h5>
<h5>样式</h5>
<h3>嵌入</h3>
<h6>样式</h6>
<h3>外部</h3>
<h4>样式</h4>
<h3>输入</h3>
<h2>样式</h2>
</body>
</html>
此时还需要main.css:
h4 {
font-size:18px;
font-weight:bold;
color:red;
width:500px;
height:80px;
border:3px double red;
text-align:center;
line-height:80px;
background-color:#33FFFFFF
}
/*输入样式表*/
@import url(import.css);
import.css文件：
h2{
font-size:20px;
font-weight:bold;
color:white;
width:480px;
height:280px;
border:3px solid black;
text-align:center;
line-height:140px;
background-color:#00FA9A;
background-image:url(11.png);
background-repeat:no-repeat;
}
3个文件在相同目录下：
用firefox打开index.html
结果：
css样式 第6节的更多相关文章
- Web前端开发基础 第四课（认识CSS样式）
CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...
- [css]样式合并与模块化
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4 ...
- [css]【转载】CSS样式分离之再分离
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...
- jquery轻松操作CSS样式
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
- 用css样式，为表格加入边框
Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- Boostrap入门级css样式学习
1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...
随机推荐
- sed写的命令收集
1. 替换一行字符串. <title name= > <param name="root", value="haha"/> <pa ...
- Hadoop InputFormat浅析
本文转载:http://hi.baidu.com/_kouu/item/dc8d727b530f40346dc37cd1 在执行一个Job的时候,Hadoop会将输入数据划分成N个Split,然后启动 ...
- js学习之原型prototype（一)
1.javascript中的每个引用类型(原生的.和自定义的)都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. A.prototype ...
- openssl pem转cer
openssl x509 -in cert/2120.pem -outform der -out cert/ios20170109.cer
- Webview 中 Javascript 无法调用 Java 对象
[问题产生] Webview 通过 addjavascriptInterface 传递对象给前端,一切正常.但是 Android官方已提醒此功能是有安全风险,改用 safe-java-js-webvi ...
- 关于css中z-index 的应用
我想很多人在应用中的会碰到这个问题,设置 z-index无效:无论设置为多高的数字都没有效果: 原因是在设置z-index之前必须满足一下两个条件: 1,给设置z-index的元素设置相应的定位值,p ...
- PHP 函数:intval()
intval 变量转成整数类型. 语法: int intval(mixed var, int [base]); 返回值: 整数 函数种类: PHP 系统功能 内容说明:本函数可将变量转成整数类型. ...
- CentOS 配置httpd使局域网能够正常訪问
[转载请注明出处: 钱国正的专栏http://blog.csdn.net/qianguozheng/article/details/37611859] 问题: 在CentOS上安装apache,配置好 ...
- Yum出错Error: Cannot find a valid baseurl for repo: base(转)
centos yum 错误 Error: Cannot find a valid baseurl for repo: base 装了个CentOS 6.x,使用yum时出现了下面的错误提示.Loade ...
- Java bit、byte、位、字节、汉字、字符
package com.suypower.chengyu.test; public class ByteTest { /** * byte 8 bits -128 - + 127 * 1 bit = ...