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> & ...
随机推荐
- [原创]jQuery的this和$(this)
网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象. ...
- MyEclipse7.0破解下载
MyEclipse7.0 下载地址:downloads.myeclipseide.com/downloads/products/eworkbench/7.0M1/MyEclipse_7.0M1_E3. ...
- [AngularJS] Hijacking Existing HTML Attributes with Angular Directives
Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique ...
- Autolayout环境设置任意个数相等间距排列的按钮的方法
摘要: 在storyboard中,想要用autolayout设置多个按钮按照相同的间距排列,并且自动根据屏幕宽度调整间距大小,就我了解的来说,没有直接的设置方法.我用storyboard+代码的方法实 ...
- C语言待研究问题
1.内存分配 变量的静态分配和静态变量的区别: 变量的静态分配和动态分配 2.堆和栈的区别 3.CPU的并发性 4.变量和参数的区别
- MHA 安装过程 原创
root@monitor yum.repos.d]# cat CentOS-Base.repo [base]name=CentOS-$releasever - Basefailovermethod=p ...
- (转)ASP.NET Identity登录原理 - Claims-based认证和OWIN
在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章.本文会涉及到Claims-based(基于声明)的认证,我们会详 ...
- qregularexpression和qregexp的区别
QRegularExpression 是Qt 5.0才引进的,相对于QRegExp,QRegularExpression class修复了很多bug,提高了效率,提供了对Perl的RegEx几乎全面兼 ...
- 分布式缓存技术redis学习(四)——redis高级应用(集群搭建、集群分区原理、集群操作)
本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 <详细讲解redis数据结构(内存模型)以及常用命令> <redis高级应用( ...
- 关于Android中获取Intent里的数据
Intent获取数据和发送数据的办法: //直接通过Intent发送 intent.putExtra("name","wytings"); //直接通过Inte ...