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内容在浏 ...
随机推荐
- 八皇后算法的另一种实现(c#版本)
八皇后: 八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例.该问题是国际西洋棋棋手马克斯·贝瑟尔于1848年提出:在8×8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于 ...
- 可空类型（Nullable<T>）及其引出的关于explicit、implicit的使用
问题一:Nullable<T>可赋值为null 先看两行C#代码 int? i1 = null; int? i2 = new int?(); int? 即Nullable<int&g ...
- AndroidProjects个人项目归纳
AndroidProjects 个人总结归纳-目录大纲 Data Binding框架MVVM BaseView CollapseView 更新中... 项目地址:https://github.com/ ...
- id，clientid 和 uniqueid 的区别
一. ID是设计的时候所指定的ID. ClientID是当这个控件生成到客户端页面时候,需要在客户端访问时候用的. UniqueID是当需要参与服务端回传的时候用的. 备注:当控件是子控件的时候(例如 ...
- uboot的配置流程分析
简单介绍一下uboot的基本配置流程.和绝大多数源码编译安装一样,uboot在执行make之前需要执行make XXXconfig来配置相关信息,而且uboot本身是针对多种平台的bootloader ...
- RabbitMQ调试与测试工具-v1.0.1 -提供下载测试与使用
最近几天在看RabbitMQ,所以发了两天时间写了一个调试和测试工具.方便使用. 下载地址:RabbitMQTool-V1.0.1.zip
- Linux下安装nginx
一直会使用nginx,也学习了好多nginx知识.也在本地安装过nginx,这次是第一次在正式的环境安装nginx,把这些记录下来总结经验. 一.安装环境 操作系统:CentOS release 6. ...
- python学习5
1.切片,python中一个比较重要的概念,其实和MATLAB中的数组的操作很相像. 比如对于 a =[1,2,3,4,...,100]如果想取前三个,即[1,2,3] 直接说a[0,3]即可,还可以 ...
- WWW读取安卓外部音乐文件
需求分析 使用Everyplay(2121-1540版本)录屏,在升级SDK之后,遇到个问题,调用安卓原生的mediaplay进行播放音乐,在录屏时无法录制到声音,所以想到的解决办法是在Unity中播 ...
- django之一些feature
前端之django一些feature 本节内容 cookie session 跨站请求保护 分页 序列化 model模块 CBV和FBV 模板渲染对象 1. cookie cookie 是一种发送到客 ...