CSS 伪元素
CSS 伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样……继续阅读 »
2年前 (2022-06-30) 221浏览 0评论
0个赞
CSS 属性 选择器
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色：
实例
[title]
{
color:blue;
}
属性和值选择器
下面的实例改变了标题title=’runoo……继续阅读 »
2年前 (2022-06-29) 279浏览 0评论
0个赞
CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
更多实例
设置元素的高度
这个例子演示了如何设置不同元素的高度。
使用百分比设置图像的高度
这个例子演示了如何使用百分比值设置元素的高度。
使用像素值来设置元素的宽度
本例演示如何使用像素值来设置元素的宽度。
设置元素的最大高度
此示例演示如何设置元素的最大高度。
使用百分比……继续阅读 »
2年前 (2022-06-22) 172浏览 0评论
0个赞
CSS padding（填充）
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
可能的值
值
说明
length
定义一个固定的填充(像素, pt, em,等)
%
使用百分……继续阅读 »
2年前 (2022-06-19) 274浏览 0评论
0个赞
CSS 图片廊
.responsive .img {
border: 1px solid #ccc;
}
.responsive .img:hover {
border: 1px solid #777;
}
.responsive .img img {
width: 100%;
height: auto;
}
.responsive .desc {
padding: 15px……继续阅读 »
2年前 (2022-06-18) 131浏览 0评论
0个赞
.imgbox
{
float:left;
text-align:center;
width:120px;
height:135px;
border:1px solid gray;
margin:4px;
padding:0px;
}
.thumbnail
{
width:110px;
height:90px;
margin:3px;
}
.box
{
width:110px;
padding:0px;
}
func……继续阅读 »
2年前 (2022-06-17) 157浏览 0评论
0个赞
CSS 网页布局
网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
CSS3 实例
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
菜单导航区域
菜单导航条包含了一……继续阅读 »
2年前 (2022-06-17) 92浏览 0评论
0个赞
CSS 实例
CSS背景
设置页面的背景颜色
设置不同元素的背景颜色
设置一个图像作为页面的背景
错误的背景图片
如何在水平方向重复背景图像
如何定位背景图像
一个固定的背景图片（这个图片不会随页面的其余部分滚动）
声明背景属性
高级的背景例子
背景属性的解释
CSS文本
设置不同元素的文本颜色
文本对齐
移除链接下划线
装饰文字
控制文本中的字母
缩进文本
指定了字符之间的空间
指定了行与行之间的空间
设置元素的文……继续阅读 »
2年前 (2022-06-14) 186浏览 0评论
0个赞
CSS 盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margi……继续阅读 »
2年前 (2022-06-14) 229浏览 0评论
0个赞
CSS 简介
你需要具备的知识
在继续学习之前，你需要对下面的知识有基本的了解：
HTML / XHTML
如果你希望首先学习这些项目，请在 首页 访问相关教程。
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效……继续阅读 »
2年前 (2022-06-12) 87浏览 0评论
0个赞
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
实例
a:link……继续阅读 »
2年前 (2022-06-12) 141浏览 0评论
0个赞
CSS 布局 – 水平 & 垂直对齐
水平 & 垂直居中对齐
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
div 元素是居中的
实例
.center {
margin: auto;
width: 50%;
……继续阅读 »
2年前 (2022-06-11) 218浏览 0评论
0个赞
CSS 布局 – Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 80%;
height: 100px;
overflow: scroll;
border: 1px……继续阅读 »
2年前 (2022-06-11) 94浏览 0评论
0个赞
你已经学习了CSS,下一步学习什么呢?
CSS 总结
本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。
你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。
同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。
如果需要更多关于 CSS 的信息，请参阅我们的
CSS……继续阅读 »
2年前 (2022-06-07) 277浏览 0评论
0个赞
CSS Id 和 Class
id 和 class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “class”选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应……继续阅读 »
2年前 (2022-06-06) 672浏览 0评论
0个赞
CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。
serif和sans-serif字体之间的区别
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读
CSS字型
在CSS中，有两种类型的字体系列名称：
通用字体系列 – 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系……继续阅读 »
3年前 (2022-06-05) 249浏览 0评论
0个赞
CSS 媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
媒体类型
一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合……继续阅读 »
3年前 (2022-06-03) 290浏览 0评论
0个赞
#klem1,#klem2
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#klem1:hover,#klem2:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
div.background
{
width: 500……继续阅读 »
3年前 (2022-05-30) 274浏览 0评论
0个赞
CSS 表格
使用 CSS 可以使 HTML 表格更美观。
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Berglunds snabbköp
Christina Berglund
Sweden
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Ha……继续阅读 »
3年前 (2022-05-29) 299浏览 0评论
0个赞
CSS 组合选择符
CSS 组合选择符
组合选择符说明了两个选择器之间的关系。
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器
后代选择器用于选取某……继续阅读 »
3年前 (2022-05-28) 272浏览 0评论
0个赞
CSS 语法
实例
查看 实例 1
查看 实例 2
CSS 实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS 实例
CSS声明总是以分号 ; 结束，声明总以大括号 {} ……继续阅读 »
3年前 (2022-05-27) 302浏览 0评论
0个赞
CSS 链接
不同的链接可以有不同的样式。
链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link – 正常，未访问过的链接
a:visited – 用户已访问过的链接
a:hover – 当用户鼠标放在链接上时
a:active – 链接被点击的那一刻
……继续阅读 »
3年前 (2022-05-27) 171浏览 0评论
0个赞
CSS 教程
通过使用 CSS 我们可以大大提升网页开发的工作效率！
在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
各章节实例
本 CSS 教程包含了数百个CSS在线实例
通过本站的在线编辑器，你可以在线编辑CSS,并且可以在线查看修改后的效果。
CSS 实例
body {
background-color:#d0e4fe;
}
h1 {
color:ora……继续阅读 »
3年前 (2022-05-27) 243浏览 0评论
0个赞
CSS 导航栏
ul.horizontal {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.horizontal li {
float: left;
padding: 0;
margin: 0;
backgrou……继续阅读 »
3年前 (2022-05-26) 92浏览 0评论
0个赞
CSS 提示工具(Tooltip)
本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。
提示工具在鼠标移动到指定元素后触发，先看以下四个实例：
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #ccc;
zcursor: help;
color: #……继续阅读 »
3年前 (2022-05-15) 174浏览 0评论
0个赞
CSS Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流……继续阅读 »
3年前 (2022-05-15) 238浏览 0评论
0个赞
function removeElement(numId)
{
document.getElementById(numId).style.display=”none”;
}
.imgbox
{
float:left;
text-align:center;
width:120px;
height:120px;
border:1px solid gray;
margin:4px;
margin-b……继续阅读 »
3年前 (2022-05-15) 218浏览 0评论
0个赞
CSS 分组 和 嵌套 选择器
分组选择器
在样式表中有很多具有相同样式的元素。
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：
实例
h1,h2,p
{
color:green;
}
嵌套选择器
……继续阅读 »
3年前 (2022-05-15) 208浏览 0评论
0个赞
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
轮廓（outline）实例
在元素周围画线
本例演示使用outline属性在元素周围画一条线。
设置轮廓的样式
本例演示如何设置轮廓的样式。
设置轮廓的颜色
本例演示如何设置轮廓的颜色。
设置轮廓的宽度
本例演示如何设置轮……继续阅读 »
3年前 (2022-05-15) 279浏览 0评论
0个赞
CSS margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。
margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
可能的值
值
说明
auto
设置浏览器边距。这样做的结果会依赖于浏览器
length
定义一个固定的margin（使用像素，p……继续阅读 »
3年前 (2022-05-15) 124浏览 0评论
0个赞
