HTML之CSS学习
学前预备
<!DOCTYPE html>
<html>
<head> <title>标题</title>
<meta charset="utf-8">
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
<!--
外部样式 HTML表单.css中的样式表
p{ font-size:12px;
color:red;
}
对应<p>标签
-->
<link rel="stylesheet" type="text/css" href="HTML表单.css" />
<!--
内部样式
对应<ol>标签
-->
<style type="text/css">
ol{
font-size:12px;
color:blue;
}
</style> </head>
<body> <p>测试段落</p> <ol>
<li>有序列表标签</li>
<li>有序列表标签</li>
<li>有序列表标签</li>
</ol> <ul style="color:orange;font-size:12px"> <!--行内样式 ';'分割-->
<li>无序列表标签</li>
<li>无序列表标签</li>
<li>无序列表标签</li>
</ul> </body>
</html>
选择器
<!DOCTYPE html>
<html>
<head> <title>标题</title>
<meta charset="utf-8">
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
<!--
外部样式 HTML表单.css中的样式表
p{ font-size:12px;
color:red;
}
对应<p>标签
-->
<link rel="stylesheet" type="text/css" href="HTML表单.css" />
<!--
内部样式
对应<ol>标签
-->
<style type="text/css">
/*
ol{
font-size:12px;
color:blue;
}
*/
#ol_1{ /*通过id属性来选择样式标签,id属性不可重复，唯一性*/
font-size:12px;
color:blue;
}
.ol_class{ /*通过class属性来选择样式标签,class属性可以重复，为了批量设置样式而生*/
font-size:18px;
color:yellow;
}
/*
交集选择器 例：p.ol_class
并集选择器 例：p,.ol_class
后代选择器 例：ol li
通配选择器 例：* 选择所有元素
*/
a:hover{ /*伪选择器，状态选择器*/
background:blue;
color:red;
} </style> </head>
<body> <p>测试段落</p> <ol id="ol_1">
<li>有序列表标签</li>
<li>有序列表标签</li>
<li>有序列表标签</li>
</ol> <p class="ol_class">测试段落</p>
<ol class="ol_class">
<li>有序列表标签</li>
<li>有序列表标签</li>
<li>有序列表标签</li>
</ol> <ol>
<li>有序列表标签</li>
<li>有序列表标签</li>
<li>有序列表标签</li>
</ol> <ul style="color:orange;font-size:12px"> <!--行内样式 ';'分割-->
<li>无序列表标签</li>
<li>无序列表标签</li>
<li>无序列表标签</li>
</ul> <a href="http://www.baidu.com" target="_blank">百度一下</a> </body>
</html>
文本样式
<!DOCTYPE html>
<html>
<head> <title>标题</title>
<meta charset="utf-8">
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
<style type="text/css">
p{
text-indent:2px; /*缩进*/
text-align:right;/*对齐方式*/
text-decoration:underline;/*装饰:文字下划线 默认:none*/
line-height:30px; /*行高*/
word-spacing:5px; /*单词间距（对汉字无效）,默认值:normal*/
letter-spacing:3px; /*字母、中文汉字间距*/
font-family:微软雅黑;/*字体*/
font-style:italic;/*italic:斜体，*/
font-size:20px;
font-weight:bold;/*加粗*/
}
</style>
</head>
<body> <p>我是第一个段落<br>I am LiuGuan<br>我是第一个段落</p> </body>
</html>
CSS块级元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>页面标题</title>
<meta charset="UTF-8" />
<style type="text/css">
form{
background-color:red;/*默认:transparent透明*/
width:500px;
background-image:url(image.jpg);
background-repeat:no-repeat;/*图片禁止平铺*/ /*坐标background-position 1.:（位置）
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
2.（百分比）
50% 50%
3.（像素）
250px 250px
4.混用 */
background-position:250px 250px; /*背景关联
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置
*/
/*background-attachment:fixed;*/ border:5px solid blue;/*边框实线*/
border:5px dashed orange;/*边框虚线*/ /*单独设置边框*/
border-left:none; /*font-size:20px;*/ /*
后代元素长度大于祖辈元素的大小时的处理办法
overflow:
可能值：
visible:默认，内容不会被修剪，会呈现在元素框外；
hidden;超出内容会被修剪，直接不显示；
scroll:超出时候超出内容会被修剪，浏览器会显示滚动条以便查看其余的内容，不超出也依然显示滚动条；
auto:如果内容被超出，则浏览器会显示滚动条以查看其余内容；
inherit:规定应该从父元素继承 overflow 属性的值 */
/* 上面的设置只适用于块级元素 非块级元素转块级 display:block;/*使其具有以上特性*/
非内联元素转内联 display:inline;/*使以上特性失效*/
display:inline-block;/*类似于collectionView*/ */
} div{
height:100px;
width:100px;
} #div1{
background-color:red;
border 2px solid yellow;
display:inline-block;
}
#div2{
background-color:orange;
border 2px solid blue;
display:inline-block;
}
#div3{
background-color:red;
border 2px solid yellow;
display:inline-block;
}
#div4{
background-color:orange;
border 2px solid red;
display:inline-block;
}
#div5{
background-color:yellow;
border 2px solid blue;
display:inline-block;
}
</style>
</head>
<body>
<h3>登录界面</h3>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div3</div>
<div id="div5">div5</div>
</body>
</html>
盒模型（设置块元素内外边距的）
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
#box1{
width:200px;
height:200px;
background:blue;
border:5px solid orange; /*内边距
padding-top:20px;
padding:上 右 下 左；（写四个）
padding：上下 左右； （写两个）
padding：上下左右； （写一个）
*/ /*外边距
margin:20px 20px 20px 20px;
*/ }
body{
border: 20px solid red;
margin:0px;/*设置body外边距为0*/
}
</style>
</head>
<body>
<div id="box1">
我是一个盒子
</div>
</body>
</html>
浮动
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset=“utf-8”>
<style>
#div1{
width:200px;
height:100px;
background:blue;
float:left;
}
#div2{
width:100px;
height:50px;
background:orange;
float:left;
}
#div3{
width:200px;
height:50px;
background:black;
float:left;
}
#div4{
width:100px;
height:50px;
background:cyan;
float:left;
}
/*
浮动的设置方法：
float:left;
float:right;
禁止浮动设置：
clear:both;
none:默认值。允许两边都可以有浮动对象。
left:不允许左边有浮动对象；
right:不允许右边有浮动对象；
both:不允许有浮动对象；
*/
</style>
</head>
<body>
<div id="div1"> div1 </div>
<div id="div2"> div2 </div>
<div id="div3"> div3 </div>
<div id="div4"> div4 </div>
</body>
</html>
相对定位与绝对定位
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
#box1{
width:200px;
height:200px;
background:blue;
border:5px solid orange;
position:absolute;/*绝对坐标*/ left:50px;
top:50px;
}
#box2{
width:200px;
height:200px;
background:red;
border:5px solid cyan; position:relative;/*相对坐标*/ left:0px;
top:0px;
}
</style>
</head>
<body>
<div id="box1">
我是第一个盒子
</div>
<div id="box2">
我是第二个盒子
</div>
</body>
</html>
HTML之CSS学习的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结（二） 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结（一） 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- RunLoop 总结：RunLoop的应用场景（二）
上一篇讲了使用RunLoop保证子线程的长时间存活,而不是执行完任务后就立刻销毁的应用场景.这一篇就讲述一下RunLoop如何保证NSTimer在视图滑动时,依然能正常运转. 参考资料 好的书籍都是值 ...
- 网页万能排版布局插件，web视图定位布局创意技术演示页
html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...
- GUID生成器
这个GUID生成器是一个小巧的软件,属于笔者在空余时间开发的. http://pan.baidu.com/s/1sk6VGpn
- SQL优化技术分析-2：SQL书写的影响
1.同一功能同一性能不同写法SQL的影响. 如一个SQL在A程序员写的为 Select * from zl_yhjbqk B程序员写的为 Select * from dlyx.zl_yhjbqk(带表 ...
- Hibernate 系列 02 - Hibernate介绍及其环境搭建
引导目录: Hibernate 系列教程 目录 昨晚喝多了,下午刚清醒,继续搞Hibernate.走起. 觉得还行的话,记得点赞哈,给我这个渣渣点学习的动力.有错误的话也请指出,省的我在错误上走了不归 ...
- Js IP转数字
<script type="text/javascript"> function d2h(d) { return d.toString(16) } function h ...
- Excel公式 提取文件路径后缀
我们在代码中获取一个文件路径的后缀,是一个很简单的事. 如C#中,可以通过new FileInfo(filePath).Extension,或者Path.GetExtension(filePath)获 ...
- List集合的removeAll(Collection<E> col) 和clear方法的区别
//removeAll()方法private static void testList(){ List<String> list = new ArrayList<String> ...
- MMORPG大型游戏设计与开发（服务器 AI 逻辑设定和状态结点）
人工智能(AI)中往往都会有这么一个问题,那就是我要做什么?我该怎么做?我需要什么?所以这里所谓的智能就是赋予AI对象的判断力,以及它根据判断得到的相应反应.就好比,你去商店买东西,钱够别人才卖给你, ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...