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内容在浏 ...
随机推荐
- 解决Android后台清理APP后，程序自动重启的问题
最近解决了一个Android APP的bug,发现APP在被后台清理后,会自动重启.现象很奇怪,有的手机(HTC)后台清理后,程序会再次重启,而有的手机(小米)则不会.猜想可能是小米手机内部做了处理, ...
- oracel数据导出导入
一.导出模式(三种模式)及命令格式 1. 全库模式 exp 用户名/密码@网络服务名 full=y file=路径\文件名.dmp log=路径\文件名.log 2. 用户模式(一般情况下采用此模式) ...
- error LNK2001: 无法解析的外部符号
1.错误描述 error LNK2001: 无法解析的外部符号 "__declspec(dllimport) void __cdecl PadSystem::Private::printQS ...
- 基于corosync+pacemaker+drbd+LNMP做web服务器的高可用集群
实验系统:CentOS 6.6_x86_64 实验前提: 1)提前准备好编译环境,防火墙和selinux都关闭: 2)本配置共有两个测试节点,分别coro1和coro2,对应的IP地址分别为192.1 ...
- (转)Dubbo与Zookeeper、SpringMVC整合和使用
原文地址: https://my.oschina.net/zhengweishan/blog/693163 Dubbo与Zookeeper.SpringMVC整合和使用 osc码云托管地址:http: ...
- 项目游戏开发日记 No.0x000003
14软二杨近星(2014551622) 刚刚过去清明节, 意味着离交项目的时间, 还有三个星期, 有点着急了, 可是, 还是觉得无所适从... 项目进展: 刚刚过去的一周, 事非常多, 以至于, 进展 ...
- js变量问题
this指向问题,谁调用它,它就指谁!!! 1.var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); a ...
- [LeetCode] Pow(x, n) 求x的n次方
Implement pow(x, n). 这道题让我们求x的n次方,如果我们只是简单的用个for循环让x乘以自己n次的话,未免也把LeetCode上的想的太简单了,一句话形容图样图森破啊.OJ因超时无 ...
- 【原】Learning Spark (Python版) 学习笔记(三)----工作原理、调优与Spark SQL
周末的任务是更新Learning Spark系列第三篇,以为自己写不完了,但为了改正拖延症,还是得完成给自己定的任务啊 = =.这三章主要讲Spark的运行过程(本地+集群),性能调优以及Spark ...
- Javascript的this用法及jQuery中$this和$(this)的区别
this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, function test(){ this.x = 1; } 1.this就是全 ...