xhtml+css基础知识1
样式
- 行间样式:在标签里
<div style="width:400px; height:200px; background:red;">块</div>
- 内部样式:用<style></style>标签包裹
<style>
#box{width:400px; height:200px; background:red;}
</style> - 外部样式:<link />标签
<link href="style.css" rel="stylesheet"/>
常见样式:[属性:属性值;]
- width 宽度
- height 高度
- background 背景
- border 边框
- padding 内边距
- margin 外边距
复合属性:一个属性多个属性值。background,border,padding,margin
- background
<style>
#bg{
background:url(bg.jpg) center 0 no-repeat gray fixed;
/*
background-attachment: fixed; 背景是否滚动
background-color: gray; 背景颜色
background-image: url(bg.jpg); 背景图
background-repeat: no-repeat; 背景图是否重复
background-position: center 0px; 背景图位置
*/
}
/*
复合属性:一个属性多个属性值; background 背景
repeat 重复
10px(X轴) 50px(Y轴)
fixed 固定
*/
</style> - border
<style>
#box{
border:1px dotted blue;
/*
宽度
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
样式
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
颜色
border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;
*/
}
/*
边框样式:
solid 实线
dashed 虚线
dotted 点线(IE6不兼容)
*/
</style> - padding
<style>
#box{padding:30px 30px 10px 30px;}
/*
padding: top right bottom left; padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px; padding:30px;上右下左都一样
padding:30px 25px;上下一样,左右一样
padding:30px 5px 25px;左右一样 注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。
*/
</style> - margin
<style>
#box1{ margin: 20px 20px 20px 20px;}
/*
margin 外边距(跟padding一样)
外边距复合:margin: top right bottom left; 外边距的问题:
1、上下外边距会叠压;
2、父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距)
*/
</style>
常见样式文本:
font-size 文字大小(一般均为偶数)
- font-family 字体(中文默认宋体)
- color 文字颜色(英文、rgb、十六位进制色彩值)
- line-height 行高
- text-align 文本对齐方式
- text-indent 首行缩进(em缩进字符)
- font-weight 文字着重
- font-style 文字倾斜
- text-decoration 文本修饰
- letter-spacing 字母间距
- word-spacing 单词间距(以空格为解析单位)
font:font-style | font-weight | font-size/line-height | font-family;
xhtml+css基础知识1的更多相关文章
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- DIV+CSS专题:第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- Web标准:一、xhtml css基础知识
说明:这些知识是我看<十天学会DIV+CSS教程完整版 完美整理+完整代码>这篇文章后记下来的一些内容,包括少部分不懂得地方去百度到的一些解释等,该文章的地址: http://wenku. ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
随机推荐
- javac 命令
HelloWorld.java:1: 需要为 class.interface 或 enum 锘缝ublic class HelloWorld{ ^ 1 错误 这个错误出现的原因主要是在中文操作系统中, ...
- Using Eclipse With CloudStack
As part of switching to Apache Maven for building CloudStack, the .classpath and .project files used ...
- poj3250 Bad Hair Day
Description Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a bad hair day! Since each cow ...
- HttpRequest类
一.HttpRequest的作用 HttpRequest的作用是令到Asp.net能够读取客户端发送HTTP值.比如表单.URL.Cookie传递过来的参数. 返回字符串的那些值就不说了,那些基本上都 ...
- Codeforces Gym 100803G Flipping Parentheses 线段树+二分
Flipping Parentheses 题目连接: http://codeforces.com/gym/100803/attachments Description A string consist ...
- Codeforces Round #339 (Div. 2) A. Link/Cut Tree 水题
A. Link/Cut Tree 题目连接: http://www.codeforces.com/contest/614/problem/A Description Programmer Rostis ...
- Codeforces Good Bye 2015 C. New Year and Domino 前缀和
C. New Year and Domino 题目连接: http://www.codeforces.com/contest/611/problem/C Description They say &q ...
- cdoj 03 BiliBili, ACFun… And More! 水题
Article Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/3 Descr ...
- 【JavaScript】JavaScript的Function与Object浅析
前言: JavaScript的面向对象是基于原形的,所有对象都有一条属于自己的原型链.Object与Function可能很多看Object instanceof Function , Function ...
- Android端百度地图API使用详解
百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...