Html 之div+css布局之css基础
Css是什么
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等 From baidu
当前文章主要描述css 样式的一些基本的，最新版本的大家可自行抛砖引玉。
让我来看下面Html代码 来简单了解下css
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"> </style>
<script type="text/javascript"> </script>
</head> <body style="background-color: yellow">
<div style="width: 400px; height: 200px; border: 1px solid red;">
这是一个div 元素，显式的区域，使用的是行内样式
</div>
</body> </html>
执行效果如图:
可以看到 整个页面 背景色为黄色，div 块 呈现了 红色边框
不难看出，样式都是以 style="" 嵌套在 html 标记之中的。
CSS属性大全
使用方法，都是以 style="" 嵌套在 标记之中, 属性名:属性值，多个属性之间以;分号来 分割。
例如：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"> </style>
<script type="text/javascript"> </script>
</head> <body style="background-color: yellow">
<div style="width: 400px; height: 200px; border: 1px solid red;font-size: 23px; color: blue; text-indent: 2em;">
这是一个div 元素，显式的区域，使用的是行内样式
</div>
<p style="border:10px dotted red;">测试文本信息 </p>
</body> </html>
结果如图:
好了，这篇文章就描述了基本的 css 的一些基础的 字体 边框 背景 样式属性，感兴趣的可以去试试其它相关属性，便于对这些属性有一个基本的认识与了解。
下篇文章将会描述css 选择器， css 作用优先级 ，以及css 一些基本的命名规范。
Html 之div+css布局之css基础的更多相关文章
- Html 之div+css布局之css选择器
CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的 字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...
- CSS布局口诀 - CSS BUG顺口溜
在进行CSS网页布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢? 一.IE边框若显若无,须注意,定是高度设置已忘记: 二.浮动产生 ...
- css布局基础总结
前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...
- Python之路-python(css布局、JavaScript)
CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
- CSS 布局 - Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...
- 详解CSS布局
CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.主要对文档流的改变进行布局.假设你已经掌握了CSS的选择器.属性和值,并且可能对布局有一定了 ...
- css布局&初始化&基准样式
学习css布局比较好的网站 学习css布局 1.css设置模块 typography(字体) colour(颜色) link(链接) forms(表单) layout(布局) navigation(导 ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- CSS布局基础
(初级)css布局 一.单列布局1.基础知识块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示.无换行2.盒子模型盒子模型 (边框border ...
随机推荐
- Spring相关
一.Spring中ApplicationContext加载机制加载器目前有两种选择:ContextLoaderListener和ContextLoaderServlet. 这两者在功能上完全等同,只是 ...
- CSS3 HSL()详解:
这是CSS3新增的颜色表示模式.在CSS2中,只有RGB(red.green和blue的缩写)和十六进制两种颜色模式.为了能够支持颜色的透明度,CSS3新增了RGBA(A是Alpha缩写).但是无论是 ...
- Linux虚拟机中 Node.js 开发环境搭建
Node.js 开发环境搭建: 1.下载CentOS镜像文件和VMWare虚拟机程序; 2.安装VMWare——>添加虚拟机——>选择CentOS镜像文件即可默认安装带有桌面的Linux虚 ...
- NetworkComms V3 使用TCP通信传递IList<T>类型的数据
客户端从服务器获取一组IList<T>类型的数据非常常见(通常从数据库中获取) 我们用NeworkComms V3来演示一下(NetworkcommsV2.x版本也同样支持) [ 使用pr ...
- Adapter 启动时报错——2
在安装tibco adr3 7.00以前的版本,在designer中启动adr3 会报出“无法加载adr3.dll”文件的错误,这是因为在designer中的palettes默认是指向adapter ...
- Retrofit源码研究
2016-05-06 15:35:27 最近抽空研究了一下Retrofit源码,包括API使用.源码结构.使用到的设计模式.SDK的架构设计.作者设计/实现思路等,会形成一系列文章. 以前Retrof ...
- VScode调试Python
第一步,确保装上了PYTHON扩展 然后打开文件夹(这个东西必须打开文件夹才能进行调试,不能打开一个文件就调试) 打开文件夹后,那里显示没有配置,这时需要你按下F5 弹出选择环境,点击Python 它 ...
- linux内核学习之三 跟踪分析内核的启动过程
一 前期准备工作 1 搭建环境 1.1下载内核源代码并编译内核 创建目录,并进入该目录: 下载源码: 解压缩,并进入该目录:xz -d linux-3.18.6.tar.xz tar ...
- [转]as3 算法实例【输出1 到最大的N 位数 题目：输入数字n，按顺序输出从1 最大的n 位10 进制数。比如输入3，则输出1、2、3 一直到最大的3 位数即999。】
思路:如果我们在数字前面补0的话,就会发现n位所有10进制数其实就是n个从0到9的全排列.也就是说,我们把数字的每一位都从0到9排列一遍,就得到了所有的10进制数. /** *ch 存放数字 *n n ...
- 【转】Sublime Text3注册码（可用）
补充:2015.11.05日经过测试,3个注册码都是可用的,不会用的请百度用法... 最近觉得Sublime Text3比Notepad++好使,可惜需要购买,于是网上搜了一下,屌丝的福音啊: Sub ...