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. RegOpenKeyEx和RegSetValueEx返回ERROR_SUCCESS,但注册表未发生变化。

    win7 x64,需要open的时候加上KEY_WOW64_64KEY. lRet = RegOpenKeyEx(HKEY_LOCAL_MACHINE, "Software\\Microso ...

  2. ios 写项目的时候遇到的问题及解决方案(2)

    11.自适应文本高度 NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:]}; CGRect rec ...

  3. LVM在线扩容

    我虚拟机根分区已经使用了35%,现在需要对他进行在线扩容,扩容之后使用率降到30% [root@localhost ~]# dfFilesystem 1K-blocks Used Available ...

  4. Android framework完整源码下载

    包括cpp等native代码.可zip打包下载. https://github.com/android/platform_frameworks_base/branches/stale Android线 ...

  5. OAF_开发系列29_实现OAF中批次处理迭代器RowSet/RowSetIterator(案例)

    20150814 Created By BaoXinjian

  6. python(30) 获取网页返回的状态码,状态码对应问题查询

    获取访问网页返回的状态码 html = requests.get(Url) respon = html.status_code 以下内容来自于维基百科:点击查看网页 1xx消息 这一类型的状态码,代表 ...

  7. Bugtags 实时跟踪插件 - BugtagsInsta

    BugtagsInsta 是 Bugtags SDK 的官方插件,应用集成成功后,可以在 Bugtags 云端管理平台实时查看应用的运行时数据:操作步骤.用户数据.控制台日志.Bugtags 日志.网 ...

  8. java.lang.ArrayIndexOutOfBoundsException: 1

    数组越界 但是我这个也不是这个原因: 在CuiShouDetail.jsp 里,如果 添加上 QiTaDianHua,如果为空就会报错,别的都么有问题null,或者是空格,或者是有数据 1. Stri ...

  9. maven添加仓库地址

    mvn install时,好多包从mvn中央库下载不下来,搜索到一个maven库地址:http://conjars.org/repo/,将其添加到maven仓库中 编辑 conf/setting.xm ...

  10. vs文件属性(生成操作)各选项功能(发布Web项目时使用)

    转自:http://www.cnblogs.com/paulhe/p/4490583.html 右击项目里的文件,选择属性(F4)会有[生成操作]的选项. 它提供了14项选择,如图: 在这说一下常用的 ...