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内容在浏 ...
随机推荐
- [转]ThoughtWorks(中国)程序员读书雷达
http://agiledon.github.io/blog/2013/04/17/thoughtworks-developer-reading-radar/#rd?sukey=f64bfa68330 ...
- (十)Maven依赖详解
1.何为依赖? 比如你是个男的,你要生孩子,呸呸呸...男的怎么生孩子,所以你得依赖你老婆,不过也不一定咯,你也可以依赖其她妹子. 我们在平时的项目开发中也是同理,你需要依赖一些东西才能实现相应的功能 ...
- xhtml、html与html5的区别
一.基本概念: html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法 ...
- html5页面结构
我是html5初学者,最近闲来无事,和各位一起学些下html5. 开发环境 jdk1.6,tomcat6,开发工具eclipse. 新建一个web工程,创建一个index.jsp页面.页面代码如下. ...
- bootstrap-datetimepicker在火狐下报错的问题
问题:使用bootstrap-datetimepicker这个日期插件来显示日期,但在火狐下报如下错误:TypeError: (intermediate value).toString(...).sp ...
- 飞一般的国内maven中央仓库
修改maven根目录下的conf文件夹中的setting.xml文件,内容如下: <mirrors> <mirror> <id>alimaven ...
- 斐波拉契数列(Fibonacci) 的python实现方式
第一种:利用for循环 利用for循环时,不涉及到函数,但是这种方法对我种小小白来说比较好理解,一涉及到函数就比较抽象了... >>> fibs = [0,1] >>&g ...
- Intellij IDEA 快捷键整理
CSDN 2016博客之星评选结果公布 [系列直播]算法与游戏实战技术 "我的2016"主题征文活动 Intellij IDEA 快捷键整理(TonyCody) ...
- [No0000A7]批处理经常用到的变量及批处理>NUL详细介绍
绝对路径是指调用绝对的程序位置的路径,例如: start C:\Windows\test.exe 相对路径是文件改变路径以后还会按照变量的路径所在位置去调用,例如: start %WINDIR%\te ...
- 8个排序算法——java
public static void radixsort(int[] a){ int max=a[0]; for(int i=1;i<a.length;i++){ if (max<a[i] ...