【整理】CSS知识点

原创 2016年05月31日 13:01:24
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的形式:
版权声明:本文为博主原创文章,未经博主允许不得转载。

百度前端学院遇到的CSS小知识点整理

1.Logo优化:在div中加h1再加a标签,加h1的目的是提高访问权重,为了不让字显示出来,在css中添加text-indent:-20000em;,可使用精灵图添加background。 2....

【整理】CSS3知识点4-分页

分页样式 http://www.runoob.com/css3/css3-pagination.html 1、========================================...
  • for_cxc
  • for_cxc
  • 2016年05月31日 13:04
  • 365

CSS属性+盒模型知识点整理

感觉好像markdown编辑器在移动端显示貌似有点问题, 很多列表编号都没有了, 好奇怪. 由于刚刚开始学习写博客, 可能很多地方都存在不足, 希望看到的朋友可以给些建议 , 谢谢接下来继续接着上一篇...
  • c_kite
  • c_kite
  • 2016年09月22日 11:51
  • 256

【整理】CSS3知识点1

========================================================================简介 CSS3 简介 对CSS3已完全向后兼容,所以...
  • for_cxc
  • for_cxc
  • 2016年05月31日 13:02
  • 247

css3主要知识点你整理

圆角设置 border-radius:左上角 右上角 右下角  左下角 阴影设置 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];...

飞雀教育CSS3知识点:文本属性

  • 2016年08月15日 17:50
  • 11KB
  • 下载

css知识点1

  • 2017年02月22日 12:06
  • 22KB
  • 下载

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器  在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概...

CSS3知识点归纳

  • 2017年07月26日 10:21
  • 49KB
  • 下载

XHTML相关知识点总结(标签 css)

  • 2014年04月23日 17:04
  • 9KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【整理】CSS知识点
举报原因:
原因补充:

(最多只允许输入30个字)