【整理】CSS知识点

来源：互联网发布：小c语言程序编辑：程序博客网时间：2024/06/01 12:53

1、=========================================css注释
/*这是个注释*/

2、=========================================选择器
id 选择器 #para1{}
class 选择器 .center{}
p.center class为center的所有p元素

3、=========================================CSS创建
外部样式表 <link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
内联样式 <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

4、==========================================背景
背景颜色 body {background-color:#b0c4de;}
背景图像 body {background-image:url('paper.gif');}
平铺默认情况下 background-image 属性会在页面的水平和垂直方向平铺。
background-repeat:repeat-x;background-repeat:no-repeat;
不平铺定位 background-repeat:no-repeat;background-position:right top;
简写 body {background:#ffffff url('img_tree.png') no-repeat right top;}
设置固定的背景图像不随滚动条滚动
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;

5、==========================================CSS Text文本格式
颜色 body {color:blue;}
对齐方式
h1 {text-align:center;} 居中
p.date {text-align:right;} 居右
p.main {text-align:justify;} 适应窗口
文本修饰 a {text-decoration:none;} 删除下划线
h1 {text-decoration:overline;} 文字上边缘线
h2 {text-decoration:line-through;} 删除线
h3 {text-decoration:underline;} 下划线
文本大小写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进 p {text-indent:50px;}
指定字符之间的空间
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
行距
p.small {line-height:70%;}
p.big {line-height:200%;}
单词之间间隔 p{ word-spacing:30px;}
禁用文字环绕 p{ white-space:nowrap;} 过长就会出现水平滚动条还不是换行
文本阴影 h1 {text-shadow:2px 2px #FF0000;}

所有CSS文本属性。
属性描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

6、==================================================CSS 字体
常用字体组合 http://www.runoob.com/cssref/css-websafe-fonts.html

字体样式
p.normal {font-style:normal;} 常规
p.italic {font-style:italic;} 斜体
p.oblique {font-style:oblique;}
字体大小 h1 {font-size:40px;}
用em来设置字体大小浏览器中默认的文字大小是16px 1em的默认大小是16px
加粗文本
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
一个声明所有字体属性 p.ex2{font:italic bold 12px/30px Georgia,serif;}

所有CSS字体属性
Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

7、=====================================================CSS 链接
链接样式注意：顺序不能变
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
链接的背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

高级 - 创建链接框
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
8、======================================================CSS 列表
不同的列表项标记
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

作为列表项标记的图像 ul {list-style-image:url('sqpurple.gif');}

所有不同的列表项标记 http://www.runoob.com/try/try.php?filename=trycss_list-style-type_all

9、=======================================================CSS 表格
表格边框 border: 1px solid black;
折叠边框 border-collapse:collapse;

表格文字对齐
td
{
height:50px;
vertical-align:center;
text-align:center;
}
表格颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
一个个性表格http://www.runoob.com/try/try.php?filename=trycss_table_fancy

10、=========================================================CSS 盒子模型
关系图 http://www.runoob.com/css/css-boxmodel.html

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

11、==========================================================CSS 边框
CSS 边框属性
属性描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

12、===========================================================CSS Outlines 轮廓
http://www.runoob.com/css/css-outline.html

13、===========================================================CSS Margin(外边距)
14、===========================================================CSS Padding（填充）
15、===========================================================CSS 分组和嵌套选择器
16、===========================================================CSS 尺寸 (Dimension)
所有CSS 尺寸 (Dimension)属性
属性描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

17、=====================================================CSS Display(显示) 与 Visibility（可见性）
visibility:hidden; 消失但依然占用空间，不影响原来的布局
display:none; 消失不占用空间，影响原来布局

18、=====================================================CSS Positioning(定位)
Positioning(定位)
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法.
有四种不同的定位方法。

Static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

Relative 定位
相对定位元素的定位是相对其正常位置。

Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序

所有的CSS定位属性 http://www.runoob.com/css/css-positioning.html

19、============================================================CSS Float(浮动)
20、============================================================下拉菜单注意 hover
<style>
/* 下拉按钮样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>

<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜鸟教程 1</a>
<a href="#">菜鸟教程 2</a>
<a href="#">菜鸟教程 3</a>
</div>
</div>
21、=================================================================CSS 图像拼合技术
background:url(img_navsprites.gif) -47 0;

22、=================================================================CSS 属性选择器
<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="w3cschool" href="http://w3cschool.cc">w3cschool</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>

属性和值选择器
<!DOCTYPE html>
<html>
<head>
<style>
[title=w3cschool]
{
border:5px solid green;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<img title="w3cschool" src="logo.png" width="270" height="50" />
<br>
<a title="w3cschool" href="http://w3cschool.cc">w3cschool</a>
<hr>
<h2>Will not apply to:</h2>
<p title="greeting">Hi!</p>
<a class="w3cschool" href="http://w3cschool.cc">w3cschool</a>
</body>
</html>

属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
<!DOCTYPE html>
<html>
<head>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>Will not apply to:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>Will not apply to:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>
</html>

表单样式
属性选择器样式无需使用class或id的形式:
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="demo-form.php" method="get">
Firstname:<input type="text" name="fname" value="Peter" size="20">
Lastnam
属性选择器样式无需使用class或id的形式:

0 0