1、html与css的结合方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
结合方式01:
在标签上加入style属性.
属性的值就是css代码.
-->
<p style="color:red;" >itcast传智播客</p>
</body>
</html>

2、结合方式2。在页面中写style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
color:blue;
}
</style>
</head>
<body>
<!--
结合方式02:
在页面的head标签中, 书写一个style标签.
在style标签中书写css代码. -->
<p>itcast传智播客</p>
<p>itcast传智播客</p>
</body>
</html>

3、结合方式3,在页面中写入link标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="p.css" />
</head>
<body>
<!--
结合方式03:
在页面head标签中填写link标签
<link type="text/css" rel="stylesheet" href="p.css" />
type mime类型
rel 类型
href css文件路径
-->
<p>itcast传智播客</p>
<p>itcast传智播客</p>
</body>
</html>

4、标签选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
color:red;
} </style>
</head>
<body>
<!--
标签选择器:
语法: 标签名 {
属性键:属性值;
}
-->
<p>itcast传智播客</p>//表示占一行
<p>itcast传智播客</p>
</body>

5、id选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#one {
color:red;
} </style>
</head>
<body>
<!--
ID属性唯一标识符.
要确保页面当中id属性的唯一性.
ID选择器:
语法: #ID {
属性键:属性值;
}
-->
<p id="one" >itcast传智播客</p>
<p>itcast传智播客</p>
</body>
</html>

6、class选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.one {
color:green;
} </style>
</head>
<body>
<!--
class属性可以随意重复. CLASS选择器:
语法: .CLASS名称 {
属性键:属性值;
}
-->
<p class="one" >itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p class="one" >itcast传智播客</p>
<h1 class="one" >itcast传智播客</h1>
</body>
</html>

7、选择器分组

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.one,#two {
color:yellow;
} </style>
</head>
<body>
<!-- 选择器分组:
语法: 选择器1,选择器2...... {
属性键:属性值;
}
-->
<p class="one" >itcast传智播客</p>
<p id="two" >itcast传智播客</p>
<p>itcast传智播客</p>
<p class="one" >itcast传智播客</p>
<h1 class="one" >itcast传智播客</h1>
</body>
</html>

8、伪类选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link {
color:red;
}
a:visited {
color:green;
}
a:hover {
color:blue;
}
a:active {
color:yellow;
}
</style>
</head>
<body>
<!--
伪类选择器:指的是选择的某个标签的 某种状态
常见状态有4种,a标签最全.
l link 没有点击 过的状态
v visited 访问过
h hover 鼠标悬浮
a active 激活状态(鼠标点下去没有弹起)
-->
<a href="01-结合方式01.html" >01-结合方式01.html</a>
</body>
</html>

9、css常见属性,字体

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
/*
font-size: 100px;//字体大小
font-family: 黑体;//什么字体
font-style: italic;//是否倾斜
font-weight: 900;//字体粗细
font-variant: small-caps;//是否是小写型的大写字母
*/
font :italic small-caps 900 100px 黑体; }
</style>
</head>
<body>
<p>itcast传智播客</p>
</body>
</html>

效果如下所示

10、背景属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
/*
background-color: pink;//背景颜色
background-image: url("001.jpg");//背景图片
background-repeat: no-repeat;//当背景图片长度不够的时候是否重复背景图片。背景重复
background-attachment: fixed;//背景滚动模式; 背景图片滚动属性.scroll默认值,fixed:当页面的其余部分滚动时,背景图像不会移动.inherit规定应该从父元素继承 background-attachment 属性的设置。
*/
        background : green url("001.jpg") no-repeat fixed center; 

    }
</style>
</head>
<body>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
<p>itcast传智播客</p>
</body>
</html>

完事之后的效果是下边这个样子的

11、盒子模型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
块级标签: 占的是一行.
行内标签: 占行内的一部分. 不能嵌套 块级标签. 块级: div p ol
行内: span font a
*/
</style>
</head>
<body>
itcast传智播客<div>itcast传智播客</div>itcast传智播客 <br>
itcast传智播客<span>itcast传智播客</span>itcast传智播客
</body>
</html>

12、div嵌套

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border-color: red;
border-width: 1px;
border-style: solid;
}
#one{
width: 200px;
height: 300px;
/*
内边距:
注意,内边距会改变自身的宽高. */
padding-left: 100px;
}
#two{
width: 100px;
height: 100px;
/*
外边距
margin-left: 100px;
*/
}
</style>
</head>
<body>
<div id="one" >
<div id="two" >
</div>
</div>
</body>
</html>

