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内容在浏 ...
随机推荐
- ArcGIS Engine开发前基础知识（2）
ArcGIS基本控件简介 ArcGIS Engine控件是一组可视化的开发组件,每个ArcGIS Engine控件都是一个COM组件.这些组件包括MapControl,PageLayoutContro ...
- iOS多线程之9.自定义NSOperation
本文主要讲如何自定义NSOperation,以及自定义NSOperation的一些注意事项,以下载图片为例. 新建一个类,继承于NSOperation. CustomOperation.h 代码 ...
- 因为没用过，所以没想过的--goto
今天读了读 Rui Maciel 大神写的 mjson parser,mjson 解析器是一个使用 ISO C 实现的小型 JSON 解析器.嵌入式项目中使用到了该解析器,随即拿出来看看. 看到如下代 ...
- Laravel大型项目系列教程（一）
Laravel大型项目系列教程(一) 一.课程概述 1.课程介绍 本教程将使用Laravel完成一个多用户的博客系统,大概会包含如下内容: 路由管理. 用户管理,如用户注册.修改信息.锁定用户等. 文 ...
- AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据. 实例 <!DOCTYPE html> <html> <script src= "http://apps.bd ...
- PHP中的数据库四、mongodb
h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...
- 为什么现在我最终推荐内存OLTP
在今年的8月份,我写了篇文章,介绍了我还不推荐用户使用内存OLTP的各个理由.近日很多人告诉我,他们有一些性能的问题,并考虑使用内存OLTP来解决它们. 众所皆知,在SQL Server里内存OLTP ...
- WPF 自定义窗口
在WPF中,经常需要对窗口进行设置,下面讲讲常用的几个设置. 1.无边框窗口 WindowStyle="None" 窗口样式无 AllowsTransparency="T ...
- Yahoo14条军规-前端性能优化
1.尽可能减少HTTP请求数 什么是http请求? 2.使用CDN(内容分发网络) 什么是CDN? 3.添加Expire/Cache-Control头 Expire Cache-Control 4.启 ...
- heredoc技术
Heredoc技术,在正规的PHP文档中和技术书籍中一般没有详细讲述,只是提到了这是一种Perl风格的字符串输出技术.但是现在的一些论坛程序,和部分文章系统,都巧妙的使用heredoc技术,来部分的实 ...