css基础知识（一）1、css样式：加载css样式有以下四种：1）、外部样式 2）、内部样式 3）、行内样式 4）、导入样式<link href="layout.css" rel="stylesheet" type="text/css" />这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。 <style> h2 { color:#f00;} </style>这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的...
现在来说相对定位：如果想为元素设置层模型中的相对定位，需要设置position:relaive（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中便宜位置。相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。那么，什么叫“偏移前的位置保留不动呢？”就是div元素...
一、Html和CSS的关系 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这...
<!DOCTYPE html><html> <head> <title> new document </title> <meta name="author" content="xxx" /> <meta charset="utf-8"/> <style type="text/css"> div{ width:100px; height:100px; border:1px solid red; overflow:hidden; word-break:break-all; white-space:nowrap;/*不允许换行 只能在一行显示*/ text-overflow:ellipsis;/*注意必须结合 overflow:hidden; white-space:nowrap；一起使用*/ } </style> </hea...
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。#------------------------------------------------我是可耻的分割线-------------------------------------------<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="height:35px;width:400px;position:relative;"><input type="text" style="height:35px;width:370px;padding-right:30px;"/><span style="...
前面我们每天都在浏览着网络上丰富多彩的页面，那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢？我们想要自己设计一个页面又该如何来做呢？对于刚刚接触网页设计的小伙伴来说，看到网页背后的一堆符号和代码，是不是会感到有些凌乱。“看这里、看这里”，其实HTML并不复杂，严格意义上它并不是编程，它只是一些标记，也可以说是和浏览器的一些“约定”，就是告诉浏览器，要显示什么内容，这些内容是什么样式。好了，不废...
前端基础1. CSS 81.1. CSS叫做层叠样式表，用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。 81.2. CSS负责结构、表现、行为中的表现 81.3. 编写的位置 81.3.1. 1.内联样式 81.3.2. 2.内部样式表 81.3.3. 3.外部样式表 81.4. 基本语法 91.4.1. 选择器 91.4.2. 声明块 111.5. 元素之间的关系 121.5.1. 父元素 121.5.2. 子元素 121.5.3. 祖先元素 121.5.4. 后代元素 121.5.5. 兄弟元素 121.6. 块元素和内联元素 121.6....
最近业务需要，想设计一个比较通用的图文混排的列表。结果设计的过程中遇到了不少问题，虽然都是一些css设计中比较基础的问题，但是自己认为有必要总结下，希望可以帮到一些css设计的初学者，同时也想扩大下自己博客的知识量o(^_^)o。 1.最终设计的结果 HTML（部分，后面的li还有被省略了，当然外面的div也是应该关闭的，大家注意。）代码 复制代码代码如下:<div id="jingdian" class="span24 gmodule g-box"> <div class="g-box-...
一、样式分类1、外部样式表<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>2、内部样式表<head><style type="text/css"> body {background-color: red} p {margin-left: 20px}</style></head>3、内联样式<p style="color: red; margin-left: 20px"> This is a paragraph </p>二、样式优先级 当同一个 HTML 元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字...
第一章 CSS 的基本认识 关于 CSS 的概论 CSS 是【Cascading Style Sheets】的简称, 中文翻为【串接样式表】, 也有人只翻为【样式表】。CSS 用以作为网页的排版与风格设计,在所谓的【新式网页】里, CSS不容置疑是相当重要的一环。CSS 是以既有的基础，用以弥补既存 HTML 规格里的不足, 也让网页的设计更为灵活。 这份教学文见就要来为您介绍 CSS 的应用！ 在这边并不介绍 CSS 的所有规格，仅就您在网页写作上较常用到...
CSS 背景属性属性描述background简写属性，作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。CSS 文本属性属性描述color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符...
第四章 文本1、<p></p>2、<small></small>表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。3、<strong></strong>表示内容的重要性，以粗体显示，一个strong可以嵌套在另一个strong中；<em></em>表示内容的着重点，以斜体显示，一个em可以嵌套在另一个em中。<b></b>用于如文档摘要里的关键词、评论里的产品名、基于文本的交互式软件中指示操作的文字、文章导语等；<i></i>用于如分类名称、技术术语、外语里...
摘要CSS（层叠样式表）的三种设置方法基本选择器组合选择器属性选择器分组与嵌套伪类选择器伪元素选择器选择器的优先级一些样式的设置（字体、文本、背景、边框）display属性设置01.CSS（层叠样式表）的三种设置方法 CSS又名层叠样式表，它的作用就是给HTML网页进一步装饰，前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构，后面学习的表form表单展现的形式是很low的，需要进一步对齐修饰设置，让它变得更高大上起...
1.CSS常用属性??应用示例如下：<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css常用属性-背景</title><style type="text/css">#bg_CSS01{border: 2px #00ff00 solid;background: #ff00ff;width: 200px;height: 200px;}#bg_CSS02{border: 2px #00ff00 solid;background-color: #000000;width: 200px;height: 200px;}<!-- -->#bg_CSS03{border: 2px #00ff00 solid;bac...
上一篇简单的过了一遍HTML的常用标签，这一篇继续CSS。例1 CSS的标签选择器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="common.css" />--> <style> /*标签选择器，找到所有的标签应用以下样式*/ div{ color: green; } /*id选择器，找到标签id等于i1的标签，应用以下样式*/ #i1{ ...