13、内外边距的属性符合

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
/*
border-color: red;
border-width: 1px;
border-style: solid;
*/
border: 1px solid red; width: 100px;
height: 100px;
}
#one{
/*
1个属性时: 4个方向.
2个属性时: 第一个属性决定上下 第2个决定左右
3个属性时: 上 左右 下
4个属性时: 上 右 下 左(顺时针)
*/
padding: 10px 30px 50px 80px;
}
</style>
</head>
<body>
<div id="one" >
<div id="two" >
</div>
</div>
</body>
</html>

14、透明效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border: 1px solid red; }
#one{
background-color:black;
width: 300px;
height: 300px;
}
#two{
background-color:white;
width: 100px;
height: 100px;
opacity:0.7;
}
</style>
</head>
<body>
<div id="one" >
<div id="two" >
</div>
</div>
</body>
</html>

35、重新复习html与css(1)的更多相关文章

  1. 36、重新复习html和css之二

    (1)由于公司是意大利的网段, (2)而且公司的电脑是保密的, (3)文件发不出去, (4)U盘插不进去. (5)而且我们组的项目整体上已经开发完毕,客户暂时没有什么大的需求, 所以如果我不把这些技术 ...

  2. 【复习笔记】CSS基础

    外观 color:rgba(255,255,255,1),a表示alpha,透明度值0~1 font-family:字体1,字体2,字体3;确保某字体不存在时自动选择下一个,最好使用字体的英文名称保证 ...

  3. 第一周复习二 (CSS样式表及其属性)

    样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head& ...

  4. 前端知识复习一(css)

    1.清楚浮动 父盒子高度为0,子盒子全部定位.浮动.子盒子不会撑开父盒子,下面的盒子会顶上来 清楚方法: clear:both: overflow:hidden: 加空标签 单/双 //双标签 .cl ...

  5. 前端每日实战:35# 视频演示如何把 CSS 径向渐变用得出神入化,只用一个 DOM 元素就能画出国宝熊猫

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odKrpy 可交互视频教程 此视频 ...

  6. 代码:CSS仿制 苹果按钮图标

    首先,先复习一下:CSS的线性渐变.径向渐变 .linear{ background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 9 ...

  7. 小白学习css记录

    一.复习 什么是CSS? 层叠样式表 -层叠样式只会被覆盖而不会被替代 CSS的使用方式 style属性---> <h1 style="css属性"></h ...

  8. css表格

    今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下css的表格 首先说说thead.tbody.tfoot <thead></thead> <tbody&g ...

  9. 一个经验丰富的网站建设程序员的CSS资料

    没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CS ...

随机推荐

  1. 设置XtraForm标题居中

    public class CustomFormPainter : FormPainter { public CustomFormPainter(Control owner, DevExpress.Sk ...

  2. Interview

    下面的题是供大家查漏补缺用的,真正的把这些题搞懂了,才能"以不变应万变". 回答问题的时候能联系做过项目的例子是最好的,有的问题后面我已经补充联系到项目中的对应的案例了. 1.简述 ...

  3. SQLServer 创建dtsx包更新统计信息(示例)

    http://blog.csdn.net/kk185800961/article/details/43816177(转载) 1 . 打开Microsoft Visual Studio 创建 integ ...

  4. string相关总结

    一 <string> 1 string类常见成员函数 (1)属性相关 s.empty()   s为空时返回true,否则返回false s.size()      返回s中字符的个数,不包 ...

  5. Android jar包的导出和使用

    一.工程打成JAR包. 1.       eclipse下有一工程JsnTxJar,右键工程名选择Export. 选择Java->JAR file 下图所示左边一栏只勾选src,右边一栏都不用勾 ...

  6. IIS6批量添加主机头,修改IIS数据库

    首先,找到IIS的数据库.默认是在C:\WINDOWS\system32\inetsrv 下的MetaBase.xml文件. 如果找不到,请右键右键站点->所有服务->将配置保存到一个文件 ...

  7. centos 7 + mono + jexus 环境安装

    1.安装 mlocate yum list|grep locate yum install mlocate.x86_64 updatedb 2.安装 yum-utils yum list|grep y ...

  8. [转]linux sort,uniq,cut,wc命令详解

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  9. C程序与Lua脚本相互调用

    Lua脚本是一种可用于C程序开发/测试的工具,本篇介绍一下C程序与Lua脚本如何进行相互调用,更加详细的操作参见<Programing in Lua>.本文分为3个部分:1.Windows ...

  10. delphi.指针.PChar

    此文是delphi.指针.应用姊妹篇,想细化一下PChar应用,所以有了此文. 注意: 1:此文讲的是PChar与字符串相关操作,其它方法暂不多讲. 2:由于D分开Ansi/Unicode的两种完全不 ...